Gdzie widżet pojawia się na stronie produktu

Domyślnie widżet Bundlex jest wyświetlany tuż nad przyciskiem dodawania do koszyka na stronie produktu. Jeśli to miejsce nie pasuje do Twojego motywu, możesz przenieść widżet na dwa sposoby: użyć niestandardowego selektora położenia w osadzeniu aplikacji albo kotwicy kreatora stron. W tym artykule wyjaśniamy, gdzie trafia widżet i jak Bundlex wybiera między tymi opcjami.

Położenie domyślne

Jeśli żadna reguła zmiany położenia nie pasuje, Bundlex wstawia widżet przed wykrytym kontenerem formularza produktu w obszarze zakupu. Dokładne położenie względem elementów wyboru wariantu i ilości zależy od motywu. W praktyce karty ofert pojawiają się nad przyciskiem dodawania do koszyka, czyli w miejscu, w którym większość kupujących spodziewa się zobaczyć ofertę ilościową lub zestaw.

To położenie domyślne zależy od automatycznego wykrycia formularza produktu przez Bundlex. Większość motywów jest wykrywana automatycznie. Jeśli Twój formularz nie zostanie wykryty, widżet nie może niezawodnie połączyć się z funkcją dodawania do koszyka. Sama kotwica położenia nie naprawi brakującego lub nieprawidłowego formularza produktu, dlatego poproś pomoc techniczną o sprawdzenie również wykrywania formularza.

Kolejność priorytetów położenia

W przypadku dostarczania przez osadzenie aplikacji Bundlex sprawdza element docelowy położenia w ustalonej kolejności i używa pierwszego znalezionego. Elementy wyżej na liście mają pierwszeństwo przed elementami niżej.

1. Niestandardowy selektor położenia, najwyższy priorytet. Selektor CSS ustawiony w osadzeniu aplikacji Bundlex. Gdy jest ustawiony i pasuje do elementu, widżet zostaje wstawiony bezpośrednio za tym elementem, a żadne kolejne opcje z tej listy nie są używane.
2. Kotwica kreatora stron (data-bundlex-widget). Element HTML zawierający atrybut data-bundlex-widget, który umieszczasz na stronie. Widżet jest umieszczany wewnątrz pierwszej pasującej kotwicy. Ta opcja jest używana, gdy nie znaleziono niestandardowego elementu docelowego położenia.
3. Domyślne położenie przed formularzem produktu, najniższy priorytet. Automatyczne położenie opisane powyżej. Jest używane, gdy żadna z opcji zastępczych nie ma pasującego elementu docelowego.

Ponieważ łańcuch kończy się po znalezieniu pierwszego dopasowania, pasujący niestandardowy element docelowy położenia zastępuje zarówno kotwicę, jak i położenie domyślne, a pasująca kotwica zastępuje położenie domyślne. Jeśli po zmianie motywu selektor przestanie pasować, Bundlex może użyć niższego położenia.

Opcja 1: niestandardowy selektor położenia, osadzenie aplikacji

Użyj niestandardowego selektora położenia, gdy chcesz zachować dostarczanie przez osadzenie aplikacji i umieścić widżet za konkretnym elementem strony. Jeśli nie znasz selektora, poproś pomoc techniczną Bundlex o pomoc w jego wyborze. Najpierw przetestuj go w wersji roboczej motywu.

Ustawisz go w osadzeniu aplikacji Bundlex:

1. W panelu administracyjnym Shopify przejdź do Sklepu online i kliknij Edytuj motyw.
2. Otwórz Osadzenia aplikacji i znajdź Bundlex Bundles.
3. Włącz Pokaż ustawienia zaawansowane, a następnie wpisz selektor CSS w polu Niestandardowy selektor położenia.
4. Zapisz motyw.

Widżet zostanie wstawiony bezpośrednio za elementem pasującym do selektora. Jeśli nie masz pewności, którego selektora użyć, pomoc techniczna Bundlex pomoże Ci go znaleźć. Ustawienia zaawansowane zawierają również pola formularza produktu, przycisku dodawania do koszyka i selektorów ilości, które służą do naprawiania automatycznego wykrywania w niestandardowych motywach, a nie do ustawiania położenia widżetu.

Opcja 2: kotwica kreatora stron

Jeśli tworzysz strony produktów za pomocą wizualnego kreatora stron, takiego jak GemPages, PageFly lub Shogun, zwykle chcesz umieścić widżet w konkretnym miejscu układu. W tym celu dodaj niestandardowy blok HTML lub kodu w wybranym miejscu i umieść w nim pusty element z atrybutem data-bundlex-widget:

<div data-bundlex-widget></div>

Nie musisz wpisywać tego ręcznie: otwórz kartę Zaawansowane w edytorze zestawu i rozwiń Używasz kreatora stron?. Wybierz Kopiuj, a następnie wklej fragment na stronie.

Bundlex wypełnia widżetem pierwszą pasującą kotwicę. Nie potrzebujesz innego fragmentu kodu dla każdego zestawu. Kotwica kontroluje tylko położenie. Bundlex nadal wybiera opublikowany zestaw do wyświetlenia na podstawie produktu.

Liczy się tylko pierwsza pasująca kotwica

Jeśli na stronie znajduje się więcej niż jeden element data-bundlex-widget, Bundlex używa tylko pierwszego w kolejności DOM. Ma to znaczenie, gdy sklep powiela treści, na przykład w oknie szybkiego podglądu lub wysuwanej szufladzie koszyka, która powtarza znaczniki produktu. Umieść kotwicę tylko w miejscu, w którym rzeczywiście chcesz wyświetlać widżet, aby pierwsze dopasowanie było właściwe.

Kiedy zamiast tego użyć bloku aplikacji

Bundlex udostępnia również blok aplikacji motywu dla strony produktu. Jest to osobny sposób dostarczania widżetu, niezależny od osadzenia aplikacji. Wybierz blok aplikacji, gdy chcesz umieścić widżet w konkretnym miejscu za pomocą przeciągania i upuszczania w edytorze motywu, bez pisania selektora CSS ani edytowania znaczników strony:

1. W edytorze motywu otwórz szablon produktu.
2. Kliknij Dodaj blok w sekcji, w której chcesz umieścić widżet.
3. Otwórz kartę Aplikacje, wybierz Bundlex Bundles i przeciągnij blok w dokładnie wybrane miejsce.
4. Zapisz motyw.

Blok umieszcza widżet w miejscu, w którym go upuścisz w sekcji, dlatego stanowi dobre rozwiązanie pośrednie między automatycznym położeniem domyślnym a ręcznie napisanym selektorem. Blok ignoruje niestandardowy selektor położenia i kotwicę kreatora stron ustawione w osadzeniu. Używaj jednej metody dostarczania na stronie produktu, ponieważ jednoczesne uruchomienie osadzenia i bloku może uzależnić położenie oraz ustawienia od tego, który element zainicjuje się jako pierwszy.

Najpierw przetestuj zmianę w roboczym motywie. Zanim wyłączysz działające osadzenie w tym motywie, sprawdź, czy blok znajduje się w sekcji renderowanej w rzeczywistym szablonie produktu. Natychmiast po przełączeniu odśwież stronę produktu. Jeśli widżet zniknie, ponownie włącz osadzenie. W przypadku zniżek z prezentami wybierz położenie, które zachowuje osadzenie i jego czyszczenie prezentów na stronie koszyka. Zobacz osadzenie a blok.

Niezależnie od wybranego położenia widżet jest wyświetlany tylko wtedy, gdy osadzenie aplikacji lub blok jest włączony i opublikowany zestaw pasuje do produktu. Jeśli widżet w ogóle się nie pojawia, przed zmianą położenia potwierdź te dwa warunki.

Strony docelowe: blok „Bundlex Bundles featured”

Powyższe metody dotyczą stron produktów. Na zwykłej stronie Shopify, czyli pod dowolnym adresem URL /pages/, na przykład na stronie docelowej utworzonej na potrzeby kampanii, widżet nie może samodzielnie się dołączyć, a niestandardowy kod HTML również go nie załaduje.

Zamiast tego dodaj własną sekcję motywu Wyróżniony produkt i umieść w niej blok Bundlex Bundles featured. Sekcja motywu zapewnia przycisk dodawania do koszyka, a blok dodaje widżet, tak samo jak działa to na stronie głównej:

1. W panelu administracyjnym Shopify przejdź do Sklepu online i kliknij Edytuj motyw.
2. Z listy szablonów u góry wybierz Strony i wybierz szablon używany przez stronę docelową.
3. Kliknij Dodaj sekcję i wybierz własną sekcję motywu Wyróżniony produkt, a następnie wybierz produkt, którego zestaw chcesz wyświetlić.
4. W tej sekcji kliknij Dodaj blok, otwórz kartę Aplikacje i wybierz Bundlex Bundles featured.
5. W ustawieniach wyróżnionego bloku ustaw Produkt na ten sam produkt co w sekcji albo zachowaj połączenie Produkt sekcji.
6. Zapisz motyw.

Samodzielny blok, umieszczony poza sekcją Wyróżniony produkt, nie znajdzie formularza dodawania do koszyka i niczego nie wyświetli. Umieszczony wewnątrz sekcji wyświetla produkt z opublikowanymi ofertami zestawów, a kupujący mogą dodawać produkty do koszyka bezpośrednio ze strony docelowej. Ta sama konfiguracja działa również na stronie głównej.

Szybki przegląd

Metoda ustawiania położenia	Gdzie ją ustawić	Priorytet
Niestandardowy selektor położenia	Osadzenia aplikacji > Bundlex Bundles > Pokaż ustawienia zaawansowane	Najwyższy
data-bundlex-widget kotwica	Znaczniki strony lub kreator stron	Używana, jeśli nie pasuje żaden niestandardowy element docelowy
Domyślne, przed formularzem produktu	Automatyczne	Używane, gdy żadne zastąpienie nie pasuje