Reference: Smart Layouts for your catalog pages

Catalog Machine  provides expressions to iterate and format your product data that you can use in your layouts, templates and catalog pages.

Read more and see practical examples in How to customize product and price layouts.

Expression groups

  1. Products
  2. Categories
  3. Variants
  4. Images
  5. Condition Operators
  6. Sorting and limiting
  7. Conditional text

Note: All expressions are enclosed in double brackets – {{…}} ( e.g. {{Price}})- pay attention not to break them by formatting text!

Products

Products have built-in fields (e.g. Name, Code, etc.) and custom fields defined by you on the  category level (e.g. Price, Image, Retail Price, Shop Link, etc.).

Usage: These fields could be used in and product text box or inside product iterator.
Example :
{{Name}} {{Description}}
{{Products}} {{Name}} - {{Price}} {{/Products}}

Product built-in  and standard fields:

  • Code
  • Name
  • Category
  • Rank – also used in showroom for ordering
  • Modified – date product last modified
  • VariantCount – number of product variants
  • Image
  • Description
  • Price

Product iterator: {{Products:condition operators}}content…{{/Products}}

Example:
{{Products: Category = Shoes : Price > 0 : Order By > Code }}
{{Name}} - {{Description}} - ${{Price}}
{{/Products}}

See more examples  in How to customize product and price layouts.

Categories

Usage: Category fields can be used only inside category iterator.

Category fields:

  • Name
  • FullName – includes parent name if exists
  • Description
  • Parent– date product last modified
  • ProductCount – number of products in this category
  • FullProductCount – number of products in this and child category
  • Thumbnail – category thumbnail image

Category iterator: {{Categories:condition operators}}content…{{/Categories}}

Examples:
{{Categories: ProductCount > 0}}
{{Thumbnail:Fit:50:50}}  {{Name}} ({{ProductCount}}) {{Description}}
{{/Categories}}


{{Categories: Parent = Clothing}}
{{Name}}
{{Products}}
{{Name}} - ${{Price}}
{{/Products}}
{{/Categories}}

See more examples  in How to customize product and price layouts.

Variants

Variants have build-in fields and configured on category level options (e.g. Color, Size). You can reference options by name or index – Color or Option:1 (same as Option), Size or Option:2.

Usage: These fields could be used only inside variant iterator.
Example :
{{Variants}} {{SKU}} {{Option:1}} / {{Option:2}} - {{Price}} {{/Variants}}
{{Variants}} {{SKU}} {{Color}}/{{Size}} - {{Price}} {{/Variants}}

Variant fields:

  • SKU
  • Price
  • Description
  • Image
  • Description
  • Price
  • Barcode
  • Quantity
  • Separator – used to separate iterated variants

Variant iterator: {{Variants:condition operators}}content…{{/Variants}}

Example:
{{Products: VariantCount > 0}}
{{Name}}
{{/Variants}}

{{Variants:OrderBy > SKU}}
{{SKU}} - {{Option}}{{Separator:,}}
Barcode: {{Barcode}} Quantity: {{Quantity}}
{{/Variants}}

See more examples in How to customize product and price layouts.

Images

Image fields (product, variants, category thumbnail) could have additional parameters – positioning, width and height to align with rest of text.

Format: {{Image:Position:Width:Height}}

Position could be  Fit, Fill, Stretch,Center,Default

Example:
{{Image}} - automatically sized
{{Image:Fit:200:100}} - sized to fit into box 200 x 100 pixels

Condition Operators

These are condition operators you can use in any iterator or {{If}}

Operators:

  • ~ contains as sub string: {{Products:Description ~ Sale}}
  • = – text is equal {{Products: Category = Shoes}}
  • <> – text is not equal {{Products: Category <> Shoes}}
  • <,<=,>,>= – compare numbers (or text in alphabetical order)
    {{Products: Price > = 10 : Price <= 100}}
    {{Categories: ProductCount > 0}} 

Sorting and limiting

These expression can be used in any iterator. You can also use them in paging scenario

  • OrderBy – sort by descending (>) or ascending order (<)
    {{Products: OrderBy > Price}} – price in descending order
    {{Products: OrderBy < Price}} – price in ascending order
  • LimitBy – take only limited number of items
    {{Products: LimitBy = 50 }} – first 50 products 
    {{Products: LimitBy = 10 : OrderBy > Price}} – top 10 products by price
  • SkipBy – skip first number of items
    {{Products: SkipBy = 10 }} – skip first 10 products
    {{Products: Category = Shoes : SkipBy = 20: LimitBy = 10 : OrderBy > Code }} – skip first 20 products  and show next 10 products in category Shoes ordered by Code

Conditional text

Use {{If:condition}}…{{/If}} to show text if condition is true.

Examples:

{{If:Price > 100}} High price {{/If}}
{{If:Tag~sale}} Sale: {{Sale Price}} {{/If}}

You can use it inside any iterator

{{Products}} {{Name}} - {{If:Price=0}} N/A {{/If}} {{If:Price>0}} ${{Price}} {{/If}} {{/Products}}

Leave a Reply

Your email address will not be published. Required fields are marked *