Differentials List Context

asdfasdfasdf

List context app to create differentials lists that can be consumed by other apps, like container or embla-carousel. Exemples below.

Differentials List Context

Configuration

1. Adding the app as a theme dependency in the manifest.json file;

  "dependencies": {
    "{vendor}.differentials-list-context": "0.x"
  }

1. Declaring the app's main block in a given theme template or inside another block from the theme.

Block name	Description
list-context.differential-list	Differentials list context block.

list-context.differential-list props

Prop name	Type	Description	Default value
markers	string[]	IDs of your choosing to identify the block's rendered message and customize it using the admin's Site Editor. Learn how to use them accessing the documentation on Using the Markers prop to customize a block's message. Notice the following: a block's message can also be customized in the Store Theme source code using the message prop.	[]
differentials	differential[]	Differentials list	[]

• differential object:

Prop name	Type	Description	Default value
Text	string	Text that will be rendered	""
iconImageUrl	string	Image url of the differential icon	""

Usage

{
  "list-context.differential-list": {
    "props": {
      "differentials": [
        {
          "iconImageUrl": "assets/images/differentials/personalizado.svg",
          "text": "Produtos personalizados"
        },
        {
          "iconImageUrl": "assets/images/differentials/desconto.svg",
          "text": "5% de desconto no Pix"
        },
        {
          "iconImageUrl": "assets/images/differentials/duvidas.svg",
          "text": "Dúvidas? Nos chame no WhatsApp"
        },
        {
          "iconImageUrl": "assets/images/differentials/atendimento.svg",
          "text": "[e-mail]"
        }
      ]
    },
    "children": [
      "responsive-layout.desktop#differentials",
      "responsive-layout.mobile#differentials"
    ]
  },

  "responsive-layout.desktop#differentials": {
    "children": ["container.list-render#differentials"]
  },

  "responsive-layout.mobile#differentials": {
    "children": ["embla-carousel#differentials"]
  },

  "embla-carousel#differentials": {
    "props": {
      "options": {
        "slidesToScroll": 1,
        "navigation": true,
        "dots": false,
        "draggable": true,
        "loop": true
      },
      "blockClass": ["differentials"]
    }
  },

  "container.list-render#differentials": {
    "props": {
      "wrapper": true,
      "blockClass": ["differentials", "container-center"]
    }
  }
}