How to add a shopping cart to any website in a minute with Apicart Store
Tags: apicart, vue, ecommerce, jamstack
Published: 2020-06-15 09:39:00

Copy&paste a piece of code and turn any website into an e-commerce in a minute. Start selling products or courses without programming. Perfect for JAMstack! Easily integrable into Wordpress, Joomla or Drupal.

We are going to use [Apicart Store](https://apicart.net/en-us/product/apicart-store/). You have to do only two things. Create an index.html file and copy the following code into it between the `<body></body>` tags.

```html
<div>
  <!-- Replace path to products by the url of your products from the administration -->
  <button data-apicart-add-item="https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/01/1.json">Buy</button>
  <button data-apicart-remove-item="https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/01/1.json">Remove</button>
  <div id="app">
    <!-- #apicart-cart-dropdown will be replaced with the cart dropdown -->
    <div id="apicart-cart-dropdown"></div>
    <!-- #apicart will be replaced with the rest of the application -->
    <div id="apicart"></div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@apicart/vue-components@1.0.0-alpha7/dist/bundles/default/default.full.min.js"></script>
<script>
  Apicart.setDevEnv().configure({
    // Replace Apicart Sandbox token with your token from the administration
    store: new Apicart.Store({ token: '9mCu3DlBCa4REI?Q7kKly!Rw6!_FvD8K_dgPXe1b20?r6!sPTQMyCpq_ADt!jXOD' })
  }).initVueBundle();
</script>
```
And that's all 🤘.

## How it works?
Every button with `data-apicart-add-item` adds products into the cart and `data-apicart-remove-item` removes them. 
```html
  <button data-apicart-add-item="https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/01/1.json">Buy</button>
  <button data-apicart-remove-item="https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/01/1.json">Remove</button>
```
The `#apicart-cart-dropdown` will be replaced with a cart dropdown. You can put this element anywhere you want in your page.
```html
<div id="apicart-cart-dropdown"></div>
```
The #apicart element will be replaced with the rest of the application such as checkout dialog.
```html
<div id="apicart"></div>
```

The token and products above are for the [Apicart Sandbox](https://sandbox.apicart.net). If you want to work with your own products and see your own statistics you have to [follow this guide](https://apicart.net/en-us/product/apicart-store/getting-started/installation/). The testing environment is for free :).

Bellow is working example.
{% codepen https://codepen.io/apicart/pen/PoPjEoE %}

## Why should I use Apicart Store?
Apicart Store is focused on simplicity. It is designed for lazy people and developers 😀. You don't have to program, study and maintain almost anything. But there is plenty of other reasons:

- **Perfect for JAMstack websites**: A few lines of code can turn your static website into a functionall e-commerce.
- **It allows you to turn your existing website into an e-commerce easily**: Do you want to sell courses? Copy the code above and you can start selling.
- **Apicart Store is easily integrable into Wordpress, Joomla, Drupal and other CMS**: If you don't want to configure WooCommerce for a few products, Apicart Store is a perfect alternative.

---

Let me know what do you think!😎
Originally published at [Apicart.net](https://apicart.net/en-us/blog/how-to-add-a-shopping-cart-to-any-website-in-a-minute)