Creating a static e-commerce by just copying and pasting a piece of code. Easily customizable, translatable without any programming. That was our goal and we have achieved that with the Vue.js.
Why static e-commerce with Apicart?
Today is modern to have just a single static page with for example a list of products with a buy button that can be easily and cheaply deployed to the Github Pages or Netlify. Thanks to this approach you also dont need to worry about the hosting price, because you dont need any extra performance.
Thats why we have created Vue.js components, with which you can create an e-commerce really fast for anyone who needs to sell a few products, wants a registration page for its lectures or plans to sell tickets.
Vue.js components showcase
Here is an example that runs on the Codepen.
The code behind the example is only 45 lines long. You can find it on the Github Gists page.
Let´s get started
Content:
- Installation
- Changing translations and currency
- Adding categories
- Administration
1 | Installation
In case you dont want to use the Codepen example above:
- Create an index.html file
- Copy and paste the code from the following exmple into it
- Open the file in the browser (double click on it). You should see the same result like in the example above.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Apicart vue bundle example">
<title>Vue default bundle example</title>
</head>
<body>
<!-- You can use custom layout. This is just for the example -->
<div style="max-width: 1902px; margin: 0 auto; padding: 0 20px;">
<header style="margin: 50px 0; display: flex; justify-content: center;">
<!-- #apicart-cart-dropdown is the target element for the Cart dropdown component. You can move it wherever you want -->
<div id="apicart-cart-dropdown"></div>
</header>
<main>
<!-- #apicart is the target for the application -->
<div id="apicart"></div>
</main>
</div>
<script src="https://cdn.jsdelivr.net/gh/apicart/packages-js@master/packages/vue-components/dist/bundles/default/default.full.min.js"></script>
<script>
Apicart
.setDevEnv()
.configure({
// Replace tokens with your PUBLIC tokens from the administration
store: new Apicart.Store({ token: "9mCu3DlBCa4REI?Q7kKly!Rw6!_FvD8K_dgPXe1b20?r6!sPTQMyCpq_ADt!jXOD" }),
payments: new Apicart.Payments({ token: 'Q84lNQyLl?nBGvKxxbcdc!nWFKEZrK?L_Is2r9IaOJo14ONbXw1SMlPIeptcaFza' }),
vueComponents: {
category: {
products: {
list: [
// Replace tokens with your PUBLIC tokens from the administration
"https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/04/4.json",
"https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/03/3.json",
"https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/02/2.json",
"https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/01/1.json"
]
}
}
}
})
.initVueBundle();
</script>
</body>
</html>
2 | Currency
First, you will probably want to change the currency used on your e-commerce. To do so, add the vueComponentsTranslator section into the code.
Apicart
...
.configure({
...
vueComponentsTranslator: {
currencyFormats: {
en: {
currency: {
currency: 'USD'
}
}
}
}
})
3 | Translations
All translations can be changed directly in the configuration. You just need to find the key you want to change in the translation file and add it into the configuration. In this example we will change the text of the buy button to Buy.
Apicart
...
.configure({
vueComponentsTranslator: {
...
localization: {
en: {
buyButton: 'Buy'
}
}
}
})
4 | Categories
In case you sell different products, you might want to add categories. Change the products section to this
Apicart
...
.configure({
...
vueComponents: {
category: {
products: {
list: {
clothes: {
new: [
'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/01/1.json',
'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/02/2.json',
'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/03/3.json',
'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/04/4.json',
],
discount: [
'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/04/4.json',
'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/03/3.json',
'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/02/2.json',
'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/01/1.json',
]
}
}
}
}
}
})
The categories will be rendered and asynchronously loaded. Categories needs description and links, so lets add them into the configuration.
The key path in the translations must match the path in the products list.
For example the clothes.title key path matches the main clothes section.
The clothes.new.title matches clothes.new section in products and etc.
Apicart
...
.configure({
...
vueComponentsTranslator: {
...
localization: {
en: {
categories: {
clothes: {
title: 'The most beautiful clothes',
description: "The most beautiful t-shirts.",
menu: 'T-shirts',
new: {
title: 'New collection',
description: "T-shirts from our new collection.",
menu: 'New collection'
},
discount: {
title: 'Discounted t-shirts',
description: "The most popular T-shirts for half price",
menu: 'Discount'
}
}
}
}
}
}
...
})
5 | Result
82 lines! Thats all!
The result code should looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Apicart vue bundle example">
<title>Vue default bundle example</title>
</head>
<body>
<div style="max-width: 1902px; margin: 0 auto; padding: 0 20px;">
<header style="margin: 50px 0; display: flex; justify-content: center;">
<div id="apicart-cart-dropdown"></div>
</header>
<main>
<div id="apicart"></div>
</main>
</div>
<script src="https://cdn.jsdelivr.net/gh/apicart/packages-js@1.0.0-alpha3/packages/vue-components/dist/bundles/default/default.full.min.js"></script>
<script>
Apicart
.setDevEnv()
.configure({
store: new Apicart.Store({ token: '9mCu3DlBCa4REI?Q7kKly!Rw6!_FvD8K_dgPXe1b20?r6!sPTQMyCpq_ADt!jXOD' }),
payments: new Apicart.Payments({ token: 'Q84lNQyLl?nBGvKxxbcdc!nWFKEZrK?L_Is2r9IaOJo14ONbXw1SMlPIeptcaFza' }),
vueComponentsTranslator: {
currencyFormats: {
en: {
currency: {
currency: 'USD'
}
}
},
localization: {
en: {
categories: {
clothes: {
title: 'The most beautiful clothes',
description: "The most beautiful t-shirts.",
menu: 'T-shirts',
new: {
title: 'New collection',
description: "T-shirts from our new collection.",
menu: 'New collection'
},
discount: {
title: 'Discounted t-shirts',
description: "The most popular T-shirts for half price",
menu: 'Discount'
}
}
}
}
}
},
vueComponents: {
category: {
products: {
list: {
clothes: {
new: [
'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/01/1.json',
'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/02/2.json',
'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/03/3.json',
'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/04/4.json',
],
discount: [
'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/04/4.json',
'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/03/3.json',
'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/02/2.json',
'https://cdn.apicart.dev/external/wlhv1egho2u4p0e0nkne2mks7f9btigi/data/01/1.json',
]
}
}
}
}
}
})
.initVueBundle();
</script>
</body>
</html>
Administration
In the example you have used the https://sandbox.apicart.net tokens.
In order to get into the administration and use your own products, you have to sign up and replace products and tokens following this guide.
Dont worry, the testing environment is forever for free!
Summary
Thanks to the Apicart Store, Vue.js components and the Github Pages hosting, we were able to create a functionall e-commerce, in a very short time.
And it can be even faster! If you download or fork our Sandbox you dont even need to copy and paste the code!
Let us know what do you think!
Follow Apicart on social networks. More articles and news are coming soon!
👉 Slack, Twitter, Github, Instagram, LinkedIn
Top comments (4)
Hey ! Great work, you got me interested !
I have one concern though, can't we fetch the data through an API ?
It's seem like you have to rewrite the code, to add and delete them.
Thomas, which data you would want to fetch?
Based on your question, we have added examples for available queries and mutations you can use apicart.net/en-us/product/apicart-....
Ho thanks! That's what I needed 👍😁
You are welcome! In case of any question don't hesitate to contact me. I will be glad to help.