storage-layout

📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Storage Layout

Renders according to local storage information.

Media Placeholder

Configuration

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

  "dependencies": {
    "{vendor}.storage-layout": "0.x"
  }

1. Add the storage-layout block in your store's json.

Block name	Description
storage-layout	Parent block.
action-button	Block responsible for saving a key in local storage and closing the parent block.

storage-layout props

Prop name	Type	Description	Default value
storageKey	string	Defines the key to save in localstorage	hide-storage-layout

action-button props

Prop name	Type	Description	Default value
text	string	Text for the button.	-
closeAndSave	boolean	Possible values are: true (closes the parent block and saves the key in local storage) and false (closes the parent block and doesn't save the key in local storage).	true

usage:

{
  "storage-layout#warning-cookie": {
    "props": {
      "storageKey": "aviso-de-cookie",
      "blockClass": "storage-layout-warning-cookie"
    },
    "children": ["container#warning-cookie"]
  },

  "container#warning-cookie": {
    "title": "Aviso de cookie",
    "children": [
      "rich-text#warning-cookie",
      "action-button#warning-cookie-agree-and-close"
    ],
    "props": {
      "blockClass": "warning-cookie",
      "wrapper": true
    }
  },

  // Texto
  "rich-text#warning-cookie": {
    "title": "Texto",
    "props": {
      "blockClass": "warning-cookie",
      "text": "A Cogra trabalha com o uso de cookies para garantir uma melhor experiência para você. Caso continue, entenderemos que você está de acordo com a nossa [política de privacidade e segurança](/institucional/politicas-do-site). "
    }
  },

  // Botão de concordar e fechar
  "action-button#warning-cookie-agree-and-close": {
    "props": {
      "blockClass": ["warning-cookie-agree-and-close"],
      // "text": "Concordar e fechar",
      "closeAndSave": true
    },
    "children": ["rich-text#warning-cookie-agree-and-close"]
  },

  // Texto do botão
  "rich-text#warning-cookie-agree-and-close": {
    "title": "Texto",
    "props": {
      "blockClass": "warning-cookie-agree-and-close",
      "text": "Concordar e fechar"
    }
  }
}

Customization

CSS Handles
storageLayout
button