Search improvements

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.

One of the heaviest and least performing operations in a store's navigation is its search. To improve the experience, we can also optimize the search for data and make it more efficient, in this sense two points must be observed: the SKUs and the price

Activity

To optimize the search context, add the context property to the search template in the store/blocks/search.jsonc file:

_10// store / blocks / search.jsonc _10{ _10 "store.search": { _10+ "props": { _10+ "context": {} _10+}, _10 "blocks": ["search-result-layout # search"] _10 }, _10 ... _10}
To guarantee reduction of loaded results and, therefore, reduce the volume of results. It is possible to control that only the first available SKU is returned, for this, add skusFilter to context as FIRST_AVAILABLE:

_10{ _10 "store.search": { _10 "props": { _10 "context": { _10+ "skusFilter": "FIRST_AVAILABLE" _10 } _10 }, _10 "blocks": ["search-result-layout # search"] _10 }, _10}
To make prices more cacheable and avoid simulating them for each search result obtained, we can also choose skip assimulationBehavior:

_11{ _11 "store.search": { _11 "props": { _11 "context": { _11 "skusFilter": "FIRST_AVAILABLE" _11+ "simulationBehavior": "skip" _11 } _11 }, _11 "blocks": ["search-result-layout # search"] _11 }, _11}

Answer sheet

See answer sheet for search.jsonc

search.jsonc


_313// /store/blocks/search.jsonc
_313{
_313  "store.search": {
_313    "props": {
_313      "context": {
_313        "skusFilter": "FIRST_AVAILABLE",
_313        "simulationBehavior": "skip"
_313      }
_313    },
_313    "blocks": ["search-result-layout#search"]
_313  },
_313
_313  "search-result-layout#search": {
_313    "blocks": ["search-result-layout.desktop", "search-not-found-layout"]
_313  },
_313  "search-result-layout.desktop": {
_313    "children": [
_313      "flex-layout.row#did-you-mean",
_313      "flex-layout.row#suggestion",
_313      "flex-layout.row#banner-one",
_313      "flex-layout.row#searchbread",
_313      "flex-layout.row#searchtitle",
_313      "flex-layout.row#result"
_313    ],
_313    "props": {
_313      "pagination": "show-more",
_313      "preventRouteChange": false,
_313      "mobileLayout": {
_313        "mode1": "small",
_313        "mode2": "normal"
_313      }
_313    }
_313  },
_313  "flex-layout.row#result": {
_313    "children": ["flex-layout.col#filter", "flex-layout.col#content"],
_313    "props": {
_313      "preventHorizontalStretch": true,
_313      "fullWidth": true
_313    }
_313  },
_313
_313  "flex-layout.row#searchtitle": {
_313    "children": ["search-title.v2"]
_313  },
_313
_313  "flex-layout.row#did-you-mean": {
_313    "children": ["did-you-mean"]
_313  },
_313  "flex-layout.row#suggestion": {
_313    "children": ["search-suggestions"]
_313  },
_313  "flex-layout.row#banner-one": {
_313    "children": ["search-banner#one"]
_313  },
_313  "search-banner#one": {
_313    "props": {
_313      "area": "one",
_313      "blockClass": "myBanner",
_313      "horizontalAlignment": "center"
_313    }
_313  },
_313  "flex-layout.row#searchbread": {
_313    "children": ["breadcrumb.search"],
_313    "props": {
_313      "preserveLayoutOnMobile": true,
_313      "fullWidth": true
_313    }
_313  },
_313
_313  "store.search#brand": {
_313    "blocks": ["search-result-layout"],
_313    "props": {
_313      "context": {
_313        "orderByField": "OrderByReleaseDateDESC",
_313        "hideUnavailableItems": true,
_313        "maxItemsPerPage": 10
_313      }
_313    }
_313  },
_313  "store.search#department": {
_313    "blocks": ["search-result-layout#department"]
_313  },
_313
_313  "store.search#category": {
_313    "blocks": ["search-result-layout#cat"]
_313  },
_313
_313  "store.search#subcategory": {
_313    "blocks": ["search-result-layout#cat"]
_313  },
_313
_313  "search-result-layout#department": {
_313    "blocks": [
_313      "search-result-layout.desktop#dep",
_313      "search-result-layout.mobile#dep",
_313      "search-not-found-layout"
_313    ]
_313  },
_313  "search-result-layout#cat": {
_313    "blocks": [
_313      "search-result-layout.desktop#cat",
_313      "search-result-layout.mobile#cat",
_313      "search-not-found-layout"
_313    ]
_313  },
_313
_313  "image#depbanner": {
_313    "props": {
_313      "src": "assets/electronics.png"
_313    }
_313  },
_313
_313  "info-card#depbanner": {
_313    "props": {
_313      "imageUrl": "https://image.shutterstock.com/z/stock-photo-party-with-best-friends-group-of-cheerful-young-people-enjoying-home-party-with-snacks-and-drinks-492006757.jpg",
_313      "callToActionMode": "none",
_313      "isFullModeStyle": true,
_313      "headline": " ",
_313      "blockClass": "depbanner"
_313    }
_313  },
_313
_313  "search-result-layout.desktop#dep": {
_313    "children": [
_313      "flex-layout.row#depBanner",
_313      "flex-layout.row#searchbread",
_313      "flex-layout.row#searchtitle",
_313      "flex-layout.row#result"
_313    ],
_313    "props": {
_313      "pagination": "show-more",
_313      "mobileLayout": {
_313        "mode1": "small",
_313        "mode2": "normal"
_313      }
_313    }
_313  },
_313  "search-result-layout.desktop#cat": {
_313    "children": [
_313      "flex-layout.row#searchbread",
_313      "flex-layout.row#searchtitle",
_313      "flex-layout.row#result"
_313    ],
_313    "props": {
_313      "pagination": "show-more",
_313      "mobileLayout": {
_313        "mode1": "small",
_313        "mode2": "normal"
_313      }
_313    }
_313  },
_313  "flex-layout.col#filter": {
_313    "children": ["filter-navigator.v3"],
_313    "props": {
_313      "blockClass": "filterCol"
_313    }
_313  },
_313  "order-by": {
_313    "props": {
_313      "hiddenOptions": [
_313        "OrderByReleaseDateDESC",
_313        "OrderByNameASC",
_313        "OrderByNameDESC"
_313      ]
_313    }
_313  },
_313  "flex-layout.col#content": {
_313    "children": [
_313      "flex-layout.row#searchinfo",
_313      "flex-layout.row#fetchprevious",
_313      "flex-layout.row#products",
_313      "flex-layout.row#fetchmore"
_313    ],
_313    "props": {
_313      "width": "grow"
_313    }
_313  },
_313  "flex-layout.row#searchinfo": {
_313    "children": ["flex-layout.col#productCount", "flex-layout.col#orderby"]
_313  },
_313  "flex-layout.col#productCount": {
_313    "children": ["total-products.v2"],
_313    "props": {
_313      "blockClass": "productCountCol"
_313    }
_313  },
_313  "flex-layout.col#orderby": {
_313    "children": ["order-by.v2"],
_313    "props": {
_313      "blockClass": "orderByCol"
_313    }
_313  },
_313  "flex-layout.row#fetchprevious": {
_313    "props": {
_313      "marginBottom": 3
_313    },
_313    "children": ["search-fetch-previous"]
_313  },
_313  "flex-layout.row#fetchmore": {
_313    "props": {
_313      "marginTop": 3
_313    },
_313    "children": ["search-fetch-more"]
_313  },
_313  "flex-layout.row#products": {
_313    "children": ["search-content"]
_313  },
_313  "search-content": {
_313    "blocks": ["gallery", "not-found"]
_313  },
_313
_313  "flex-layout.row#depBanner": {
_313    "children": ["image#depbanner"]
_313  },
_313
_313  "search-result-layout.mobile#dep": {
_313    "children": [
_313      "flex-layout.row#depBanner",
_313      "flex-layout.row#searchinfomobile",
_313      "flex-layout.row#searchbread",
_313      "flex-layout.row#productCountMobile",
_313      "flex-layout.row#contentmobile"
_313    ],
_313    "props": {
_313      "pagination": "show-more",
_313      "mobileLayout": {
_313        "mode1": "small",
_313        "mode2": "normal"
_313      }
_313    }
_313  },
_313  "search-result-layout.mobile#cat": {
_313    "children": [
_313      "flex-layout.row#searchinfomobile",
_313      "flex-layout.row#searchbread",
_313      "flex-layout.row#productCountMobile",
_313      "flex-layout.row#contentmobile"
_313    ],
_313    "props": {
_313      "pagination": "show-more",
_313      "mobileLayout": {
_313        "mode1": "small",
_313        "mode2": "normal"
_313      }
_313    }
_313  },
_313  "flex-layout.row#contentmobile": {
_313    "children": ["search-content"],
_313    "props": {
_313      "preserveLayoutOnMobile": true
_313    }
_313  },
_313
_313  "flex-layout.row#searchinfomobile": {
_313    "children": [
_313      "flex-layout.col#orderByMobile",
_313      "flex-layout.col#filterMobile",
_313      "flex-layout.col#switcherMobile"
_313    ],
_313    "props": {
_313      "preserveLayoutOnMobile": true,
_313      "colSizing": "auto",
_313      "colJustify": "around"
_313    }
_313  },
_313
_313  "flex-layout.col#orderByMobile": {
_313    "children": ["order-by.v2"],
_313    "props": {
_313      "blockClass": "orderByMobileCol"
_313    }
_313  },
_313
_313  "flex-layout.row#productCountMobile": {
_313    "children": ["total-products.v2"],
_313    "props": {
_313      "blockClass": "productCountMobileRow"
_313    }
_313  },
_313
_313  "flex-layout.col#filterMobile": {
_313    "children": ["filter-navigator.v3"],
_313    "props": {
_313      "blockClass": "filterMobileCol"
_313    }
_313  },
_313  "flex-layout.col#switcherMobile": {
_313    "children": ["search-layout-switcher"],
_313    "props": {
_313      "blockClass": "switcherMobileCol"
_313    }
_313  },
_313  "search-not-found-layout": {
_313    "children": ["flex-layout.row#searchbread", "flex-layout.row#notfound"]
_313  },
_313
_313  "flex-layout.row#notfound": {
_313    "children": ["not-found"],
_313    "props": {
_313      "fullWidth": true
_313    }
_313  },
_313
_313  "breadcrumb": {
_313    "props": {
_313      "showOnMobile": true
_313    }
_313  },
_313
_313  "gallery": {
_313    "blocks": ["product-summary.shelf"]
_313  }
_313}