Подключаем Fotorama к 1С Битрикс

Наверное все слышали про замечательный jQuery плагин Fotorama. Сегодня мы рассмотрим как подключить Fotorama к интернет магазину под управлением CMS 1C Битрикс.

Автор . Дата: 24.11.2014

Наверное все слышали про замечательный jQuery плагин Fotorama. Те, кто не слышал, могут почитать о нем в этой статье. Сегодня мы рассмотрим как подключить Fotorama к интернет магазину под управлением CMS 1C Битрикс. Можно использовать готовые решение из Market Place, но в большинстве своем они настолько универсальны, что с скрипом подходят под наши специфические задачи.

Для начала нам нужно сделать копию шаблона компонента catalog. Ну или можете не делать её и редактировать шаблон прямо в компоненте, но это малость нарушает bitrix-way. Если вы используете комплексный компонент catalog, то нужно будет редактировать шаблон по адресу %template_path%/components/bitrix/catalog/.default/bitrix/catalog.element/.default где %template_path% это путь до шаблона вашего сайта или папки bitrix в корне вашего сайта (если вы решили не копировать шаблон а редактировать прямо в компоненте). Если вы планируете использовать только компонент catalog.element, то путь будет следующим: %template_path%/components/bitrix/catalog.element/.default.

Теперь вам нужно скачать и подключить плагин Fotorama. Инструкцию по подключению плагина вы можете посмотреть по ссылке выше. После чего откройте файл script.js лежащий в папке .default и найдите функцию window.JCCatalogElement.prototype.showMainPictPopup. Эта функция отвечает за открытие модального окна, в котором отображается изображение товара. Заменим её содержимое на:

window.JCCatalogElement.prototype.showMainPictPopup = function(e)
{
    var pictContent = '<div class="fotorama" data-allowfullscreen="true">';
    var selectedImage = -1;
    var slider = {}

    if (this.offers.length > 0)
    {
        slider = this.offers[this.offerNum].SLIDER;
    }
    else
    {
        slider = this.product.sliderPict;
    }

    for (j = 0; j < slider.length; j++)
    {
        if (slider[j].SRC == this.currentImg.src)
            selectedImage = j;
    }

    for (j = selectedImage; j < slider.length; j++)
    {
        pictContent += '<img src="'+
                        slider[j].SRC+
                        '" name="">';
    }

    for (j = 0; j < selectedImage; j++)
    {
        pictContent += '<img src="'+
                        slider[j].SRC+
                        '" name="">';
    }

    pictContent += "</div>";

    this.obPopupPict.setContent(pictContent);
    this.obPopupPict.show();

    jQuery('.fotorama').fotorama({
    });

    return BX.PreventDefault(e);
};

Здесь мы создаем новый блок класса fotorama и передаем и добавляем в него изображения товара. Поскольку в Fotorama нельзя задать, с какого изображения начать показ (ну или я это не нашел на тот момент), то я сортирую показ картинок так, что при клике первой картинкой будет та, которая открыта в стандартном маленьком слайдере битрикса. Так же идет учет того, какой тип товара, простой или с торговыми предложениями, и в зависимости от этого отображаются нужные изображения. После инициализируем плагин fotorama и отображаем наше всплывающее окно.

В результате мы получим примерно следующее:

Приятного использования.