Static E-commerce with Apicart Vue.js components in 5 minutes

07.03.2020

API Vue.Js Ecommerce

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?

Sometime you just need a static list of products with a buy button and deliver it as soon as possible in the easiest way for example on the Github Pages or Netlify. Sometime you just dont need any extra backend and think about the price for hosting and etc. 

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: 
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.

<!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 us. More articles and news are coming soon!

👉 Slack, Twitter, Github, Instagram, LinkedIn

Create E-commerce in 5 minutes

Try it. It is for free.