Webotvůrci

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

Upraveno: 20. 1. 2025
Jste zde:
Délka čtení: 3 min

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 class="detail" sourceurl="zde bude 1.URL produktu">.</div>
            <div class="detail" sourceurl="zde bude 2.URL produktu">.</div>
            <div class="detail" sourceurl="zde bude 3.URL produktu">.</div>
            <div class="detail" sourceurl="zde bude 4.URL produktu">.</div>
    </div>

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

  1. Vyhledání URL konkrétního produktu
    1. V eshopu najdeme produktu, který chceme zobrazovat v produktech u článku a zkopírujeme jeho URL adresu.
    2. Zkopírovanou URL vložíme do našeho kódu u článku mezi uvozovky, kde je text „zde bude URL produktu“
<!-- --------------------------------------------- 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 class="detail" sourceurl="https://webotvurci.myshoptet.com/cokoladova-tycinka/">.</div>

            <div class="detail" sourceurl="zde bude 2.URL produktu">.</div>

            <div class="detail" sourceurl="zde bude 3.URL produktu">.</div>

            <div class="detail" sourceurl="zde bude 4.URL produktu">.</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.
  2. Pokud bychom chtěli přidat další produkty, pokračujeme stejným způsobem. Vkládáme URL detailu produktu do uvozovek, kde je text „zde bude URL produktu“
  3. Pokud bychom chtěli uvést pouze jeden produkt, smažeme ostatní  <div class=“detail“ sourceurl=“zde bude URL produktu“>.</div> 
  4. Naopak pokud budeme chtít úvest více produktu v článku, budeme přidávat další  <div class=“detail“ sourceurl=„zde bude URL produktu“>.</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 class="detail" sourceurl="https://webotvurci.myshoptet.com/cokoladova-tycinka/">.</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 class="detail" sourceurl="zde bude 1.URL produktu">.</div>
            <div class="detail" sourceurl="zde bude 2.URL produktu">.</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 class="detail" sourceurl="zde bude 1.URL produktu">.</div>
            <div class="detail" sourceurl="zde bude 2.URL produktu">.</div>
            <div class="detail" sourceurl="zde bude 3.URL produktu">.</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 class="detail" sourceurl="zde bude 1.URL produktu">.</div>
            <div class="detail" sourceurl="zde bude 2.URL produktu">.</div>
            <div class="detail" sourceurl="zde bude 3.URL produktu">.</div>
            <div class="detail" sourceurl="zde bude 4.URL produktu">.</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 1 z 1 shledali tento návod přínosný.