{"id":887,"date":"2025-08-11T14:31:47","date_gmt":"2025-08-11T14:31:47","guid":{"rendered":"https:\/\/rs.quarticon.com\/widget-html-lub-javascript\/"},"modified":"2025-08-12T15:38:09","modified_gmt":"2025-08-12T15:38:09","slug":"widget-html-lub-javascript","status":"publish","type":"post","link":"https:\/\/help.quarticon.com\/pl\/widget-html-lub-javascript\/","title":{"rendered":"Widget HTML lub JavaScript"},"content":{"rendered":"<article class='jsx-ef86202475c6562f '>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>Je\u017celi chcesz by Twoje ramki rekomendacji<\/p>\n<\/div>\n<div class='intercom-interblocks-unordered-nested-list'>\n<ul>\n<li>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>zawiera\u0142y zaawansowane efekty CSS3<\/p>\n<\/div>\n<\/li>\n<li>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>zawiera\u0142y wywo\u0142ywane akcje w j\u0119zyku PHP metod\u0105 POST<\/p>\n<\/div>\n<\/li>\n<li>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>wy\u015bwietla\u0142y produkty w r\u00f3\u017cnych j\u0119zykach w zale\u017cno\u015bci od aktywnej obecnie wersji j\u0119zykowej w przegl\u0105darce klienta<\/p>\n<\/div>\n<\/li>\n<li>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>zawiera\u0142y cen\u0119 produktu ni\u017csz\u0105 ni\u017c standardowa ze wzgl\u0119du na zalogowanego sta\u0142ego klienta<\/p>\n<\/div>\n<\/li>\n<\/ul>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>mo\u017cliwe jest wygenerowanie rekomendacji w formacie JSON. Dzi\u0119ki temu produkty wskazane do rekomendacji zostaj\u0105 przekazane poprzez format JSON, a sam wygl\u0105d ramki oraz wykorzystane atrybuty (typu cena, nazwa, obrazek) s\u0105 okre\u015blane przez klienta.<\/p>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>Aby w\u0142\u0105czy\u0107 taki format odpowiedzi skrypt\u00f3w nale\u017cy w kreatorze drag&#038;drop prze\u0142\u0105czy\u0107 opcj\u0119 <i>W\u0142\u0105cz tryb JS callback<\/i> na <i>Tak<\/i>. <\/p>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<\/div>\n<div class='intercom-interblocks-image intercom-interblocks-align-left'><a href='https:\/\/cdn.quartic.com.pl\/howtoimg\/i\/o\/88407745\/b2a9bc31d8b68028bdb30f58\/image.png' target='_blank' rel='noreferrer nofollow noopener'><img src='https:\/\/cdn.quartic.com.pl\/howtoimg\/i\/o\/88407745\/b2a9bc31d8b68028bdb30f58\/image.png' width='387' height='413'><\/a><\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>Poni\u017cej pojawi\u0105 si\u0119 trzy dodatkowe pola:<\/p>\n<\/div>\n<div class='intercom-interblocks-unordered-nested-list'>\n<ul>\n<li>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>Kod JS callback: Twoja funkcja javascript, kt\u00f3ra przetworzy zwr\u00f3conego przez nas JSONa z produktami i wygeneruje widget na Twojej stronie<\/p>\n<\/div>\n<\/li>\n<li>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>Wybierz z katalogu pola: niewymagane; nazwy p\u00f3l opisuj\u0105ce produkt (oddzielone spacj\u0105), kt\u00f3re maj\u0105 si\u0119 znale\u017a\u0107 w zwr\u00f3conym JSONie<\/p>\n<\/div>\n<\/li>\n<li>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>JS callback timeout: czas w milisekundach jak d\u0142ugo mo\u017ce czeka\u0107 nasz skrypt na pojawienie si\u0119 Twojej funkcji (warto\u015b\u0107 mi\u0119dzy 0 a 100000)<\/p>\n<\/div>\n<\/li>\n<\/ul>\n<\/div>\n<div class='intercom-interblocks-image intercom-interblocks-align-left'><a href='https:\/\/cdn.quartic.com.pl\/howtoimg\/i\/o\/88408059\/bad78d24569378d3a7bcfbd7\/image.png' target='_blank' rel='noreferrer nofollow noopener'><img src='https:\/\/cdn.quartic.com.pl\/howtoimg\/i\/o\/88408059\/bad78d24569378d3a7bcfbd7\/image.png' width='697' height='212'><\/a><\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>Po wprowadzeniu odpowiednich ustawie\u0144 (wymagana jedynie nazwa funkcji) i zapisaniu widgetu, przy nast\u0119pnym wywo\u0142aniu naszego skryptu QON.js zamiast HTMLa widgetu pobrany zostanie JSON z list\u0105 produkt\u00f3w oraz JavaScript, kt\u00f3ry wywo\u0142a funkcj\u0119 podan\u0105 w <i>Kod JS callback<\/i>.<\/p>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>Twoja funkcja podana w polu <i>Kod JS callback<\/i> musi przyjmowa\u0107 jako parametr wywo\u0142ania JSONa z list\u0105 produkt\u00f3w, kt\u00f3re maj\u0105 pojawi\u0107 si\u0119 w widgecie, na przyk\u0142ad:<\/p>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>quartic_rec(rekomendacje)<\/p>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>W\u0142a\u015bnie ta zmienna <i>rekomendacje <\/i>przejmuje zawarto\u015b\u0107 obiektu JSON.<\/p>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<\/div>\n<div class='intercom-interblocks-subheading intercom-interblocks-align-left'>\n<h3 id='przykadowa-zawarto-json-z-rekomendacjami'>Przyk\u0142adowa zawarto\u015b\u0107 JSON z rekomendacjami<\/h3>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p><code>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':''}])<\/code>\u00a0<\/p>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<\/div>\n<div class='intercom-interblocks-subheading intercom-interblocks-align-left'>\n<h3 id='przykadowa-funkcja-wywoujca-rekomendacje'>Przyk\u0142adowa funkcja wywo\u0142uj\u0105ca rekomendacje<\/h3>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>function quartic_rec(rekomendacje){<\/p>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>for (var i=0;i&lt;rekomendacje.length;i++({<\/p>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>console.log(rekomendacje[i].title);<\/p>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>}<\/p>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>}<\/p>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>Powy\u017csza przyk\u0142adowa funkcja <i>quartic_rec<\/i> wy\u015bwietli w konsoli nazw\u0119 ka\u017cdego produktu.<\/p>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<\/div>\n<div class='intercom-interblocks-subheading intercom-interblocks-align-left'>\n<h3 id='nazwy-pl-opisujce-produkt'>Nazwy p\u00f3l opisuj\u0105ce produkt<\/h3>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>W polu <i>Select from catalogue<\/i> nale\u017cy poda\u0107 pola produktu, kt\u00f3re chcemy aby pojawi\u0142y si\u0119 w zwracanym JSONie. Je\u015bli b\u0119dzie puste, w JSONie znajd\u0105 si\u0119 wszystkie pola opisuj\u0105ce produkt, a s\u0105 to:<\/p>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<\/div>\n<div class='intercom-interblocks-image intercom-interblocks-align-left'><a href='https:\/\/cdn.quartic.com.pl\/howtoimg\/i\/o\/88408589\/79c81d0f89423d4d31b66980\/image.png' target='_blank' rel='noreferrer nofollow noopener'><img src='https:\/\/cdn.quartic.com.pl\/howtoimg\/i\/o\/88408589\/79c81d0f89423d4d31b66980\/image.png' width='400' height='297'><\/a><\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>Aby w wygenerowanym JSONie by\u0142y tylko te pola kt\u00f3re chcemy nale\u017cy do <i>Wybierz z katalogu pola<\/i> wprowadzi\u0107 tylko te z powy\u017cszych nazw p\u00f3l, kt\u00f3re nas interesuj\u0105.<br \/>Je\u015bli chcesz by w zwracanym JSONie by\u0142y tylko pola id, poniewa\u017c reszta danych zostanie pobrana z Twojego serwera w zale\u017cno\u015bci od wersji j\u0119zykowej sklepu<i>, <\/i>do pola <i>Wybierz z katalogu <\/i>nale\u017cy wprowadzi\u0107 nast\u0119puj\u0105c\u0105 tre\u015b\u0107:<\/p>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<\/div>\n<div class='intercom-interblocks-code'>\n<pre>id link<\/pre>\n<\/div>\n<div class='intercom-interblocks-subheading intercom-interblocks-align-left'>\n<h3 id='jak-dziaa-wywoanie-json'>Jak dzia\u0142a wywo\u0142anie JSON<\/h3>\n<\/div>\n<div class='intercom-interblocks-ordered-nested-list'>\n<ol>\n<li>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>Po pobraniu snippetu widgetu w formacie JSON z javascriptem sprawdzane jest czy podana przez Ciebie funkcja jest zdefiniowana. Je\u015bli jest, przerywa dzia\u0142anie skryptu i wywo\u0142uje Twoj\u0105 funkcj\u0119 z JSONem z produktami podanymi jako parametr wywo\u0142ania funkcji. Je\u015bli nie jest zdefiniowana, po 15 minutach pr\u00f3buje ponownie.<\/p>\n<\/div>\n<\/li>\n<li>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>Po up\u0142ywie czasu podanego w <i>JS callback timeout<\/i> dzia\u0142anie skryptu zostaje przerwane.<\/p>\n<\/div>\n<\/li>\n<li>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>Je\u015bli podczas wywo\u0142ania Twojej funkcji wyst\u0105pi b\u0142\u0105d, dzia\u0142anie skryptu zostaje przerwane, a informacja o b\u0142\u0119dzie zostaje przes\u0142ana do nas pod adres: <i><a href='https:\/\/api.quarticon.com\/er\/?id=wdgJson&#038;message=exception%20&lt;komunikat' rel='nofollow noopener noreferrer' target='_blank'>https:\/\/api.quarticon.com\/er\/?id=wdgJson&#038;message=exception%20&lt;komunikat<\/a> b\u0142\u0119du&gt;<\/i><\/p>\n<\/div>\n<\/li>\n<\/ol>\n<\/div>\n<div class='intercom-interblocks-subheading intercom-interblocks-align-left'>\n<h3 id='przekierowanie-z-ramki-rekomendacji-do-produktu'>Przekierowanie z ramki rekomendacji do produktu<\/h3>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>Aby system Quarticon prawid\u0142owo rejestrowa\u0142 klikni\u0119cia i sprzeda\u017c z ramek rekomendacji wymagane jest wykorzystanie link\u00f3w do produktu, kt\u00f3re zostaj\u0105 przekazane w rekomendacjach w formacie JSON. Aby jednak nie pokazywa\u0107 jawnie link\u00f3w do produkt\u00f3w przekierowuj\u0105cych przez serwery Quarticon, warto wykorzysta\u0107 funkcj\u0119 <i>onclick <\/i>dla element\u00f3w danego produktu rekomendowanego. Poni\u017cej znajduje si\u0119 przyk\u0142ad sk\u0142adni HTML zbudowanej w opisany powy\u017cej spos\u00f3b:<\/p>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p><i>&lt;a href=\u201d<a href='http:\/\/www.somepage.com\/product_1%E2%80%B3' rel='nofollow noopener noreferrer' target='_blank'>http:\/\/www.somepage.com\/product_1\u2033<\/a> onclick=\u201dwindow.location.href = \u201a<a 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%E2%80%99' rel='nofollow noopener noreferrer' target='_blank'>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\u2019<\/a>; return false;\u201d&gt;Product 1&lt;\/a&gt;<\/i><\/p>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<p>Jak wida\u0107 w powy\u017cszym przyk\u0142adzie, atrybut <i>href <\/i>dla elementu klikanego pozosta\u0142 niezmieniony, natomiast za pomoc\u0105 metody <i>onclick, <\/i>wskazuj\u0105c\u0105 na inny URL dla window.location.href z dodatkow\u0105 instrukcj\u0105 <i>return false<\/i>, blokujemy przekierowanie przez standardowy atrybut <i>href <\/i>i wykorzystujemy niejawnie przekierowanie przez URL okre\u015blony w metodzie <i>onclick<\/i>. Docelowym adresem produktu widocznym w przegl\u0105darce po przej\u015bciu na produkt pozostanie pierwotny adres <i>htttp:\/\/<a href='http:\/\/www.somepage.com\/product_1' rel='nofollow noopener noreferrer' target='_blank'>www.somepage.com\/product_1<\/a>.<\/i><\/p>\n<\/div>\n<div class='intercom-interblocks-paragraph no-margin intercom-interblocks-align-left'>\n<\/div>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>Je\u017celi chcesz by Twoje ramki rekomendacjizawiera\u0142y zaawansowane efekty CSS3zawiera\u0142y wywo\u0142ywane akcje w j\u0119zyku PHP metod\u0105 POSTwy\u015bwietla\u0142y produkty w r\u00f3\u017cnych j\u0119<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-887","post","type-post","status-publish","format-standard","hentry","category-rekomendacje"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/help.quarticon.com\/pl\/wp-json\/wp\/v2\/posts\/887","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.quarticon.com\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/help.quarticon.com\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/help.quarticon.com\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/help.quarticon.com\/pl\/wp-json\/wp\/v2\/comments?post=887"}],"version-history":[{"count":5,"href":"https:\/\/help.quarticon.com\/pl\/wp-json\/wp\/v2\/posts\/887\/revisions"}],"predecessor-version":[{"id":2145,"href":"https:\/\/help.quarticon.com\/pl\/wp-json\/wp\/v2\/posts\/887\/revisions\/2145"}],"wp:attachment":[{"href":"https:\/\/help.quarticon.com\/pl\/wp-json\/wp\/v2\/media?parent=887"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/help.quarticon.com\/pl\/wp-json\/wp\/v2\/categories?post=887"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/help.quarticon.com\/pl\/wp-json\/wp\/v2\/tags?post=887"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}