Static E-commerce with Apicart Vue.js components in 5 minutes
Tags: apicart, vue, ecommerce, javascript
Published: 2020-03-09 07:38:17

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](https://pages.github.com/) or [Netlify](https://www.netlify.com/). 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](https://codepen.io/apicart/pen/YzXqGEb).

{% codepen https://codepen.io/apicart/pen/YzXqGEb %}

The code behind the example is only **45 lines long**. You can find it on the [Github Gists](https://gist.github.com/Machy8/a8ec2cee1587bc976685385d9571b34a) 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: 
1. Create an *index.html* file
2. Copy and paste the code from the following exmple into it 
3. Open the file in the browser (double click on it). 
You should see the same result like in the example above.

```html
<!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.

```js
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](https://github.com/apicart/packages-js/blob/master/packages/web-components-localization/localization/en.json) and add it into the configuration. In this example we will change the text of the buy button to Buy.

```js
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

```js
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.

```js
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:

```html
<!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!

![Administration preview](https://dev-to-uploads.s3.amazonaws.com/i/bl4noe23o41t6m67eiw2.png)

## 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!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ky1krca6j00tiit710mw.png)

---

Follow Apicart on social networks. More articles and news are coming soon!
👉 [Slack](https://apicart.slack.com/archives/CB9QSQRGX), [Twitter](https://twitter.com/apicart_en), [Github](https://github.com/apicart), [Instagram](https://www.instagram.com/apicart_en/), [LinkedIn](https://www.linkedin.com/company/apicart/)