Instrukcja wdrożenia ramki rekomendacyjnej

Wersja z funkcją klienta

Dodawanie kontenera

Div z id ustalonym w trakcie ustaleń dotyczących ramki. Przykładowe ID: ”ylDynamicRecommendedMainPage”, najlepiej opisujący co lub gdzie ma się wyświetlać.

1. Dodanie klasy do powyższego diva. Klasa to zawsze „yldynamiccontent”. 
2. Diva należy umieścić wszędzie tam gdzie dana ramka ma się wyświetlać. 
3. Przykładowy div: <div id=”ylDynamicRecommendedProductsPage” class=”yldynamiccontent”></div>

Dodawanie funkcji i obsługa zdarzeń

1. Należy napisać funkcję globalną, która będzie wyświetlała produkty na podstawie otrzymanych aliasów(id produktu) . Forma implementacji zależy od Państwa, ale wymagane jest aby po kliknięciu w produktu wywołany został następujący kod:
   ylData = window.ylData = window.ylData || [];
ylData.push({ 'event': { 'eventName': 'productsBasketClicked+$$WartośćOstatniegoPrzekazanegoParametru$$', 'params': 'id=$$IdKlikniętegoProduktu$$' } });
2. Dokładny opis działania powyższego kodu znajdą Państwo na stronie: http://youlead.gitlab.io/#section/event
3. Przykładowa funkcja zgodna z dokumentacją: window.personalizeContent = function (target, products, param), gdzie products to aliasy produktów.
4. Wysyłanie zdarzenia można obsłużyć za pomocą dodania klasy „yl-redirect-eventName” do linka. Po kliknięciu w taki link, zostanie przekazane zdarzenie o nazwie „eventName”.
   W analogiczny sposób można dodawać parametry zdarzeń-służy do tego atrybut „data-yl-parameter”. Za jego pomocą można przekazywać alias produktu, który został kliknięty.
   Przykład:
   <a class="yl-redirect-productsBasketClicked1"  data-yl-parameter="alias=ALIAS_PRODUKTU" href="link_do_produktu">produkt</a>

Wywołanie funkcji

1. My wywołujemy funkcję w następujący sposób: window.personalizeContent(’yl-productsRecommendedMainPage’, [’alias1′,’alias2′,’alias3’], 1);
2. Nazwa 'yl-productsRecommendedMainPage’ jest tylko przykładowa, do ustalenia.

Obsługa zdarzenia

Wysyłanie zdarzenia można obsłużyć za pomocą dodania klasy „yl-redirect-eventName” do linka. Po kliknięciu w taki link, zostanie przekazane zdarzenie o nazwie „eventName”.
W analogiczny sposób można dodawać parametry zdarzeń-służy do tego atrybut „data-yl-parameter”. Za jego pomocą można przekazywać alias produktu, który został kliknięty.
Przykład:
<a class="yl-redirect-productsBasketClicked1"  data-yl-parameter="alias=ALIAS_PRODUKTU" href="link_do_produktu">produkt</a>

Wersja z funkcją YouLead’a

Dodanie kontenera

1. Div z id ustalonym w trakcie ustaleń dotyczących ramki. Przykładowe ID:
   ”ylDynamicRecommendedMainPage”, najlepiej opisujący co lub gdzie ma się wyświetlać.
2. Dodanie klasy do powyższego diva. Klasa to zawsze „yldynamiccontent”. 
3. Diva należy umieścić wszędzie tam gdzie dana ramka ma się wyświetlać. 
4. Przykładowy div: <div id=”ylDynamicRecommendedProductsPage” class=”yldynamiccontent”></div>