Wprowadzenie do instrukcji AI Smart Search 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:
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 Smart Search V3, a następnie do zakładki Zarządzanie katalogami.
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
Grupując produkty za pomocą atrybutu identyfikator grupy produktów |
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:
|
Aby utworzyć nową instancję dla obecnej wyszukiwarki:
1. Przejdź do zakładki Zarządzanie instancjami, 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:
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.
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 Ustawienia, a następnie kliknij w 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 Ustawienia, a następnie kliknij w 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 AI Smart Search V3. 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.
Dodatkowo, w tej zakładce możliwe jest też określenie, jakie rodzaje wyszukiwania mają być stosowane dla poszczególnych pól, co daje jeszcze większą kontrolę nad wynikami wyszukiwania:
Multimatch – to metoda wyszukiwania, która pozwala na uwzględnienie wielu kryteriów wyszukiwania, takich jak treść, tytuł, opis i wiele innych. Dzięki temu Twoi klienci mają większe szanse na znalezienie poszukiwanych produktów. Metoda ta jest szczególnie polecana jest dla sklepów internetowych, które oferują szeroki wachlarz produktów, a klienci mogą szukać produktów po różnych kryteriach.
Exactsearch – to metoda wyszukiwania, która skupia się na dokładnym dopasowaniu wyszukiwanego wyrażenia do nazwy produktu lub jego cech. Dzięki temu Twoi klienci mają większą pewność, że znajdą dokładnie to, czego szukają, co jest szczególnie ważne dla sklepów internetowych, które oferują produkty o specjalnych cechach lub o unikalnych nazwach.
Fullmatch – to metoda wyszukiwania, która wymaga dokładnego dopasowania wszystkich elementów wyszukiwanego wyrażenia do nazwy produktu. Ta metoda jest idealna dla sklepów internetowych, które oferują produkty o unikalnych nazwach lub skrótach, a klienci wiedzą, czego dokładnie szukają.
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
Aby umożliwić testowanie wyszukiwarki 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. Budowa frontu aplikacji krok po kroku
Poniżej przedstawiamy nazewnictwo poszczególnych elementów wyszukiwarki oraz czynności, jakie należy wykonać podczas implementacji ich na swojej stronie.
Onfocus
Onfocus to okno, które pojawia się po kliknięciu w pole wyszukiwarki, jeszcze zanim użytkownik cokolwiek w nie wpisze.
Onfocus zawiera najczęściej Popularny frazy wpisywane przez użytkowników, Popularne produkty, oraz Ostatnio wyszukiwane.
Popularne frazy to zaagregowane frazy wpisywane przez użytkowników sklepu (liczbę w DEMO wyświetlamy w celach reprezentacyjnych). Podpowiadają co użytkownicy wyszukują oraz jakie są obecne trendy w sklepie.
Popularne produkty to produkty z logiką Twojego wyboru. Mogą to być:
Najczęściej oglądane produkty
Najczęściej klikane produkty
Najczęściej kupowane produkty
Dane agregowane mogą być do poniższych okresów:
z ostatniego dnia
z ostatniego tygodnia
z ostatnich dwóch tygodni
z ostatniego miesiąca
Sekcja Ostatnio Wyszukiwane jest w trakcie implementacji.
Innym przykładem układu okna na onfocus jest układ 3-modułowy, który zawiera:
Lewy moduł Poopularne frazy Popularne kategorie
Środkowy moduł Bestseller
Prawy moduł |
Wdrożenie onfocus
Przykładowy kod wykorzystany w naszym DEMO (patrz rozdział 8. Przykłady kodu JavaScript dla integracji SmartSearch), implementuje onfocus na inpucie wyszukiwarki wraz z popularnymi frazami i popularnymi produktami:
//Skonfiguruj Instancję, dodają customerSymbol, Search Id, oraz Api Key //Skonfiguruj Instancję, dodają customerSymbol, Search Id, oraz Api Key
const SmartSearchConfiguration = new SmartSearch('CUSTOMER_SYMBOL', 'SEARCH_ID', 'API_KEY')
// na stronach, na których chcesz uruchomić autocomplete:
new Autocomplete(SmartSearchConfiguration)
.setSerpUrl('/serp.html'') // wskaż na jakiej stronie zaimplementujesz serp
.init()
Implementacja krok po kroku
Aby samodzielnie zaimplementować onfocus, wykonaj poniższe czynności:
Dodaj input (pole) wyszukiwarki
Dodaj zdarzenie, które po kliknięciu w input, wyświetli okno onfocus
Skorzystaj z endpointów, aby pobrać dane i dodaj je do okna onfocus:
Popularne frazy
endpoint zwracający popularne frazy to:
https://orion.quarticon.com/searchapi/CUSTOMER_SYMBOL/SEARCH_ID/queries/popularprzykład w JavaScript (przykład nie posiada uzupełnionych danych autoryzacyjnych):
var data = new FormData();
var xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.addEventListener("readystatechange", function() {
if(this.readyState === 4) {
console.log(this.responseText);
}
});
xhr.open("GET", "https://orion.quarticon.com/searchapi/CUSTOMER_SYMBOL/SEARCH_ID/queries/popular");
xhr.setRequestHeader("Api-key", "API-KEY");
xhr.send(data);
endpoint zwróci dane w formacie:
{
"meta": {
"version": "1.0",
"requestId": "bd8a6370a686b516c5b7c86beb99ef65",
"debugKey": "12bdbd54-c427-4490-aff6-588adc92d6d4"
},
"queries": [
{
"query": "bluza niebieska",
"count": 529
},
{
"query": "bluza palto",
"count": 420
},
{
"query": "niebieski bluza z kapturem",
"count": 419
}
]
}więcej o endpointach znajdziesz w naszej dokumentacji: SmartSearch Qon API
Popularne produkty
endpoint zwracający produkty to
https://orion.quarticon.com/searchapi/CUSTOMER_SYMBOL/SEARCH_ID/resultsaby zwrócić produkty popularne należy przekazać w paylod typ sortowania, np:
w panelu ustawione jest sortowanie mostClicked, czyli najczęściej klikane produkty z tygodnia
dla tego typu sortowania należy w payload requestu przekazać mostClicked:
s=mostClickedprzykład w JavaScript (przykład nie posiada uzupełnionych danych autoryzacyjnych):
var data = new FormData();
var xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.addEventListener("readystatechange", function() {
if(this.readyState === 4) {
console.log(this.responseText);
}
});
xhr.open("GET", "https://orion.quarticon.com/searchapi/CUSTOMER_SYMBOL/SEARCH_ID/results?s=mostClicked");
xhr.setRequestHeader("Api-key", "API_KEY");
xhr.send(data);
endpoint zwróci dane w formacie:
{
"meta": {
"version": "1.0",
"total": 8354,
"totalPage": 349,
"timedOut": false,
"uid": null,
"query": "",
"page": 0,
"filters": [],
"price": {
"min": null,
"max": null
},
"sort": "mostClicked",
"requestId": "b63d86328191d8c51c958b02c3e68519",
"debugKey": "26f5778f-51b8-424d-9a0b-b73becb775ac"
},
"links": {},
"products": [
{
"id": "besfj007c1",
"price": 299,
"link": "https://page.pl/belutti-sfj-007-c1.html",
"link_click": "http://orion.quarticon.com/restapi/beb3190e764bb95d/search/59c90df0ddd36c5fc38c772fdc48ab36/redirect/besfj007c1/b63d86328191d8c51c958b02c3e68519/aHR0cHM6Ly9rb2Rhbm8ucGwvYmVsdXR0aS1zZmotMDA3LWMxLmh0bWw=",
"title": "Belutti SFJ 007 C1",
"variants": [
{
"image_link": "http://page.pl/media/catalog/product/8/0/8049_1_2.jpg",
"link": "https://page.pl/belutti-sfj-007-c1.html",
"product_details_material": "plastikowe",
"availability": "In Stock",
"title": "Belutti SFJ 007 C1",
"condition": "new",
"product_details_typ_produktu": "Okulary przeciwsłoneczne",
"product_details_ksztalt": "Owalne",
"price": 299,
"product_details_rodzaj": "pełne",
"product_details_kolor": [
"czarny",
"brązowy"
],
"suggestions": [
"belutti",
"sfj"
],
"categories": [
"Okulary",
"Okulary przeciwsłoneczne"
],
"brand": "Belutti"
}
]
}
]
}więcej o endpointach znajdziesz w naszej dokumentacji: SmartSearch Qon API
Ostatnio wyszukiwane (w trakcie implementacji, kroki zostaną uzupełnione).
Autocomplete
Autocomplete to swego rodzaju pop-up, który wyświetla się po wpisaniu frazy w pole wyszukiwarki. Autocomplete zawiera najczęściej podpowiedzi fraz (tzw. sugestie) oraz produkty w formie mini listy. Zawiera też przycisk, który przekierowuje do pełnej listy wyników wyszukiwania SERP.
Innym przykładem układu okna na onfocus jest układ 3-modułowy, który zawiera:
Lewy moduł
Bestseller z wyszukanych produktów
Prawy moduł Wyszukane produkty |
Wdrożenie autocomplete
Przykładowy kod wykorzystany w naszym DEMO (patrz rozdział 8. Przykłady kodu JavaScript dla integracji SmartSearch) implementuje Autocomplete na inpucie wyszukiwarki, jak na screenie wyżej.
//Skonfiguruj Instancję, dodają customerSymbol, Search Id, oraz Api Key
const SmartSearchConfiguration = new SmartSearch('CUSTOMER_SYMBOL', 'SEARCH_ID', 'API_KEY')
// na stronach, na których chcesz uruchomić autocomplete:
new Autocomplete(SmartSearchConfiguration)
.setSerpUrl('/serp.html'') // wskaż na jakiej stronie zaimplementujesz serp
.init()
Implementacja krok po kroku
Aby samodzielnie zaimplementować Autocomplete, wykonaj poniższe czynności:
Dodaj input wyszukiwarki (o ile nie został dodany w poprzednim punkcie).
Dodaj zdarzenie, które po wpisaniu frazy w input (odpowiednio długiej) wykona odpowiednie zapytania:
pobierze Sugestie dla wpisanej frazy
endpoint
https://orion.quarticon.com/searchapi/CUSTOMER_SYMBOL/SEARCH_ID/suggestionsprzykładowy kod JavaScript dla requestu POST:
var data = new FormData();
data.append("q", "czerwona");
var xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.addEventListener("readystatechange", function() {
if(this.readyState === 4) {
console.log(this.responseText);
}
});
xhr.open("POST", "https://orion.quarticon.com/searchapi/CUSTOMER_SYMBOL/SEARCH_ID/suggestions");
xhr.setRequestHeader("Api-key", "API_KEY");
xhr.send(data);endpoint zwróci dane w formacie
{
"meta": {
"version": "1.0",
"total": 141,
"sort": "default",
"requestId": "0b4c23ad4034cc8de4837778a46b65a1",
"query": "czerwona",
"debugKey": "28b68d25-3d36-44d6-81e6-d1493864a000"
},
"suggestions": [
{
"czerwona czapka": {
"count": 36
},
"czerwona zimowa": {
"count": 16
},
"czerwona new": {
"count": 12
},
"czerwona blat": {
"count": 11
},
"czerwona era": {
"count": 9
},
"czerwona 9forty": {
"count": 8
},
"czerwona bluza": {
"count": 8
},
"czerwona logo": {
"count": 8
},
"czerwona okulary": {
"count": 8
}
}
]
}
pobierze wyniki wyszukania dla wpisanej frazy
endpoint zwracający produkty to
https://orion.quarticon.com/searchapi/CUSTOMER_SYMBOL/SEARCH_ID/resultsendpoint zwróci dane w formacie:
{
"meta": {
"version": "1.0",
"total": 8354,
"totalPage": 349,
"timedOut": false,
"uid": null,
"query": "",
"page": 0,
"filters": [],
"price": {
"min": null,
"max": null
},
"sort": "default",
"requestId": "b63d86328191d8c51c958b02c3e68519",
"debugKey": "26f5778f-51b8-424d-9a0b-b73becb775ac"
},
"links": {
"},
"products": [
{
"id": "15743",
"price": 39,
"link": "https://page.pl/czapka-metoda-fullcap",
"link_click": "http://orion.quarticon.com/restapi/CUSTOMER_SYMBOL/search/SEARCH_ID/redirect/15743/377938fd3c3ac6826370666e4915c735/aHR0cHM6Ly9zZWxlY3RzaG9wLnBsL2N6YXBrYS1tZXRvZGEtZnVsbGNhcA==",
"title": "Czapka Metoda Sport Fullcap",
"variants": [
{
"image_link": "https://page.pl/modpub/product/042015/15743-13cbe4.jpg",
"color": "Czerwony/bordowy",
"size": "XL",
"price": 39,
"link": "https://page.pl/czapka-metoda-fullcap",
"suggestions": [
"czapka",
"metoda",
"sport",
"fullcap"
],
"categories": [
"Czapki",
"Czapki z daszkiem"
],
"availability": "in stock",
"title": "Czapka Metoda Sport Fullcap",
"brand": "Metoda Sport"
}
]
}
]
}więcej o endpointach znajdziesz w naszej dokumentacji: SmartSearch Qon API
System wyświetli wyniki wyszukiwania i sugestie w Autocomplete.
Następnie dodaj:
przycisk, który przekieruje użytkownika na pełną stronę wyników wyszukiwania (SERP)
zdarzenie, które przekierują użytkownika na stronę SERP również po kliknięciu ENTER
Przykładowy Autocomplete może wyglądać tak:
SERP, czyli strona pełnych wyników wyszukiwania
SERP to strona, na której użytkownik widzi wszystkie wyniki wyszukiwania wraz z możliwością ich sortowania, filtrowania czy przejścia pomiędzy kolejnymi stronami wyników wyszukiwania.
Przykładowy kod wykorzystany w naszym DEMO (patrz rozdział 8. Przykłady kodu JavaScript dla integracji SmartSearch), który implementuje SERP:
//Skonfiguruj Instancję, dodając customerSymbol, Search Id, oraz Api Key
const SmartSearchConfiguration = new SmartSearch('CUSTOMER_SYMBOL', 'SEARCH_ID', 'API_KEY')
// na stronach, na których chcesz uruchomić serp
new Serp(SmartSearchConfiguration)
.init()
Implementacja krok po kroku:
Aby samodzielnie zaimplementować SERP, należy skorzystać z odpowiednich endpointów:
Endpoint Results, który zwróci wyniki wyszukania dla query:
https://orion.quarticon.com/searchapi/CUSTOMER_SYMBOL/SEARCH_ID/resultsEndpoint ten odpowie w poniższy sposób
{
"meta": {
"version": "1.0",
"total": 2,
"totalPage": 1,
"timedOut": false,
"uid": null,
"query": "czerwona czapka",
"page": 0,
"filters": {},
"price": {},
"sort": "default",
"requestId": "e3d8caab120fb5b42d5c500d7e4efedc",
"debugKey": "8b318a5c-6549-4d75-ab8c-176d1a8c84fe"
},
"links": {
},
"products": [
{
"id": "271895",
"price": 51.9,
"link": "https://page.pl/czapka-palto-label-maroon",
"link_click": "http://orion.quarticon.com/restapi/CUSTOMER_SYMBOL/search/SEARCH_ID/redirect/271895/e3d8caab120fb5b42d5c500d7e4efedc/aHR0cHM6Ly9zZWxlY3RzaG9wLnBsL2N6YXBrYS1wYWx0by1sYWJlbC1tYXJvb24=",
"title": "Czapka Zimowa Palto Label",
"variants": [
{
"image_link": "https://page.pl/modpub/product/112021/271895-3a8881.jpg",
"color": "Czerwony/bordowy",
"size": "UNI",
"price": 51.9,
"link": "https://page.pl/czapka-palto-label-maroon",
"suggestions": [
"czapka",
"zimowa",
"palto",
"label"
],
"categories": [
"Czapki",
"Czapki zimowe"
],
"availability": "in stock",
"title": "Czapka Zimowa Palto Label",
"brand": "Palto"
}
]
}
]
}
Endpoint Sort, który zwróci ustawione w panelu typy sortowań dostępnych dla użytkowników:
https://orion.quarticon.com/searchapi/CUSTOMER_SYMBOL/SEARCH_ID/sortendpoint zwróci sortowania w formie, jak poniżej
{
"meta": {
"version": "1.0",
"requestId": "8de2883fe183b6870f4dcb9cd4cafd2f",
"debugKey": "7c593307-cc64-4b12-822f-ce7040658600"
},
"sort": [
{
"name": "default",
"label": "Domyślne",
"position": 1
},
{
"name": "bestsellers",
"label": "Bestsellery",
"position": 2
},
{
"name": "titleAsc",
"label": "Po tytule rosnąco",
"position": 3
},
{
"name": "titleDsc",
"label": "Po tytule malejąco",
"position": 4
},
{
"name": "score",
"label": "po score malejąco",
"position": 5
}
]
}Ważne! Aby sortować wyniki wyszukania, id sortowania w polu name należy przekazywać do parametru s.
Endpoint Aggregations, który zwróci ustawione w panelu filtry dla żądanego query:
https://orion.quarticon.com/searchapi/CUSTOMER_SYMBOL/SEARCH_ID/aggregations?q=QUERYendpoint zwróci dane, jak poniżej:
{
"Cena": {
"field": "price",
"label": "Cena",
"type": "range",
"data": {
"min": 19,
"max": 799
}
},
"Marka produktu": {
"field": "brand",
"label": "Marka produktu",
"type": "checkbox",
"data": {
"2005": {
"count": 28
},
"Mini Logo Skateboards": {
"count": 6
},
"JoyRide": {
"count": 5
},
"Premiere": {
"count": 2
},
"Primitive": {
"count": 2
},
"Silver Skateboarding": {
"count": 2
},
"Tensor Trucks": {
"count": 2
},
}
},
"Kolor produktu": {
"field": "color",
"label": "Kolor produktu",
"type": "checkbox",
"data": {
"Czarny": {
"count": 311
},
"Czerwony/bordowy": {
"count": 141
},
"Zielony": {
"count": 73
},
"Różowy/Łososiowy": {
"count": 24
},
"Żółty": {
"count": 19
},
"Złoty": {
"count": 1
}
}
}
}
więcej o endpointach znajdziesz w naszej dokumentacji: SmartSearch Qon API
Implementacja wyników wyszukiwania
Dla żądanego query należy pobrać wyniki wyszukiwania z endpointu results, a następnie dodać wyniki do struktury HTML strony:
Zaimplementuj paginację. Liczbę produktów per strona możesz zmienić w panelu.
Implementacja opcji sortowania
Skorzystaj z endpointu Sort, który zwróci ustawione w panelu opcje sortowań. Wyświetl w strukturze HTML jako select, a następnie dodaj zdarzenie, które po zmianie opcji sortowania, uwzględni typ sortowania podczas zapytania o wyniki wyszukania.
Implementacja filtrów
Skorzystaj z endpointu Aggregations, który zwraca wyniki dla żądanego query, a następnie dodaj filtry w HTML strony.
Następnie należy dodać eventy, które obsłużą kliknięcie w zadany filtr i przekażą go do zapytania, aby endpoint results, zwrócił produkty wyfiltrowane do zaznaczonego filtra.
Pamiętaj też, aby oznaczyć filtry, które użytkownik ma już zaznaczone:
Dodaj też przycisk, który umożliwi wyczyszczenie filtrów.
8. Przykłady kodu JavaScript dla integracji AI Smart Search
Przygotowaliśmy przykładowe wdrożenie naszej wyszukiwarki w oparciu o Framework Bootstrap CSS.
DEMO SmartSearch V3: https://cdn.quartic.com.pl/search/v3/index.html
Do skorzystania z niej potrzebne są:
customerSymbol – indywidualny identyfikator klienta QuarticOn
searchId – identyfikator Twojej wyszukiwarki dostępny w panelu AI Smart Search
API-KEY – klucz od API, możliwy do pobrania z panelu AI Smart Search
Wszystkie powyższe dane otrzymasz od swojego opiekuna QuarticOn.
Przykładowe wdrożenie SmartSearch za pomocą kodu JavaScript
Aby wykorzystać udostępniony kod wykorzystaj:
dane dostępowe do API, tj:
customerSymbol – indywidualny identyfikator klienta QuarticOn
searchId – identyfikator Twojej wyszukiwarki dostępny w panelu AI Smart Search
API-KEY – klucz od API, możliwy do pobrania z panelu AI Smart Search
style oparte są o bootstrap 5:
przed zakończeniem strony dodaj skrypty:
<script src="https://cdn.quartic.com.pl/search/v3/js/SmartSearch.js"></script>odpowiedzialny za konfigurację
<script src="https://cdn.quartic.com.pl/search/v3/js/serp.js"></script>odpowiedzialny za obsługę strony SERP
<script src="https://cdn.quartic.com.pl/search/v3/js/autocomplete.js"></script>odpowiedzialny za obsługę autocomplete
Następnie skonfiguruj i wywołaj udostępnione instancje:
//Skonfiguruj Instancję, dodają customerSymbol, Search Id, oraz Api Key
const SmartSearchConfiguration = new SmartSearch('CUSTOMER_SYMBOL', 'SEARCH_ID', 'API_KEY')
// na stronach, na których chcesz uruchomić autocomplete:
new Autocomplete(SmartSearchConfiguration)
.setSerpUrl('/serp.html'') // wskaż na jakiej stronie zaimplementujesz serp
.init()
// na stronach, na których chcesz uruchomić serp
new Serp(SmartSearchConfiguration)
.init()
9. Przykład kodu HTML dla poszczególnych części wyszukiwarki
Wszystkie poniższe przykłady zostały utworzone na podstawie Bootstrap CSS; link: Bootstrap v5.2.3 (https://getbootstrap.com/). |
Wszystkie przykłady kodu pochodzą z naszego DEMO, które dostępne jest pod tym linkiem: https://cdn.quartic.com.pl/search/v3/index.html. |
Budowa krok po kroku aplikacji, opisana jest szczegółowo w podrozdziale Budowa frontu aplikacji krok po kroku. |
Poniżej przedstawiamy przykładowy kod HTML dla poszczególnych części wyszukiwarki.
On-focus/autocomplete, czyli podpowiedzi w małej wyszukiwarce
HTML dla inputu wyszukiwarki
<div class="input-group mb-3 input-group-lg"> <input type="text" class="form-control" id="search-input" placeholder="Czego szukasz?" aria-label="Wpisz wyszukiwane słowo" aria-describedby="button-search" autocomplete="off" name="q"> <button class="btn btn-primary" type="button" id="search-button">Szukaj</button> </div>
HTML dla okna onfocus/autocomplete
<div id="autocompletePopup" class="autocomplete-popup shadow p-3 mb-5 bg-body rounded">
<div class="autocomplete-items">
<div class="container">
<div class="row">
<div id="popularQueriesContainer" class="col-md-4 text-dark d-none">
<div class="row">
<p class="text-muted">Popularne Frazy</p>
<ul id="popularQueriesList" class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between align-items-start">{{popular}}
<span class="badge bg-secondary rounded-pill">{{count}}</span></li>
</ul>
</div>
</div>
<div id="suggestionsContainer" class="col-md-4 text-dark">
<div class="row">
<p class="text-muted">Najtrafniejsze</p>
<ul id="suggestionsList" class="list-group list-group-flush">
<li class="list-group-item">{{sugestia}}</li>
<li class="list-group-item">{{sugestia}}</li>
<li class="list-group-item">{{sugestia}}</li>
</ul>
</div>
</div>
<div class="col-md-8">
<p class="col-md-12 text-muted">Popularne Produkty</p>
<div id="autocompleteResults" class="row">
<div class="col-md-6 mb-1" style="position: relative">
<div class="row">
<div class="col-md-4">
<img alt="Czapka Zimowa Metoda Sport Zima Daszek"
src="https://qon-csts3.quartic.com.pl/beb3190e764bb95d/e1-c0/100x100/aHR0cHM6Ly9zZWxlY3RzaG9wLnBsL21v/ZHB1Yi9wcm9kdWN0LzExMjAxNC8xMTIx/MDEtM2E4MzE2LmpwZw==.webp">
</div>
<div class="col-md-8 p-3 text-black">
<p class="text-truncate" style="-webkit-line-clamp: 2; max-lines: 2;"><small>Czapka
Zimowa Metoda Sport Zima Daszek</small></p>
<span> 39 zł</span>
<a href="https://page.pl/czapka-metoda-sport-zima-daszek-nvwhb"
class="stretched-link" target="_blank">
</a>
</div>
</div>
</div>
<div class="d-grid gap-2 col-12 mx-auto">
<a href="/search/v3/serp.html?q=czapka" class="btn btn-secondary btn-lg" tabindex="-1"
role="button" aria-disabled="true">Zobacz więcej wyników wyszukania</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Strona wyników wyszukiwania (SERP)
Strona wyników wyszukiwania SERP składa się z kilku elementów:
sekcji filtrów
sekcji wyników wyszukiwania
sekcji paginacji
sekcji sortowania
sekcji z informacją o wyświetlonych wynikach
Poniżej prezentujemy przykładowy kod HTML dla poszczególnych sekcji.
Sekcja filtrów
Sekcja filtrów to miejsce, w którym Twój klient może filtrować otrzymane wyniki wyszukiwania.
Przykład dla prostego filtra, który zawiera 2 opcje:
<div class="container-fluid pb-4 shadow-sm my-4 rounded-3" style="max-height: 400px; overflow: auto">
<h5 class="my-2">
<small class="text-muted">Marka produktu</small>
</h5>
<ul class="list-group list-group-flush">
<li class="list-group-item d-inline-flex justify-content-between align-items-center">
<input class="form-check-input me-2" type="checkbox" data-field="brand" data-field-name="Marka produktu"
value="2005">
<span class="flex-grow-0" style="width: 60%">2005</span>
<span class="badge bg-secondary rounded-pill" style="margin-left: 20px">26</span>
</li>
<li class="list-group-item d-inline-flex justify-content-between align-items-center">
<input class="form-check-input me-2" type="checkbox" data-field="brand" data-field-name="Marka produktu"
value="47 Brand">
<span class="flex-grow-0" style="width: 60%">47 Brand</span>
<span class="badge bg-secondary rounded-pill" style="margin-left: 20px">157</span>
</li>
</ul>
</div>
Filtry ceny można wyświetlić w takiej formie:
<div class="container-fluid pb-4 shadow-sm my-4 rounded-3" style="max-height: 400px; overflow: auto">
<h5 class="my-2">
<small class="text-muted">Cena</small>
</h5>
<ul class="list-group list-group-flush">
<div class="row">
<div class="col-md-6">
<input type="number" class="form-control" id="price-min" name="price-min" placeholder="19" min="19"
max="239">
</div>
<div class="col-md-6">
<input type="number" class="form-control" id="price-max" name="price-max" placeholder="239" min="19"
max="239">
</div>
</div>
</ul>
</div>
Sekcja wyników wyszukiwania
Przykład kodu HTML dla podstawowego kafelka produktowego:
<div class="col-md-4 mb-5 product-element p-2">
<div class="h-100 shadow-sm rounded-3 " style="position: relative">
<div class="d-flex align-items-center p-3" style="min-height: 200px">
<img class="rounded mx-auto d-block card-img-top img-fluid"
style="height: auto;width:auto; max-height: 200px; margin: auto;"
src="https://qon-csts3.quartic.com.pl/beb3190e764bb95d/e1-c0/300x300/aHR0cHM6Ly9zZWxlY3RzaG9wLnBsL21v/ZHB1Yi9wcm9kdWN0LzEwMjAyMC8yNTM1/MjAtMjA3NDIxLmpwZw==.webp"
alt="Czapka Zimowa Malita Fisher">
</div>
<div class="card-body p-2">
<div class="text-center">
<h6 class="fw-normal">Czapka Zimowa Malita Fisher</h6>
<h6 class="fw-normal">59,90 zł</h6>
</div>
</div>
<div class="card-footer p-2 pt-0 border-top-0 bg-transparent">
<div class="text-center">
<a class="stretched-link"
href="http://orion.quarticon.com/restapi/beb3190e764bb95d/search/fdc63ca281908351b3499f91ad4c361b/redirect/253520/1fc5723734747380c531aab80d06c5bc/aHR0cHM6Ly9zZWxlY3RzaG9wLnBsL2N6YXBrYS16aW1vd2EtbWFsaXRhLWZpc2hlci15ZWxsb3c="
target="_blank"></a></div>
</div>
</div>
</div>
Sekcja sortowania
Dzięki opcji sortowania Twój klient może sortować wyniki wyszukiwania według swoich preferencji np. po cenie rosnąco/malejąco, po nowościach, po popularności.
<div id="sortingButtonsContainer" class="col-md-3">
<select id="sortingButtons" class="form-select" aria-label="Sorting select example">
<option name="default" selected="">Domyślne</option>
<option name="bestsellers">Bestsellery</option>
<option name="titleAsc">Po tytule rosnąco</option>
<option name="titleDsc">Po tytule malejąco</option>
</select></div>
Sekcja z informacją o liczbie wyświetlonych wynikach
<div class="container-fluid pb-4 my-1">
<p id="info-container" class="lead fw-normal text-dark mb-0 text-center">Wyniki wyszukiwania dla: <b>czapka</b> (24 wyniki z 872)</p>
</div>
Sekcja paginacji (na dole wyników wyszukiwania)
Sekcja ta umożliwia wyświetlanie liczby stron z wynikami wyszukiwania i przejście na każdą z nich.
<div id="paginationContainer" class="py-3">
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center">
<li class="page-item">
<a class="page-link active" href="" data-page-number="0">1</a>
</li>
<li class="page-item">
<a class="page-link " href="" data-page-number="1">2</a>
</li>
<li class="page-item">
<a class="page-link " href="" data-page-number="2">3</a>
</li>
<li class="page-item">
<a class="page-link " href="" data-page-number="3">4</a>
</li>
<li class="page-item">
<a class="page-link" href="" data-page-number="1">Następna</a>
</li>
</ul>
</nav>
</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.