Obsługa funkcji autocomplete w wyszukiwarce szablonu

Wskazówka

Od 1 czerwca 2025 roku zakończyliśmy aktualizację oraz wydawanie nowych wersji szablonów Bursztyn, Agat i Opal, a tym samym ich wsparcie, aby skupić się na nowoczesnych rozwiązaniach, które jeszcze lepiej odpowiadają na potrzeby dynamicznie rozwijającego się rynku e-commerce.

Zachęcamy Was do przejścia na nasze nowe, udoskonalone szablony. Dla sklepów B2C polecamy szablony Topaz, One Page Shop oraz Dla Gastronomii, natomiast dla platform B2B idealnym wyborem będą Rubin i Szafir.

Obsługa funkcji autocomplete w wyszukiwarce szablonu

W tym artykule dowiesz się jak zaimplementować funkcję autocomplete w swoim szablonie. Funkcja ta wyświetli klientowi listę towarów, które będą najlepiej pasowały do wpisanej przez niego frazy w wyszukiwarce.

Szafir

W pliku common/header/header.html wyszukaj frazę quick-search-form-lq. Zmodyfikuj element, do którego należy ta klasa, aby wyglądał tak:

Na końcu pliku js/init-ui2.js wklej ten kod:

Na końcu pliku scss/globals/_header.scss wklej ten kod:
`.autocomplete-ui{
position: absolute;
z-index: 1000;
width: 100%;
box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.2);
@media only screen and (max-width: 1280px) {
max-width: 550px;
left: 50%;
transform: translateX(calc(-50% - 25px));
text-align: left;
}
@media only screen and (max-width: 680px) {
left: auto;
transform: none;
}
.product-ui{
display: block;
padding: 10px;
background: $bgColor;
border: 1px solid $lightBorderColor;
border-bottom: none;
font-size: 16px;
color: $primaryColorFont;
transition: all ease 300ms;
&:last-child{
border-bottom: 1px solid $lightBorderColor;
}

div{
display: inline-block;
vertical-align: top;
margin-right: 10px;
&:last-child{
width: 100px;
margin-right: 0;
text-align: right;
}
}
.img-ui{
width: 50px;
height: 50px;
position: relative;
}
img{
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.names-ui{
width: calc(100% - 50px - 100px - 20px);
}
.name-ui{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: $primaryColor;
transition: all ease 300ms;
}
.code-ui{
font-size: 12px;
color: $bgColorFont;
transition: all ease 300ms;
}
&:hover{
background: $btnSolidHoverBgColor;
color: $btnSolidHoverTextColor;
.name-ui, .code-ui{
color: $btnSolidHoverTextColor;
}
}
}
}`

Wskazówka

Pamiętaj, że pliki scss i js należy zminifikować. O tym jak skompilować i zminifikować pliki scss i js dowiesz się z artykułu o kompilacji i minifikacji plików.

Agat

W pliku partials/common/header.html wyszukaj frazę id=”search-form”. Zmodyfikuj element, do którego należy to ID, aby wyglądał tak:

W pliku js/init.js wyszukaj frazę events:. Linijkę wyżej wklej kod:

Natomiast pod koniec pliku tuż pod takim kodem:
$('body').on('blur', 'input', function () { application.uiCheckLabels(); });
Wklej taki kod:
$('body').on('input', '#header-section #search-form.autocomplete-form [name="search"]', function (e) { if(timeOutAutocomplete!=null){ clearTimeout(timeOutAutocomplete); timeOutAutocomplete=null; } timeOutAutocomplete = setTimeout(function(){ self.autocomplete(e); }, 300); });

Na końcu pliku scss/main2.scss wklej kod:
`.autocomplete{
position: absolute;
z-index: 101;
width: 100%;
@media only screen and (max-width: 1024px) {
width: calc(100% - 240px);
}
@media only screen and (max-width: 768px) {
width: calc(100% - 20px);
}
box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, 0.2);
.product{
display: block;
padding: 10px;
background: $bgColor;
border: 1px solid $primaryColor;
border-bottom: none;
font-size: 16px;
color: $bgDarkerColorFont;
&:last-child{
border-bottom: 1px solid $primaryColor;
}

div{
display: inline-block;
vertical-align: top;
margin-right: 10px;
&:last-child{
margin-right: 0;
}
}
.img{
width: 50px;
height: 50px;
position: relative;
}
img{
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.names{
width: calc(100% - 50px - 10px);
}
.name{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.price{
margin-top: 5px;
font-size: 12px;
color: $primaryColor;
opacity: 0.63;
}
}
}`

Wskazówka

Pamiętaj, że pliki scss i js należy zminifikować. O tym jak skompilować i zminifikować pliki scss i js dowiesz się z artykułu o kompilacji i minifikacji plików.

Bursztyn

W pliku page/header.html wyszukaj frazę SearchForm. Zmodyfikuj element, do którego należy to ID, aby wyglądał tak:

Na końcu pliku js/init2.js wklej ten kod:

Na końcu pliku scss/main2.scss wklej ten kod:

Wskazówka

Pamiętaj, że pliki scss i js należy zminifikować. O tym jak skompilować i zminifikować pliki scss i js dowiesz się z artykułu o kompilacji i minifikacji plików.

Opal

W pliku page/header.html wyszukaj frazę SearchForm. Zmodyfikuj element, do którego należy to ID, aby wyglądał tak:

Na końcu pliku js/init2.js wklej ten kod:

Na końcu pliku scss/main2.scss wklej ten kod:

Wskazówka

Pamiętaj, że pliki scss i js należy zminifikować. O tym jak skompilować i zminifikować pliki scss i js dowiesz się z artykułu o kompilacji i minifikacji plików.

Czy ten artykuł był pomocny?

Wyślij opinie

Inne w kategorii

• Wyszukiwarka zaawansowana w szablonie Topaz

• -1

• 2098

• Ustawienia paska nawigacji w szablonie Szafir

• 1

• 2273

• Aktualizacja filtrów i wyszukiwarki w szablonach

• -1

• 2668

• Dodanie nowego widoku filtrów

• -26

• 1636

• Zmiana nagłówka sekcji polecanych towarów na przykładzie szablonu Topaz

• 0

• 2880

• Szablon i treści wiadomości e-mail

• 0

• 3135

Społeczność Comarch

Dzięki społeczności Comarch ERP rozwiązujemy problemy, dzielimy się pomysłami oraz informujemy o nowościach.

Dołącz do Społeczności Comarch

Oferta e-Commerce

Demo Comarch e-Sklep
Zamów Comarch e-Sklep
Cennik Comarch e-Sklep
Comarch e-Sale
Comarch B2B
Czym się różni Comarch
e-Sklep B2B od Comarch B2B?

Przydatne linki

Spis treści
Stwórz darmowy szablon
Konfigurator produktu
Więcej o Comarch ERP
Pomoc Comarch Betterfly
Pomoc Comarch ERP Optima
Pomoc Comarch ERP XL
Pomoc Comarch ERP Altum
Oprogramowanie e-commerce
Sztuczna Inteligencja (AI)

Kontakt

Skontaktuj się z nami
Partnerzy Comarch wdrażający e-Sklep