Melhorias na busca

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.

Uma das operações mais pesadas e pouco performáticas na navegação de uma loja é a sua busca. Para melhorar a experiência, também podemos otimizar a busca por dados e torná-la mais eficiente, neste sentido dois pontos devem ser observados: os SKUs e o preço

Atividade

Para otimizar o contexto da busca, adicione a propriedade context ao template de busca no arquivo store/blocks/search.jsonc:

_10// store/blocks/search.jsonc _10{ _10 "store.search": { _10+ "props": { _10+ "context": {} _10+ }, _10 "blocks": ["search-result-layout#search"] _10 }, _10 ... _10}
Para garantir redução de resultados carregados e, portanto, tornar o volume de resultados menor. É possível controlar para que apenas o primeiro SKU disponível seja retornado, para isso, adicione no context o skusFilter como sendo FIRST_AVAILABLE:

_10{ _10 "store.search": { _10 "props": { _10 "context": { _10+ "skusFilter": "FIRST_AVAILABLE" _10 } _10 }, _10 "blocks": ["search-result-layout#search"] _10 }, _10}
Para tornar os preços mais cacheáveis e evitar simulá-los para cada resultado de busca obtido, podemos também escolher skip como simulationBehavior:

_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}