How to make sales more personal with Alokai?

Filip Jedrasik

•

October 19, 2020

•

eCommerce

The stats revealed that adding personalization may increase sales by an average of 19% across the board, and there is no need to prove that consumers' birthdays are one of the most personal and pleasantly surprising ways to show them that you care. Having said that, I will show you how to add the "Date of birth" field to the customer profile on Alokai. With it, your company will gain the foundation for marketing campaigns, not only birthday-based. The tutorial is quite universal, so developers can use it to add any other fields.

Technical Whitepaper

Download whitepaper

This tutorial will show you how to apply this feature in Alokai 1.12.2 with VSF-API & Magento 2 on Backend. I will show you examples both for Default 1.12.1 and Capybara theme 1.0.2.

Let’s start!

What is the attribute name for the “Date of birth” in Magento 2?

To discover this - you have to open Magento 2 REST API Swagger Documentation. Under this link you should find the Customer data model:

Internally, in VSF-API we are using this exact endpoint (PUT /V1/customers/me).

We have a field called dob - which is an abbreviation for the date of birth. If you want, you could add support for any other field based on the data model.

At first, go to src/modules and create a vsf-date-of-birth directory, inside create index.ts file with that content:

src/modules/vsf-date-of-birth/index.ts

import { USER_INFO_LOADED } from '@vue-storefront/core/modules/user/store/mutation-types';
import { StorefrontModule } from '@vue-storefront/core/lib/modules';
import { extendStore } from '@vue-storefront/core/helpers';
const mutations = {
  [USER_INFO_LOADED] (state, currentUser) {
    state.current = currentUser
        ? {
            ...currentUser,
            ...(!('dob' in currentUser) ? { dob: '' } : {})
        }
        : currentUser;
  }
}
const userModule = {
  mutations
}
export const ExtendedUser: StorefrontModule = function () {
  extendStore('user', userModule);
}

As you can see - I am overriding one mutation from the user's module. I am adding the dob field to the user's object as MyProfile.vue component will build its own state based on this.$store.state.user.current - thanks to this change, inside we will have a reactive dob field in case it does not exist by default!

You might wonder why I’ve used this ternary operator. currentUser field would have a null value after logout by default - without “else part” (after the colon), it would be equal {} instead of null. It would break conditions in themes.

In the next step, you have to add a new module to the src/modules/client.ts file. Open it, at the top add import:

src/modules/client.ts

import { ExtendedUser } from './vsf-date-of-birth';

Inside registerClientModules call registerModule method with imported object:

src/modules/client.ts

export function registerClientModules () {
 // ...
 registerModule(ExtendedUser)
 // ...
}

Then we will customize the in-theme part.