Melhorias na busca

Melhorias na busca

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

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

    // store/blocks/search.jsonc
    {
      "store.search": {
    +   "props": {
    +     "context": {}
    +   },
        "blocks": ["search-result-layout#search"]
      },
      ...
    }
    
  2. 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:

    {
      "store.search": {
        "props": {
          "context": {
    +       "skusFilter": "FIRST_AVAILABLE"
          }
        },
        "blocks": ["search-result-layout#search"]
      },
    }
    
  3. 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:

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

Está com dúvidas?

Veja o gabarito para esta etapa ou participe do nosso office hours


Ajude-nos a fazer este conteúdo melhor!

Os cursos do VTEX IO são de código aberto. Se você perceber algum problema, pode abrir um pull request!

Faça uma contribuição

ou abra uma issue