Vytvoření stránky pro detail produktu

Pokud chcete na stránce zobrazit detail produktu namísto kategorie, stačí přidat konfiguraci pro detail produktu před tím než se inicializuje bundle (předtím než se zavolá .initVueBundle()). Následující kus kódu zkopírujte před konfiguraci kategorie a zavolání inicializace Vue aplikace.

<script>
  Apicart
  .configure({
    // ...
    vueComponents: {
      productDetail: {
        dataUrl: 'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/01/1.json'
      }
    }
  })
</script>

V případě, že chcete mít odkaz na detail vašeho produktu z kategorie, je zapotřebí změnit konfiguraci produktu v kategorii z URL adresy na objekt, který obsahuje dataUrl a pageUrl. Díky tomu bude možné produkt prokliknout a dostat se na jeho detail.

<script>
  Apicart.configure({
  vueComponents: {
    category: {
      products: {
        list: [
          {
            dataUrl: 'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/01/1.json',
            pageUrl: '/green-t-shirt/'
          }
        ]
      }
    }
  },
  // ...
});
</script>

Výše ukázanou konfiguraci kategorie můžete najít na stránkách našeho JAMstack sandboxu. Kód repzitáře je volně stažitelný, takže klidně prostudujte detaily :).

Kromě platebních metod a produktů také každý e-shop ale potřebuje specifické nastavení jako je měna či jazyk. Takže pojďme nastavovat a konfigurovat.

Vytvořte si e-shop do 5 minut

Zkuste to. Je to zdarma.