EDU-13251 - Configuring templates #1609
Conversation
Preview LinksOpen this URL to set up the portal with this branch changes. You can now access the edited pages with the following URLs: |
Navigation Preview LinkNo changes detected in the navigation.json file |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| --- | ||
|
|
||
| We call a template your website's page structure. | ||
| In this guide, you will learn how to customize your store theme by managing templates, which are the website’s page structure. Templates are responsible for declaring `JSON` blocks that, once rendered, define the set of components for your website's pages, such as the home page, product page, search results page, etc. |
There was a problem hiding this comment.
[style-check] reported by reviewdog 🐶
❌ Found "home page"
Use Style Guide.
💡 Suggestion - Replace with "homepage".
✍ Check the Education Styleguide for more information.
|
|
||
| In practice, managing templates is what allows you to build the desired theme for your website by adding or removing blocks according to your store's needs. | ||
| <Steps> |
There was a problem hiding this comment.
[markdownlint] reported by reviewdog 🐶
MD033/no-inline-html Inline HTML [Element: Steps]
|
|
||
| >⚠️ More than simply declare a block in the block list template, notice that you will also need to declare the block in order to set its behavior when rendered as a component. For this purpose, you will need to use the block's props (as shown in the next section) and other child blocks as well to define its configuration (as shown in the Block composition section). | ||
| >⚠ More than simply declaring a block in the block list template, you also need to define its behavior when rendered as a component. To do this, use the block's props, as shown in the [Clarifying block naming and properties](#clarifying-block-naming-and-properties) section, and include other child blocks to define its configuration, as detailed in the [Defining the blocks composition](#defining-the-blocks-composition). |
There was a problem hiding this comment.
[markdownlint] reported by reviewdog 🐶
MD051/link-fragments Link fragments should be valid [Context: "Defining the blocks composition"]
| ## Step 5 - Understanding blocks composition | ||
|
|
||
| Now, let's take a look at the `shelf#home` block in the same file (`home.jsonc`): | ||
| Still in the `home.jsonc, search for the `shelf#home` block. |
There was a problem hiding this comment.
[markdownlint] reported by reviewdog 🐶
MD038/no-space-in-code Spaces inside code span elements [Context: "home.jsonc, search for the "]
|
|
||
| > ℹ️ You can find out which composition a block has by looking at its code in the exporting app's `interfaces.json` file. | ||
| As explained in the [Understand block composition](#understand-block-composition) topic, the choice between blocks using a `blocks` or `children` list depends on the *composition* of the blocks being declared. |
There was a problem hiding this comment.
[markdownlint] reported by reviewdog 🐶
MD051/link-fragments Link fragments should be valid [Context: "Understand block composition"]
| ## Step 5 - Understanding blocks composition | ||
|
|
||
| Now, let's take a look at the `shelf#home` block in the same file (`home.jsonc`): | ||
| Still in the `home.jsonc, search for the `shelf#home` block. |
There was a problem hiding this comment.
[markdownlint-fix] reported by reviewdog 🐶
| Still in the `home.jsonc, search for the `shelf#home` block. | |
| Still in the `home.jsonc, search for the`shelf#home` block. |
|
|
||
| As previously mentioned, blocks are pieces of code exported by VTEX Store Framework apps. This means that whenever a block is used in your theme, the app behind it must be declared in your Store Theme [dependencies](https://developers.vtex.com/docs/guides/vtex-io-documentation-dependencies/) list. | ||
| > ℹ Learn more about these and other relevant concepts in [Essential concepts](LINK). |
There was a problem hiding this comment.
Pensei em pegar as docs que ainda existem na categoria Concepts e criar um único guia, visto que os conceitos ali dialogam bastante. Coloquei o nome de Essential concepts, mas é provisório. Posso ver depois um título melhor.
As docs que ainda estão lá são: Composition, Interfaces, Properties e Slots.
Types of changes
EDU-13251