Skip to content

Галерея изображений товара. ui-product-gallery

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

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

<ui-product-gallery
    instance-name="main"
    image-ratio="1:1"
    preloader-url="{{ product.first_image.large_url }}"
    :thumb-slider-options="{ slidesPerView: 5, breakpoints: { 480: { slidesPerView: 3 }, md: { slidesPerView: 5 }}, spaceBetween: 5 }"
    icon-prev="slider.prev"
    icon-next="slider.next"
>
</ui-product-gallery>

Как правило галерея продуктов используется в компоненте ui-product, и чтобы связать их, нужно указать им одинаковый instance-name.

Параметры компонента

  • instance-name - имя инстанса компонента продукта для связывания
  • image-ratio - соотношение сторон для картинки галереи. По-умолчанию 1:1.
  • thumb-slider-options - Обьект с опциями показа кол-ва слайдов для разных разрешений экрана.
  • preloader-url - "src" для прелоадера загрузки картинок товара.
  • icon-prev - Иконка из набора fontAwesome для кнопки прокрутки галереи назад. Берется из названия иконки в файле темы icons.js
  • icon-next - Иконка из набора fontAwesome для кнопки прокрутки галереи вперед. Берется из названия иконки в файле темы icons.js.

Темизация

layouts - Расположение галереи товаров.

  • default - мини-галерея картинок товара располагается под основной картинкой галереи
  • thumb-bottom - мини-галерея картинок товара располагается под основной картинкой галереи, лейблы располагаются над основной картинкой товара. Выравнивание элементов сверху.
  • thumb-left - мини-галерея располагается слева от основной картинки.
  • thumb-right - мини-галерея располагается справа от основной картинки.
  • thumb-top - мини-галерея располагается сверху от основной картинки.

theme - Темы галереи картинок товара

  • active-border - границы активной картинки в мини-галерее товаров выделена границей.
  • active-border-bottom - нижняя граница активной картинки в мини-галерее товаров выделена границей.