Jak dodać wyszukiwanie Ajax w czasie rzeczywistym do swojej witryny Divi?

Ajax to świetny sposób na dodanie wyszukiwania na żywo do Divi. Dzięki Ajaxowi strona nie musi być ponownie ładowana, aby pokazać użytkownikom wyniki wyszukiwania. Dzięki temu odwiedzający mogą zobaczyć wyniki znacznie szybciej, co pomaga dłużej wyświetlać je na Twoich stronach. Rezultatem jest strona internetowa, która wygląda czyściej i działa płynniej.

Wyszukiwanie Ajax nie jest wbudowane w Divi, ale można je łatwo dodać za pomocą wtyczki innej firmy. W tym samouczku zobaczymy, jak dodać wyszukiwanie Ajax do Divi i zobaczymy, jak stylizować wyszukiwanie, aby pasowało do projektu Twojej witryny.

Przejdź do samouczka.

zapowiedź

Zanim zaczniemy, przyjrzyjmy się, jak będzie wyglądać nasze wyszukiwanie Ajax po zakończeniu. To jest widok pulpitu. Dodam wyszukiwanie Ajax do sklepu WooCommerce. Używam strony pokazu z pakietu układu sklepu internetowego. Dostosujemy również styl wyszukiwania, aby pasował do układu. Oczywiście, ponieważ jest to strona testowa, oszukuję i używam produktów testowych WooCommerce. Wyniki będą działać tak samo z dowolnymi produktami.

Oto jak ten sam projekt wygląda na telefonie.

Jak dodać wyszukiwanie Ajax w czasie rzeczywistym do swojej witryny Divi?

Subskrybuj nasz kanał YouTube

1. Instalowanie wyszukiwania Divi Ajax

Najpierw kup Divi Ajax Search z Divi Marketplace. Zwykle wynosi 29 USD i obejmuje nieograniczone użytkowanie oraz rok wsparcia i aktualizacji. Divi Ajax Search umożliwia wyszukiwanie stron, postów, projektów i produktów WooCommerce. Działa to tak samo z każdym z tych typów postów. Może przeszukiwać tytuł, fragment i polecany obraz i wyświetlać je zgodnie z Twoimi ustawieniami.

Aby zainstalować wtyczkę, przejdź do Wtyczki > Dodaj nowy i wybierz Prześlij wtyczkę .

Wybierz Wybierz plik i przejdź do lokalizacji pliku na komputerze i wybierz go. Kliknij Zainstaluj teraz .

Po zainstalowaniu wtyczki wybierz opcję Aktywuj wtyczkę .

2. Dodaj wyszukiwanie Ajax do swojej witryny Divi

Oto spojrzenie na oryginalny układ. zawiera nagłówek, kategorie nakładające się na obraz nagłówka oraz moduł WooCommerce do wyświetlania produktów. Dodam funkcję wyszukiwania Ajax nad modułem sklepu. Dostosuję go również do elementów układu.

Dodaj wyszukiwanie Divi Ajax do układu

Kliknij ikonę pod modułem sklepu, aby otworzyć modalny moduł. Przewiń do lub wyszukaj Wyszukiwanie Divi Ajax i dodaj je do układu. Pokazuję widok szkieletowy, ale każdy z widoków działa tak samo.

Przeciągnij i upuść moduł nad modułem sklepu.

Konfiguracja pola wyszukiwania

Kliknij koło zębate, aby otworzyć opcje. Przełączyłem się na widok pulpitu, aby móc zobaczyć moje zmiany na żywo.

Najpierw dostosujemy tekst zastępczy. Domyślny tekst zastępczy używa słowa Szukaj. To jest w porządku, ale zmieniam to na Przeszukaj nasze produkty, aby użytkownik wiedział, że przeszukuje sklep, a nie posty na blogu lub inne treści. Zostawię wartości domyślne w polu Order By , Order i Brak wyników .

• Tekst zastępczy – Przeszukaj nasze produkty
• Wynik wyszukiwania – 10
• Zamów do – data
• Zamówienie – opis
• Brak tekstu wyników – Nie znaleziono wyników

Zdecyduj, co wyświetlać w wynikach wyszukiwania

W sekcji o nazwie Obszar wyszukiwania wybierz, co chcesz przeszukać. Zostawiam to z ustawieniami domyślnymi, które obejmują tytuł, treść i fragment.

Następnie wybierz typy postów. Możesz go mieć do wyszukiwania postów, stron, projektów, produktów lub wszystkich powyższych. Wybieram Produkty.

Szukać w:

• Tytuł
• Zadowolony
• Fragment

Typy postów:

• Produkty

Wybierz, co chcesz wyświetlić

Przewiń w dół do obszaru wyświetlania, aby wybrać sposób wyświetlania wyników. Zachowuję domyślne ustawienia ikony wyszukiwania, tytułu, fragmentu i polecanego obrazu. Włączyłem również cenę produktu, zmieniłem liczbę kolumn na 4 i wybrałem użycie muru. To da mi układ, który chcę.

Pokaż ikonę wyszukiwania:

• tak

Wyświetl pola:

• Tytuł
• Fragment
• Przedstawiony obraz
• Cena produktu

Liczba kolumn:

• 4

Użyj muru:

• tak

Pokaż pasek przewijania

Przejdź do ustawień paska przewijania i zdecyduj, czy chcesz pokazać lub ukryć pasek przewijania. Dołączam pasek przewijania, aby użytkownik był lepiej świadomy, że może przewijać.

Pasek przewijania:

• Pokazać

Wyniki wyszukiwania Divi Ajax

Wprowadzenie wyszukiwanego terminu powoduje wyświetlenie wyników pod polem wyszukiwania. Wygląda to świetnie, ale nie odstaje od treści strony. Dostosujemy go tak, aby pasował do projektu witryny i nie łączył się ze zdjęciami produktów.

3. Dostosuj moduł, aby pasował do Twojej witryny

Aby wystylizować pole wyszukiwania, użyję elementów projektu z układu, którego używam. Na dole strony sklepu z układem sklepu internetowego znajduje się kilka elementów projektu. Jednym z nich jest ciekawy moduł e-mail optin. Użyję tego jako inspiracji dla tła i pola. W wynikach wyszukiwania użyję również koloru tła CTA Kup teraz. Szczególnie zwracam uwagę na trzy elementy projektu:

• Kolor tła biuletynu – #757d79
• Kupuj kolor tła CTA – #dcae83
• Padding dla obu – 50px (góra, dół), 60px (prawo, lewo)

Stylizacja pola wyszukiwania

Otwórz ustawienia tła w zakładce treści. Ta sekcja ma trzy różne obszary tła. Idź do ostatniego. Nazywa się po prostu Tło. Tutaj wpisz kolor.

• Kolor tła – #757d79

W zakładce Projekt przejdź do ustawień Odstępy i wprowadź dopełnienie. Pozwoli nam to zobaczyć obszar wokół pola, dzięki czemu będziemy mogli lepiej widzieć wyniki w miarę postępów. To również nadaje polu wyszukiwania dużo koloru wokół niego, który będzie pasował do elementów w układzie.

• Dopełnienie 50px (góra, dół), 60px (prawo, lewo)

W ustawieniach pola wyszukiwania dodaj kolor tła pola i kolor tekstu pola. Dopasowałem pole do tła modułu i po prostu wybrałem biały dla tekstu.

• Kolor tła pola — #757d79
• Kolor tekstu pola – #ffffff

W tych samych ustawieniach przewiń w dół do Kolor obramowania pola i wybierz biały. Mogliśmy również dostosować grubość i promień obramowania. Zostawię to jako kwadrat, aby dopasować pole tekstowe modułu optin.

• Kolor obramowania pola – #ffffff

Otwórz ustawienia ikony wyszukiwania i wybierz biały.

• Kolor ikony wyszukiwania – #ffffff

Otwórz ustawienia modułu ładującego i wybierz biały dla koloru modułu ładującego . Loader będzie widoczny tylko przez chwilę, ale będzie wyglądał lepiej, jeśli będzie pasował do pozostałych elementów.

• Kolor ładowarki – #ffffff

Stylizacja pola wyników

Otwórz ustawienia tła na karcie Treść i dodaj kolor do tła pola wyników wyszukiwania i elementu wyników wyszukiwania . Nie będzie to widoczne podczas stylizowania modułu, ponieważ wyświetla się on tylko wtedy, gdy wyświetla wyniki wyszukiwania.

• Kolor tła – #dcae83

Na karcie Projekt otwórz ustawienia tekstu elementu wyników wyszukiwania . Na karcie Tytuł wybierz styl czcionki wielkimi literami i wybierz biały jako kolor tekstu. Wszystkie pozostałe ustawienia tytułu pozostawiam domyślnie.

• Styl czcionki tytułu – TT
• Kolor tekstu tytułu – #ffffff

Otwórz zakładkę Fragment i wybierz kolor biały jako Kolor tekstu fragmentu .

• Kolor tekstu fragmentu – #ffffff

Otwórz zakładkę Cena. Wybierz Semi Bold dla wagi ceny i biały dla koloru tekstu.

• Grubość czcionki ceny — pół pogrubiona
• Kolor tekstu fragmentu – #ffffff

Wyniki

Oto jak wygląda wyszukiwanie Ajax na pulpicie z moim stylem. Wyniki wyszukiwania wyświetlają się niemal natychmiast. Wygląda elegancko i gładko.

Oto jak to wygląda na telefonie. Wyniki kumulują się i dopasowują do ekranu.

Końcowe myśli

Dodanie wyszukiwania Ajax do witryny Divi jest szybkie i łatwe dzięki wtyczce Divi Ajax Search. Jest łatwy w użyciu, łatwy do dopasowania do Twojej witryny, a wyniki są szybkie i wyglądają fantastycznie. Masz wiele opcji dotyczących typów postów, które może wyszukiwać, oraz rodzajów treści, które będą wyświetlane w wynikach.

Teraz Twoja witryna Divi może mieć profesjonalnie zaprojektowaną funkcję wyszukiwania Ajax, którą docenią Twoi goście!

Chcemy usłyszeć od Ciebie. Czy dodałeś wyszukiwanie Ajax w czasie rzeczywistym do swojej witryny Divi? Daj nam znać o swoim doświadczeniu w komentarzach.

Polecane zdjęcie za pośrednictwem Kroster / shutterstock.com