Theme Selectors
Sekce Theme Selectors umožňuje řídit, jak Cart Reserve detekuje a komunikuje s prvky v tématu vašeho obchodu. To je užitečné zejména, pokud používáte vlastní téma, silně upravené téma nebo třetí stranou dodaný košík.
Ve většině případů výchozí selektory fungují hned po instalaci a nejsou potřeba žádné změny. Tato nastavení byste měli upravit pouze tehdy, pokud se rezervace neaktualizují správně nebo struktura vašeho tématu se liší od standardních témat Shopify.
Přístup k Theme Selectors
Přejděte na Settings → Theme Selectors → Configure Selectors.
Automatická detekce tématu
Cart Reserve obsahuje vestavěnou podporu pro více než 30 témat Shopify. Systém automaticky detekuje vaše téma a aplikuje vhodné selektory.
Detekce probíhá v prohlížeči zákazníka a zkouší postupně několik signálů:
- Ruční výběr — nastavení Theme adapter v app embedu (viz níže), pokud jste téma vybrali explicitně
- Theme Store ID — témata nainstalovaná z Shopify Theme Store jsou rozpoznána okamžitě, i po přejmenování
- Název tématu — název obsahující podporované téma (např. „My Dawn Copy") toto téma namatchuje
- Struktura stránky — u přejmenovaných nebo vlastních témat Cart Reserve rozpozná téma podle charakteristických prvků stránky
Jakmile je téma potvrzeno, výsledek se uloží do prohlížeče návštěvníka, takže každé další načtení stránky proběhne se správnou integrací okamžitě. Při přepnutí tématu se detekce spustí automaticky znovu — žádný ruční zásah není potřeba.
Ruční výběr tématu
Pokud je vaše téma výrazně upraveno a automatická detekce zvolí obecné řešení, můžete integraci tématu vybrat ručně: Online Store → Themes → Customize → App embeds → CartReserve → Theme adapter Vyberte základní téma ze seznamu (Dawn, Horizon, Impact, Palo Alto, Turbo, Eurus, Focal, Wokiee) nebo ponechte Auto-detect (doporučeno pro většinu obchodů).
Tip: V případě potřeby použijte vývojářské nástroje prohlížeče (pravý klik → Prozkoumat) pro nalezení správných CSS selektorů pro prvky vašeho tématu.
Klikněte na View full documentation pro detailní pokyny ke konfiguraci selektorů.
Jak se změny nastavení projeví v obchodě
Konfigurace obchodu (selektory, styl časovače, barvy) je uložena v mezipaměti prohlížeče každého návštěvníka, takže stránky se vykreslují okamžitě bez čekání na síť:
- Nastavení selektorů se z mezipaměti aplikují okamžitě a při každém zobrazení stránky se na pozadí ověřují se serverem — uložené změny se k návštěvníkům dostanou do jednoho načtení stránky
- Styl časovače a barvy se z mezipaměti aplikují ještě před dokončením načítání stránky (bez „bliknutí" barvy) a stejným způsobem se obnovují na pozadí
Po uložení změn v administraci jednou obnovte stránku obchodu, abyste je viděli.
Sekce selektorů
Theme selectors jsou organizovány do sbalitelných sekcí. Každá sekce ukazuje counter označující přizpůsobené selektory (např. "0/2 customized").
Storefront Templates
Rychlý odkaz pro přizpůsobení vzhledu časovačů, varování a zobrazení vypršených stavů.
Klikněte na Customize Templates pro otevření editoru šablon obchodu.
Cart Item Changes
Selektory pro detekci a zpracování změn množství v košíku.
Konfigurujte je, pokud Cart Reserve nedetekuje, když zákazníci mění množství v košíku.
Pole: 2 dostupné selektory
Product Detail
Selektory pro formulář stránky produktu a funkci přidání do košíku.
Konfigurujte je, pokud se rezervace nevytvářejí, když zákazníci přidávají položky do košíku ze stránek produktu.
Pole: 6 dostupných selektorů
Timer Context
Nastavení pro zobrazení časovače a detekci cart draweru.
Konfigurujte je, pokud se časovač neobjeví na správném místě nebo pokud vaše téma používá nestandardní cart drawer.
Pole: 3 dostupné selektory
Universal Selectors
CSS selektory pro ovládací prvky množství, které fungují napříč cart drawerem, stránkou košíku a stránkou produktu.
Použijte je pro vlastní témata, která nejsou pokryta konkrétními předvolbami. Tyto selektory fungují univerzálně napříč různými kontexty košíku.
Pole: 6 dostupných selektorů
Label Translations
Tlačítka a labely časovače se konfigurují v theme editoru a lze je překládat pomocí aplikace Shopify "Translate & Adapt".
Klikněte na Open Theme Editor pro přístup ke konfiguraci labelů.
Cesta: Online Store → Themes → Customize → App embeds → CartReserve
Rozbalení sekcí
Klikněte na Expand v jakékoli sekci pro zobrazení a úpravu jednotlivých selektorů.
Každé pole selektoru přijímá standardní CSS selektor syntax (např. .cart-item, #product-form, [data-cart-drawer]).
Řešení potíží
Pokud Cart Reserve s vaším tématem nefunguje správně:
- Zkontrolujte automatickou detekci — systém by měl většinu témat zvládnout automaticky
- Prozkoumejte prvky — použijte vývojářské nástroje prohlížeče pro identifikaci správných selektorů
- Testujte postupně — upravujte jeden selektor po druhém a testujte
- Uložte a obnovte — změny se projeví po obnovení stránky
Kdy přizpůsobit selektory
Selektory přizpůsobte pouze, pokud zaznamenáte:
- Rezervace se neaktualizují při změnách množství v košíku
- Časovač se neobjevuje v cart draweru nebo na stránce košíku
- Přidání do košíku nespouští rezervace
- Ovládací prvky množství nejsou detekovány
Pro standardní témata Shopify by výchozí nastavení mělo fungovat bez úprav.