< Context / Components

Filters

Introduction

A series of filters to sort a large list of items

Body

productsTitle

text

Text that appears above the product list.

filters

array

List of filters that can be applied. Each item in this array will hold an array of options. So her you will set; size, color then in the options array you will set, small, medium, large red, blue, green

  • title

    text

    Title of the filter e.g. "Select color"

    name

    plain text

    Simple name of the filter, used in reporting e.g. "color"

    options

    array

    List of options in this array e.g red, blue, green

    • label

      text

    The text that appears on the filter button

    selected

    boolean

    Is this option selected when the email is first opened.

    reset

    boolean

    Do we want to show a rest button for this filter?

resetAll

boolean

Do we want to show a rest button that will reset all the filters to their original state.

noMatchMessage

text

Message that displays if all products have been filtered out.

defaultFallback

select

Selects weather the same content should be reused for the fallback which can reduce code size. Options grid will display all the products in a grid none will not reuse the content.

products

array

List of all the products to feature.

  • content.img.href

    url

    Link for when the user clicks on product image.

    content.img.src

    url

    URL of the image to show.

    content.img.style.height

    number

    Height of the image.

    content.img.style.width

    number

    Width of the image.

    content.img.alt

    plain text

    Alt text of the image.

    content.h3

    text

    Title text of the product.

    content.p

    text

    Description text of the products.

    content.cta.href

    url

    Link for CTA button.

    content.cta.text

    text

    Text for CTA button.

    content.cta.width

    number

    Width in px of the CTA button.

    content.filters - array

    array

    Comma separated list of filter options, these should match a label from the filters.options. Currently we only support one label per filter.

style