Deploy a Serverless e-commerce Site on Vuejs in a few Quick Steps
By: Rodrigo Mencos Murga
Tags: Ecommerce, AWS, Kor, Vuejs, Serverless

Hey folks,

Last time I wrote a simple tutorial on how to start a serverless Vuejs site. You can check it out here https://medium.com/kor-framework/building-a-serverless-vue-js-landing-site-4369eed8e3ea

After that was published I was asked if there was any easy way to add an ecommerce platform to that same landing site, and there is!

Before we start, I will show you how the final result looks:

What do you need?

If you followed my previous post, you already should have a

If you still don’t have any of this, go and check out my previous post.

The approach

The way this will work is by embedding an already existing e-commerce shop made on https://my.ecwid.com (they also have a free tier option, yay!).

“Hey Rodrigo, but Ecwid already has an instant site option, why do I need this?”

There are many benefits of having your own landing site instead of using the predefined ones:

You will have FULL control of everything. Do you need a blog section? A fancy header? Or if there is anything nice or custom that you want to implement then you need control. At the moment, with Ecwid static sites this is not possible. Very cost effective infraestructure. Since you are doing it serverless with KOR watch the spend $$$ go down. Better, faster, stronger. Even though you could do this with Wordpress and plugins, you will suffer from a slow and clumsy site. (Plus, you would need to host it somewhere and private VPS cost $$$). With this solution your site will be very fast and can scale on demand.

Step 1

Go and make a free ecwid account . Set up your shop as you want.

Step 2

For this to work, we need to create a new component inside our Vuejs site. So go to the folder were you stored your local code for your landing site and create a new file in the folder where you stored the components. This is what my Ecwid.vue looks like:

<template>

<div :id="`my-store-${storeId}`"></div>

</template>

<script> function injectEcwidScript(storeId) {

const ecwidScript = document.createElement("script");

ecwidScript.setAttribute("type", "text/javascript");

ecwidScript.setAttribute("charset", "utf-8");

ecwidScript.setAttribute("data-cfasync", "false");

ecwidScript.setAttribute(

"src",

`https://app.ecwid.com/script.js?${storeId}&data_platform=code&data_date=2020-02-17`

);

ecwidScript.onload = injectEcwidProductBrowser(storeId); document.head.appendChild(ecwidScript); } function injectEcwidProductBrowser(storeId) {

return function () {

const ecwidBrowserScript = document.createElement("script");

ecwidBrowserScript.setAttribute("type", "text/javascript");

ecwidBrowserScript.setAttribute("charset", "utf-8");

ecwidBrowserScript.text = `xProductBrowser("categoriesPerRow=3","views=grid(20,3) list(60) table(60)","categoryView=grid","searchView=list","id=my-store-${storeId}");`;

document.head.appendChild(ecwidBrowserScript);

}

} export default {

name: "Ecwid",

props: {

storeId: {

type: Number,

default: 1003

}

}, mounted() {

injectEcwidScript(this.storeId);

}

};

</script>

<style>

</style>

This is stored in my components folder.

Step 3

Now we just need to call the component wherever we need the products to be shown. In my case, I had a Services.vue component where I want to show the products. This is the code:

<script>

import Ecwid from "./Ecwid.vue"; export default {

name: "App",

components: {

Ecwid

} };

</script> <template>

<!--START SERVICES-->

<section class="section pt-5" id="services">

<div class="container">

<div class="row">

<div class="col-lg-8 offset-lg-2">

<h1 class="section-title text-center">Nuestros Productos</h1>

<div id="app">

<Ecwid :storeId="3111111"/>

</div>



<div class="section-title-border margin-t-20"></div>

</div>

</div>

</div>

</section>

<!--START SERVICES-->

</template>

IMPORTANT: You will need to change the storeId for your own ecwid store.

Here is where you can find your store Id. Log into your ecwid panel, find your store ID at the bottom of the dashboard section, and copy the code.

Step 4 — Testing time

Let’s update our code on KOR and see what happens. After we pull the changes from the repo, we click on “update” inside the releases section, more info about this here.

After a few minutes, we will see how our site looks:

Now you just need to update your ecwid store and all the changes will be reflected automatically on your cool vuejs site.