Ecom Website Coding Standards

Code Structure

Layout - App
Pages - Controller
- Service layer
  - API SDK
  - 3rd party APIs
Vuex Actions
- Service Layer
  - API SDK
  - 3rd party APIs
Components
- Props
- Vuex Getters

API requests

API / Service layer diagram

      ┌──────────────────────────────┐
      │ API Layer                    │
      │                              ├─────────────────────┐
 ┌────► Making Axios requests in/out │                     │
 │    └──────────────────────────────┘                     │
 │                                                         │
 │  ONLY THE SERVICE LAYER TALKS TO THE API LAYER          │
 │                                                         │
 │    ┌────────────────────────────────────────────┐       │
 │    │ Service Layer (Business Logic)             │       │
 │    │                                            │       │
 └────┤ Exposes method(s) to talk to Api Layer     ◄───────┘
      │                                            │
      │ Transforms data, caches it (if needed) and │
      │ returns to calling function                │
      └──▲─────┬───────────────────────────────▲─┬─┘
         │     │                               │ │
         │     │                               │ │
         │     │                               │ │
         │     │                               │ │
         │     │                    ┌────────┐ │ │
         │     │                    │        │ │ │
   ┌─────┴─────▼────────────────────┴───┐ ┌──▼─┴─▼─────────────────────────┐
   │ Vue Component                      │ │ Vuex Store                     │
   │                                    │ │                                │
   │ Calls method in service layer      │ │ Calls service layer methods    │
   │ or in Vuex store if data is needed │ │ from actions and stores result │
   │ to be globally stored              │ └──┬─────────────────────────────┘
   └────────────────────────────────▲───┘    │
                                    │        │
                                    └────────┘

All services are in the following services folder
All requests from any page, component or Vuex store should be to the service layer, and similarily the responses it should receive should be from services layer. For example for updating Customer the method must be in services/customer.services.ts. Therefore,the page should have methods imported from services folder
All interfaces required for services should be in services folder, for example for customer.services.ts the interfaces will be in services/customer.services.d.ts

Functional Components

If a component you created does not have any reactive elements then it should be marked as functional component to reduce load time.

If your component does not need to be stateful, turning it into a functional components can increase your its rendering performance by 70%.

Example: components/UI/separators/HorizontalSeparator.vue

<template functional>
  <div class="relative flex py-5 items-center">
    <div class="flex-grow border-t border-grey-200"></div>
  </div>
</template>

You can learn more about functional component from this article

All static strings used in the project must come from the translation files. The translation files are located in utils/translations. The JSON file for all languages are in ~/utils/translations/data.

Here is an example

"mail_catalogues": "Free Catalogue",
"order_query": "Order Query",
"order_progress": "Order Progress",
"offers_info": "Offers & info",
"accountPreferences": {
  "title": "Account Preferences"
}

**NOTE: ** If you are updating any translation file, you must update all other translation json files to keep everything at sync.

In case if you are not aware of the translations in other languages you can copy the same translations as in the default translation (that would be UK-EN.json). But inform the client about the change and pending translations.

To access the translations in the vue file, here is an example

{{ $tc("accountPreferences.title") }}

UI Components

Whenever adding new UI components try to use it from the components/UI folder to keep the overall styling consistent. In case the UI component you want does not exist in the folder. You can create one in the folder and get it approved by the client or ask the client to add the desired component.

Mounted, AsyncData and Created hooks

There will be many occasions when you will require to run some code on the page load. If you use mounted hook for that which updates any reactive property then that property will only load after the page is loaded. So to avoid this you should use asyncData hook.

asyncData({app, params, store}){
    //... code here
    // app - this variable provides app context
    // params - query params
    // store - access to store
}

When using asyncData one thing to keep in mind that it will not have access to this keyword. But you can access the application context. If the code requires access to any methods then you should use created hook.

created(){
    //... code here
}

Use google maps or navigator in local system

If you use google maps or navigator in your local system, you will encounter the following error

chrome://flags/#allow-insecure-localhost

To avoid this and to ensure that you can test changes on local system you will need to the following

Use Host file editor to add a host for the IP adderss on which the server is running NOTE: for editing Host file you might require local admin access. In such case contact your manger
Go to nuxt.config.js and search for server, and comment the host property
```
server: {
  port: env.PORT || 8080,
  // host: env.HOST || "0.0.0.0",
  timing: false,
},
```
NOTE: This change must not be commited , so before commiting any change to github please ensure that the host property is uncommented

Some Common Typescript errors

Code Structure

API requests

API / Service layer diagram

Functional Components

Translations

UI Components

Mounted, AsyncData and Created hooks

Use google maps or navigator in local system

Use of Libraries

Utility functions

Get CDN URL for assets