Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents
minLevel1
maxLevel6
outlinefalse
stylenone
typelist
printabletrue

Introduction

...

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
titleSee entities table

Page

Entities

Sections

Claim

  • Order

  • Line item group

  • Classic claim page

Image Modified

Picking

  • Endpoint order

  • Piece group

  • Order

  • Picking page before selection

Image Modified
  • Picking page after selection

Image Modified

Prepare (select)

  • Endpoint order

  • Piece group

  • Classic prepare select page

Image Modified

Pack

  • Order

  • Line item group

  • Order multi

  • Multi container

  • Endpoint order

  • Piece group

  • Classic pack page

Image Modified
  • Classic pack page with “multi parcel” allowed

Image ModifiedImage Modified
  • Pack page in “Store as a Warehouse” mode (when the container is contained in a cell, a parking or a trolley).

Image Modified

Pack - scan

  • Order

  • Line item group

  • Order multi

  • Multi container

  • Endpoint order

  • Piece group

  • Carrier pop-in

  • Parcel

  • Classic pack scan page before selection

Image Modified
  • Pack scan page before selection with “multi parcel” allowed

Image ModifiedImage Modified
  • Classic pack scan page after selection

Image Modified
  • Pack scan page after selection with “multi parcel” allowed

Image ModifiedImage Modified
  • Document printing pop-in after scan

Image Modified
  • Pack scan page in “Store as a Warehouse” mode (when the container is contained in a cell, a parking or a trolley).

Image Modified

Dispatch

  • Parcel

  • Line item Group

  • Shipment manifest

  • Classic dispatch page

Image Modified
  • Dispatch page with the “need_shipment_manifests” option enabled

Image ModifiedImage Modified

Bag

  • Order

  • Line item group

  • Order multi

  • Multi container

  • Endpoint order

  • Piece group

  • Classic bag page

Image Modified
  • Classic bag page with “multi parcel” allowed

Image ModifiedImage Modified
  • Bag page in “Store as a Warehouse” mode (when the container is contained in a cell, a parking or a trolley)

Image Modified

Bag - scan

  • Order

  • Line item group

  • Order multi

  • Multi container

  • Endpoint order

  • Piece group

  • Carrier pop-in

  • Classic bag scan page before selection

image-20241114-170216.pngImage Modified
  • Bag scan page before selection with “multi parcel” allowed

Image Modifiedimage-20241114-170239.pngImage Modified
  • Classic bag scan page after selection

Image Modified
  • Bag scan page after selection with “multi parcel” allowed

Image ModifiedImage Modified
  • Document printing pop-in after scan

Image Modified
  • Bag scan page in “Store as a Warehouse” mode (when the container is contained in a cell, a parking or a trolley).

Image Modified

Receive

  • Parcel

  • Line item group

  • Classic receive page

Image Modified

Collect

  • Order

  • Bag

  • Box

  • Line item group

  • Classic collect page

Image Modified

Reserve

  • Order

  • Line item group

  • Classic reserve page

Image Modified

Carry

  • Parcel

  • Bag

  • Line item group

  • Classic carry page

Image Modified

Catalog

Basket CRM

  • Item

  • Basket CRM page of the catalog

Image Modified

Catalog

Basket customer payment

  • Customer

  • Basket customer payment page of the catalog

Image Modified

Catalog

Basket Shipping options

Image Removed

...

Catalog

...

  • customer

  • address

  • delivery promise information

  • Basket Shipping options of the catalog

Image Added

Order list

  • Endpoint order

  • Piece group

  • Classic orders list page

Image Modified

Sorting

  • Sorting page before scan

Image Modified
  • Sorting popin for item scan

image-20241115-145048.pngImage Modified

image-20241115-145041.pngImage Modified

Moving

Image Modified

Image Modified

Image Modified

Boxing

Image Modified

image-20241115-144543.pngImage Modified

Users

  • User

Image Modified

Customer search

  • Before selection

Image Modified
  • After selection with a shipped parcel

Image Modified
  • After selection with a processing parcel

Image Modified
  • Return popin

Image Modified
  • After selection with a return

Image Modified
  • Return details pop-in

Image Modified

Context

Store App properties are used to customize the information displayed on every pages and in every popins.

...

Panel
panelIconIdatlassian-light_bulb_on
panelIcon:light_bulb_on:
panelIconText:light_bulb_on:
bgColor#FFFAE6

Tip: to view the current properties applied in your Store App, use the command dumpConfig("properties") in the Store App console.

Configuration

You can find the displayed properties configuration in the Configuration > Store App > Page settings > {Page name} > Displayed properties section of your admin backoffice.

image-20240515-123047.pngImage Removed

image-20240515-123043.pngImage Removed

Multi parcel

In the case of pages that support multi-packaging (bag and pack), there is an entity called multi_order. It corresponds to the entity used when the store app is configured for multi-packaging.

DIY

CODE

...

languagejson

...

Properties entities

Properties formatting

Properties often need to be formatted for aesthetic reasons.

It is possible to use one or more formatters with the following syntax property|formatter1:option|formatter2|formatter3.

Tip

Examples:

  • to capitalize the first letter of the delivery type, use delivery.type|capitalize

  • to retrieve the 3rd element of an array (index 2), I'll use delivery.destination.address.lines|arrayelement:2

Parenthesis

A parenthesis syntax is available for the most complex expressions.

Properties that are nested within parentheses will be evaluated first. For example, following the property will display 1 / 2.

Code Block
parcels|forcount:line_item_ids|concatraw: / |concatraw: (line_item_groups|length)

In the absence of parentheses, formatters are applied from left to right.

All formatters available

Name

Description

Option

Example → Render

arrayelement

Retrieves the element of an array with index.

Element index

types|arrayelement:0→ ffs

capitalize

Replace all letters with lower case, except the first, which is upper case.


features.name|capitalize → Summer dress

concat

Concatenates another property, without spaces.

Property to concatenate

carrier|concat:tracking_code → ups64477466854

concatraw

Concatenates a string.

Defined string

state|concatraw:from warehouse → dispatched from warehouse

currency

Formats a number into a currency, with a symbol defined in another property.

Property containing the currency

payment.price|currency:payment.currency -> 35,99 £

currencyraw

Formats a number into a currency, with a symbol defined in the expression.

The currency to use

payment.price|currencyraw:USD → 35,99 $

dateto

Format a date range.

Property corresponding to end date

eta_start|dateto:end_end → 27 - 30 september

divide_by

Divides a value of a property by an another.

Divisor property

order_item.pricing_details.price|divide_by:order_item.quantity → 3 (price = 6 and quantity = 2)

expirationcolor

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.

expiration_dates.client_collect.expiration|expirationcolor:86400,danger,(expiration_dates.client_collect.expiration|moment:DD/MM/YYYY|transcount:carry.reserved_till) → Reserved until 10-02-2023

filter

Scans an array and keeps the elements of this array whose property is worth one of the values provided.

Comma-separated list of values

line_item_groups|filter:state=removed,mistaken|length|concatraw: items sont removed ou mistaken → 5 items sont removed ou mistaken

filterlength

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

line_item_groups|filterlength:state=removed,mistaken|transcount:order.cancel_count → 5 canceled

forcount

Scans an array and counts the size of each property in the array.

Property

parcels|forcount:piece_ids|transcount:order.item_count → 5 items

hierarchicalchoose

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

types|hierarchicalchoose:ois,ckc,ffs → ckc

index_ranges_quantity

Calculates the total quantity of indexes in the supplied index ranges.

parcel.line_item_index_ranges|index_ranges_quantity|transcount:order.item_count → 5 items

length

Returns the length attribute of an array or string.


piece_ids|length → 3

link

Formats the result as a link.

Property

delivery.carrier.name|link:delivery.carrier.tracking_url → <a href="colissimoURL">colissimo</a>

link_blank

Formats the result as a blank link.

Property

delivery.carrier.name|link:delivery.carrier.tracking_url → <a target="_blank" href="colissimoURL">colissimo</a>

lowercase

Replace all letters with lowercase letters.


features.name|lowercase → summer dress

moment

Format a timestamp using momentjs.

Date format

date|moment:DD/MM/YYYY → 29/03/2018

mutiply

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.

payment.price|multiply:features.quantity → 17.97 (payment.price = 5.99 and features.quantity = 3)

payment.price|multiply:features.quantity,2 → 3.333333 (payment.price = 10 and features.quantity = 1/3)

prepend

Concatenates another property on the left.

Property

tracking_code|prepend:carrier → ups64477466854

prependraw

Concatenates a string on the left.

Defined string

state|prependraw:State is → State is dispatched

rawstring

Replaces the result with a string defined.

Defined string

|rawstring:units → units

sum

Scans an array and sum the given property in the array.

Property

line_item_groups|sum:payment.price → 75.8

trackingcode

Displays tracking code if available, translates key passed in parameter otherwise.

Key to translate

tracking_code|trackingcode:parcel.no_tracking_information → XV265564654 or Missing tracking

trans

Translates the result (if the translation key exists).


|rawstring:states.|concat:state|trans → Dispatch

transcount

Takes a number as input and calls a translation with pluralization.

Key to translate

line_item_groups|length|transcount:order.item_count → 3 items

transcountnotnull

Calls a translation with pluralization on the input. Displays nothing if !input is false in the javascript sense.

Key to translate

line_item_groups|length|transcountnotnull:order.item_count

with line_item_groups = [] :

with 2 line_item_groups: 2 items

unfilterlength

Scans an array and counts the number of elements whose property is not one of the provided values.

Comma-separated list of values

line_item_groups|unfilterlength:state=removed,mistaken|concatraw: not canceled → 5 not canceled

uppercase

Replace all letters with capital letters.


features.name|uppercase → SUMMER DRESS

since

Takes a date as input and returns the difference from now in the site's lang.


date|since → since 1 hour