Webotvůrci

Menu

Návod pro nastavení produktů ve článcích

Upraveno: 14. 1. 2025
Jste zde:
Délka čtení: 3 min
V tomto článku:

Oživte své blogové články dynamickým výpisem produktů

Věnujete se blogu a snažíte se zákazníkům poradit s výběrem produktů? Díky doplňku „Produkty v článcích“ můžete svým článkům dodat nový rozměr! Tento nástroj umožňuje snadno a intuitivně přidávat dynamický výpis produktů přímo do článků, čímž usnadníte zákazníkům rozhodování a podpoříte prodej.

Nejenže výpis produktů zachová jednotný design a chování, jaké mají vaše kategorie, ale také zajistí, že skryté produkty budou automaticky nahrazeny aktuálními nabídkami. Ať už se rozhodnete pro dynamické načítání produktů z jednoho URL nebo pro ruční výběr konkrétních produktů, přizpůsobíte doplněk přesně svým potřebám.

V tomto návodu vás krok za krokem provedeme procesem nastavení a používání doplňku. Připravte se vylepšit své články a nabídnout zákazníkům snadný, intuitivní nákupní zážitek! Doplněk si můžete objednat zde.

V našem návodu se podíváme na to, jak doplněk použít pro výpis konkrétních námi vybraných produktů u článku.

Pro návod na zobrazení produktů náhodně z vybrané kategorie prosím přejděte na stránku doplňku.

1. Najdeme stránku blogové kategorie

  1. Na e-shopu: v menu přejdeme na odkaz s blogovou kategorií a zvolíme požadovaný článek.
  2. Administrace shoptetu: Přejděte do sekce Vzhled a obsah → Články → Rubrika → zvolená rubrika (my jsme v rubrice Novinky) a zvolíme požadovaný článek.

2. Úprava článku

  1. V rozhraní Upravit článek přejděte dolů do sekce, kde je editor obsahu.
  2. Klikněte na tlačítko Nástroje → Zdrojový kód, čímž se zobrazí HTML kód.

3. Nasazení kódu pro produkty

  1. V zobrazeném okně editoru kódu nasadíme na poslední místo kód, který je zde uvedený. 
    • (!před úpravou prosím zálohovat ! )
  2. Celý tento kód zkopírujeme a vložíme na poslední místo, za poslední text v zobrazeném editoru.
<!-- --------------------------------------------- Produkty v článku --------------------------------------------- -->
<div class="blog-section">
<div class="blog-header">
<div class="blog-title-container">
<h2 class="blog-title">Čokolády není nikdy dost</h2>
</div>
<div class="btn-line-container">
<div class="btn-line-blog"><a href="/novinky/" class="custom-button2">Další články</a></div>
</div>
</div>
    </div>
        <div class="dmproducts">
            <div sourceurl="zde bude 1.URL produkty z vyhledávání na eshopu">.</div>
            <div sourceurl="zde bude 2.URL produkty z vyhledávání na eshopu">.</div>
            <div sourceurl="zde bude 3.URL produkty z vyhledávání na eshopu">.</div>
            <div sourceurl="zde bude 4.URL produkty z vyhledávání na eshopu">.</div>
    </div>

4. Jak upravit kód pro produkty, změna počtu produktů, vložení URL produktů z vyhledávání na eshopu.

  1. Vyhledání URL konkrétního produktu
    1. Do vyhledávání na e-shopu vložíme název nebo kód produktu. např. Čokoládová tyčinka
    2. Potvrdíme vyhledávání.
    3. Poté co se nám aktualizuje stránka se zadaným vyhledáním, zkopírujeme URL. URL bude mít data o prvním produktu, co se vyhledá dle názvu nebo kódu.
    4. Zkopírovanou URL z vyhledávání vložíme do našeho kódu u článku mezi uvozovky, kde je text „zde bude URL produkty z vyhledávání na eshopu“
<!-- --------------------------------------------- Produkty v článku --------------------------------------------- -->

<div class="blog-section">

<div class="blog-header">

<div class="blog-title-container">

<h2 class="blog-title">Čokolády není nikdy dost</h2>

</div>

<div class="btn-line-container">

<div class="btn-line-blog"><a href="/novinky/" class="custom-button2">Další články</a></div>

</div>

</div>

    </div>

        <div class="dmproducts">

            <div sourceurl="https://webotvurci.myshoptet.com/vyhledavani/?string=%C4%8Dokol%C3%A1dov%C3%A1+ty%C4%8Dinka">.</div>

            <div sourceurl="zde bude 2.URL produkty z vyhledávání na eshopu">.</div>

            <div sourceurl="zde bude 3.URL produkty z vyhledávání na eshopu">.</div>

            <div sourceurl="zde bude 4.URL produkty z vyhledávání na eshopu">.</div>

    </div>
  1. Tímto způsobem se nám bude vypisovat 1.produkt u článku,  v tomto případě to bude produkt Čokoládová tyčinka , který jsem si vyhledali.
  2. Pokud bychom chtěli přidat další produkty, pokračujeme stejným způsobem. Vkládáme URL z vyhledávání produktu do uvozovek, kde je text „zde bude URL produkty z vyhledávání na eshopu“
  3. Pokud bychom chtěli uvést pouze jeden produkt, smažeme ostatní  <div sourceurl=“zde bude URL produkty z vyhledávání na eshopu“>.</div> 
  4. Naopak pokud budeme chtít úvest více produktu v článku, budeme přidávat další  <div sourceurl=„zde bude URL produkty z vyhledávání na eshopu“>.</div> 
  5. Vždy prosím ověřit, že nám celý kód končí dvěma </div></div>  ,tak jak je uvedeno v celém ukázkovém kódu.

Tato část kódu vytváří odkaz na blogovou kategorii s dalšími články:

<div class="btn-line-blog"><a href="/novinky/" class="custom-button2">Další články</a></div>

Část „/novinky/“ nahraďte koncovou částí URL adresy blogové kategorie, do které chcete dokazovat.

  1. Takto by vypadal článek jenom s jedním produktem: 
<!-- --------------------------------------------- Produkty v článku --------------------------------------------- -->

<div class="blog-section">

<div class="blog-header">

<div class="blog-title-container">

<h2 class="blog-title">Čokolády není nikdy dost</h2>

</div>

<div class="btn-line-container">

<div class="btn-line-blog"><a href="/novinky/" class="custom-button2">Další články</a></div>

</div>

</div>

    </div>

        <div class="dmproducts">

            <div sourceurl="https://webotvurci.myshoptet.com/vyhledavani/?string=%C4%8Dokol%C3%A1dov%C3%A1+ty%C4%8Dinka">.</div>

    </div>
  1. Příklad článku s dvěma produkty
<!-- --------------------------------------------- Produkty v článku --------------------------------------------- -->

<div class="blog-section">

<div class="blog-header">

<div class="blog-title-container">

<h2 class="blog-title">Čokolády není nikdy dost</h2>

</div>

<div class="btn-line-container">

<div class="btn-line-blog"><a href="/novinky/" class="custom-button2">Další články</a></div>

</div>

</div>

    </div>

        <div class="dmproducts">

        <div sourceurl="zde bude 1.URL produkty z vyhledávání na eshopu">.</div>

        <div sourceurl="zde bude 2.URL produkty z vyhledávání na eshopu">.</div>

    </div>
  1. Příklad článku s třemi produkty
<!-- --------------------------------------------- Produkty v článku --------------------------------------------- -->

<div class="blog-section">

<div class="blog-header">

<div class="blog-title-container">

<h2 class="blog-title">Čokolády není nikdy dost</h2>

</div>

<div class="btn-line-container">

<div class="btn-line-blog"><a href="/novinky/" class="custom-button2">Další články</a></div>

</div>

</div>

    </div>

        <div class="dmproducts">

            <div sourceurl="zde bude 1.URL produkty z vyhledávání na eshopu">.</div>

            <div sourceurl="zde bude 2.URL produkty z vyhledávání na eshopu">.</div>

            <div sourceurl="zde bude 3.URL produkty z vyhledávání na eshopu">.</div>

    </div>
  1. Příklad článku s čtyřmi produkty
<!-- --------------------------------------------- Produkty v článku --------------------------------------------- -->

<div class="blog-section">

<div class="blog-header">

<div class="blog-title-container">

<h2 class="blog-title">Čokolády není nikdy dost</h2>

</div>

<div class="btn-line-container">

<div class="btn-line-blog"><a href="/novinky/" class="custom-button2">Další články</a></div>

</div>

</div>

    </div>

        <div class="dmproducts">

            <div sourceurl="zde bude 1.URL produkty z vyhledávání na eshopu">.</div>

            <div sourceurl="zde bude 2.URL produkty z vyhledávání na eshopu">.</div>

            <div sourceurl="zde bude 3.URL produkty z vyhledávání na eshopu">.</div>

            <div sourceurl="zde bude 4.URL produkty z vyhledávání na eshopu">.</div>

    </div>

5. Uložení

Po editaci zavřeme okno zdrojového kódu a uložíme celou stránku článku.

Pomohl Vám tento článek?
Dislike 0 0 z 0 shledali tento návod přínosný.