Галерея+

Галерея+ для Shop-Script 7

Фотогалерея + YouTube видео на странице товара

Содержание: Инструкция по использованию
Откройте приложение "Магазин" -> "Плагины" -> "Галерея+".

Вариант №1: Автоматический вывод с помощью хука:
Включите плагин установив галочку "Включить".
После включения, плагин автоматически выводит галерею на странице товара с помощью хука "frontend_product".
Если в текущей теме дизайна уже существует фотогалерея, ее необходимо удалить из шаблона.

Вариант №2: Вывод с помощью вставки кода в шаблоне:
Включите плагин установив галочку "Включить".
Отключите опцию "Использовать хук (frontend_product)".
Если в текущей теме дизайна уже существует фотогалерея, ее необходимо удалить из шаблона.
Пример: product.html.zip (файл темы Дефолт 3.0)

Как добавлять видео?
Откройте видео на YouTube которое хотите поместить в Галерею+.
Кликните правой кнопкой мыши на видео и выберите пункт "Получить URL видео".
Вы получите ссылку вида: https://youtu.be/XXXXXXXXXXX, где XXXXXXXXXXX уникальный идентификатор видео.
Скопируйте данный идентификатор, откройте приложение "Магазин" -> "Товары" -> выберите необходимый товар -> "Редактировать" -> "Изображения" -> вставьте скопированный идентификатор в поле "YouTube видео".
В этом поле, можно указывать несколько идентификаторов, разделяя их запятой.
Например:
XXXXXXXXXXX,XXXXXXXXXXX,XXXXXXXXXXX,XXXXXXXXXXX,XXXXXXXXXXX,...

Как на странице товара вывести миниатюры с открытием изображений на полный экран?
Пример:

<!-- thumbs -->
{if count($product.images) > 1}
<div class="more-images">
{foreach from=$product.images item=image name=phthumbs}
<div class="image">
<a href="#" onclick="$.GalleryPlus.fotoramaAPI.requestFullScreen(); $.GalleryPlus.fotoramaAPI.show({$smarty.foreach.phthumbs.index});">
{$wa->shop->imgHtml($image, '96x96')}
</a>
</div>
{/foreach}
</div>
{/if}

Как поместить плагин на отдельную страницу и сделать галерею из изображений товаров?
На данный момент, есть экспериментальный скрипт, который позволяет это делать.
В будущем, планируется добавление хелпера, для упрощения интеграции.
Скачайте скрипт.
Откройте приложение Магазин - Витрина - Страницы - Создайте новую страницу - Переключите редактор в режим HTML.
Вставьте код скрипта.
Измените идентификаторы товаров в переменной {$gp_product_ids = [1,3,5]} на существующие в вашем каталоге товаров.
Идентификаторы товаров, можно узнать в бекенде, на странице товара.


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

Как инициализировать скрипт плагина вручную?
Если по каким-то причинам автоматическая инициализация не устраивает (например библиотека JQuery подключается в футтере сайта :) или по другим соображениям), Вы можете инициализировать скрипт плагина вручную.
В настройках плагина, снимите галочку "Автоматическая инициализация", в текущей теме дизайна используйте скрипт.
Пример скрипта:

<script type="text/javascript">
$(function () {
//Gallery+ manual init
$.GalleryPlus.setSettings();
$.GalleryPlus.manualInit();
});
</script>

Пример с переназначением настроек:
<script type="text/javascript">
$(function () {
//Gallery+ manual init
$.GalleryPlus.setSettings({autoplay:true},{auto:true},{tint:true}); //Тут можно переназначить стандартные настройки, подробнее см. в galleryplus.dev.js
$.GalleryPlus.manualInit(); //Ручная инициализация
});
</script>

Как поместить плагин на отдельную страницу и сделать видео галерею?
Вы можете использовать скрипт.
Поместите код скрипта на нужной странице в качестве HTML+Smarty и укажите идентификаторы видео в переменной $video_ids.

Как вывести видео отдельно от фотогалерии на странице товара?
По умолчанию, видео отображается в галерее вместе с фото.
Вы можете отключить отображение видео в галерее и вывести его отдельно в шаблоне с помощью кода.
Откройте настройки плагина, для опции "Положение видеоминиатюр" установите значение "Скрыть".
В файл product.html добавьте код:

{shopGalleryplusPlugin::getVideosById($product.galleryplus_videos,800,600)} - с указанием размера видео.
{shopGalleryplusPlugin::getVideosById($product.galleryplus_videos,640,360,false)} - без добавления переноса строки для каждого видео.

Как заменить иконку полноэкранного режима?
Вы можете переназначить CSS правила в текущей теме дизайна.
Пример CSS:


/* Fullscreen-icon */
.galleryplus-product-image .fotorama__fullscreen-icon {
display: block !important;
background: rgba(0, 0, 0, 0) url("http://icons.iconarchive.com/icons/gakuseisean/ivista-2/32/Misc-Zoom-In-icon.png") no-repeat scroll 0 0 !important;
height: 32px !important;
opacity: 1 !important;
width: 32px !important;
}

.fullscreen .galleryplus-product-image.fotorama--fullscreen .fotorama__fullscreen-icon {
background: rgba(0, 0, 0, 0) url("http://icons.iconarchive.com/icons/awicons/vista-artistic/32/delete-icon.png") no-repeat scroll 0 0 !important;
height: 32px !important;
opacity: 1 !important;
width: 32px !important;
}

Как добавить микроразметку для фото товара?
Как временное решение, можно добавить скрытое изображение с микроразметкой в текущей теме дизайна (файл product.html).
В версии плагина >=0.2.2 данное решение не понадобится.
Скопируйте код (отмечен зеленым цветом) и вставьте его в шаблон как на примере ниже.
Пример:

...
<article itemscope itemtype="http://schema.org/Product">
...
<!-- Код -->
{* schema.org *}
{$wa->shop->productImgHtml($product, '750', [ 'itemprop' => 'image', 'alt' => $product.name|escape, 'style'=>'display:none'])}
<!-- Код -->
...
</article>
...

Вверх