> For the complete documentation index, see [llms.txt](https://e-plus-agency.gitbook.io/plus-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://e-plus-agency.gitbook.io/plus-docs/vtex-io-custom-apps/storage-layout.md).

# storage-layout

📢 Use this project, [contribute](https://github.com/agencia-e-plus/storage-layout) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).

## Storage Layout

Renders according to local storage information.

![Media Placeholder](https://user-images.githubusercontent.com/52087100/71204177-42ca4f80-227e-11ea-89e6-e92e65370c69.png)

### Configuration

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

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

2. 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:

```jsonc
{
  "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`        |