Product

1 Basic information
2 Product variants
3 Detailed information
4 Stock values
5 Shipping methods
6 Map

Clicking on an item in the catalog takes you to the product page. You can access information about the product such as the description, the pricing or the availability. This page is used to build the basket that will lead to an ordering.

Basic information

For the item to be displayed correctly, price and image features must be given.

Clicking on the image opens a larger, higher-quality view, which can be saved in the big_image field. If several values are given in the table, a swappable image carousel is displayed as below.

If the promotional fields “compare_at_price” and “promo_percentage” are given in the sales channel features, then the promotions will be displayed as follows.

Product variants

For variations of the same product to appear on the page, it is necessary to register the same product_id in all corresponding items.

Then, it is necessary to indicate the features that differentiate the different versions. By default, variations in size and color will be suggested. But this configuration can be overloaded in the declinations configuration key which is an array of objects in which the corresponding features are indicated.

Path : Configuration > Store App > Pages > Catalog > Specific settings > Options

{
    "declinations": [
        {
            "feature": "color"
        },
        {
            "feature": "size"
        }
    ]
}

By default, the feature text is displayed. However, this can be enhanced by displaying an image. To do this, add the key "display_as": "feature-preview" field to the above configuration, and the key "image_feature_name": "{image}" to display the preferred image feature.

Path : Configuration > Store App > Pages > Catalog > Specific settings > Options

{
    "declinations": [
        {
            "feature": "color",
            "display_as": feature-preview",
            "image_feature_name": "image"
        },
        {
            "feature": "size"
        }
    ]
}

Detailed information

Below the general information, you'll find detailed information about the item. This configuration must be made in the Displayed Properties section at the root of the page. More information here: Displayed properties

On each line, you must indicate the name of the feature to be displayed. The title must be translated, and is displayed with the translation key product.title_{number}

Example:

With the features filled in and the titles translated, the result is as follows.

You can also add tag in the description of the item.

[
    'div' -- Conteneur générique pour structurer le contenu sans signification sémantique.
    'b' -- Met le texte en gras sans ajouter d'importance sémantique.
    'strong' -- Met le texte en gras avec une signification sémantique (insiste sur l'importance).
    'i'-- Met le texte en italique sans importance particulière (souvent pour un style ou une voix différente).
    'br' -- Saut de ligne (retour à la ligne sans créer de nouveau paragraphe).
    'ul' -- Liste non ordonnée (à puces).
    'ol' -- Liste ordonnée (numérotée).
    'li' -- Élément d'une liste (utilisé à l'intérieur de ul ou ol).
    'dl' -- Liste de définitions (termes + définitions).
    'dt' -- Terme dans une liste de définitions (dl).
    'dd' -- Définition associée à un terme (dt) dans une liste de définitions.
    'u' -- Souligne le texte (souvent utilisé à des fins stylistiques, mais pas recommandé pour indiquer un lien).
    'table' -- Définit un tableau de données.
    'tr' -- Ligne d’un tableau.
    'td' -- Cellule de données dans une ligne de tableau.
    'th' -- Cellule d’en-tête dans une ligne de tableau (souvent en gras et centrée par défaut).
    'p' -- Paragraphe de texte.
    'tbody' -- Regroupe le corps principal d’un tableau (exclut les thead et tfoot).
    'pre' -- Affiche du texte préformaté, en conservant les espaces et retours à la ligne.
    'em' -- Met en emphase le texte (souvent affiché en italique et a une signification sémantique).
    'blockquote' -- Utilisé pour une citation longue provenant d’une autre source.
    'code' -- Représente du code source, affiché dans une police à chasse fixe.
  ]

Stock values

The product page uses two different stock queries to display stock availability.

detailed- retrieves only the stock of the store on which you are logged in. Corresponds to all green displays below
unified- retrieves the stock of the entire network. Corresponds to all orange displays below.

Order taking

If the product is available in store, the Immediate pick-up button is highlighted. However, we always leave the option of clicking in the event of an inventory error.

If the product is in stock in the store network, the Order button is highlighted. If stock is 0, no order can be placed.

Inventory matrix

The store stock value is displayed by default if it is not 0. Otherwise, we display the stock level throughout the network.

Display is limited to 99 quantities.

When an expected stock arrival date is detected, this information will be prominently displayed to indicate additional future inventory. Only the nearest future stock arrival will be shown. For instance, if we anticipate the arrival of 3 units in two days and another 5 units in four days, only the stock due in two days will be displayed initially.

The default queries are detailed and unified, but other queries can also be set up. For more information about stock queries, see Stock queries.

To override existing queries, you can modify the configuration keys stock_requests.mapping.default.detailed and stock_requests.mapping.default.unified.

Path : Configuration > Store App > Pages > Catalog > Specific settings > Options

{
    "stock_requests": {
        "mapping": {
            "default": {
                "detailed": "ois_detailed",
                "unified": "ois_unified"
            }
        }
    }
}

You can also apply different stock requests between stores. To do this, you'll need to use the stock locations' manual tags. This tag must be set in the stock_requests.classification_key field, and the various values of this tag must be mapped to the stock_requests.mapping.{value} field. See example below.

It is necessary to keep the “default” value to be sure not to have an error if the manual tag is non-existent.

Manual tag configuration:

Path : Configuration > Store App > Pages > Catalog > Specific settings > Options

{
    "stock_requests": {
        "classification_key": "country",
        "mapping": {
            "GB": {
                "detailed": "detailed_ois_gb",
                "unified": "unified_ois_gb"
            },
            "FR": {
                "detailed": "detailed_ois_fr",
                "unified": "unified_ois_fr"
            },
            "default": {
                "detailed": "detailed_ois_gb",
                "unified": "unified_ois_gb"
            }
        }
    }
}

Shipping methods

If the “Delivery Promise” module is activated on the project, delivery methods price and estimated arrival date can be displayed. Calculations are based on country and zip code. The default is the store's, but this can be changed by clicking on the pen.

To configure these methods, see Shipping options

Map

The last section of this page is a map showing product availability in nearby stores. Stores within a 100km radius are searched, up to a limit of 30 stores. This map is not configurable at the moment.