Телеграм: @bazarow_ru Почта: mihail@bazarow.ru

Fancybox в стандартном шаблоне детальной карточки товара, вместо всплывающего окна и лупы.

Просмотров: 139

Задача: заменить работу с изображениями в стандартном или кастомном шаблоне детальной карточки (catalog.element) с "всплывающего окна" и "лупы" на работу с fancybox. При этом необходимо обеспечить работу с торговыми предложениями, заменяя коллекцию картинок.

Fancybox в стандартном шаблоне детальной карточки товара

Подключаем fancybox к сайту

Скачиваем библиотеку fancybox и распаковываем ее в директорию шаблона сайта. Так как fancybox может пригодиться не только на странице детальной карточки, но и в других местах сайта, мы подключим его глобально в файле header.php.

Скачать fancybox
use Bitrix\Main\Page\Asset;
CJSCore::Init(array("jquery3"));
Asset::getInstance()->addCss(SITE_TEMPLATE_PATH . '/fancybox/jquery.fancybox.css');
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . '/fancybox/jquery.fancybox.js');

Обратите внимание, что для работы fancybox нужна подключенная библиотека jQuery. Я подключил третью версию из ядра 1С-Битрикс, используя функцию CJSCore::Init(), передав в качестве параметра массив со значением "jquery3". Эта функция инициализирует и подключает необходимые ядру библиотеки.

Подменяем битриксовые библиотеки, работы с картинками, на fancybox

Для начала заходим в настройки компонента каталога и в настройках детального отображения карточки отключаем режим показа детальной картинки, чтобы в параметре не было ничего указано..

в настройках детального отображения карточки отключаем

Открываем на редактирование файл скрипта детальной карточки товара:
/ВАШ_ШАБЛОН_САЙТА/components/bitrix/catalog.element/ШАБЛОН_ДЕТАЛЬНОЙ/script.js
Находим в нем участок кода, который формирует вывод верстки картинок (примерно на 2710-ой строке).

this.node.imageContainer.appendChild(
    BX.create('DIV', {
        attrs: {
            'data-entity': 'image',
            'data-id': images[i].ID
        },
        props: {
            className: 'product-item-detail-slider-image' + (i == 0 ? ' active' : '')
        },
        children: [img]
    })
);

Заменяем этот участок на код, который сформирует верстку картинок товара с необходимыми атрибутами fancybox.

this.node.imageContainer.appendChild(
    BX.create('A', {
        attrs: {
            'data-entity': 'image',
            'data-fancybox':'images',
            'href': images[i].SRC,
            'data-id': images[i].ID
        },
        props: {
            className: 'product-item-detail-slider-image' + (i == 0 ? ' active' : '')
        },
        children: [img]
    })
);

На этом все, вот так просто можно заменить битриксовые библиотеки работы с картинками на нормальный и управляемый fancybox.


Михаил Базаров 12.03.2023
Настройка для fancybox что бы не показывались лишние кнопки и сразу показывались превью картинок
Код
$().fancybox({
  selector: '[data-fancybox="images"]',
  thumbs: {
    // Показывать превью
    autoStart: true,
  },
  keyboard: true,
  buttons: [
    // Показывать кнопку закрытия модалки
    "close"
  ],
  // Эффект анимации при перелючении
  transitionEffect: "zoom-in-out",
  // Зацикливать превью
  loop: true,
});

Записная книжка разработчика

Примерно с 2013-го года пишу заметки по разработке сайтов на Битрикс.
Вы можете задавать уточняющие вопросы в комментариях- отвечаю или дополняю заметки по возможности.

Старые шаблоны битрикс для простой верстки Просмотров: 18242 Новые версии типового интернет-магазина, который идет в комплекте с Битрикс (от 12 версии ... Добавление в избранное или отложенные, на AJAX из карточки товара Просмотров: 29314 В этой заметке рассакажу как добавлять товары в "Отложенные", для иммитации функционала "И... Свойство: привязка к Яндекс:Картам - вывести из нескольких элементов ... Просмотров: 18720 Предположим, что у вас есть инфоблок со свойством "Привязка к яндекс картам". В этом инфоб... Как работает система сертификации партнеров 1С-Битрикс, уровни партне... Просмотров: 4498 Сертификация от «1С-Битрикс» – это объективная оценка знаний и практических навыков разраб... Добавить свойство в административную форму заказа Просмотров: 3941 Задача, кастомизировать административную форму заказа: добавить свойство заказа в шапку фо... Регистрация пользователя в определенную группу сайта на Битрикс Просмотров: 23689 Достаточно часто требуется регистрировать пользователя в определенную группу, в зависимост... Вывести свойство отдельно ото всех или исключить из всех Просмотров: 7710 Иногда, на сайте, под управлением 1С-Битрикс, нужно вывести какое-то конкретное свойство о... Добавить все свойства инфоблока в умный фильтр одним разом Просмотров: 11409 Если у вас достаточно много свойств, в инфоблоке с товарами, например: больше 1000-чи, пос... Связанные элементы в карточке товара, с помощью catalog.section Просмотров: 15862 Достаточно часто, при разработке магазинов на битрикс, требуется выводить связанные элемен... Менять большую картинку, при клике на маленькую, в детальной карточке Просмотров: 2156 Мини скриптик, может кому пригодится для каталога товаров или новостей при использовании д... Отфильтровать товары бренда и вывести по разделам каталога Просмотров: 1712 Задача: на странице бренда, который выводится компонентом новостей, нужно показать все тов... Многосайтовость битрикс на разных доменах и поддоменах Просмотров: 63298 Часто спрашивают "как настроить многосайтовость Битрикс на разных доменах", решил записать... Самодельная форма добавления элемента на API Битрикс Просмотров: 45456 Компонент iblock.element.add.form написан таким образом, что вы не сможете (не попотев изр... Вывести дату окончания скидки в карточке товара Просмотров: 4558 Если нужно вывести информацию о скидке в карточке товара, можно воспользоваться методом Показать пользователю накопительную скидку за все сделанные заказы, и... Просмотров: 2656 Задача: показать, текущему авторизованному, пользователю сумму всех выполненных заказов и ... Вывод элементов с помощью API битрикс Просмотров: 24042 Иногда, выводить элементы инфоблока с помощью компонентов, может оказаться избыточным. Нап... Открытие мобильного приложения Apache Cordova по ссылке Просмотров: 1205 Достаточно часто нужно реализовывать открытие мобильного приложения по ссылке. Например: п... Настройка выгрузки товаров в Яндекс Маркет с сайта Битрикс Просмотров: 38037 Настройка выгрузки в Яндекс маркет в формате yml, выполняется достаточно просто, кроме одн... Ссылки для добавления и удаления товара из сравнения в Битрикс Просмотров: 8741 Просто оставляю это здесь, вставка ссылок на добавление и удаление товара из сравнения, ес... Данные о заказе текущего пользователя Просмотров: 13975 Иногда нужно получить данные о заказе текущего пользователя. Не через компонент, а непосре...