Shoptet: Webové boxy

Zde si ukážeme postup při přidávání webových boxů do systému Shoptet.

Nejdříve si vyberte id prvku na vašem e-shopu. Pokud nevíte, jak to udělat, obraťte se na vašeho programátora, kodéra nebo webmastera.

Při nastavování předchozího projektu v systému shoptet jsme si zvolili pro jednotlivé typy webových boxů tyto id prvků:

  1. Domovská stránka – id prvek s názvem “carousel” (zobrazit za tímto prvkem)
  2. Detail produktu – id prvek s názvem “tab-content” (zobrazit za tímto prvkem)
  3. Košík – id prvek s názvem “cart-wrapper” (zobrazit za tímto prvkem)

Nastavte si produkty, jak chcete, aby se zobrazovali ve webovém boxu – více zde. Samozřejmě zde vždy u daného typu nastavte vybraný id prvek a jestli se webový box bude zobrazovat před, za nebo vevnitř tohoto prvku.

Dále si zkopírujte tento kód:

<!-- DreamROI Box code -->
<script defer src="https://app.dreamroi.com/client/v1/dreamroi-splide-box.min.js"></script> 
<script defer src="https://app.dreamroi.com/client/v1/splide/splide.min.js"></script>
<link rel="stylesheet" href="https://app.dreamroi.com/client/v1/splide/splide.min.css" media="print" onload="this.media='all'; this.onload=null;">
<link rel="stylesheet" href="https://app.dreamroi.com/client/v1/dreamroi.min.css" media="print" onload="this.media='all'; this.onload=null;">
<script>
   window.addEventListener('DOMContentLoaded', function() {
   var droi_pageType = getShoptetDataLayer('pageType');
   if (droi_pageType == "productDetail") {

              // PRODUCTDETAIL
    
   } else if (droi_pageType == "homepage") {

             // HOMEPAGE

   } else if (droi_pageType == "cart") {

            // CART

   }
});
</script>

Běžte do EDITORu v administraci Shoptetu a tento kód vložte pod HTML kódy do hlavičky. Zatím neukládejte!

Vložení kódu do shoptetu

Dále si vždy zkopírujte POUZE ČÁST KÓDU (např. z typu “Domovská stránka). Je to vše mezi <script> a </script> – viz. modře označeno na screenshotu níže:

Částečná kopie scriptu

a vložte do EDITORu na přesné předpřipravené místo: Pokud kopírujete část webového boxu z typu “Domovská stránka”, vložte jej ihned na řádek za “// HOMEPAGE”, pokud z “Detailu produktu”, vložte jej za “// PRODUCT DETAIL” a pokud z “Košíku”, tak jej vložte za “// CART”:

Vložení do Shoptetu jednotlivé typy webových boxů

To samé můžete udělat s typem webového boxu “Detail produktu” nebo “Košík”, jen je vložíte za “// PRODUCTDETAIL” a “// CART”.

Uložit a máte HOTOVO!

 

Poznámka: Webové boxy se začnou zobrazovat, až je aktualizovaný XML feed produktů (dělá se přes noc) a obchod je kompletně nastavený.