Instrukcja do wtyczki "Galeria+"

Spis treści:

• Jak zintegrować wtyczkę?
• Jak dodać film?
• Po zainstalowaniu wtyczki filmy nie są wyświetlane
• Jak umieścić wtyczkę na osobnej stronie i zrobić galerię zdjęć lub wideo?
• W jaki sposób filmy mogą być wyświetlane oddzielnie od galerii zdjęć na stronie produktu?
• Jak zastąpić ikonę pełnego ekranu?
• Używanie wtyczki w innych aplikacjach
• Korzystanie z wtyczki w aplikacji "Zdjęcia"
• Jak skonfigurować mobilną wersję wtyczki?
• Lista wszystkich opcji wtyczki "Gallery+"
• Jak ukryć przyciski nawigacyjne w wersji mobilnej?
• Przykład dostępu do funkcji, poprzez JavaScript.

Jak zintegrować wtyczkę?

Otwórz aplikację "Sklep" -> "Wtyczki" -> "Galeria+".

Opcja nr.1: Automatyczne wyjście za pomocą haka:
Włącz wtyczkę ustawiając pole wyboru "Włącz".
Po włączeniu wtyczka automatycznie wyświetla galerię na stronie produktu za pomocą haka "frontend_product".
Jeśli w bieżącym motywie projektu istnieje już Galeria zdjęć, zaleca się usunięcie jej z szablonu.

Opcja nr.2: Wyjście poprzez wstawienie kodu w szablonie:
Włącz wtyczkę ustawiając pole wyboru "Włącz".
Wyłącz opcję "Użyj haka (frontend_product)".
Jeśli w bieżącym motywie projektu istnieje już Galeria zdjęć, zaleca się usunięcie jej z szablonu.

Jak dodać film?

Otwórz film z YouTube, który chcesz umieścić w Galerii+.
Kliknij prawym przyciskiem myszy w oknie wideo i wybierz "Kopiuj adres URL filmu".
Otwórz aplikację "Sklep" -> "Towary" -> wybierz żądany produkt -> "Edytuj" -> "Zdjęcia i filmy " -> "Menadżer wideo" -> naciśnij przycisk "Dodaj", wklej adres URL w polu "Wideo URL", naciśnij "Zapisz".

Po zainstalowaniu wtyczki filmy nie są wyświetlane

Domyślnie wtyczka nie wyświetla filmów, które są już wprowadzone w aplikacji "Sklep". Linki do filmów, we wtyczce, dodawane są poprzez sekcję Towary" -> wybierz żądany produkt -> "Edytuj" -> "Zdjęcia i filmy " -> "Menadżer wideo" -> naciśnij przycisk "Dodaj", wklej adres URL w polu "Wideo URL", naciśnij "Zapisz".

Jak umieścić wtyczkę na osobnej stronie i zrobić galerię zdjęć lub wideo?

Otwórz ustawienia wtyczki i odznacz "Tylko na stronie produktu".
Utwórz nowy produkt bez określania kategorii.
Otwórz "Menedżer wideo" i dodaj wymagane adresy URL.
Jeśli potrzebujesz galerii zdjęć, prześlij wymagane obrazy.
Dowiedz się ID produktu:

Użyj kodu:

{if $wa->shop}{shopGalleryplusPlugin::display(ID)}{/if}

na żądanej stronie (z obsługą Smarty) lub w szablonie motywu projektu.
Na przykład, jeśli ID produktu: 43, kod będzie:

{if $wa->shop}{shopGalleryplusPlugin::display(43)}{/if}

W jaki sposób filmy mogą być wyświetlane oddzielnie od galerii zdjęć na stronie produktu?

W domyślnie film jest wyświetlany w galerii wraz ze zdjęciem.
Możesz wyłączyć wyświetlanie wideo w galerii i wyświetlać je osobno w szablonie za pomocą kodu.
Otwórz ustawienia wtyczki w zakładce "Ustawienia ogólne", dla opcji "Tryb wyświetlania" ustaw wartość "Tylko obrazy".
W plik product.html dodaj kod:

{shopGalleryplusPlugin::getVideosById($product.galleryplus_videos,800,600)} - ze wskazaniem rozmiaru wideo.
{shopGalleryplusPlugin::getVideosById($product.galleryplus_videos,640,360,false)} - bez dodawania przerwy w linii dla każdego filmu.

Jak zastąpić ikonę pełnego ekranu?

Możesz zmienić przypisanie reguł CSS w bieżącym motywie projektu.
Przykład CSS:

.galleryplus-maximize .galleryplusicon-zoom-in::before {
content: " ";
background-image: url(http://icons.iconarchive.com/icons/gakuseisean/ivista-2/32/Misc-Zoom-In-icon.png);
width: 20px;
height: 20px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
vertical-align: middle;
}

Używanie wtyczki w innych aplikacjach

Otwórz wybraną aplikację w backend'zie -> Projekt -> Szablony -> plik head.html, na końcu pliku dodaj linię:

{if $wa->shop}{shopGalleryplusPlugin::getScripts()}{/if}

Utwórz produkt bez kategorii i dowiedz się ID produktu:

Użyj kodu:

{if $wa->shop}{shopGalleryplusPlugin::display(ID)}{/if}

na żądanej stronie (z obsługą Smarty) lub w szablonie motywu projektu.
Na przykład, jeśli ID produktu: 43, kod będzie:

{if $wa->shop}{shopGalleryplusPlugin::display(43)}{/if}

Korzystanie z wtyczki w aplikacji "Zdjęcia"

Otwórz aplikację Zdjęcia -> Projekt -> Szablony -> plik head.html, na końcu pliku dodaj linię:

{if $wa->shop}{shopGalleryplusPlugin::getScripts()}{/if}

Następnie otwórz plik main.html (index.html albo content.html) i dodaj kod z pliku template.txt. Zobacz także pliki uzupełniające dla wyjścia z albumu.

Jak skonfigurować mobilną wersję wtyczki?

Korzystając z tego kodu w szablonie motywu projektowego, możesz zmienić ustawienia wtyczki dla wersji mobilnej na dowolną.

{if waRequest::isMobile()}
{* Mobile version *}
{shopGalleryplusPlugin::display($product.id, ['modalImgFit'=>'cover', 'thumbnailsSize'=>'48x48', 'thumbsAlign'=>'bottom'])}
{else}
{* PC version *}
{shopGalleryplusPlugin::display($product.id)}
{/if}

Lista dostępnych parametrów znajduje się poniżej.

Lista wszystkich opcji wtyczki "Gallery+"

Jak ukryć przyciski nawigacyjne w wersji mobilnej?

Dodaj kod na końcu pliku head.html bieżącego motywu projektowego:

{if $wa->isMobile()}
<!-- {literal} --><style>
.galleryplus-next, .galleryplus-prev {display: none !important;}
</style><!-- {/literal} -->
{/if}

Przykład dostępu do funkcji, poprzez JavaScript.

Wyłącz opcję "Automatyczna inicjalizacja" w ustawieniach wtyczki i dodaj kod do szablonu:

{literal}
 <script type="text/javascript">
   (function($){$(function(){
    $('.galleryplus').each(
     function(){
      var gp = $(this).GalleryPlus();
       gp.fn.playSlideShow(); //uzyskanie dostępu do potrzebnych funkcji
     });
    });
   })(jQuery);
 </script>
{/literal}