WIDGET HTML LUB WIDGET JAVASCRIPT

W pewnych sytuacjach standardowy kreator widgetów panelu Quarticon może być niewystarczający. Jeżeli ramki rekomendacji:

  • mają zawierać zaawansowane efekty CSS3
  • mają być wywoływane akcje w języku PHP metodą POST
  • mają wyświetlać produkty w różnych językach w zależności od aktywnej obecnie wersji językowej w przeglądarce klienta
  • mają zawierać cenę produktu niższą niż standardowa ze względu na zalogowanego stałego klienta

możliwe jest wygenerowanie rekomendacji w formacie JSON. Dzięki temu produkty wskazane do rekomendacji zostają przekazane poprzez format JSON, a sam wygląd ramki oraz wykorzystane atrybuty typu cena, nazwa, obrazek są określane przez klienta.

Aby włączyć taki format odpowiedzi skryptów należy w kreatorze przełączyć opcję „Włącz tryb JS callback” na Tak. Pojawią się poniżej 3 dodatkowe pola:

  • Kod JS callback: funkcję javascript klienta, która przetworzy zwróconego przez nas JSONa z produktami i wygeneruje widget na stronie klienta
  • Wybierz z katalogu pola: [niewymagane]: nazwy pól opisujące produkt (oddzielone spacją), które mają się znaleźć w zwróconym JSONie
  • JS callback timeout: czas w milisekundach jak długo może czekać nasz skrypt na pojawienie się funkcji klienta (wartość między 0 a 100000)

widget_js

Po wprowadzeniu odpowiednich ustawień (wymagana jedynie nazwa funkcji) i zapisaniu widgetu, przy następnym wywołaniu naszego skryptu QON.js  zamiast HTMLa widgetu pobrany zostanie JSON z listą produktów oraz javascript, który wywoła funkcję podaną w Kod JS callback.

Funkcja klienta podana w polu Kod JS callback musi przyjmować jako parametr wywołania JSONa z listą produktów, które mają pojawić się w widgecie, na przykład:

quartic_rec(rekomendacje)

i właśnie ta zmienna rekomendacje przejmuje zawartość obiektu JSON.

Przykładowa zawartość JSON z rekomendacjami

quartic_rec([{"id":"389231","title":"Produkt 1","link":"http://www.quarticon.com/produkt_1.html","image":"http://www.quarticon.com/produkt_1_image.jpg","price":"7,50","old_price":"9,75","custom_1":"","custom_2":"","custom_3":"","custom_4":"","custom_5":""},{"id":"349605","title":"Produkt 2","link":"http://www.quarticon.com/produkt_2","image":"http://www.quarticon.com/produkt_2_image.jpg","price":"24,75","old_price":null,"custom_1":"","custom_2":"","custom_3":"","custom_4":"","custom_5":""}])

Przykładowa funkcja wywołująca rekomendacje

function quartic_rec(rekomendacje){

for (var i=0;i<rekomendacje.length;i++({

console.log(rekomendacje[i].title);

}

}

Powyższa przykładowa funkcja quartic_rec wyświetli w konsoli nazwę każdego produktu.

Nazwy pól opisujące produkt

W polu Select from catalog należy podać pola produktu, które chcemy aby pojawiły się w zwracanym JSONie. Jeśli będzie puste – w JSONie znajdą się wszystkie pola opisujące produkt, a są to:

nazwa pola
opis
ididentyfikator produktu
titlenazwa produktu
linkadres url strony produktu
imageadres url zdjęcia produktu
pricecena produktu
old_pricestara cena produktu (np. przed obniżką ceny)
custom_1
custom_2
custom_3
custom_4
dodatkowe pola opisujące produkt

Aby w wygenerowanym JSONie były tylko te pola które chcemy należy do Wybierz z katalogu pola wprowadzić tylko te z powyższych nazw pól, które nas interesują.
Np.: chcemy by w zwracanym JSONie były tylko pola id, ponieważ reszta danych zostanie pobrana z serwera klienta w zależności ode wersji językowej sklepu
W tym celu do pola Wybierz z katalogu pola należ wprowadzić następującą treść:

id link

Jak działa wywołanie JSON

  1. Po pobraniu snippetu widgetu w formacie JSON z javascriptem sprawdzane jest czy podana funkcja klienta jest zdefiniowana
    1. Jeśli jest zdefiniowana to przerywa działanie skryptu i wywołuje funkcję klienta z JSONem z produktami podanymi jako parametr wywołania funkcji
    2. Jeśli nie jest zdefiniowana to po 15ms próbuje ponownie
  2. Po upływie czasu podanego w JS callback timeout działanie skryptu zostaje przerwane.
  3. Jeśli podczas wywołania funkcji klienta wystąpi błąd działanie skryptu zostaje przerwane a informacja o błędzie zostaje przesłana do nas pod adres: http(s)://api.quarticon.com/er/?id=wdgJson&message=exception%20<komunikat błędu>

Przekierowanie z ramki rekomendacji do produktu

Aby system Quarticon prawidłowo rejestrował kliknięcia i sprzedaż z ramek rekomendacji wymagane jest wykorzystanie linków do produktu, które zostają przekazane w rekomendacjach w formacie JSON. Aby jednak nie pokazywać jawnie linków do produktów przekierowujących przez serwery Quarticon warto wykorzystać funkcję onclick dla elementów danego produktu rekomendowanego. Poniżej znajduje się przykład składni HTML zbudowanej w opisany powyżej sposób:

<a href=”http://www.somepage.com/product_1″ onclick=”window.location.href = ‚http://rec.quartic.pl/c.php?qrid=ad_5714d78a54b27&amp;qdpi=9l89&amp;pid=4&amp;ci=50996&amp;c=a6f271f4043b5ba0&amp;p=73007&amp;ss=rtb_8329&amp;url=%2F%2Fwww.somepage.com%2product_1’; return false;”>Product 1</a>

Jak widać w powyższym przykładzie, atrybut href dla elementu klikanego pozostał niezmieniony, natomiast za pomocą metody onclick wskazującą na inny URL dla window.location.href z dodatkową instrukcją „return false” blokujemy przekierowanie przez standardowy atrybut href i wykorzystujemy niejawnie przekierowanie przez URL określony w metodzie onclick. Docelowym adresem produktu widocznym w przeglądarce po przejściu na produkt pozostanie pierwotny adres htttp://www.somepage.com/product_1.