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.