Installation

Let´s start with a simple example in which we will add a buy button and a shopping cart to our website.

First, create an index.html and add the Apicart script into it.

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

Now we need to configure the Apicart Store and initialize the default Vue bundle. Put the following code after code above.

<script>
  Apicart
  .setDevEnv() // Switch to dev environment
  .configure({
    store: new Apicart.Store({
      token: "9mCu3DlBCa4REI?Q7kKly!Rw6!_FvD8K_dgPXe1b20?r6!sPTQMyCpq_ADt!jXOD"
    })
  })
  .initVueBundle();
</script>

In order to render the default aplication we need to add a lines of HTML. Put the following code before the Apicart dependency code.

<!-- #apicart-cart-dropdown will be replaced by dropdown --->
<div id="apicart-cart-dropdown"></div>

<!-- 
  After clicking on any element with the data-apicart-add-item attribute
  an item with the given url will be added into the cart
--->
<button data-apicart-add-item="https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/01/1.json">
  Buy
</button>

<!-- #apicart will be replaced by components according to configuration --->
<div id="apicart"></div>

The result should looks like this.

If you want to work with your own products and see your own statistics you have to sign up. Registration is done on the testing environment and is for free. For production purposes, sign up on the production environment.

When you sign up, go to the https://store-admin.apicart.dev. In the left menu, select domains overview, then on the domains page select your domain and on the selected domain page open tabs with tokens tab. 
Now Copy the  PUBLIC TOKENS for the Store and paste them into your index.html.

store: new Apicart.Store({
	token: "REPLACE THIS TEXT BY PUBLIC STORE TOKEN"
})

The application will not be fully functional after the update. It is because there are still not your products and payment and delivery methods. So let´s add first product.

Create E-commerce in 5 minutes

Try it. It is for free.