Необходимо вывести в детальную карточку товара наряду со слайдером фото товара 3D-имитацию витрины товара. А именно просмотр товара в 3D-формате. Предоставляются заранее подготовленные фото товара со всех ракурсов в кол-ве 8шт. Нужно разработать функционал вывода попап-окна с фото товара и горизонтальным скроллом. При движении скролла фото меняются и происходит 3D-имитация просмотра товара.

В новое свойство загружаем фото товара. Обратите внимание – фото должны быть загружены строго в последовательном порядке. Иначе функционал 3D-имитации не получится.

В шаблоне компонента catalog.element создаем блок попап-окна и кнопку открытия попап-окна. В нашем случае кнопка показа попап-окна располагаем в блоке детального фото товара под стикером.

Верстка кнопки выглядит так:

Кнопку оборачиваем в условие наличия фото товара в новом свойстве. Кнопке присваиваем ссылку на якорь вида #photo360

Перед версткой блока попап-окна пишем условие, где создаем переменную массива $photo360url Далее прогоняем массив свойства загруженных фото и присваиваем ранее созданному массиву $photo360url значения путей к фото. Переменной $photo360count назначаем значения кол-ва загруженных фото.

Верстка блока с попап-окном выглядит так:

В попап-окне блок со списком ‘ul’ со значением ‘id=”picsSlider”’. В списке цикл на значение переменной ‘$photo360count’, или на кол-во загруженных фото. Внутри цикла генерация элементом списка ‘li’, внутри которых сам вывод изображений загруженных фото. После блока со списком скролл ‘input type=”range”’. На скролл подвязано событие с функцией ‘oninput=”sliderPic()”’ .

Пишем функцию работы скролла фото:

PHP

Объявляем переменную ‘picWidth’. Значение переменной «400» для десктопных экранов и «300» для мобильных. Переменной ‘slider’ присваиваем список с ‘id=”picsSlider”’. Через CSS-свойства задаем списку ширину, равную умножению значения переменной ‘picWidth’на значение ‘$photo360count’, или на кол-во загруженных фото. Создается функция ‘sliderPic()’ , в которой в переменную ‘range’передается текущее значение скролла ‘input type=”range”’, а списку ‘slider’ задается положение ‘left’ равное отрицательному значению ‘picWidth’, умноженному на ‘range’-1. Таким образом у нас есть контейнер с шириной «400рх» (для мобильных 300рх), в котором располагается список с фото по порядку, ширина которого равна 400рх*кол-фо фото (300рх*кол-фо фото для мобильных). И в зависимости от значения скролла будет показано нужное фото.