Car Grades Pages Personalization

What information is available

T1.ctx

When a car grade page is loaded, the server loads several items into the T1.ctx object in the client.

T1.ctx = {
    ...,
    grade: {
        gradeId: guid, // String
        bodyTypeId: guid, // String
        colourId: guid, // String
        engineId: guid, //String
        gradePageUrl: pathname // String
    }
}

Important: When you want to use information about the grade, don't rely on this data. A user can update the colour or engine during the page lifetime and this information would be out of date. See the section with localstorage information to see how you can use the latest, correct data.

localstorage

Data in localstorage is available in com.toyota.tme.t1.personalization.

There are 2 items of interest for the car grades pages.

com.toyota.tme.t1.personalization = {
    lastVisitedGrades: [], // list of last visited cars
    lastGradeOptions: {} // set of latest chosen options per model
}

lastVisitedGrades

This item is an array of the latest (max) 3 car grade page visits, including the current one. The list is ordered by time, meaning that the first item is the oldest and the latest item the youngest (current)

A single entry in this list looks as follows:

{
    model: model, // String
    gradeId: guid, // String
    bodyTypeId: guid, // String
    colourId: guid, // String
    engineId: guid // String
}

Because this list contains the current visit as an entry, it's recommended to use the latest item of this list to obtain the most current information about what the user is seeing.

lastGradeOptions

This item is a set with the latest selection for each individual model. So for each model, we remember the last selected bodytype, colour and engine.

The set will look like this:

{
    hilux: {
        bodyTypeId: guid, // String
        colourId: guid, // String
        engineId: guid // String
    },
    au: {
        ...
    },
    ...
}

An example of usage is to see what the latest selected colour for the model of car the user is currently viewing:

colourGuid = lastGradeOptions[T1.ctx.model].colourId;

Url

The url of the page contains important information about what the user is currently seeing on the page and should be kept up to date to date.

The server is responsible for serving the most appropriate content, based on the url requested. The personalization part of the url is visible in the pipe parameters after the page title (eg. /new-cars///grade=|bodyType=|colour=|engine=.

When a user action changes the content without refreshing the page, for example clicking a different colour in the colour picker, the url is updated with history.replaceState() so that bookmarking and sharing of pages works as expected. An added benefit is that the browsers back/forward navigation buttons also take user actions into account.

When is information stored & updated

Currently, information is stored on page load, based on the initial T1.ctx.grade information. However, this data can change as a result of user interaction during the lifetime of the page. The following components can update this information without reloading the page:

Information is then updated in the following places: