Příplatkové parametry jsou šikovná funkce, která ale nabízí jen omezené možnosti přizpůsobení. Jednou z věcí, kterou si bohužel běžně nenastavíte, je text „Vyberte příplatek“ v rozbalovacím menu. A přitom právě ten se vám nemusí hodit vůbec. Příplatkové parametry totiž řada e-shopů používá i pro výběr variant, doplňků nebo dalších možností, které s příplatkem nemusí mít nic společného.
Co třeba místo toho „Vyberte variantu“ – nebo jakýkoliv jiný text, který bude lépe odpovídat potřebám vašeho e-shopu? Přece jen, kdo by si chtěl dobrovolně za něco připlácet, že? Naštěstí tento text můžete snadno změnit. A zvládnete to rychleji, než si stihnete uvařit kafe.
O čem to je a pro koho se to hodí?
Příplatkové parametry v Shoptetu slouží k nabídce různých možností, které si zákazník vybírá z rozbalovacího menu. Nemusí přitom jít jen o příplatky – funkci totiž můžete využít i pro výběr doplňkového produktu či služby zdarma, kdy textace ‚‚Vyberte příplatek‘‘ ztrácí smysl. Úprava se proto hodí každému, komu výchozí text nevyhovuje a chce ho přizpůsobit tomu, co zákazník skutečně vybírá.
Video ukázka: Jak to funguje v reálu
Jak kód funguje v praxi?
Úprava funguje pomocí krátkého kódu, který změní výchozí text „Vyberte příplatek“ na vámi zvolenou textaci. A protože každý e-shop má příplatkové parametry nastavené jinak, kód je potřeba lehce přizpůsobit konkrétnímu e-shopu.
Kód umí rozpoznat konkrétní parametr podle jeho názvu nebo ID. Díky tomu můžete například nastavit „Zvolte variantu“ u jednoho parametru, „Vyberte balení“ u druhého a u dalšího třeba úplně jiný text. Stejně tak můžete změnit text u všech příplatkových parametrů najednou.
Pokud tedy máte příplatkových parametrů více, nemusíte se omezovat na jednu univerzální textaci. Každému můžete nastavit text, který dává v daném případě největší smysl.
Kód ke zkopírování zdarma
Klikněte na tlačítko vpravo nahoře a kód se vám zkopíruje do schránky:
<!-- Změna výchozího textu v příplatkových parametrech -->
<script>
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll("select.surcharge-parameter").forEach(function (select) {
const option = select.querySelector('option[value=""]');
if (option && option.textContent.trim() === "Vyberte příplatek") {
option.textContent = "Vyberte možnost";
}
});
});
</script>Pokud chcete jinou textaci pro jednotlivé parametry, využijete následující kód. V tomto kódu musíte přejmenovat názvy parametrů tak, aby odpovídaly tomu, co máte skutečně v e-shopu. Najděte v kódu if (name === "Chcete tašku") { a místo "Chcete tašku" napište název svého parametru. V tomto kódu jsou 2 parametry, můžete jich mít ale neomezeně. Doporučuji kód nechat upravit AI, které nadiktujete své požadavky pro konkrétní názvy vašich parametrů.
<!-- Změna textace konkrétních příplatkových parametrů -->
<script>
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll("select.surcharge-parameter").forEach(function (select) {
const option = select.querySelector('option[value=""]');
if (!option) return;
const name = (select.getAttribute("data-parameter-name") || "").trim();
if (name === "Chcete tašku?") {
option.textContent = "Zvolte možnost";
}
if (name === "Dárkové balení zdarma") {
option.textContent = "Vyberte typ balení";
}
});
});
</script>Pokud je výběr ‚‚příplatku‘‘ nepovinný, může být praktičtější zobrazit jako výchozí text rovnou jednu z hodnot parametru. To jsme například nastavili u klienta na e-shopu, kde je parametr „Chcete tašku?“. Hodnotami jsou „Ne“ a „Ano, chci tašku zdarma“. V tomto případě jsme proto jako výchozí text nastavili rovnou hodnotu „Ne“. Zákazník tak nemusí nic vybírat, pokud tašku nechce, a v případě zájmu jednoduše zvolí druhou možnost.
Tento kód změní text u parametru "Chcete tašku?" (ID parametru = 336) na jednu z jeho hodnot – v tomto případě na ‚‚Ne‘‘. Zároveň u všech ostatních parametrů kromě parametru ‚‚Chcete tašku?‘‘ mění text z ‚‚Vyberte příplatek‘‘ na ‚‚Vyberte možnost‘‘. Pro úpravy opět doporučuju AI, které pošlete názvy svých parametrů a své požadavky pro konkrétní parametry.
<!-- Změna výchozího textu v příplatkových parametrech -->
<script>
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll("select.surcharge-parameter").forEach(function (select) {
const option = select.querySelector('option[value=""]');
if (!option) return;
const name = (select.getAttribute("data-parameter-name") || "").trim();
const isBag =
name === "Chcete tašku" ||
select.getAttribute("data-parameter-id") === "336";
if (isBag) {
option.textContent = "Ne";
} else if (option.textContent.trim() === "Vyberte příplatek") {
option.textContent = "Vyberte možnost";
}
});
});
</script>Kam kód v Shoptetu vložit (krok za krokem)
-
1
Přihlaste se do administrace Shoptetu
Otevřete administraci vašeho e-shopu na Shoptetu.
-
2
Otevřete editor HTML kódů
V levém menu přejděte do sekce Vzhled a obsah → Editor → HTML kód.
-
3
Vložte (upravený) kód do Zápatí
V editoru najdete 3 hlavní sekce, kam můžete kód vložit: Záhlaví, Zápatí a Dokončená objednávka. Tento kód vložte do sekce ‚‚Zápatí (před koncovým tagem BODY)‘‘. Posuvníkem sjeďte na úplný konec okna a na nový řádek vložte zkopírovaný kód (Ctrl + V). Nemažte a neupravujte nic, co už v editoru bylo.
-
4
Uložte změny
Klikněte na zelené tlačítko Uložit v pravém horním rohu. Hotovo! Kód je okamžitě aktivní.
-
5
Zkontrolujte zobrazení na vašem e-shopu
Otevřete si na svém e-shopu stránku produktu, který má přiřazený příplatkový parametr. Zkontrolujte, zda se zobrazuje vámi preferovaný text a zda výběr parametru funguje.
Co můžete v kódu snadno upravit?
- Barvu tlačítka: V kódu vyhledejte řádek
background: #ea8b9e;a změňte kód barvy na vaši preferovanou – barvu musíte vkládat formou HEX kódu (např.#000000pro černou barvu místo původní růžové #ea8b9e). - Texty v pop-up oknu: Přímo v HTML kódu mezi tagy
<p>...</p>nebo<h3>...</h3>můžete změnit znění podle vašich potřeb. - Barvu pozadí okna: V kódu vyhledejte řádek
f#cod-modal { background: #fff;a změňte kód barvy na vaši preferovanou. - Velikost písma: V kódu vyhledejte řádek
f#cod-modal h3 { font-size: 24px;pro změnu velikosti nadpisu nebo#cod-modal p { font-size: 16px; line-height: 1.7; color: #444;} pro změnu velikosti běžného textu. Velikost textu je udávána například jako 24px. - Zaoblení a velikost: Můžete změnit hodnotu
max-width: 550px;neboborder-radius: 8px;.
Jak nejjednodušeji kód přizpůsobit?
Vložte kód z této stránky do AI (postačí jakýkoliv chat, například ChatGPT) a napište, co chcete v kódu změnit – například že chcete, aby pro parametr "Dárkové balení" a pro parametr "Chcete tašku?" byl výchozí text v rozbalovacím menu ne "Vyberte příplatek" ale "Vyberte možnost". Můžete také například požadovat, ať pro všechny ostatní parametry kromě těchto dvou je výchozí text v rozbalovací nabídce "Zvolte variantu". Pravidla jsou zcela na vás, vždy akorát musíte pracovat se skutečnými názvy parametrů přesně tak, jak je máte uvedeny na e-shopu.
Zároveň AI požádejte, aby vám poslala celý kompletní kód se zapracovanými úpravami. Ráda totiž posílá pouze změněnou část kódu. V takovém případě požadavek zopakujte a výslovně uveďte, že potřebujete celý kompletní kód, který můžete vložit na web.
Důležité upozornění: Myslete na soulad s vašimi obchodními podmínkami. V pop-up oknu nevyhrožujte náhradou škody ani poplatky, které nemáte řádně zakotveny ve svých platných OP. Také dávejte pozor na to, aby text nevyzněl agresivně – ať neodradíte (poctivé) zákazníky.