Blok Product add-on

Blok Product add-on oferuje pojedynczy, konkretny produkt, który wybierasz jako dodatek wewnątrz koszyka, promując jeden znany produkt (gwarancję, próbkę, bestseller) jako szybkie dodanie bezpośrednio w koszyku.

• Jeśli nie da się ustalić żadnego aktywnego wariantu — produkt jest nieustawiony, zarchiwizowany lub niedostępny — blok renderuje nic zamiast martwego przycisku.
• Kontrolka odzwierciedla, czy pozycja dodatku tego konkretnego bloku jest w koszyku, więc jej wyłączenie usuwa pozycję, którą dodała (i nie wpłynie na ten sam produkt dodany gdzie indziej).
• Cena porównawcza (compare-at) jest przekreślana, gdy istnieje rzeczywista obniżka; etykieta „% off” jest ukrywana, jeśli rabat zaokrągla się poniżej 1%.
• Obraz dodatku wraca do głównego obrazu produktu, gdy wybrany wariant go nie ma.

Title, Price label i Description obsługują te same cztery tokeny: {{product_title}}, {{price}}, {{compare_at_price}} i {{savings}}.

• Region: korpus (body) lub dół (bottom).
• Maksymalnie: 3 na stan koszyka — wypełniony koszyk i pusty koszyk mają osobne limity.
• Stan: zarówno wypełniony, jak i pusty koszyk.
• Nie jest dodawany domyślnie. Nie jest zablokowany — możesz go usunąć lub ukryć.

Obsługuje szablon niestandardowy z zakładki Code, który zastępuje wbudowany kod tego bloku Twoim JSX. Oto propsy, które otrzymuje. Stylizuj ten blok za pomocą jego sekcji Design w panelu ustawień. Są to nadpisania na poziomie bloku, które nakładają się na Twój globalny design i wracają do niego, gdy pole jest puste. Sekcja Text w Design pozwala kontrolować typografię trzech elementów. Użyj selektora Text element, aby przełączać się między nimi. Title — nazwa produktu. Obsługuje także niestandardową rodzinę czcionek. Pogrubienie i kolor tekstu ustawia się w edytorze Rich Text powyżej (w zakładce Settings), a nie tutaj. Price — linia ceny. Pogrubienie i kolor tekstu ustawia się w edytorze Rich Text powyżej. Description — tekst pomocniczy. Pogrubienie i kolor tekstu ustawia się w edytorze Rich Text powyżej. Czym są ustawienia wyglądu? Dowiedz się więcej tutaj: Ustawienia wyglądu.