Vytvoření kategorie s produkty

Apicart poskytuje Vue.js komponentu pro přidání kategorie s produkty do vaší webové stránky či e-shopu během chvilky a bez programování.

Otevřete si soubor index.html a nahraďte existující script tag následujícím kódem (také můžete smazat tlačítko koupit, které jsme přidali v předchozí ukázce).

<script>
  Apicart
  .setDevEnv()
  .configure({
    store: new Apicart.Store({ token: "9mCu3DlBCa4REI?Q7kKly!Rw6!_FvD8K_dgPXe1b20?r6!sPTQMyCpq_ADt!jXOD" }),
    vueComponents: {
      category: {
        products: {
          description {
            length: 250 // 250 ja výchozí nastavení. Můžete nastavit libovolnou délku.
          },
          list: [
            // Nahraďte url produktů produkty z vaší administrace
            "https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/04/4.json",
            "https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/03/3.json",
            "https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/02/2.json",
            "https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/01/1.json"
          ]
        }
      }
    }
  })
  .initVueBundle();
</script>

Tento kód vytvoří kategorii produktů podle konfigurace a seznamu produktů. Výsledek by měl vypadat následovně.

Protože je na e-shopu většinou produktů více, tak je možná budete potřebovat rozdělit do kategorií. K tomu je zapotřebí změnit product list z pole na objekt obsahující cesty (kategorie) a poslední položka této cesty je pole, obsahující seznam produktů.

Pro překlad kategorí je potřeba přidat sekci vueComponentsTranslator.

vueComponentsTranslator: {
  localization: {
    cs: {
      categories: {
        ...
      }
    }
  }
}

Cesta a zanoření klíču (kategorií) musí být stejná jako je v seznamu produktů
Každá položka uvnitř překladové sekce kategorie má 3 možnosti nastavení:

  • title - nadpis kategorie
  • description - popis kategorie na konci stránky
  • menu - popisek v menu

Opět nahraďte script tag následujícím kódem.

<script>
  Apicart
  .setDevEnv()
  .configure({
    store: new Apicart.Store({ token: '9mCu3DlBCa4REI?Q7kKly!Rw6!_FvD8K_dgPXe1b20?r6!sPTQMyCpq_ADt!jXOD' }),
    vueComponentsTranslator: {
      localization: {
        cs: {
          categories: {
            clothes: {
              title: 'The most beautiful clothes',
              description: "The most beautiful t-shirts.",
              menu: 'T-shirts',
              new: {
                title: 'New collection',
                description: "T-shirts from our new collection.",
                menu: 'New collection'
              },
              discount: {
                title: 'Discounted t-shirts',
                description: "The most popular T-shirts for half price",
                menu: 'Discount'
              }
            }
          }
        }
      }
    },
    vueComponents: {
      category: {
        products: {
          list: {
            clothes: {
              new: [
                'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/01/1.json',
                'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/02/2.json',
                'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/03/3.json',
                'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/04/4.json',

              ],
              discount: [
                'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/04/4.json',
                'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/03/3.json',
                'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/02/2.json',
                'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/01/1.json',
              ]
            }
          }
        }
      }
    }
  })
  .initVueBundle();
</script>

Pokud se vše povedlo, výsledek by měl vypadat takto.

 

Každý produkt v kategorii by také měl mít detail stránku s detailem produktu. Apicart má komponentu, která vytvoření detailu produktu zjednodušuje. Pojďme se na ni podívat a vytvořit si stránku pro detail produktu..

Vytvořte si e-shop do 5 minut

Zkuste to. Je to zdarma.