Alguns blocos ao longo do tempo são substituídos por outros não só para aumentar a flexibilidade e facilidade de operação, mas também para otimizar o seu comportamento e performance.

O Slider Layout (conhecido no curso de Layouts Complexos) foi aprimorado para que usasse lazy load no conteúdo carregado. Isto quer dizer que produtos e imagens só são carregados quando o usuário, de fato, as solicita. Este tipo de comportamento não está disponível na Shelf e Carrossel, e para otimizar ainda mais a performance, vamos ver como podemos substituí-los.

1. No arquivo home.jsonc declare dois blocos de texto para substituir os títulos:

   
   

   _20

   // store/blocks/home/home.jsonc

   _20

   {

   _20

   ...

   _20

   + "rich-text#new-arrivals": {

   _20

   + "props": {

   _20

   + "text": "New arrivals",

   _20

   + "font": "t-heading-2",

   _20

   + "textPosition": "CENTER",

   _20

   + "textAlign": "CENTER"

   _20

   + }

   _20

   + },

   _20

   + "rich-text#clearance": {

   _20

   + "props": {

   _20

   + "text": "Clearance",

   _20

   + "font": "t-heading-2",

   _20

   + "textPosition": "CENTER",

   _20

   + "textAlign": "CENTER"

   _20

   + }

   _20

   + },

   _20

   }

   
   

2. Mude o nome das shelf's para que use list-context.product-list:

   
   

   _10

   {

   _10

   ...

   _10

   - "shelf#new-arrivals": {

   _10

   + "list-context.product-list#new-arrivals": {

   _10

   ...

   _10

   - "shelf#clearance": {

   _10

   + "list-context.product-list#clearance": {

   _10

   ...

   _10

   }

   
   

3. Remova as propriedades da shelf que não são mais necessárias em ambas as shelfs:

   
   

   _19

   {

   _19

   "list-context.product-list#new-arrivals": {

   _19

   "blocks": ["product-summary.shelf"],

   _19

   "props": {

   _19

   "orderBy": "OrderByTopSaleDESC",

   _19

   - "paginationDotsVisibility": "never",

   _19

   "collection": "139",

   _19

   - "productList": {

   _19

   - "maxItems": 9,

   _19

   - "itemsPerPage": 3,

   _19

   - "minItemsPerPage": 1.5,

   _19

   - "scroll": "BY_PAGE",

   _19

   - "arrows": true,

   _19

   - "titleText": "New arrivals"

   _19

   - }

   _19

   }

   _19

   },

   _19

   ...

   _19

   }

   
   

4. Adicione um slider-layout#shelf a ambos product-list's:

   
   

   _12

   {

   _12

   "list-context.product-list#new-arrivals": {

   _12

   "blocks": ["product-summary.shelf"],

   _12

   + "children": ["slider-layout#shelf"],

   _12

   ...

   _12

   },

   _12

   "list-context.product-list#clearance": {

   _12

   "blocks": ["product-summary.shelf"],

   _12

   + "children": ["slider-layout#shelf"],

   _12

   ...

   _12

   },

   _12

   }

   
   

5. Por fim, defina o slider-layout#shelf para que tenha o mesmo comportamento da prateleira que tiramos:

   
   

   _10

   {

   _10

   ...

   _10

   + "slider-layout#shelf": {

   _10

   + "props": {

   _10

   + "itemsPerPage": {

   _10

   + "desktop": 3

   _10

   + }

   _10

   + }

   _10

   + }

   _10

   }

   
   

6. Edite os blocos que estão sendo usados no template:

O resultado deve ser:

DICA: Experimente fazer a mesma investigação do view-source do passo 3 e ver que os produtos da segunda página de cada prateleira não são carregados no HTML depois do refatoramento.