Dlaždicový výpis variant a příplatků

Tento doplněk usnadňuje zákazníkům orientaci při výběru variant a příplatků na detailu produktu. Díky modernímu dlaždicovému zobrazení mají zákazníci okamžitý přehled o dostupných možnostech i nedostupných kombinacích ještě před dokončením výběru. Elegantní způsob prezentace zároveň pozitivně ovlivňuje vzhled produktové stránky a přispívá k lepšímu uživatelskému zážitku. Doplněk navíc splňuje požadavky legislativy WCAG AA, takže je přístupný také zákazníkům se zdravotním omezením.

Hlavní funkce doplňku

Správa doplňku je maximálně jednoduchá a nevyžaduje žádné další přihlášení ani složité nastavování. Po aktivaci se vše automaticky nastaví prostřednictvím integrovaného kódu.

Ve výchozím nastavení se změny automaticky aplikují na varianty i příplatky, a to včetně mobilního zobrazení. Chování doplňku však lze upravit pomocí níže uvedeného kódu, který stačí vložit do HTML editoru v zápatí a přizpůsobit hodnoty podle vlastních potřeb.

<script id="shkVariantSurchargeSettings" type="application/json">
{
    "showInMobile": false,
    "useForVariant": true,
    "useForSurcharge": true,
    "surchargeText": {
        "cs": "Bez montáže",
        "en": "Without assembly",
        "de": "Ohne Montage"
    }
}
</script>

• showInMobile – určuje, zda se mají změny zobrazovat také v mobilní verzi (true = ano, false = ne)
• useForVariant – aktivace dlaždicového zobrazení pro varianty produktu (true = ano, false = ne)
• useForSurcharge – aktivace dlaždicového zobrazení pro příplatky (true = ano, false = ne)
• surchargeText – možnost nastavit vlastní texty nebo překlady pro příplatkové parametry (např. "cs": "Můj text")

Kromě konfigurace chování doplňku lze také jednoduše upravit jeho vzhled pomocí CSS proměnných uvedených níže. Níže uvedený kód stačí vložit do HTML editoru pro záhlaví ve Vaší Shoptet administraci a upravit požadované hodnoty. Do HTML editoru stačí vložit pouze řádky, které chcete změnit. (Níže uvedený kód obsahuje výchozí hodnoty.)

<style>
:root {
    /* Míra zaoblení rohů položek */
    --shk-12-item-br: 5px;
    /* Barva písma položek */
    --shk-12-item-c: #000;
    /* Barva písma položek při najetí myši */
    --shk-12-item-c-hover: #000;
    /* Barva čáry kolem položek */
    --shk-12-item-bc: #d1d1d1;
    /* Barva čáry kolem položek při najetí myši */
    --shk-12-item-bc-hover: #000;
    /* Barva pozadí položek */
    --shk-12-item-bg: #fff;
    /* Barva pozadí položek při najetí myši */
    --shk-12-item-bg-hover: #fff;

    /* Barva čáry kolem položek vybrané dostupné varianty */
    --shk-12-item-selected-bc: #218810;
    /* Barva pozadí položek vybrané dostupné varianty */
    --shk-12-item-selected-bg: #27841142;
    /* Barva písma položek vybrané dostupné varianty */
    --shk-12-item-selected-c: #000;
    /* Barva pozadí označení položek vybrané dostupné varianty */
    --shk-12-mark-bg: #218810;
    /* Barva značky označení položek vybrané dostupné varianty */
    --shk-12-mark-c:#fff;

    /* Barva čáry kolem položek nedostupné varianty */
    --shk-12-item-disabled-bc: #a70000;
    /* Barva pozadí položek nedostupné varianty */
    --shk-12-item-disabled-bg: #a700002b;
    /* Barva písma položek nedostupné varianty */
    --shk-12-item-disabled-c: #000;
    /* Barva pozadí označení položek nedostupné varianty */
    --shk-12-mark-disabled-bg: #a70000;
    /* Barva značky označení položek nedostupné varianty */
    --shk-12-mark-disabled-c:#fff;
}
</style>

Doplněk podporuje všechny běžně dostupné jazykové mutace Shoptetu - CZ, SK, PL, EN, DE, HU, VI, RO, BG, IT, FR, SL, HR, SR, PT, ES, NL, UK, EL, SV, DA, NO, FI, LT, SQ, LV, ET. Kromě toho je možné přidat také další jazykové mutace s vlastními překlady či přepsat znění textace u existujících předpřipravených jazyků.