# 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`        |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://e-plus-agency.gitbook.io/plus-docs/vtex-io-custom-apps/storage-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.