Powrót do listy

Comfino raty PrestaShop

Integracja widgetu Comfino z PrestaShop

Aby osadzić widget na dowolnej stronie sklepu, należy umieścić poniższy kod inicjalizujący:

var script = document.createElement('script');
script.onload = function () {
    ComfinoProductWidget.init({
        widgetKey: '{WIDGET_KEY}',
        priceSelector: '{WIDGET_PRICE_SELECTOR}',
        widgetTargetSelector: '{WIDGET_TARGET_SELECTOR}',        
        type: '{WIDGET_TYPE}',
        offerType: '{OFFER_TYPE}',
        embedMethod: '{EMBED_METHOD}',
        priceObserverLevel: 0,
        price: null
    });
};
script.src = '//widget.comfino.pl/comfino.min.js';
script.async = true;
document.getElementsByTagName('head')[0].appendChild(script);

Wtyczka Comfino PrestaShop udostępnia gotowy szablon skryptu inicjalizacyjnego i ułatwia konfigurację widgetu. W celu włączenia widgetu, należy otworzyć formularz konfiguracyjny wtyczki.

Konfiguracja

Aby aktywować logikę widgetu na stronie sklepu, należy ustawić przełącznik "Widget włączony?". Do funkcjonowania widgetu potrzebny jest indywidualny klucz, który trzeba wprowadzić do pola "Klucz widgetu".

Skrypt inicjalizacyjny można modyfikować stosownie do swoich potrzeb.

Po zapisaniu zmian widget powinien wyświetlać się na wszystkich stronach spełniających kryteria zdefiniowane w selektorach elementów: "Selektor elementu ceny widgetu", "Selektor elementu zakotwiczenia widgetu".

Pierwszy selektor wskazuje na element dokumentu HTML zawierający cenę produktu (zazwyczaj jest to strona szczegółów produktu). Drugi selektor wskazuje na element, w którym będzie osadzony widget.

  • Dostępne opcje konfiguracyjne widgetu:

    • widgetKey - klucz API widgetu (klucz widgetu jest automatycznie pobierany po zapisaniu formularza konfiguracji modułu, jeśli podano prawidłowy klucz API Comfino)
    • priceSelector - selektor elementu zawierającego cenę produktu (np: span[itemprop=price]), zobacz: MDN Web Docs - Document.querySelector()
    • widgetTargetSelector - selektor elementu kontenera widgetu (np: div.product-actions), zobacz: MDN Web Docs - Document.querySelector()
    • type - typ widgetu (simple - tekstowy, mixed - graficzny z banerem, with-modal - graficzny z kalkulatorem rat)
    • offerType - typ oferty (INSTALLMENTS_ZERO_PERCENT - Raty 0%, CONVENIENT_INSTALLMENTS - Niskie raty)
    • embedMethod - metoda osadzania widgetu (INSERT_INTO_FIRST, INSERT_INTO_LAST - wartość domyślna, INSERT_BEFORE, INSERT_AFTER)
    • priceObserverLevel - poziom hierarchii DOM używany do śledzenia zmian cen i przeliczania ofert (poziom obserwowanego kontenera nadrzędnego względem kontenera cen)
    • price - cena produktu używana do kalkulacji rat (w przypadku ustawienia, opcja priceSelector jest ignorowana)

  • gdzie:

    • opcja - parametr wymagany
    • opcja - parametr opcjonalny

Typy widgetu

  • Tekstowy (simple)

Konfiguracja

  • Graficzny z banerem (mixed)

Konfiguracja

  • Graficzny z kalkulatorem rat (with-modal)

Konfiguracja

Konfiguracja