Refactoring blocks

This content was migrated from the VTEX Learning Center and is no longer being actively maintained. For the most accurate and up-to-date information, please check the official documentation.

Some blocks over time are replaced by others not only to increase flexibility and ease of operation, but also to optimize their behavior and performance.

The Slider Layout (known in the Complex Layouts course) has been improved so that it uses lazy load in the loaded content. This means that products and images are only loaded when the user, in fact, requests them. This type of behavior is not available at Shelf and Carousel, and to further optimize performance, let's see how we can replace them.

Activity

In the home.jsonc file, declare two blocks of text to replace the titles:

_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}
Change the name of the shelves to uselist-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}
Remove the shelf properties that are no longer needed on both shelves:

_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}
Add a slider-layout#shelf to both product-lists:

_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}
Finally, define the slider-layout#shelf so that it has the same behavior as the shelf we removed:

_10{ _10 ... _10+ "slider-layout#shelf": { _10+ "props": { _10+ "itemsPerPage": { _10+ "desktop": 3 _10+ } _10+ } _10+ } _10}
Edit the blocks being used in template:

_12{ _12"store.home": { _12 "blocks": [ _12- "shelf#new-arrivals", _12- "shelf#clearance", _12+ "rich-text#new-arrivals", _12+ "list-context.product-list#new-arrivals", _12+ "rich-text#clearance", _12+ "list-context.product-list#clearance", _12 ] _12} _12}

The result should be:

{"base64":" ","img":{"width":2656,"height":1594,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":647159,"url":"https://user-images.githubusercontent.com/18701182/93842015-c977e700-fc6b-11ea-8cf5-0678a5f890fa.png"}}

TIP: Try the same view-source investigation as in step 3 and see that the products on the second page of each shelf are not loaded into HTML after refactoring.

Answer sheet

See answer sheet for home.jsonc

home.jsonc


_93// /store/blocks/home/home.jsonc
_93{
_93  "store.home": {
_93    "blocks": [
_93      "flex-layout.row#slider",
_93      "rich-text#new-arrivals",
_93      "list-context.product-list#new-arrivals",
_93      "rich-text#clearance",
_93      "list-context.product-list#clearance",
_93      "__fold__",
_93      "flex-layout.row#newsletter",
_93      "rich-text#brands",
_93      "flex-layout.row#brands",
_93      "rich-text#instagram",
_93      "flex-layout.row#instagram"
_93    ]
_93  },
_93
_93  "carousel#home": {
_93    "props": {
_93      "autoplay": true,
_93      "autoplaySpeed": 4,
_93      "banners": [
_93        {
_93          "image": "assets/chrome1.png"
_93        }
_93      ],
_93      "height": 440,
_93      "showArrows": true,
_93      "showDots": true
_93    }
_93  },
_93
_93  "flex-layout.row#slider": {
_93    "children": [
_93      // "slider-layout#styles",
_93      "carousel#home"
_93    ]
_93  },
_93
_93  "flex-layout.row#brands": {
_93    "children": ["slider-layout#brands"],
_93    "props": {
_93      "marginTop": 4,
_93      "marginBottom": 8
_93    }
_93  },
_93
_93  "rich-text#new-arrivals": {
_93    "props": {
_93      "text": "New arrivals",
_93      "font": "t-heading-2",
_93      "textPosition": "CENTER",
_93      "textAlign": "CENTER"
_93    }
_93  },
_93  "rich-text#clearance": {
_93    "props": {
_93      "text": "Clearance",
_93      "font": "t-heading-2",
_93      "textPosition": "CENTER",
_93      "textAlign": "CENTER"
_93    }
_93  },
_93
_93  "list-context.product-list#new-arrivals": {
_93    "blocks": ["product-summary.shelf"],
_93    "children": ["slider-layout#shelf"],
_93    "props": {
_93      "orderBy": "OrderByTopSaleDESC",
_93      "paginationDotsVisibility": "never",
_93      "collection": "139"
_93    }
_93  },
_93
_93  "list-context.product-list#clearance": {
_93    "blocks": ["product-summary.shelf"],
_93    "children": ["slider-layout#shelf"],
_93    "props": {
_93      "orderBy": "OrderByTopSaleDESC",
_93      "collection": "140",
_93      "paginationDotsVisibility": "desktopOnly"
_93    }
_93  },
_93
_93  "slider-layout#shelf": {
_93    "props": {
_93      "itemsPerPage": {
_93        "desktop": 3
_93      }
_93    }
_93  }
_93}