Comfino raty

Osadzanie widgetu na stronie produktu

Umieść poniższy kod inicjalizujący na stronie produktu:

const script = document.createElement('script');
script.onload = function () {
    ComfinoWidgetFrontend.init({
        widgetKey: 'WIDGET_KEY',
        priceSelector: 'WIDGET_PRICE_SELECTOR',
        widgetTargetSelector: 'WIDGET_TARGET_SELECTOR',
        priceObserverSelector: 'WIDGET_PRICE_OBSERVER_SELECTOR',
        priceObserverLevel: WIDGET_PRICE_OBSERVER_LEVEL,
        type: 'WIDGET_TYPE',
        offerTypes: ['OFFER_TYPE_1','OFFER_TYPE_2','OFFER_TYPE_3'],
        embedMethod: 'EMBED_METHOD'
    });
};
script.src = '//widget.comfino.pl/v2/widget-frontend.min.js';
script.async = true;
document.getElementsByTagName('head')[0].appendChild(script);

Parametry podstawowe

• widgetKey — klucz API widgetu do kalkulacji i pobierania oferty z API Comfino
• priceSelector — selektor elementu zawierającego cenę produktu (np. span[itemprop=price]; szczegóły w sekcji "Informacje dodatkowe")
• widgetTargetSelector — selektor elementu kontenera widgetu (np. div.product-actions; szczegóły w sekcji "Informacje dodatkowe")
• priceObserverSelector — selektor obserwowanego elementu nadrzędnego zawierającego element ceny (szczegóły w sekcji "Informacje dodatkowe")
• priceObserverLevel — poziom hierarchii DOM używany do śledzenia zmian ceny i przeliczania ofert (szczegóły w sekcji "Informacje dodatkowe")
• type — typ widgetu (standard — baner standardowy, classic — baner klasyczny; domyślnie: standard)
• offerTypes — tablica promowanych typów ofert (INSTALLMENTS_ZERO_PERCENT — Raty 0%, CONVENIENT_INSTALLMENTS — Niskie raty, PAY_LATER — Zapłać później, COMPANY_INSTALLMENTS — Raty dla firm, COMPANY_BNPL — Odroczona płatność dla firm, PAY_IN_PARTS — Podziel na 3, LEASING — Leasing)
• embedMethod — metoda osadzania widgetu (INSERT_INTO_FIRST, INSERT_INTO_LAST — wartość domyślna, INSERT_BEFORE, INSERT_AFTER); szczegóły w sekcji "Informacje dodatkowe"

Parametry dodatkowe

• price — cena produktu do kalkulacji rat; gdy ustawiony, parametry priceSelector, priceObserverSelector i priceObserverLevel są ignorowane
• productId — ID wyświetlanego produktu
• productPrice — cena brutto wyświetlanego produktu (wartość pomocnicza; nie powoduje ignorowania priceSelector, priceObserverSelector ani priceObserverLevel)
• numOfInstallments — liczba rat dla kalkulacji (domyślnie: 0 — domyślna liczba rat dla danego typu oferty)
• platform — identyfikator platformy e-commerce (domyślnie: [unknown])
• platformName — nazwa platformy e-commerce (domyślnie: [unknown])
• platformVersion — wersja platformy e-commerce (domyślnie: [unknown version])
• platformDomain — domena platformy e-commerce (domyślnie: [unknown])
• pluginVersion — wersja pluginu (domyślnie: [unknown version])
• availableProductTypes — tablica dostępnych typów produktów finansowych dla danej kategorii (filtrowanie zaawansowane)
• productCartDetails — obiekt ze szczegółami koszyka produktów (totalAmount, products)
• language — język widgetu (domyślnie: pl; dostępne: pl, en)
• currency — waluta (domyślnie: PLN)
• showProviderLogos — wyświetla logotypy kredytodawców (domyślnie: false)
• bannerContainerId — ID kontenera baneru (domyślnie: comfino-widget-banner)
• bannerContainerClass — klasa CSS kontenera baneru (domyślnie: comfino-widget-banner)
• calculatorContainerId — ID kontenera kalkulatora (domyślnie: comfino-widget-calculator)
• calculatorContainerClass — klasa CSS kontenera kalkulatora (domyślnie: comfino-widget-calculator)
• customBannerCss — URL własnych stylów CSS dla baneru
• customCalculatorCss — URL własnych stylów CSS dla kalkulatora
• hasPriceInput — baner z polem tekstowym do manualnego wpisania ceny (true/false)
• callbackBefore — funkcja zwrotna uruchamiana przed pobraniem danych z API i wyświetleniem widgetu
• callbackAfter — funkcja zwrotna uruchamiana po pobraniu danych z API i wyświetleniu widgetu
• onOfferRendered — funkcja zwrotna uruchamiana po wyświetleniu oferty
• onWidgetBannerLoaded — funkcja zwrotna uruchamiana po załadowaniu baneru widgetu
• onWidgetCalculatorLoaded — funkcja zwrotna uruchamiana po załadowaniu kalkulatora widgetu
• onWidgetCalculatorUpdated — funkcja zwrotna uruchamiana po aktualizacji kalkulatora widgetu
• onWidgetBannerCustomCssLoaded — funkcja zwrotna uruchamiana po załadowaniu własnych stylów CSS baneru
• onWidgetCalculatorCustomCssLoaded — funkcja zwrotna uruchamiana po załadowaniu własnych stylów CSS kalkulatora
• onGetPriceElement — funkcja zwrotna uruchamiana przed pobraniem ceny
• debugMode — tryb debugowania (domyślnie: false)

opcja — parametr wymagany | opcja — parametr opcjonalny

Hosty skryptu widgetu

• Produkcyjny: https://widget.comfino.pl/v2/widget-frontend.min.js
• Testowy (sandbox): https://widget.craty.pl/v2/widget-frontend.min.js

Typy widgetu

Baner standardowy (standard)

Aktywna opcja "Pokaż loga dostawców usług finansowych"

Baner klasyczny (classic)

Aktywna opcja "Pokaż loga dostawców usług finansowych"

Kalkulator rat

Funkcje zwrotne

callbackBefore

Funkcja zwrotna uruchamiana przed pobraniem danych z API i wyświetleniem widgetu.

Domyślna implementacja: function () {}

callbackAfter

Funkcja zwrotna uruchamiana po pobraniu danych z API i wyświetleniu widgetu.

Domyślna implementacja: function () {}

onOfferRendered

Funkcja zwrotna uruchamiana po wyświetleniu oferty. Umożliwia dokonanie modyfikacji wizualnych w wyświetlonym widgecie.

Domyślna implementacja: function (jsonResponse, widgetTarget, widgetNode) { }

Argumenty funkcji:

• {Object} jsonResponse — obiekt JSON z odpowiedzią API zawierającą skalkulowaną ofertę
• {HTMLElement} widgetTarget — element strony, w którym został umieszczony widget
• {Document} widgetNode — węzeł DOM zawierający strukturę HTML widgetu

onWidgetBannerLoaded

Funkcja zwrotna uruchamiana po załadowaniu baneru widgetu.

Domyślna implementacja: function (loadedOffers) { }

Argumenty funkcji:

• {Array} loadedOffers — tablica obiektów z załadowanymi ofertami finansowymi

onWidgetCalculatorLoaded

Funkcja zwrotna uruchamiana po załadowaniu kalkulatora widgetu.

Domyślna implementacja: function (loadedOffers) { }

Argumenty funkcji:

• {Array} loadedOffers — tablica obiektów z załadowanymi ofertami finansowymi

onWidgetCalculatorUpdated

Funkcja zwrotna uruchamiana po aktualizacji kalkulatora widgetu.

Domyślna implementacja: function (activeOffer) { }

Argumenty funkcji:

• {Object} activeOffer — obiekt z aktywną ofertą finansową

onWidgetBannerCustomCssLoaded

Funkcja zwrotna uruchamiana po załadowaniu własnych stylów CSS baneru.

Domyślna implementacja: function (cssUrl) { }

Argumenty funkcji:

• {string} cssUrl — URL załadowanego pliku CSS

onWidgetCalculatorCustomCssLoaded

Funkcja zwrotna uruchamiana po załadowaniu własnych stylów CSS kalkulatora.

Domyślna implementacja: function (cssUrl) { }

Argumenty funkcji:

• {string} cssUrl — URL załadowanego pliku CSS

onGetPriceElement

Funkcja zwrotna uruchamiana przed pobraniem ceny. Pozwala wpłynąć na sposób pobierania ceny poprzez podstawienie własnej logiki.

Domyślna implementacja: (priceSelector, priceObserverSelector) => null

Argumenty funkcji:

• {string} priceSelector — aktualny selektor elementu zawierającego cenę produktu
• {string} priceObserverSelector — aktualny selektor obserwowanego elementu nadrzędnego, który zawiera element ceny

Informacje dodatkowe

Pobieranie kwoty kredytu do kalkulacji i aktualizacja kalkulacji

Selektor elementu ceny (parametr priceSelector): span.current-price-value

Kwota pobrana z elementu wskazywanego przez priceSelector służy jako kwota kredytu w kalkulacji oferty.

Produkty z kilkoma wariantami cenowymi dynamicznie zmieniają cenę w elemencie wskazywanym przez priceSelector po wyborze opcji produktu. Widget nie wykrywa tej zmiany i oferta pozostaje niezmieniona. Aby włączyć automatyczne przeliczanie oferty przy zmianach ceny, użyj parametru priceObserverSelector lub priceObserverLevel.

Jeśli platforma zastępuje całą zawartość elementu nadrzędnego przy zmianie ceny, obserwacja samego elementu ceny nie działa — zostaje on usunięty wraz z obserwatorami zdarzeń. W tej sytuacji podłącz obserwator do elementu wyżej w hierarchii DOM, który zawiera zmieniany element i którego zmiana ceny nie dotyczy.

Parametr priceObserverLevel wskazuje, ile poziomów wyżej względem elementu ceny span.current-price-value podłączyć obserwator. Wartość 0 wskazuje sam element ceny, 1 — poziom wyżej div.current-price, 3 — div.product-prices.js-product-prices, itd.

Alternatywnie użyj parametru priceObserverSelector, aby bezpośrednio wskazać obserwowany element.

Więcej o selektorach CSS: MDN Web Docs - CSS selectors, MDN Web Docs - Document.querySelector()

Pozycjonowanie widgetu na stronie

Selektor elementu kontenera (parametr widgetTargetSelector), w którym jest osadzony widget: div.product-actions

Osadzony widget.

Metoda osadzania widgetu

Element kontenera to element dokumentu HTML wskazywany przez selektor z parametru widgetTargetSelector.

Dostępne opcje:

• INSERT_INTO_FIRST — wstawienie elementu widgetu do elementu kontenera na samym początku przed istniejącą zawartością
• INSERT_INTO_LAST — wstawienie elementu widgetu do elementu kontenera na samym końcu za istniejącą zawartością
• INSERT_BEFORE — wstawienie elementu widgetu przed elementem kontenera (wizualnie nad kontenerem)
• INSERT_AFTER — wstawienie elementu widgetu za elementem kontenera (wizualnie pod kontenerem)