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. You have to do only two things. Create an index.html file and copy the following code into it between the <body></body> tags.
<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.
<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.
<div id="apicart-cart-dropdown"></div>
The #apicart element will be replaced with the rest of the application such as checkout dialog.
<div id="apicart"></div>
The token and products above are for the Apicart Sandbox. If you want to work with your own products and see your own statistics you have to follow this guide. The testing environment is for free :).
Bellow is working example.
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
Top comments (0)