Skip to content

JavaScript Models

JavaScript Models are general-purpose objects used throughout the Storefront to manage and structure data. They streamline the handling of information, ensuring data is consistently formatted and accessible across the platform.

These models are commonly used in:

Web Components

JavaScript Models are integrated with web components to pass and manage data, enabling dynamic and interactive content. For example, a product model might include details like name, price, and availability, allowing components to easily display this information. This model can be passed to a web component that displays the product on the page, allowing the component to easily access and display all the needed information.

Events

Models are also used in events to ensure that data is consistently transmitted and received. For instance, when a user adds an item to their shopping cart, the relevant product model is passed along, keeping the cart system up to date with all necessary information.

API Methods

JavaScript Models provide a standardized way to handle data from APIs. For example, raw user data from an API can be converted into a user model that organizes and structures the information, making it easier to use across the frontend. This model can then be used throughout the frontend to access user details.

In essence, JavaScript Models help manage data efficiently, making it easier to build and maintain complex web applications.

Using Javascript Models

JavaScript Models simplify converting raw server data into formats that are easier to work with on the frontend. They typically transform data into models that include methods and properties tailored to the frontend's needs.

Example: Converting Product Loyalty data

Imagine an API returns the following raw product loyalty data:

{
    points: "123 pkt",
    points_float: 123,
    price: "4500 pkt",
    price_float: 4500
}

Using a JavaScript Model, this raw data can be converted into a more user-friendly format:

const productLoyaltyModel = {
    price: {
        points: 4500,
        pointsFormatted: "4500 pkt"
    },
    pointsGranted: {
        points: 123,
        pointsFormatted: "123 pkt"
    }
}

Here, the data is reorganized into a clearer format that separates raw values from their formatted versions, making it easier for the frontend to display the information consistently.

Why This Matters

Using JavaScript Models enhances the functionality and reliability of the Storefront. Consistently formatted and organized data leads to a more seamless and intuitive user experience, enabling features like real-time updates and dynamic content.

With these models, the Storefront can efficiently manage and present data, ensuring users interact with clear, reliable, and responsive content across the platform, contributing to a polished and professional user experience.

Available Models

Here is a list of all available models in Storefront:

Basket Models

Category Models

Delivery Models

Pickup Models

Flash Messages Models

Price Models

Product Models

Bundle Models

Variants Models

Resolution Models

Search Models

Shipping Models

User Models