Korzystanie z zakładek

Ta strona przechodzi przez typowe sposoby używania Langeto, a potem wyjaśnia, jak zakładki zachowują się już na froncie.

Dodaj wspólną zakładkę “Wysyłka i zwroty”

Zakładka globalna to właściwe narzędzie do treści identycznej na każdym produkcie.

1. Wejdź w WooCommerce > Langeto Tabs.

2. W pierwszym wierszu ustaw tytuł Wysyłka i zwroty.

3. Zostaw Enabled zaznaczone.

4. W polu Treść zakładki wpisz swoją politykę bezpiecznym HTML: krótki akapit, punktowana lista sposobów dostawy i link do pełnej strony zwrotów:

   <p>Zamówienia złożone do 14:00 wysyłamy tego samego dnia.</p>
   <ul>
     <li>Dostawa w Polsce: 1-2 dni robocze</li>
     <li>Dostawa w UE: 3-5 dni roboczych</li>
   </ul>
   <p><a href="/zwroty/">Przeczytaj pełną politykę zwrotów</a>.</p>

5. Zapisz zmiany.

Zakładka pojawia się teraz na każdej karcie produktu, po natywnych. Edytujesz ją tutaj raz i aktualizuje się na wszystkich produktach.

Dodaj kilka zakładek naraz

Dołóż kolejny wiersz i wypełnij jego tytuł i treść. Wiersze renderują się w kolejności z ekranu, więc zakładkę, którą klient ma zobaczyć najpierw, ustaw na górze.

Odstaw zakładkę bez kasowania

Załóżmy, że zakładkę Dostawa świąteczna prowadzisz tylko w grudniu. Zamiast wyklejać jej treść i wracać z nią za rok, odznacz jej pole Enabled i zapisz. Wiersz zostaje na ekranie ustawień z całą treścią, ale nie renderuje się na froncie. Zaznacz ponownie, żeby wróciła. Aby ukryć wszystkie zakładki naraz, na przykład na czas ich przebudowy, użyj głównego przełącznika Enable Langeto.

Jak zakładka renderuje się na froncie

Gdy klient otwiera kartę produktu, Langeto dokłada każdą włączoną zakładkę do paska zakładek WooCommerce, po natywnych. Kliknięcie pokazuje panel zawierający:

• nagłówek <h2> z tytułem zakładki,
• treść w <div>: sanityzowaną przez wp_kses_post i podzieloną na akapity przez wpautop, albo, przy włączonym Shortcode i bloki w zakładkach, przepuszczoną przez the_content, więc shortcode’y i bloki się wykonują.

Zakładka bez treści nie jest w ogóle rejestrowana, więc nie trafia na pasek. Gdyby sformatowane body i tak wyszło puste (shortcode, który nic nie wypisał), panel nie wypisze nic, razem z nagłówkiem.

Panele Langeto mają wzdłuż wewnętrznego marginesu złocistą krawędź separatora (na zarezerwowanym marginesie, więc nie powoduje przeskoku układu), która odróżnia je od natywnych paneli Opis i Opinie. Otwarcie panelu odtwarza krótką animację wsunięcia; przy prefers-reduced-motion jest wyłączana.

Łączenie z zakładkami natywnymi i z innych wtyczek

Na dowolnym produkcie pasek zakładek powstaje w tej kolejności:

1. Natywne zakładki WooCommerce (Opis, Informacje dodatkowe, Opinie) na swoich zwykłych priorytetach.
2. Zakładki dokładane przez motyw lub inne wtyczki.
3. Włączone zakładki Langeto, dokładane od priorytetu 100 w górę, w kolejności z ekranu ustawień.

Ponieważ Langeto używa standardowego filtra woocommerce_product_tabs z późnym priorytetem, zamiast przebudowywać listę, nie wypycha zakładek dodanych przez inne wtyczki, wszystko scala się w jeden pasek.

Wskazówki

• Tytuły trzymaj krótkie, żeby zmieściły się na pasku na telefonie, gdzie etykiety zawijają się lub przewijają.
• Zakładki używaj do wszystkiego, co inaczej kopiowałbyś na wiele produktów: jedna edycja aktualizuje każdy produkt.
• Jeśli zakładki brakuje na pasku, jej pole treści jest puste; zakładka bez body nie jest rejestrowana.
• Langeto nie rejestruje własnego shortcode’u, zakładek nie wstawia się w treść strony, pojawiają się automatycznie na pasku zakładek produktu. Shortcode’y innych wtyczek można umieścić wewnątrz zakładki, gdy Shortcode i bloki w zakładkach jest włączone.

Uwagi o wydajności i dostępności

Langeto renderuje w całości w PHP, w istniejącą strukturę zakładek WooCommerce, więc nie dokłada dodatkowego rusztowania DOM ani przeskoku układu. Na froncie jedynym zasobem jest drobny arkusz stylów, ładowany tylko na kartach produktu (is_product()) i tylko gdy Langeto jest włączony; nie dochodzi żaden JavaScript ani jQuery. Skrypt powtarzalnej listy w panelu to czysty JavaScript, ładowany z defer w stopce, w pełni obsługiwany klawiaturą. Treść zakładki dziedziczy typografię motywu; projekt panelu respektuje prefers-reduced-motion i ma paletę dla trybu ciemnego.