Przejdź do głównej zawartości
Wszystkie kolekcjeAI Smart Search Proces wdrożenia
Instrukcja wdrożenia AI Smart Search za pomocą aplikacji Vue Frontend
Instrukcja wdrożenia AI Smart Search za pomocą aplikacji Vue Frontend
M
Napisane przez Martyna Woźniszczuk
Zaktualizowano ponad 7 miesiące temu

Wprowadzenie do instrukcji AI Smart Search (V3) po API

Instrukcja, którą oddajemy w Twoje ręce, dotyczy wdrożenia wyszukiwarki AI Smart Search metodą API i została spisana w taki sposób, by ograniczyć jego czas i potencjalne ryzyko wystąpienia błędów. Poprawnie skonfigurowana wyszukiwarka daje ogromną swobodę w zarządzaniu narzędziem na stronie sklepu internetowego. Dzięki niej:

  • masz pełną kontrolę nad finalnym wyglądem wyszukiwarki i sposobie wyświetlania produktów (m.in. za pomocą nawigacji fasetowej); sprawdza się to także w przypadku dopasowania narzędzia do strony w reakcji na planowane/zaistniałe zmiany (np. zmiana layoutu);

  • masz możliwość zaawansowanej customizacji wyników generowanych przez wyszukiwarkę i modyfikacji algorytmu wyszukiwania za pomocą wag, funkcji sortowania i sugestii produktowych; możesz np. zbudować listingi produktowe z wyników wyszukiwania, budując podstrony z bardzo precyzyjną frazą dla sezonowych kolekcji np. Wakacje;

  • łatwej i szybciej zweryfikujesz poprawność katalogu produktowego (aktualna cena lub stan magazynowy), co w efekcie poprawi jego jakość i obniży koszt utrzymania narzędzia;

  • skonfigurujesz więcej niż jedną instancję (wersji) wyszukiwarki, dzięki czemu łatwo porównasz skuteczność i efektywność obranej strategii.

Możliwość integracji wyszukiwarki QuarticOn przez API pozwala przejąć Ci kontrolę nad procesem wdrożenia narzędzia i skrócić jego czas, wyeliminować przestoje w pracy w jego trakcie, a także zredukować koszt utrzymania narzędzia przy jednoczesnym zwiększeniu jego efektywności.

Odpowiednio zaprojektowane i zoptymalizowane API minimalizuje czas ładowania i transferu danych na Twojej stronie, dzięki czemu przyspiesza czas jej ładowania i nie spowalnia go nawet w przypadku wielu procesów uruchomionych w tle. Zwiększona wydajność strony pozytywnie wpływa z kolei na doświadczenia użytkownika i tym samym na pozycjonowanie sklepu w Google.

Znasz już zalety wdrożenia wyszukiwarki AI Smart Search przez API. Przejdźmy zatem do instrukcji.

Spis treści:

1. Konfiguracja katalogu produktowego

2. Tworzenie instancji wyszukiwarki AI Smart Search

3. Konfiguracja uprawnień po API

4. Konfiguracja wyszukiwarki

5. Testowanie

6. Opis endpointów wraz z dokumentacją i przykładami

7. Wdrożenie aplikacji na stronie klienta przez klienta/agencję

8. Konfiguracja aplikacji poprzez panel

9. Konfiguracja aplikacji poprzez pliki konfiguracyjne

10. Silnik szablonów obsługujący wyświetlanie danych produktowych

Instrukcja wdrożenia AI Smart Search (V3) po API

1. Konfiguracja katalogu produktowego

Przygotowanie katalogu XML

Przygotuj katalog produktowy w formacie XML, który będzie dostępny online oraz cyklicznie uaktualnianiany.

Obsługujemy najważniejsze formaty plików XML, ale sugerujemy, aby skorzystać z formatu Google Merchat XML: https://support.google.com/merchants/topic/6324338?hl=pl&ref_topic=7294998&sjid=12760409436838237628-EU.

Gdy przygotowany plik znajduje się już na serwerze, przystąp do mapowania katalogu XML w panelu AI Smart Search.

Utworzenie nowego katalogu i jego podstawowe informacje

1. Zaloguj się do panelu klienta QuarticOn i przejdź do zakładki Wyszukiwarka.

2. W panelu AI Smart Search przejdź do modułu Katalog, a następnie do zakładki Lista katalogów

3. Aby utworzyć nowy katalog, kliknij na przycisk Skonfiguruj nowy katalog.

4. Skonfiguruj katalog, uzupełniając podstawowe pola:

  • Nazwa katalogu – unikalna nazwa katalogu, która pozwoli Ci rozpoznać katalog na liście;

  • Branża sklepu – obecnie dana informacyjne, w przyszłości umożliwi dostarczanie usług spersonalizowanych dla danej branży;

  • Język katalogu - język, w którym będzie działać wyszukiwarka;

  • Adres URL katalogu - miejsce, z którego cyklicznie będziemy pobierać katalog;

Przykładowa konfiguracja katalogu:

Po uzupełnieniu pól kliknij Dalej.

Ustawienia mapowania produktów

Kolejnym etapem konfiguracji katalogu produktowego jest zmapowanie każdego pola z wgranego pliku XML z polem w panelu AI Smart Search. Ten proces jest niezbędny do tego, by nasz system odpowiednio przetworzył i rozpoznał Twoje produkty.

Mapuj pola z pliku xml do wymaganych pól dla AI Smart Search, oraz dodaj pola dodatkowe.

Wymagane pola i ich identyfikatory

  • id – odpowiedzialne za przechowywanie unikalnego id produktu; w przypadku feeda zawierającego warianty, należy wskazać pole, które zawiera ID grupujące: item_group_id => Identyfikator grupy produktów [item_group_id] - Google Merchant Center - Pomoc

  • title – odpowiedzialne za przechowywanie tytułu produktu

  • categories – pole, w którym znajdują się kategorie produktów

    • wskaż separator, który rozdzieli zawartość tagu na oddzielne kategorie

      • <g:product_type>Mężczyzna > Koszule</g:product_type> - wskaż >

      • <g:product_type>Mężczyzna | Koszule</g:product_type> - wskaż |

      • <g:product_type>Mężczyzna, Koszule</g:product_type> - wskaż ,

  • link – pole, w którym znajduje się adres URL produktu

  • image_link – pole, w którym znajduje się adres URL do obrazka produktu

  • availability – pole, w którym znajduje się opis dostępności produktu

  • price – pole, w którym znajduje się cena produktu

Używaj atrybutu identyfikator grupy produktów [item_group_id], aby grupować wersje produktów w danych produktów. Wersje to grupa podobnych produktów, które różnią się od siebie szczegółami, na przykład atrybutami rozmiar [size], kolor [color], materiał [material], wzór [pattern], grupa wiekowa [age_group] i płeć [gender].

Grupując produkty za pomocą atrybutu identyfikator grupy produktów [item_group_id], masz pewność, że dany produkt i jego wersje zostaną wyświetlone klientom jako grupa, a nie osobne pozycje.

Dodatkowe pola

Możesz dodać dodatkowe informacje, które będziemy przechować w systemie. Po nich będzie można dalej skonfigurować wyszukiwanie, filtrowanie czy też informacje na kafelku produktowym, np. labelki o przecenie, labelki o promocjach itp.

Pola dodatkowe wymagają kilku informacji:

  • Pole z katalogu – wskaż, które pole z katalogu xml ma zostać zmapowane

  • Qon Id – unikalny identyfikator dla pola, automatycznie tworzony na podstawie pola Pole z katalogu (można zmodyfikować)

  • Typ danych – wskaż, jakim typem danych dane pole jest reprezentowane

    • string – wartość pola jest tekstem

    • number – wartość pola jest liczbą

    • boolean – wartość pola jest typem boolean, czyli true, false, 1 lub 0

    • table – wartość pola, podobnie jak kategorie, zawiera wiele wartości połączonych separatorem

      • dla tej wartości ustaw separator tak, jak w przypadku kategorii

Kliknij Dalej, aby przetworzyć wstępnie katalog i zobaczyć jego podgląd.

Podgląd katalogu, czyli gdzie sprawdzisz informacje o zaimportowanym katalogu

Kliknij Dalej, a system zaimportuje katalog i wyświetli listę produktów zaimportowanych wraz z ich zmapowanymi informacjami w kolumnach:

  • Liczba wariantów produktów – jeśli podane ID było ID grupującym (item_group_id), system znalazł produkty o tym samym ID – w kolumnie Liczba wariantów produktu będzie widoczne, ile różnych wersji posiada dany produkt (po kliknięciu w przycisk Pokaż, rozwinie się lista wariantów)

  • Nazwa produktu – pobrana nazwa produktu lub wariantu

  • Id – ID produktu lub wariantu

  • Cena – cena produktu lub wariantu

  • Kategorie – kategorie przypisane do produktu lub wariantu

  • Zdjęcie – zdjęcia produktu lub wariantu

  • Akcje – button, za pomocą którego możesz otworzyć podgląd produktu

  • Lista produktów z błędami – miejsce, w którym znajdą się błędy wynikające z mapowania produktów; z tego miejsca możesz pobrać wszystkie błędy jako plik

Podgląd produktu

Pogląd produktu zawiera pola wymagane oraz dodatkowe zmapowane w poprzednim kroku.

Jeśli uznasz, że mapowanie produktów nie spełnia Twoich oczekiwań (np. ze względu na pominięte pola lub wskazanie złego separatora), możesz cofnąć się do poprzedniego ekranu i skorygować mapowanie.
​

Ustawienia zasilania katalogu

Po prawidłowym zmapowaniu produktów, ustal godziny, w których katalog będzie aktualizowany. Aktualizacja katalogu polega na pobraniu go z podanego wcześniej linku, przetworzeniu go i imporcie danych do struktury AI Smart Search.

Możesz ustawić maksymalnie 4 odświeżenia katalogu na dzień. Katalog będzie aktualizowany codziennie o wskazanych godzinach.

Kliknij Zapisz, by zapisać konfigurację katalogu.

Podgląd katalogu oraz jego ustawień

Z poziomu zakładki Zarządzanie katalogami możesz podejrzeć i sprawdzić ustawienia wgranego ktalogu. W tym celu kliknij w symbol trzech pionowych kropek, a następnie w Pokaż szczegóły.

W szczegółach katalogu możesz sprawdzić:

  • listę pól, które znalazł system w feedzie XML oraz status informujący o tym, czy dane pole zostało wykorzystane systemie AI Smart Search

  • listę godzin odświeżenia, czyli informację, w jakich godzinach katalog jest codziennie aktualizowany

  • listę produktów widocznych w katalogu wraz z informacjami o nich

Po kliknięciu w Pokaż szczegóły wyświetli się następujący widok:

Po kliknięciu w Pokaż produkt, wyświetli się podgląd produktu znany Ci już z poprzedniego podrozdziału.

2. Tworzenie instancji wyszukiwarki AI Smart Search

W swoim sklepie internetowym możesz zastosować więcej niż jedną instancję (wersję) wyszukiwarki dla tego samego lub innego katalogu produktowego.

Instancję wyszukiwarki konfigurujemy w panelu – nie ma tu kodowania, a jedynie szereg ustawień.

Każda instancja posiada niezależne ustawienia, które pozwalają na testowanie każdej z nich. Możesz zbudować kilka wyszukiwarek i każdą z nich skonfigurować inaczej, np. możesz stworzyć oddzielną wyszukiwarkę dla aplikacji mobilnej i oddzielną dla aplikacji webowej. Możliwość tworzenia instancji wyszukiwarek pozwala również na testowanie nowych ustawień niezależnie od wersji produkcyjnej.

Przykłady zastosowań instancji:

  • wersja desktop i wersja mobilna

  • różne wersje językowe

  • listing produktów dla danej kategorii

  • listing produktów na landing page'ach

  • zmiana wag wyszukiwania w autocomplete – np. można nadać większą wagę tytułowi produktów niż ich opisom; w tym wypadku produkty, które mają daną frazę w nazwie będą pokazane znacznie wyżej niż produkty z tą frazą w opisach.

Aby utworzyć nową instancję dla obecnej wyszukiwarki:

1. Przejdź do zakładki Search, a następnie kliknij w Lista instancji.

2. Kliknij w przycisk Utwórz nową wyszukiwarkę.

3. Podaj:

  • nazwę wyszukiwarki, czyli unikalną nazwę tworzonej instancji wyszukiwarki

  • katalog dodany wcześniej, z którego ta instancja wyszukiwarki będzie korzystać

4. Kliknij Zapisz.

3. Konfiguracja uprawnień do API

Po co potrzebna jest autoryzacja API i jakie są jej sposoby?

Aby móc uzyskać dostęp do API Smart Search, konieczna jest autoryzacja. W naszym systemie dopuszczamy dwa rodzaje autoryzacji:

  1. Whitelista domen – konfiguracja dostępu do API wyszukiwarki bazująca na whiteliście domen, z których przychodzą żądania.

    Whitelista pozwala na integrację silnika wyszukiwania na poziomie frontendu sklepu internetowego. API przetworzy każde żądanie, które zostanie zainicjowane z dowolnej domeny wymienionej poniżej. Żądania z domen, które nie będą na liście i nie będą autoryzowane w inny sposób zostaną odrzucone.

  2. Klucz dostępu – konfiguracja dostępu do API za pomocą klucza.

    Wszystkie żądania podpisane kluczem zostaną przetworzone. Autoryzacja za pomocą klucza pozwala na integrację API silnika wyszukiwania z backendem sklepu internetowego. Wszystkie żądania które zostaną wywołane z prawidłowym kluczem zostaną przetworzone. Jeżeli klucz będzie błędny lub nie zostanie przekazany, a zgłoszenie do API nie będzie autoryzowane w inny sposób, zostanie ono odrzucone.

    Pamiętaj, aby nie upubliczniać klucza – klucz jest unikalny i przypisany do Twojego konta. Jeżeli istnieje podejrzenie, że klucz uległ ujawnieniu, zalecane jest wygenerowanie klucza ponownie. Uwaga, wygenerowanie nowego klucza usunie aktualny klucz.

W przypadku integracji po stronie frontowej aplikacji, skorzystaj z whitelisty domen, aby każdy request do API z Twojej domeny był autoryzowany, a jednocześnie aby nikt niepowołany nie skorzystał z Twojej wyszukiwarki.

W przypadku wdrożenia po stronie backendowej aplikacji, skorzystaj z klucza dostępu.

Konfiguracja whitelisty domen

1. Przejdź do zakładki Dostęp do API.

2. Upewnij się, że znajdujesz się w sekcji Dostęp whitelist i w polu Dodaj nową autoryzowaną domenę wpisz adres swojej domeny. Następnie kliknij Dodaj.

Konfiguracja klucza dostępowego do API

1. Przejdź do zakładki Dostęp do API.

2. Przejdź do sekcji Klucze dostępu.

W zakładce widoczne są pola:

  • URL API – adres API, pod którym znajdują się nasze endpointy

  • Klucz – unikalny klucz dostępowy do API; jeśli klucz nie istnieje, należy kliknąć przycisk Resetuj klucz, a zostanie utworzony nowy klucz

  • Symbol klienta – unikalny customerSymbol używany również do autoryzacji w API

Podany w tej zakładce klucz API użyj w polu Api-key w nagłówkach requestu. Więcej o autoryzacji dowiesz się z dokumentacji naszego API, która dostępna jest pod linkiem: https://orion.quarticon.com/docs/index.html.

4. Konfiguracja wyszukiwarki

Oferowany przez QuarticOn panel AI Smart Search umożliwia użytkownikom konfigurowanie szerokiej gamy ustawień wyszukiwarki. Dzięki opcjom dostępnym w panelu (zakładka Zarządzanie instancjami), możesz samodzielnie wprowadzać zmiany w takich aspektach jak:

  • wybór pól, po których ma nastąpić wyszukiwanie, oraz ustalenie ich istotności podczas wyszukiwania,

  • precyzyjne określanie, czy pola powinny obsługiwać wyszukiwanie dokładne, wyszukiwanie w cudzysłowie czy wyszukiwanie w wielu polach,

  • zarządzanie sposobami sortowania produktów podczas wyświetlania,

  • budowanie własnego menu fasetowego, czyli, inaczej mówiąc, z jakich pól mają być budowane filtry na stronie SERP,

  • określanie, w jaki sposób mają być tworzone sugestie dla wpisanej frazy.

Wszystkie te możliwości dostępne są w panelu Search. Dzięki nim masz pełną kontrolę nad procesem wyszukiwania i możesz dostosować go do indywidualnych potrzeb swojego sklepu.

Istotność pól

Dzięki tej zakładce możesz wybrać, które pola mają być brane pod uwagę podczas procesu wyszukiwania oraz określić, jakie wagi przypisać poszczególnym polom.

Menu fasetowe

Menu fasetowe to rodzaj interfejsu, który umożliwia łatwe filtrowanie. Dzięki niemu możesz dokładnie określić, jakie elementy chcesz prezentować swoim klientom w wynikach wyszukiwania, a jakie chcesz wykluczyć. To rozwiązanie szczególnie przydatne w sklepach internetowych, serwisach z ogłoszeniami i innych aplikacjach, w których klienci szukają konkretnych informacji.

W menu fasetowym masz do dyspozycji kilka rozwijanych list, w których wybierasz interesujące Cię kategorie lub cechy elementów, np. kolor, markę, cenę, rozmiar itp. Dzięki temu proces szukania jest łatwiejszy i bardziej precyzyjny. System umożliwia dodanie rodzajów obsługiwanych i wyświetlanych filtrów.

Aby dodać pole, wymagane są następujące informacje:

  • Pole -– pole z katalogu, którego dotyczy filtr;

  • Wyświetlana nazwa – nazwa, która służy do wyświetlenia nazwy filtra;

  • Funkcja

    • Suwak – używana do pól z zakresem cenowym

    • Pole zaznaczenia – standardowe pole dla większości filtrów

    • Kategorie - używane do budowania zagnieżdżonych filtrów kategorii

Przykład zdefiniowanych filtrów:

i sposób ich wyświetlania na froncie sklepu:

Każda zmiana w panelu jest natychmiastowo odwzorowana na sklepie. Możesz zarządzać kolejnością filtrów lub dodawać/usuwać nowe pola do menu fasetowego.

Sortowanie

Zakładka Sortowanie w panelu AI Smart Search V3 to narzędzie, które pozwala Ci na łatwe i precyzyjne zarządzanie sposobami sortowania produktów w Twoim sklepie.

Dzięki temu narzędziu, możesz dostosować wyniki wyszukiwania do swoich indywidualnych potrzeb, a to z kolei przekłada się na lepsze doświadczenie zakupowe dla Twoich klientów. Proces sortowania wyników jest kluczowy dla skutecznej wyszukiwarki e‑commerce, a dzięki zakładce Sortowanie w panelu AI Smart Search V3, proces ten jest nie tylko łatwy i intuicyjny, ale także niezwykle elastyczny i dostosowywalny.

Możesz ustalić tu:

  • Nazwę sortowania – unikalna nazwa sortowania, która podczas wykonywania requestu rozpoznaje rodzaj wymaganego sortowania;

  • Etykieta sortowania – etykieta służy do wyświetlenia nazwy sortowania na stronie wyników wyszukiwania;

  • Typ sortowania – pozwala na sprecyzowanie, w jaki sposób zwracane produkty mają być sortowane:

    • Domyślnie – sortowanie po scoringu produktów zwróconych z wyników sortowania

    • Według pola – wskaż pole, po jakim ma odbyć się sortowanie

    • Według skryptu – możliwość dodania własnego skryptu sortującego (wymaga konsultacji z działem IT QON)

    • Sprzedaż

    • Konwersja

    • Popularność produktu

  • Dodatkowe ustawienia – dla pól wymagających dodatkowe ustawienia tu pojawia się pole wyboru;

  • Kolejność – rodzaj sortowania – czy malejący czy rosnący;

  • Akcje – w tym polu możesz zmienić kolejność wyświetlania obiektów sortowania.

Sugestie

Funkcjonalność Sugestie pozwala na określenie sposobu generowania sugestii dla wpisywanej frazy. Dzięki niej można w prosty sposób ustawić algorytmy, które odpowiadają za wyświetlanie propozycji dopasowanych do wpisanej frazy. W efekcie, Twoi klienci łatwiej znajdą to, czego szukają, co wpłynie pozytywnie na ich zadowolenie z korzystania z Twojej strony.

W zakładce Sugestie wskaż, z jakich pól mają być generowane sugestie.

Standardowo sugestie generują się z pola suggestions. Sugestie te zwracane są z tytułu produktu, odpowiednio odfiltrowane.

Dodając dodatkowe pola do sugestii, po przetworzeniu katalogu, pola ta będą uwzględniane podczas wyświetlania w sugestiach.

Wskazując pole title i kolor dla swojego produktu, w sugestiach pojawią się właśnie te wartości.

5. Testowanie

W panelu wybierz opcje Search->Testowanie Wyników

lub, żeby testować wyszukiwarkę w sposób zbliżony do wdrożenia produkcyjnego, udostępniliśmy wersję demo, która umożliwia korzystanie ze swojej instancji wyszukiwarki po wprowadzeniu danych autoryzacyjnych, ale przed jej fizycznym wdrożeniem na sklep.

Demo znajduje się po linkiem: https://cdn.quartic.com.pl/search/v3/index.html.

Przy pierwszej wyzycie zostaniesz poproszony o podanie danych do autoryzacji:

  • customerSymbol – unikalny symbol klienta w QuarticOn, który znajdziesz w zakładce Dostęp do API -> Klucze dostępu

  • searchId – unikalny identyfikator wyszukiwarki, który znajdziesz w zakładce Instancje Wyszukiwarek

  • apiKey - unikalny klucz dostępu do API w QaurticOn, który znajdziesz w zakładce Dostęp do API -> Klucze dostępu

Po podaniu danych autoryzacyjnych, strona przeładuje się, a wyszukiwarka zacznie działać w oparciu o Twój katalog i Twoje ustawienia z panelu.

6. Opis endpointów wraz z dokumentacją i przykładami

Opis dostępnych endpointów, jest dostępny w naszej dokumentacji: SmartSearch Qon API.

7. Wdrożenie aplikacji na stronie klienta przez klienta/agencję

Aby wdrożyć aplikację AI Smart Search V3 na stronie, należy mieć przygotowaną wyszukiwarkę (instancję wyszukiwarki), a także przypisany do niej, skonfigurowany i zmapowany katalog produktowy w panelu.

Konfiguracja instancji powinna zawierać:

  • menu fasetowe

  • ustawienia sortowania – w tym wymagane: default

  • ustawioną konfigurację dostępu do API

  • ustawioną domenę

  • ustawiony klucz API (później wymagany tylko dla API)

  • ustalenie i udostępnienie strony pod SERP

Przed przystąpieniem do tych czynności, należy posiadać:

  • customerSymbol

  • searchId

  • apiKey

Wszystkie te dane dostępne są w panelu AI Smart Search.

Pobranie odpowiednich skryptów

Aby klient/agencja mogła wdrożyć aplikację u siebie, po wykonaniu powyższych punktów powinny zostać wstrzyknięte na stronę podstawowe skrypty aplikacji:

Skrypty Vue:

https://cdn.quartic.com.pl/search/v3_app/chunk-vendors.3.0.0.js

Skrypt aplikacji:

https://cdn.quartic.com.pl/search/v3_app/app.3.0.0.js

Odpowiednie dla wersji style aplikacji:

https://cdn.quartic.com.pl/search/v3_app/chunk-vendors.3.0.0.css

https://cdn.quartic.com.pl/search/v3_app/app.3.0.0.css

Przykładowy skrypt, który umożliwia pobranie powyższych elementów:

injectScript (src, defer = false) {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = src
      script.defer = defer
      script.onload = () => resolve()
      script.onerror = () => reject(new Error(`Failed to load script ${src}`))
      document.head.appendChild(script)
    })
  }
  
injectStyleSheet (href) {
    return new Promise((resolve, reject) => {
      const link = document.createElement('link')
      link.rel = 'stylesheet'
      link.href = href
      link.onload = () => resolve()
      link.onerror = () => reject(new Error(`Failed to load stylesheet ${href}`))
      document.head.appendChild(link)
    })
  }
  
  try {
        //pobierz wszystkie niezbędne pliki
      await Promise.all([
       injectScript('https://cdn.quartic.com.pl/search/v3_app/chunk-vendors.3.0.0.js', true),
       injectScript('https://cdn.quartic.com.pl/search/v3_app/app.3.0.0.js', true),
     
       injectStyleSheet(`https://cdn.quartic.com.pl/search/v3_app/chunk-vendors.3.0.0.css`),
       injectStyleSheet(`https://cdn.quartic.com.pl/search/v3_app/app.3.0.0.css`),
      ]).then(() => {
        console.log('All scripts and styles have been successfully injected')
      
      })
      
    } catch (error) {
      console.error(`Failed to inject some resources: ${error.message}`)
    }

Konfigurowanie aplikacji AI Smart Search

Aby aplikacja działała, konieczne jest przekazanie jej, na jakim koncie klienta i searchId będzie pracować. W tym celu można użyć poniższego kodu:

configureSmartSearch (customerSymbol, searchId, apiKey) {
    window.SmartSearchConfig = {
      customerSymbol: customerSymbol,
      searchId: searchId,
      apiKey: apiKey
    }
}

configureSmartSearch(CUSTOMER_SYMBOL, SEARCH_ID, API_KEY)

Uruchomienie aplikacji

Po wykonaniu powyższych czynności aplikacja będzie automatycznie szukała elementów, na których będzie próbowała uruchomić autocomplete i SERP.

  1. Autocomplete


    ​#smartsearch-autocomplete – należy umieścić pusty element div w miejscu, w którym ma pojawić się input wyszukiwarki; aplikacja zostanie uruchomiona automatycznie tam, gdzie pojawi się input.

Przykład użycia:

Efekt po inicjalizacji aplikacji:

2. SERP


​#smartsearch-serp – należy umieścić pusty element div na stronie podanej w konfiguracji w miejscu, w którym ma być zbudowana strona SERP;


Przykład:

Efekt po inicjalizacji:

8. Konfiguracja aplikacji - poprzez panel

Aplikacja umożliwia konfigurowanie jej elementów w celu modyfikacji wyświetlania poszczególnych komponentów. Konfiguracja jest możliwa w meny Search->Aplikacja Search->Ustawienia

Wybierz search (instancję searcha), dla którego chcesz skonfigurować aplikację

Konfiguracja jest podzielona na kilka głównych sekcji:

  • Ustawienie ogólne – umożliwia konfigurację podstawowych ustawień aplikacji

  • Onfocus – pozwala na sterowanie wyświetlaniem okna po kliknięciu w input

  • Autocomplete – pozwala na sterowanie wyświetlaniem okna z wynikami wyszukiwania

  • Strony Wyników – pozwala na sterowanie pełną stroną wyników wyszukiwania (SERP)

Opis poszczególnych elementów aplikacji:

Ustawienia ogólne

  • Adres przekierowania – opcja pozwala na wskazanie, na jakiej stronie znajduje się pełna strona wyników wyszukiwania

    • wartości –nazwa strony, na której będzie SERP

  • Walutay – waluta, w której wyświetlane są ceny

  • Usuń części dziesiętne – usuwanie z ceny wartości po przecinku

Onfocus

Okno onfocus pojawia się po kliknięciu w input. Wyświetla obecnie trzy sekcje:

  • Popularne frazy – czyli frazy wpisywane przez użytkowników najczęściej i agregowane do wyświetlania

  • Top produkt – promuje pierwszy z popularnych produktów

  • Produkty popularne – wyświetla produkty popularne wyświetlane na podstawie ustawionego rodzaju sortowania (domyślnie Bestsellers)

W każdej opcji możesz zdecydować czy funkcjonalność ma zostać włączona oraz zmienić domyślne parametry np. tj ustawienie ilości popularnych fraz czy produktów

  • Własne zapytania - umożliwienie ustawienie dodatkowych własnych fraz, wraz z odnośnikami, które pojawią się w kolumnie popularne

Autocomplete

Okno pojawia się po wpisaniu frazy. Wyświetla:

  • sugestie fraz – czyli frazy podobne do frazy wpisanej

  • wyniki wyszukania

SERP

Strona wyników wyszukiwania zawiera:

  • Sekcję filtrów – wyświetla ustawione w panelu filtry z sekcji menu fasetowe
    Można wskazać czy filtry mają pojawić się z boku, czy na górze wyników wyszukiwania

  • Sekcję filtrów zaznaczony – oznacza zaznaczony filtr

  • Opcje sortowania – wyświetla opcje sortowań ustawionych w panelu

  • Sekcję wyników wyszukania – produkty znalezione przez silnik w maksymalnej liczbie ustawionej w panelu

  • Sekcję paginacji

9. Konfiguracja aplikacji - poprzez pliki konfiguracyjne

Aplikacja umożliwia konfigurowanie jej elementów w celu modyfikacji wyświetlania poszczególnych komponentów. Konfiguracja jest podzielona na kilka głównych sekcji:

  • appConfiguration – umożliwia główną konfigurację globalnie dla aplikacji

  • onfocus – pozwala na sterowanie wyświetlaniem okna po kliknięciu w input

  • autocomplete – pozwala na sterowanie wyświetlaniem okna z wynikami wyszukiwania

  • serp – pozwala na sterowanie pełną stroną wyników wyszukiwania (SERP)

Opis poszczególnych elementów aplikacji:

Onfocus

Okno onfocus pojawia się po kliknięciu w input. Wyświetla obecnie trzy sekcje:

  • Popularne frazy [popularQueries] – czyli frazy wpisywane przez użytkowników najczęściej i agregowane do wyświetlania

  • Top produkt [topProduct] – promuje pierwszy z popularnych produktów

  • Produkty popularne [popularProducts] – wyświetla produkty popularne wyświetlane na podstawie ustawionego rodzaju sortowania (domyślnie Bestsellers)

Autocomplete

Okno pojawia się po wpisaniu frazy. Wyświetla:

  • sugestie fraz [suggestions] – czyli frazy podobne do frazy wpisanej

  • wyniki wyszukania

SERP

Strona wyników wyszukiwania zawiera:

  • Sekcję filtrów – wyświetla ustawione w panelu filtry z sekcji menu fasetowe

  • Sekcję filtrów zaznaczony – oznacza zaznaczony filtr

  • Opcje sortowania – wyświetla opcje sortowań ustawionych w panelu

  • Sekcję wyników wyszukania – produkty znalezione przez silnik w maksymalnej liczbie ustawionej w panelu

  • Sekcję paginacji

Opcje konfiguracji

  • appConfiguration – ogólne ustawienia aplikacji

    • redirectionUrl – opcja pozwala na wskazanie, na jakiej stronie znajduje się pełna strona wyników wyszukiwania

      • domyślnie – "/search/v3_app/index.html" – wskazania dla testowej wyszukiwarki

      • wartości – string location path name strony, na której będzie SERP

    • currency – waluta, w której wyświetlane są ceny

      • domyślnie – PLN

      • wartości – string z kodem waluty

    • removeDecimals – usuwanie z ceny wartości po przecinku

      • wartości – boolean – true|false

  • onfocus – ustawienia dla okna onfocus

    • productImageSize – rozmiar obrazka generowanych produktów popularnych

      • width – number

      • height – number

    • popularQueries – ustawienia dla fraz popularnych

      • enabled – boolean – wyświetlanie fraz popularnych

      • count – number – liczba wyświetlanych fraz

    • popularProducts – ustawienie dla produktów popularnych

      • enabled – boolen – włączanie wyświetlania popularnych produktów

      • count – number – liczba wyświetlanych produktów

      • sortName – string – nazwa sortowania, które będzie wykorzystane do wyświetlania produktów popularnych

        • domyślnie Bestsellers

    • topProduct – ustawienia dla top produktu

      • enabled – string – promowanie pierwszego produktu z produktów popularnych

      • productImageSize – rozmiar obrazka generowanego dla TopProdukt

        • width – number

        • height – number

  • autocomplete – ustawienia dla okna autocomplete

    • productImageSize – rozmiar obrazka generowanych produktów popularnych

      • width – number

      • height – number

    • suggestions – ustawienia dla sugestii

      • enabled – boolean – wyświetlanie sugestii fraz

      • count – number – liczba wyświetlanych fraz

    • results – ustawienia wyników wyszukiwania w autocomplete

      • count – number – liczba produktów wyświetlanych w oknie autocomplete

  • serp – ustawienia dla strony SERP

    • pagination – ustawienia dla paginacji

      • useDouble – boolean – wyświetlanie paginacji na górze wyników wyszukiwania

    • backToTopButton – ustawienia dla przycisku powrotu na górę

      • enabled – boolean – wyświetlanie przycisku

    • markedFilters – ustawienia dla wyświetlania zaznaczonych filtrów

      • enabled – boolean – wyświetlanie zaznaczonych filtrów w oddzielnej sekcji

    • productImageSize – rozmiar obrazka generowanych produktów

      • width – number

      • height – number

    • gridSettings – ustawienia dla gridu

      • column – number – ustawienia dla poszczególnych gridów, liczba produktów wyświeltanych w kolumnie

        • smallDevice – smartfony

        • mediumDevice – tablety i małe laptopy

        • largeDevice – duże laptopy

        • extraLargeDevice – monitory full hd i wzwyż

    • customComponents – szablon komponentów

Poniżej znajduje się domyślny kod konfiguracji:

{
  "appConfiguration": {
    "redirectionUrl": "/search/v3_app/index.html",
    "currency": "PLN",
    "removeDecimals": false
  },
  "onfocus": {
    "productImageSize": {
      "width": 300,
      "height": 300
    },
    "popularQueries": {
      "enabled": true,
      "count": 5
    },
    "popularProducts": {
      "enabled": true,
      "count": 7,
      "sortName": "bestsellers"
    },
    "topProduct": {
      "enabled": true,
      "productImageSize": {
        "width": 300,
        "height": 300
      }
    }
  },
  "autocomplete": {
    "productImageSize": {
      "width": 300,
      "height": 300
    },
    "suggestions": {
      "enabled": true,
      "count": 5
    },
    "results": {
      "count": 6
    }
  },
  "serp": {
    "pagination": {
      "useDouble": false
    },
    "backToTopButton": {
      "enabled": true
    },
    "markedFilters": {
      "enabled": true
    },
    "productImageSize": {
      "width": 300,
      "height": 300
    },
    "gridSettings": {
      "column": {
        "smallDevice": 1,
        "mediumDevice": 2,
        "largeDevice": 3,
        "extraLargeDevice": 4
      }
    },
    "customComponents": {
      "ProductCard": "",
      "AutocompleteSingleResult": "",
      "SinglePopularProduct": "",
      "TopProduct": ""
    }
  }
}

10. Silnik szablonów obsługujący wyświetlanie danych produktowych

Dla potrzeb aplikacji i możliwości ustawiania szablonów dla poszczególnych komponentów powstał silnik, który to umożliwia.

Szablony można zdefiniować poprzez panel lub bezpośrednio w pliku konfiguracyjnym aplikacji:
Poprzez panel, wejdź na Search->Aplikacja Search->Ustawienia->Ustawienia strony wyników.

Wstaw własny kod HTML dla odpowiedniego elementu :

Przykład definicji kodu HTML wraz z makrami znajdziesz poniżej
​

Wariant występuje zawsze, gdy produkt ich nie ma, to jest to pierwszy element zwracany z endpointu.

Wstrzykiwanie szablonów z poziomu kodu

Wstrzykiwanie szablonów możliwe jest dla poniższych komponentów (lista będzie rozwijana):

  • ProductCard – komponent odpowiadający za wyświetlenie produktu na stronie SERP

  • AutocompleteSingleResult – komponent odpowiadający za wyświetlenie produktu na autocomplete

  • SinglePopularProduct – komponent odpowiadający za wyświetlenie popularnego produktu na onfocus

  • TopProduct – komponent odpowiadający za wyświetlenie top product na onfocus

Przykłady użycia:

// 1
"customComponents": {
  "ProductCard": "<div  class=\"product-element p-2\">\n    <div class=\"h-100 shadow-sm rounded-3 \" style=\"position: relative\">\n        <div class=\"d-flex align-items-center p-3\" style=\"min-height: 200px\">\n            <img class=\"rounded mx-auto d-block card-img-top img-fluid\" src=\"{{image_link}}\" alt=\"{{title}}\" />\n        </div>\n        <div class=\"card-body p-2 position-relative\">\n            <div class=\"text-center\">\n                <h6 class=\"fw-normal\">{{title}}</h6>\n                <h6 class=\"fw-normal\">{{price}}</h6>\n                <h6 class=\"fw-normal {{hasOldPrice}}\">Stara cena: {{oldPrice}}</h6>\n            </div>\n            <div class=\"text-center\">\n                <h6 class=\"fw-normal {{hasBrand}}\">brand: {{brand}}</h6>\n                <h6 class=\"fw-normal  {{hasGender}}\">gender: {{gender}}</h6>\n                <h6 class=\"fw-normal {{hasColor}}\">color: {{color}}</h6>\n                <h6 class=\"fw-normal\"> <b>Dostępne rozmiary:</b></h6>\n                \n                <div>\n                {{#each variant}}\n                    <span style=\"height: 40px; width: 40px; border: 1px solid black; display: inline-block;\">{{size}}</span>\n                    {{/each}}\n                </div>\n                \n            </div>\n            <div class=\"text-center\">\n                <a class=\"stretched-link\" href=\"{{link}}\" target=\"_blank\"></a>\n            </div>\n        </div>\n    </div>\n</div>"
}


// 2
 "customComponents": {
  "ProductCard": "<div class=\"product_box product_39509 wino  full \">\n          <div class=\"img\">\n                  <a class=\"qon-click-link listened\" title=\"{{title}}\" href=\"{{link}}\" >\n                    <img alt=\"{{title}}\" class=\"img_large wp-post-image lazyloaded\" src=\"{{image_link}}\">\n                  </a>\n                </div>\n            <div class=\"data\">\n               <div class=\"data_box\">\n                  <div class=\"promowane\">\n                    <div class=\"filter\">\n                    </div>\n                  </div>\n                  \n                  <h2><a class=\"title\" title=\"{{title}}\" href=\"{{link}}\" >{{title}}</a></h2>\n                  <div class=\"filters\">\n                    <div class=\"filter \">\n                      <span class=\"{{hasSmak}}\">\n                        <a title=\"\"\n                          href=\"#\">{{smak}}</a>\n                        </span>\n                      </div>\n\n                      <div class=\"filter\">\n                        <span class=\"{{hasStyl}}\">\n                          <a title=\"\" href=\"#\">{{styl}}</a>\n                        </span>\n                      </div>\n                       <div class=\"filter\">\n                         <span class=\"{{hasKolor}}\">\n                           <a title=\"\" href=\"#\">{{kolor}}</a>\n                         </span>\n                       </div>\n                        <div class=\"filter\">\n                          <span class=\"{{hasKraj}}\">\n                            <a title=\"\" href=\"#\">{{kraj}}</a>\n                          </span>\n                        </div>\n                    \n                  </div>\n                      \n                      <div class=\"rating_block\">\n                          <div class=\"avg_count avg_count_zero\">\n                            <a class=\"qon-click-link listened\" href=\"{{link}}\">\n                              <span class=\"avg\"><i class=\"mdi mdi-star\"></i>{{rating_avg}}</span>\n                              <span class=\"count\">{{rating_count}} OCENY</span>\n                            </a>\n                          </div>\n\n                          <div class=\"avg_count avg_count_zero\">\n                            <a class=\"qon-click-link listened\" title=\"{{title}}\" href=\"{{link}}\">\n                              <span class=\"avg\"><i class=\"mdi mdi-chat\"></i></span>\n                              <span class=\"count\">{{comment_count}} RECENZJI</span>\n                            </a>\n                          </div>\n                        </div>\n                      \n                     \n                     <div class=\"excerpt\">{{description}}</div>\n                  </div>\n                  \n                  <div class=\"cart_box\">\n                  <div class=\"stock\" style=\"text-align: center;\">\n                  <span class=\"mylabel\">Dostępność</span>:&nbsp;<strong>\n                      <span class=\"nazwa_dostepnosci\">{{stock}} szt.</span></strong> \n\n                      \n                  </div>\n                  <div class=\"addtocart\">\n                      <form action=\"/wp-admin/admin-ajax.php?action=shop_cart\" method=\"POST\">\n                        <div class=\"containerPrice\">\n                          <div class=\"price\">\n                            <span class=\"price\">{{price}}</span></div>\n                          <input type=\"hidden\" class=\"produkt\" name=\"dodaj\" value=\"{{id}}\">\n                          <input type=\"hidden\" class=\"max\" name=\"max\" value=\"306\">\n                          <input type=\"hidden\" class=\"produkt_obrazek\" value=\"{{image}}\">\n                          <input type=\"hidden\" class=\"produkt_nazwa\" value=\"{{title}}\">\n                          <div class=\"quantity\">\n                              <div class=\"input-group minus_plus\">\n                                <span class=\"input-group-btn\">\n                                <button type=\"button\" class=\"btn btn-default btn-number\" data-type=\"minus\">\n                                <span class=\"glyphicon glyphicon-minus\"></span>\n                                </button>\n                                </span>\n                                <input autocomplete=\"off\" class=\"form-control ile input-number\" name=\"ile\" type=\"text\" value=\"1\">\n                                <span class=\"input-group-btn\">\n                                <button type=\"button\" class=\"btn btn-default btn-number\" data-type=\"plus\">\n                                <span class=\"glyphicon glyphicon-plus\"></span>\n                                </button>\n                                </span>\n                              </div>\n                            </div>\n                        </div>\n                        <div class=\"clearfix\"></div>\n                        <div class=\"text-center\">\n                          <button class=\"btn btn-primary btn-block add_to_cart add_to_cart_{{id}} qon-click-link listened\" data-productid=\"{{id}}\" type=\"submit\" >Do koszyka</button></div>\n                      </form>\n                  </div>\n                  \n              </div>\n                <div class=\"ulubione\" data-id=\"{{id}}\">\n               <a class=\"qon-click-link listened\" title=\"Dodaj do ulubionych\" data-id=\"{{{id}}}\" href=\"/moje-konto?ulubione={{id}}\">\n                 <i class=\"mdi mdi-cards-heart-outline\"></i>\n               </a>\n             </div>\n              <div class=\"clearfix\"></div>\n               </div>\n           </div>"
}

Makra

Makra umożliwiają wyświetlenie i zarządzanie wyświetlaniem wartości produktów/wariantów w wybranych komponentach. Możliwe makra do zastosowania:

  • makro zmiennej wariantu

    • konstrukcja

      • {{nazwa_zmiennej}} – takie makro pozwala wyświetlić w strukturze html wartość zmiennej

    • przykłady użycia

      <h6 class="fw-normal">Ilość komentarzy: {{comment_count}}</h6> <h6 class=" fw-normal">{{smak}}</h6> <h6 class=" fw-normal">Id produktu: {{id}}</h6> <h6 class="fw-normal">{{styl}}</h6> <h6 class="fw-normal">{{okazja}}</h6>

  • dodatkowe makra

    • {{discount}} – oblicza promocję produktu na podstawie price i old_price

    • {{image_link_cdn}} – zwraca zdjęcie produktu przetworzone przez system QuarticOn

    • {{price_formatted}} – zwraca price w formacie ustawionym w konfiguracji

    • {{old_price_formatted}} – zwraca old_price w formacie ustawionym w konfiguracji

    • {{omnibus_price_formatted}} – zwraca ominubus_price w formacie ustawionym w konfiguracji

    • {{id}} – id produktu, które nie występuje

  • wyświetlanie lub ukrywanie elementu html dla każdej zmiennej dostępnej w wariancie – jeśli w wariancie występuje jakaś opcja, to aby ukryć lub wyświetlić element w zależności od niej, skonstuowane zostało makro, które zrobi to automatycznie

    • konstrukcja

      • {{hasNazwa_elementu}} – czyli słowo has i Nazwa_elementu z dużej litery

    • przykłady użycia

      <h6 class="fw-normal {{hasComment_count}">Ilość komentarzy: {{comment_count}}</h6> <h6 class=" fw-normal {{hasSmak}}">{{smak}}</h6> <h6 class=" fw-normal {{hasId}}">Id produktu: {{id}}</h6> <h6 class="fw-normal {{hasStyl}}">{{styl}}</h6> <h6 class="fw-normal {{hasOkazja}}">{{okazja}}</h6>

  • pętla po wariantach produktowych aby wyświetlić opcję wariantu

    • konstrukcja pentli each

      {{#each variant}} {{nazwa_klucza}} {{/each}}

    • przykład użycia

      {{#each variant}} <span>{{size}}</span> {{/each}}

  • funkcja warunkowa if

    • konstrukcja

      {{#if nazwa_klucza}} // {{/if}}

    • przykład użycia

      {{#if old_price}} <h6 class="fw-normal text-info {{hasOmnibus_price}}">Najniższa cena z 30 dni: {{omnibus_price}}</h6> {{/if}}

  • funkcja warunkowa if | else

    • możliwe warunki

      • ===

      • !==

      • ==

      • !=

      • >

      • >=

      • <

      • <=

    • konstrukcja

      {{#if nazwa_klucza === 'warunek'}} // gdy warunek spełniony {{else}} // gdy warunek niespełniony {{/if}}

    • przykład użycia – wyświetlanie ceny w zależności od tego, czy istnieje stara cena

      {{#if availability === 'out_of_stock'}} <h6 class="fw-normal text-danger ">Dostępność: Niedostępny</h6> {{else}} <h6 class="fw-normal text-success ">Dostępność: Dostępny</h6> {{/if}}

Przykłady:

  • VisionExpress
    ​

  • Marek Kondrat
    ​


    Przykłady konfiguracji:

{
  "appConfiguration": {
    "redirectionUrl": "/wyszukiwanie",
    "currency": "PLN",
    "removeDecimals": false
  },
  "autocomplete": {
    "productImageSize": {
      "width": 250,
      "height": 250
    },
    "suggestions": {
      "enabled": true,
      "count": 5
    },
    "results": {
      "count": 6
    }
  },
  "onfocus": {
    "productImageSize": {
      "width": 100,
      "height": 100
    },
    "popularQueries": {
      "enabled": true,
      "count": 5
    },
    "popularProducts": {
      "enabled": true,
      "count": 7,
      "sortName": "bestsellers"
    },
    "topProduct": {
      "enabled": true,
      "productImageSize": {
        "width": 400,
        "height": 400
      }
    }
  },
  "serp": {
    "pagination": {
      "useDouble": false
    },
    "backToTopButton": {
      "enabled": true
    },
    "markedFilters": {
      "enabled": true
    },
    "productImageSize": {
      "width": 300,
      "height": 300
    },
    "gridSettings": {
      "column": {
        "smallDevice": 1,
        "mediumDevice": 1,
        "largeDevice": 1,
        "extraLargeDevice": 1
      }
    },
    "customComponents": {
      "ProductCard": "<div class=\"product_box product_39509 wino  full \">\n          <div class=\"img\">\n                  <a class=\"qon-click-link listened\" title=\"{{title}}\" href=\"{{link}}\" >\n                    <img alt=\"{{title}}\" class=\"img_large wp-post-image lazyloaded\" src=\"{{image_link}}\">\n                  </a>\n                </div>\n            <div class=\"data\">\n               <div class=\"data_box\">\n                  <div class=\"promowane\">\n                    <div class=\"filter\">\n                    </div>\n                  </div>\n                  \n                  <h2><a class=\"title\" title=\"{{title}}\" href=\"{{link}}\" >{{title}}</a></h2>\n                  <div class=\"filters\">\n                    <div class=\"filter \">\n                      <span class=\"{{hasSmak}}\">\n                        <a title=\"\"\n                          href=\"#\">{{smak}}</a>\n                        </span>\n                      </div>\n\n                      <div class=\"filter\">\n                        <span class=\"{{hasStyl}}\">\n                          <a title=\"\" href=\"#\">{{styl}}</a>\n                        </span>\n                      </div>\n                       <div class=\"filter\">\n                         <span class=\"{{hasKolor}}\">\n                           <a title=\"\" href=\"#\">{{kolor}}</a>\n                         </span>\n                       </div>\n                        <div class=\"filter\">\n                          <span class=\"{{hasKraj}}\">\n                            <a title=\"\" href=\"#\">{{kraj}}</a>\n                          </span>\n                        </div>\n                    \n                  </div>\n                      \n                      <div class=\"rating_block\">\n                          <div class=\"avg_count avg_count_zero\">\n                            <a class=\"qon-click-link listened\" href=\"{{link}}\">\n                              <span class=\"avg\"><i class=\"mdi mdi-star\"></i>{{rating_avg}}</span>\n                              <span class=\"count\">{{rating_count}} OCENY</span>\n                            </a>\n                          </div>\n\n                          <div class=\"avg_count avg_count_zero\">\n                            <a class=\"qon-click-link listened\" title=\"{{title}}\" href=\"{{link}}\">\n                              <span class=\"avg\"><i class=\"mdi mdi-chat\"></i></span>\n                              <span class=\"count\">{{comment_count}} RECENZJI</span>\n                            </a>\n                          </div>\n                        </div>\n                      \n                     \n                     <div class=\"excerpt\">{{description}}</div>\n                  </div>\n                  \n                  <div class=\"cart_box\">\n                  <div class=\"stock\" style=\"text-align: center;\">\n                  <span class=\"mylabel\">Dostępność</span>:&nbsp;<strong>\n                      <span class=\"nazwa_dostepnosci\">{{stock}} szt.</span></strong> \n\n                      \n                  </div>\n                  <div class=\"addtocart\">\n                      <form action=\"/wp-admin/admin-ajax.php?action=shop_cart\" method=\"POST\">\n                        <div class=\"containerPrice\">\n                          <div class=\"price\">\n                            <span class=\"price\">{{price}}</span></div>\n                          <input type=\"hidden\" class=\"produkt\" name=\"dodaj\" value=\"{{id}}\">\n                          <input type=\"hidden\" class=\"max\" name=\"max\" value=\"306\">\n                          <input type=\"hidden\" class=\"produkt_obrazek\" value=\"{{image}}\">\n                          <input type=\"hidden\" class=\"produkt_nazwa\" value=\"{{title}}\">\n                          <div class=\"quantity\">\n                              <div class=\"input-group minus_plus\">\n                                <span class=\"input-group-btn\">\n                                <button type=\"button\" class=\"btn btn-default btn-number\" data-type=\"minus\">\n                                <span class=\"glyphicon glyphicon-minus\"></span>\n                                </button>\n                                </span>\n                                <input autocomplete=\"off\" class=\"form-control ile input-number\" name=\"ile\" type=\"text\" value=\"1\">\n                                <span class=\"input-group-btn\">\n                                <button type=\"button\" class=\"btn btn-default btn-number\" data-type=\"plus\">\n                                <span class=\"glyphicon glyphicon-plus\"></span>\n                                </button>\n                                </span>\n                              </div>\n                            </div>\n                        </div>\n                        <div class=\"clearfix\"></div>\n                        <div class=\"text-center\">\n                          <button class=\"btn btn-primary btn-block add_to_cart add_to_cart_{{id}} qon-click-link listened\" data-productid=\"{{id}}\" type=\"submit\" >Do koszyka</button></div>\n                      </form>\n                  </div>\n                  \n              </div>\n                <div class=\"ulubione\" data-id=\"{{id}}\">\n               <a class=\"qon-click-link listened\" title=\"Dodaj do ulubionych\" data-id=\"{{{id}}}\" href=\"/moje-konto?ulubione={{id}}\">\n                 <i class=\"mdi mdi-cards-heart-outline\"></i>\n               </a>\n             </div>\n              <div class=\"clearfix\"></div>\n               </div>\n           </div>"
    }
  }
}

{
  "appConfiguration": {
    "redirectionUrl": "/search/v3_app/index.html"
  },
  "autocomplete": {
    "suggestions": {
      "enabled": true,
      "count": 5
    },
    "results": {
      "count": 6
    }
  },
  "onfocus": {
    "popularQueries": {
      "enabled": true,
      "count": 5
    },
    "popularProducts": {
      "enabled": true,
      "count": 7,
      "sortName": "bestsellers"
    },
    "topProduct": {
      "enabled": true
    }
  },
  "serp": {
    "pagination": {
      "useDouble": false
    },
    "backToTopButton": {
      "enabled": true
    },
    "markedFilters": {
      "enabled": true
    },
    "customComponents": {
      "ProductCard": "<div  class=\"product-element p-2\">\n    <div class=\"h-100 shadow-sm rounded-3 \" style=\"position: relative\">\n        <div class=\"d-flex align-items-center p-3\" style=\"min-height: 200px\">\n            <img class=\"rounded mx-auto d-block card-img-top img-fluid\" src=\"{{image_link}}\" alt=\"{{title}}\" />\n        </div>\n        <div class=\"card-body p-2 position-relative\">\n            <div class=\"text-center\">\n                <h6 class=\"fw-normal\">{{title}}</h6>\n                <h6 class=\"fw-normal\">{{price}}</h6>\n                <h6 class=\"fw-normal {{hasOldPrice}}\">Stara cena: {{oldPrice}}</h6>\n            </div>\n            <div class=\"text-center\">\n                <h6 class=\"fw-normal {{hasBrand}}\">brand: {{brand}}</h6>\n                <h6 class=\"fw-normal  {{hasGender}}\">gender: {{gender}}</h6>\n                <h6 class=\"fw-normal {{hasColor}}\">color: {{color}}</h6>\n                <h6 class=\"fw-normal\"> <b>Dostępne rozmiary:</b></h6>\n                \n                <div>\n                {{#each variant}}\n                    <span style=\"height: 40px; width: 40px; border: 1px solid black; display: inline-block;\">{{size}}</span>\n                    {{/each}}\n                </div>\n                \n            </div>\n            <div class=\"text-center\">\n                <a class=\"stretched-link\" href=\"{{link}}\" target=\"_blank\"></a>\n            </div>\n        </div>\n    </div>\n</div>"
    }
  }
}

Powyższą instrukcję opisaliśmy krok po kroku tak, by proces wdrożenia naszej wyszukiwarki AI Smart Search był dla Ciebie działaniem bezstresowym. Mamy nadzieję, że taką rolę właśnie spełniło.

Jeśli masz jakiekolwiek wątpliwości/uwagi co do poszczególnych kroków lub potrzebujesz pomocy w procesie, daj znać swojemu opiekunowi biznesowemu, który udzieli Ci wsparcia.

Czy to odpowiedziało na twoje pytanie?