Chcete klientovi nabídnou dárkové balení produktu? Potřebujete, aby Vám seděly skladové zásoby jak produktu, tak i balícího materiálu?
Postup
- Vytvoříte si klasickým způsobem produkt – https://webotvurci.myshoptet.com/produkt-bez-darkoveho-baleni/
- Vytvoříte si produkt, který obsahuje balící materiál – pokud potřebujete, aby sedělo i skladové hospodářství. V případě, že toto nepotřebujete, můžete tento krok přeskočit. https://webotvurci.myshoptet.com/darkove-baleni-material/
- Vytvoříte si SADU produktu pro produkt s dárkovým balením. Sada bude obsahovat produkt z kroku 1 a pokud potřebujete, tak i produkt z kroku 2, pokud řešíte zda je pro Vás důležité řešit skladovost dárkových balení. https://webotvurci.myshoptet.com/produkt-s-darkovym-baleni/
- Přejděte do administrace propojení produktů:
- Přejděte do nastavení doplňku propojení produktů.
- Načtěte si nově přidané produkty pomocí ikonky dvou šipek v kolečku.
- Vyberte variantu propojení Banner.
- Vyberte produkt „Z produktů“ – toto znamená, na které stránce se objeví banner.
- Vyberu produkt „Cílový produkt“ – toto je produkt, na který povede odkaz z banneru.
- Vytvořte text tlačítka + text banneru – níže je ukázka kódu použitého v ukázce.
- Uložte.
- Zkontrolujte zobrazení na eshopu.
Ukázka HTML a CSS kódu použitého v demu
Text tlačítka
<div class="html-btn"><span><b>Dárkové</b> balení</span></div>HTML banner
<div class="html-banner">
Objednejte si tento produkt v <strong>luxusním dárkovém balení</strong> a udělejte z něj nezapomenutelný dárek pro Vaše blízké!
</div>Ukázková CSS použitá v demu
.c-product-interconnection-detail-params__products.is-type--banner {
background-color: #f7f7f7;
width: 100%;
display: flex;
padding: 10px 20px;
}
.c-product-interconnection-banner__link.is--plain-html {
width: 100%;
}
.html-banner {
width: 70%;
}
.html-btn {
width: 30%;
}
.c-product-interconnection-detail-params__products.is-type--banner .html-btn {
float: right;
background-color: green;
padding: 10px 20px;
font-size: 18px;
font-weight: 600;
color: #fff;
text-align: center;
margin-left: 20px;
}
.c-product-interconnection-detail-params__products.is-type--banner .c-product-interconnection-banner__link.is--plain-html {
display: flex;
}
@media only screen and (max-width: 600px) {
.html-banner,
.html-btn {
width: 100%;
}
.c-product-interconnection-detail-params__products.is-type--banner .c-product-interconnection-banner__link.is--plain-html {
display: block;
}
}