La clé properties permet de modifier facilement les informations des entités affichées un peu partout (les informations d'une order, d'un parcel, ou de line items, ou même des pop-ins).
Pour les orders, parcels et line items
La structure de l'objet properties est la suivante:
properties (object) > page (object) > entity (array de taille 0 à 3) > propriétés (array de string)
| Code Block | ||||
|---|---|---|---|---|
| ||||
properties:
claim:
order: [
['id', 'delivery.type'], # Ligne 1
['date'] # Ligne 2
]
line_item: [...]
pack:
parcel: [...]
line_item: [...] |
Dans l'exemple ci-dessus, la première ligne d'order contiendra les propriétés order.id et order.delivery.type tels que récupérés en appelant l'OMS, et séparés par le caractère pipe |
Dans le cas des pages qui supportent le multi colisage ou empaquetage (bag et pack) il y a une entité appele multi_order, qui correponde a celle qu'est utilisé lors que la store app est configuré pour faire de multi colisage empaquetage (clé options.create_multi_parcels)
Pour les pop-ins
La pop-in affichée sur diverses pages peut également être personnalisée. Le format de la config est cependant un peu différent:
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
properties:
popin:
line_item: [
['features.name'], # Titre de la pop-in
['|rawstring:Référence', 'item_id'] # Ligne 1 Sous l'image
['|rawstring:Prix', 'payment.price'] # Ligne 2 Sous l'image
['|rawstring:Couleur', 'features.color'] # Ligne 3 Sous l'image
['|rawstring:Taille', 'features.size'] # Ligne 4 Sous l'image
]
|
Dans l'exemple ci-dessus, la première ligne définit le titre de la pop-in, et toutes les lignes suivantes seront affichées sous l'image. Les éléments ne seront pas séparés par le pipe |, mais divisés en colonnes (voir screenshot ci-dessus).
| Tip |
|---|
Pour voir les properties par défaut, utiliser la commande |
Formatter les propriétés
Souvent, les propriétés des objets nécessitent d'être formattés pour des raisons esthétiques.
Il est possible d'utiliser un ou plusieurs formatteurs avec la sytaxe suivante 'property|formatter:option|formatter|formatter'.
Pour que la première lettre du type de livraison soit en majuscule, on utilisera 'delivery.type|capitalize' par exemple.
Si je veux récupérer le 3ième élément d'un tableau (index 2), j'utiliserai delivery.destination.address.lines|arrayelement:2.
| Tip | ||
|---|---|---|
| ||
Une syntaxe de parenthèsage est disponible pour les expressions les plus complexes. Les propriètés les plus imbriquées dans des parenthèses seront évaluées en priorité. Ainsi, la proprièté " En l'absence de parenthèses, les formatteurs sont appliqués de gauche à droite. |
...
arrayelement...
types|arrayelement:0
ffs
...
capitalize...
features.name|capitalize
Summer dress
...
concat...
carrier|concat:tracking_code
ups64477466854
...
concatraw...
state|concatraw:par l'entrepôt
dispatched par l'entrepôt
...
currency...
payment.price|currency:payment.currency
35,99 £
...
currencyraw...
payment.price|currencyraw:USD
35,99 $
...
dateto...
Formate un intervalle de date
| Status | ||||
|---|---|---|---|---|
|
...
eta_start|dateto:end_end
27 - 30 september
...
expiration_dates.client_collect.expiration|expirationcolor:86400,danger,(expiration_dates.client_collect.expiration|moment:DD/MM/YYYY|transcount:carry.reserved_till)
...
filter...
line_items|filter:state=removed,mistaken|length|concatraw: items sont removed ou mistaken
5 items sont removed ou mistaken
...
filterlength...
line_items|filterlength:state=removed,mistaken|transcount:order.cancel_count(5 canceled)
...
forcount...
parcels|forcount:piece_ids|transcount:order.item_count...
hierarchicalchoose...
types|hierarchicalchoose:ois,ckc,ffs...
length...
piece_ids|length
3
...
Formate le résultat sous forme de lien blank
...
lowercase...
features.name|lowercase
summer dress
...
moment...
date|moment:DD/MM/YYYY
29/03/2018
...
les différentes valeurs a multiplier
truncated= : précision du résultat (chiffre après la virgule), par défaut a 2
unit= : l'unité de mesure du résultat
les arguments sont séparé par une virgule
|multiply:x,y,z,truncated=2,unit=kg
x = 0.3
y = 1.2
z = 1.8
0.648 kg
...
prependraw...
state|prependraw:L'etat est
L'etat est dispatched
...
rawstring...
|rawstring:Charasse
Charasse
...
sum...
line_items|sum:payment.price
75.8
...
trackingcode...
tracking_code|trackingcode:parcel.no_tracking_information
...
trans...
|rawstring:states.|concat:state|trans
Ensacheeey
...
transcount...
line_items|length|transcount:order.item_count
3 items
...
transcountnotnull...
Prend un nombre en entrée et appelle une traduction avec pluralisation. N'affiche rien si le nombre vaut 0. (v5.5)
Appelle une traduction avec pluralisation sur l'input. N'affiche rien si !input vaut false au sens de javascript. (v10.0)
...
line_items|length|transcountnotnull:order.item_count...
unfilterlength...
line_items|unfilterlength:state=removed,mistaken|concatraw: not canceled5 not canceled
...
uppercase...
features.name|uppercase
SUMMER DRESS
...
Prend une date en entrée et retourne la difference a partir de maintenant dans la lang du site.
(V11.0)
...
Attention à la façon dont les propriétés sont surchargées. Un tableau de 2 éléments surchargé par un tableau vide reste un tableau de 2 éléments.
...
L'avantage: il est possible de rajouter une ligne à l'order de la façon suivante, sans que les deux premières lignes ne soient écrasées.
...
| Table of Contents | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Introduction
| Note |
|---|
As a prerequisite, you need to ensure that the fields you want to display are actually retrieved in the query. For more information, click here /wiki/spaces/DOCUMENTAT/pages/1140785164 |
What we call ‘displayed properties’ is the information displayed on all Store App display blocks, at different levels (orders, lines, parcels, etc) as well as in the popins.
...
You can find the displayed properties configuration in the Configuration > Store App > Page settings > {Page name} > Displayed properties section of your admin backoffice.
The default configuration is displayed, but it can be overwritten. In general, property blocks are organised into 3 lines, each of which can be overloaded independently
...
Tip: to return to the default configuration, click on the wheel and then ‘return to default configuration’.
Entities table
In each page, the display blocks correspond to particular entities, and it is sometimes difficult to navigate. You can use the table below to find the names of the entities used page by page.
| Expand | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Display the correct field
It's not easy to find the right path for the field you want to display, especially as the logic depends on each page.
The best way is to use the paths configured by default on the entity, and try to reproduce the same path with the field you want to add.
Example:
containers.0.parcel.delivery.carrier.name displays the name of the carrier in the ‘order’ section of the pack page
Specific formatting
Syntax
Properties often need to be formatted for aesthetic reasons.
It is possible to use one or more formats with the following syntax field|formatter1:option|formatter2|formatter3.
In the absence of parentheses, formats are applied from left to right.
Examples:
to capitalize the first letter of the delivery type, use
delivery.type|capitalizeto retrieve the 3rd element of an array (index 2), I'll use
delivery.destination.address.lines|arrayelement:2
| Note |
|---|
The format |
Parenthesis
A parenthesis syntax is available for the most complex expressions.
Properties that are nested within parentheses will be evaluated first.
Example:
The following property will display 1 / 2.
parcels|forcount:line_item_ids|concatraw: / |concatraw: (line_item_groups|length)
All formats available
Name | Description | Option | Example → Render |
|---|---|---|---|
| Retrieves the element of an array with index. | Element index |
|
| Replace all letters with lower case, except the first, which is upper case. |
| |
| Concatenates another property, without spaces. | Property to concatenate |
|
| Concatenates a string. | Defined string |
|
| Formats a number into a currency, with a symbol defined in another property. | Property containing the currency |
|
| Formats a number into a currency, with a symbol defined in the expression. | The currency to use |
|
| Format a date range. | Property corresponding to end date |
|
| Divides a value of a property by an another. | Divisor property |
|
| Returns a date in the color sent if expired. It is possible to pass a relative parameter (seconds to be subtracted from the expiry date). | The warning value to be subtracted from the current date for the calculation (in seconds) The color to be set if the date has expired. The value to be returned. |
|
| Scans an array and keeps the elements of this array whose property is worth one of the values provided. | Comma-separated list of values |
|
| Scans an array and counts the number of elements in the array whose property has one of the provided values. | Comma-separated list of values |
|
| Scans an array and counts the size of each property in the array. | Property |
|
| Scans an array and returns the element with the lowest index in the array defined in option . If nothing matches, does nothing. | Comma-separated list of values |
|
| Calculates the total quantity of indexes in the supplied index ranges. |
| |
| Returns the length attribute of an array or string. |
| |
| Formats the result as a link. | Property |
|
| Formats the result as a blank link. | Property |
|
| Replace all letters with lowercase letters. |
| |
| Format a timestamp using momentjs. | Date format |
|
| Multiplies two values. | Can take optional features or constants. You can limit the number of decimal places by adding a second argument separated by a comma. By default, results are limited to 2 digits after the decimal point. |
|
| Concatenates another property on the left. | Property |
|
| Concatenates a string on the left. | Defined string |
|
| Replaces the result with a string defined. | Defined string |
|
| Scans an array and sum the given property in the array. | Property |
|
| Displays tracking code if available, translates key passed in parameter otherwise. | Key to translate |
|
| Translates the result (if the translation key exists). |
| |
| Takes a number as input and calls a translation with pluralization. | Key to translate |
|
| Calls a translation with pluralization on the input. Displays nothing if !input is false in the javascript sense. | Key to translate |
with line_item_groups = [] : with 2 line_item_groups: |
| Scans an array and counts the number of elements whose property is not one of the provided values. | Comma-separated list of values |
|
| Replace all letters with capital letters. |
| |
| Takes a date as input and returns the difference from now in the site's lang. |
|