Instalace

Začneme jednoduchou ukázkou, jak přidat tlačítko koupit a nákupní košík do naší stránky.

Nejdříve vytvořte soubor index.html a přidejte do něj link na Apicart script.

<script src="https://cdn.jsdelivr.net/npm/@apicart/vue-components@1.0.0-alpha7/dist/bundles/default/default.full.min.js"></script>

Teď je potřeba nastavit Apicart Store a inicializovat bundle (aplikaci). Zkopírujte a vložte následující kus kódu za předešlý kód.

<script>
  Apicart
  .setDevEnv() // Přepni na vývojové prostředí
  .configure({
    store: new Apicart.Store({
      // Nahraďte tento token PUBLIC TOKENEM pro store z vaší administrace
      token: "9mCu3DlBCa4REI?Q7kKly!Rw6!_FvD8K_dgPXe1b20?r6!sPTQMyCpq_ADt!jXOD"
    })
  })
  .initVueBundle();
</script>

Pro zobrazení a spuštění aplikace je potřeba přidat kousek html kódu do stránky. Zkopírujte a vložte následující kus kódu před script tagy.

<!-- #apicart-cart-dropdown bude nahrazen dropdownem košíku --->
<div id="apicart-cart-dropdown"></div>

<!-- 
  Po kliknutí na jakýkoliv element s data-apicart-add-item atributem
  se přidá položka do košíku s danou url adresou
--->
<button data-apicart-add-item="https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/01/1.json">
  Koupit
</button>

<!-- #apicart bude nahrazen Apicart komponentama podle konfigurace --->
<div id="apicart"></div>

Výsledek by měl vypadak takto.

Pokud chcete pracovat se svými produkty a vidět vlastní statistiky v administraci je potřeba se zaregistrovat. Registrace je prováděna na testovacím prostředí, které je zdarma. Pro produkční účely se zaregistrujte na produkčním prostředí.

Přejděte na hlavní stránku https://store-admin.apicart.dev. V levém menu zvolte přehled domén, na stránce domén zvolte vaši doménu a na stránce domény klikněte na záložku s tokeny.
Zde zkopírujte VEŘEJNÉ TOKENY pro Store a vložte je do souboru index.html.

store: new Apicart.Store({
	token: "TENTO TEXT NAHRAĎTE VAŠÍM TOKENEM"
})

Po úpravě ještě nebude aplikace plně fuknční, protože zde nejsou vaše produkty, platební metody apod. Takže si pojďme vytvořit produkty.