@rocketsearch/nuxt-uappi 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocketsearch/nuxt-uappi",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Rocket Search para storefronts Uappi (Nuxt 2): busca, autocomplete, vitrines, banners e eventos",
   "main": "module.js",
   "files": [

package/runtime/components/RocketSearch.vue

@@ -1,480 +1,480 @@
-<template>
-  <div
-    class="rocket-search rocket-search__product-search rocket-search--page"
-    data-search-mode="page"
-    :data-facets-mode="mode"
-  >
-    <div class="rocket-search__content">
-      <div class="rocket-search__products-result opened">
-        <div class="wrapper">
-          <div v-if="mode === 'side'" class="rocket-search__products-result__col-left">
-            <RocketSearchFacets
-              :facets="context.facets"
-              :applied-filters="context.appliedFilters"
-              :closed-facets="closedFacets"
-              facets-mode="side"
-              :is-mobile="isMobile"
-              :is-selected="isSelected"
-              :range-key="rangeKey"
-              @toggle-facet="toggleFacet"
-              @click-facet="clickFacet"
-              @apply-price="applyPrice"
-              @clear-facet="clearFacet"
-              @clear-price="clearPrice"
-              @clear-boolean="clearBoolean"
-              @clear-all="clearAllFilters"
-            />
-          </div>
-
-          <div class="rocket-search__products-result__col-right">
-            <div class="rocket-search__header">
-              <span class="rocket-search__count"><span v-text="context.total" /> produtos encontrados.</span>
-
-              <button v-if="mode === 'fixed'" class="rocket-search__open-facets" @click="fixedFacetsOpened = true">
-                <svg xmlns="http://www.w3.org/2000/svg" width="15.096" height="15.812" viewBox="0 0 15.096 15.812">
-                  <g transform="translate(-8.37 -6.396)">
-                    <path d="M9.028,9.525h7.593a2.457,2.457,0,0,0,4.741,0h1.445a.658.658,0,0,0,0-1.316H21.357a2.457,2.457,0,0,0-4.741,0H9.028a.658.658,0,1,0,0,1.316ZM19,7.713a1.153,1.153,0,1,1-1.16,1.15A1.153,1.153,0,0,1,19,7.713Z" fill="#fff" />
-                    <path d="M22.808,38.18h-7.6a2.455,2.455,0,0,0-4.74,0H9.028a.658.658,0,1,0,0,1.316h1.451a2.455,2.455,0,0,0,4.74,0h7.59a.658.658,0,1,0,0-1.316Zm-9.972,1.811a1.155,1.155,0,1,1,.82-.336A1.153,1.153,0,0,1,12.836,39.992Z" transform="translate(0 -24.536)" fill="#fff" />
-                    <path d="M22.808,68.168H21.357a2.457,2.457,0,0,0-4.741,0H9.028a.658.658,0,1,0,0,1.316h7.593a2.457,2.457,0,0,0,4.741,0h1.445a.658.658,0,1,0,0-1.316ZM19,69.981a1.153,1.153,0,1,1,1.146-1.151A1.153,1.153,0,0,1,19,69.981Z" transform="translate(0 -49.088)" fill="#fff" />
-                  </g>
-                </svg>
-                Filtrar
-              </button>
-
-              <div class="rocket-search__sorter">
-                <div class="select" @click="showSortOptions = !showSortOptions">
-                  <span class="text" v-text="appliedSortLabel" />
-                  <svg xmlns="http://www.w3.org/2000/svg" width="10.582" height="6.692" viewBox="0 0 10.582 6.692">
-                    <path d="M5.291 4.314L1.401.424l-.977.977 4.867 4.867 4.867-4.867-.977-.977z" fill="#9e9e9e" stroke="#9e9e9e" stroke-width=".6" fill-rule="evenodd" />
-                  </svg>
-                </div>
-                <ul v-show="showSortOptions" class="select-options">
-                  <li
-                    v-for="option in context.sortOptions"
-                    :key="option.id"
-                    :class="{ selected: context.sortInfo.applied === option.id }"
-                    @click="changeSort(option)"
-                    v-text="option.label"
-                  />
-                </ul>
-              </div>
-            </div>
-
-            <div v-if="context.appliedFilters.length > 0" class="rocket-search__facets__selected--v2">
-              <span>Filtros aplicados:</span>
-              <ul>
-                <template v-for="(facet, i) in context.appliedFilters">
-                  <li v-for="(value, j) in facet.values || []" :key="'f-' + i + '-' + j" :data-alias="facet.alias">
-                    <span class="option-title" :data-alias="facet.alias">
-                      <span class="name" v-text="facet.alias + ':'" />
-                      <span class="label" v-text="value" />
-                    </span>
-                    <button class="rocket-search__facets__selected__clear-filter" aria-label="Remover filtro" @click="clearFacet(value, facet)">
-                      x
-                    </button>
-                  </li>
-                  <li v-if="facet.type === 'range'" :key="'r-' + i" :data-alias="facet.alias">
-                    <span class="option-title" :data-alias="facet.alias">
-                      <span class="name" v-text="facet.alias + ':'" />
-                      <span class="label">De {{ formatCurrency(facet.min) }} até {{ formatCurrency(facet.max) }}</span>
-                    </span>
-                    <button class="rocket-search__facets__selected__clear-filter" aria-label="Remover filtro" @click="clearPrice">
-                      x
-                    </button>
-                  </li>
-                  <li v-if="facet.type === 'boolean'" :key="'b-' + i" :data-alias="facet.alias" :data-type="facet.type">
-                    <span class="option-title" :data-alias="facet.alias">
-                      <span class="name" v-text="facet.alias + ':'" />
-                      <span class="label" v-text="facet.value ? 'Sim' : 'Não'" />
-                    </span>
-                    <button class="rocket-search__facets__selected__clear-filter" aria-label="Remover filtro" @click="clearBoolean(facet)">
-                      x
-                    </button>
-                  </li>
-                </template>
-                <li class="rocket-search__clear-all-filters">
-                  <button @click="clearAllFilters">
-                    Limpar
-                  </button>
-                </li>
-              </ul>
-            </div>
-
-            <div v-show="isLoading && !livescrolling" class="rocket-search__product-placeholder">
-              <div v-for="n in size" :key="n" class="rocket-search__product-placeholder__product-line">
-                <div v-for="i in 6" :key="i" class="rocket-search__product-placeholder__item" :class="'item-' + i" />
-              </div>
-            </div>
-
-            <ul v-show="!isLoading || livescrolling" ref="products" class="rocket-search__products">
-              <li
-                v-for="(product, index) in products"
-                :key="product.id"
-                :data-product-id="product.id"
-                class="rocket-search__product"
-                @click.capture="trackProductClick(product, index, $event)"
-              >
-                <slot name="product" :product="product" :position="index">
-                  <nuxt-link :to="productPath(product)" class="rocket-search__card">
-                    <img v-if="productImage(product)" :src="productImage(product)" :alt="product.nome" loading="lazy">
-                    <span class="rocket-search__card-name" v-text="product.nome" />
-                    <span v-if="productPrice(product) !== null" class="rocket-search__card-price" v-text="formatCurrency(productPrice(product))" />
-                  </nuxt-link>
-                </slot>
-              </li>
-            </ul>
-
-            <p v-if="!isLoading && loaded && !products.length" class="rocket-search__empty">
-              Nenhum produto encontrado.
-            </p>
-
-            <RocketSearchPagination
-              v-if="!livescroll && context.totalPages > 1"
-              :page="context.page"
-              :total-pages="context.totalPages"
-              :has-prev-page="context.hasPrevPage"
-              :has-next-page="context.hasNextPage"
-              @change="changePage"
-            />
-
-            <div v-if="livescroll && context.hasNextPage" class="rocket-search__footer">
-              <button class="rocket-search__livescroll" :class="{ 'button-loading': livescrolling }" @click="nextPageLivescroll">
-                Veja mais
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div v-if="fixedFacetsOpened && mode === 'fixed'" id="rocket-search__overlay" class="visible" @click="fixedFacetsOpened = false" />
-      <RocketSearchFacets
-        v-if="mode === 'fixed'"
-        :facets="context.facets"
-        :applied-filters="context.appliedFilters"
-        :closed-facets="closedFacets"
-        :fixed-facets-opened="fixedFacetsOpened"
-        facets-mode="fixed"
-        :is-mobile="isMobile"
-        :is-selected="isSelected"
-        :range-key="rangeKey"
-        @close="fixedFacetsOpened = false"
-        @toggle-facet="toggleFacet"
-        @click-facet="clickFacet"
-        @apply-price="applyPrice"
-        @clear-facet="clearFacet"
-        @clear-price="clearPrice"
-        @clear-boolean="clearBoolean"
-        @clear-all="clearAllFilters"
-      />
-    </div>
-  </div>
-</template>
-
-<script>
-import RocketSearchFacets from './search/RocketSearchFacets.vue';
-import RocketSearchPagination from './search/RocketSearchPagination.vue';
-import { fetchUappiProducts, productImage, productPath, productPrice, formatCurrency } from '../uappi.js';
-import { TRACKING_PARAMS } from '../listing.js';
-
-// Parâmetros de campanha nunca viram filtro na busca.
-function emptyContext () {
-  return {
-    appliedFilters: [],
-    total: 0,
-    page: 0,
-    size: 0,
-    totalPages: 0,
-    hasNextPage: false,
-    hasPrevPage: false,
-    products: [],
-    facets: {},
-    sortInfo: { requested: 'relevance', applied: 'relevance' },
-    sortOptions: []
-  };
-}
-
-function splitValues (raw) {
-  return String(raw || '').split(';').filter(v => v !== '');
-}
-
-export default {
-  name: 'RocketSearch',
-  components: { RocketSearchFacets, RocketSearchPagination },
-  props: {
-    pageSize: { type: Number, default: 20 },
-    facetsMode: { type: String, default: 'side' },
-    livescroll: { type: Boolean, default: false },
-    // Modo categoria: filtra a busca pela categoria (id da Rocket = id da categoria na Uappi).
-    isCategory: { type: Boolean, default: false },
-    categoryId: { type: [String, Number], default: '' },
-    mediaSize: { type: String, default: 'medium' }
-  },
-  data () {
-    return {
-      context: emptyContext(),
-      products: [],
-      isLoading: true,
-      loaded: false,
-      livescrolling: false,
-      showSortOptions: false,
-      fixedFacetsOpened: false,
-      closedFacets: [],
-      isMobile: false,
-      rangeKey: 0
-    };
-  },
-  computed: {
-    size () {
-      return this.pageSize;
-    },
-    mode () {
-      // Mobile sempre usa o painel fixo (mesma regra da Linx).
-      return this.isMobile || this.facetsMode === 'fixed' ? 'fixed' : 'side';
-    },
-    queryParam () {
-      return this.$rocket.config.searchPageParam;
-    },
-    term () {
-      const q = this.$route.query;
-      return String(q[this.queryParam] || q.q || '');
-    },
-    appliedSortLabel () {
-      const applied = this.context.sortInfo && this.context.sortInfo.applied;
-      const option = (this.context.sortOptions || []).find(o => o.id === applied);
-      return option ? option.label : 'Ordenar';
-    }
-  },
-  watch: {
-    '$route.query' () {
-      this.fetchResult();
-    }
-  },
-  mounted () {
-    this.isMobile = window.innerWidth < 1024;
-    this.onDocumentClick = (event) => {
-      if (!event.target.closest || !event.target.closest('.rocket-search__sorter')) this.showSortOptions = false;
-    };
-    this.onKeyup = (event) => {
-      if (event.code === 'Escape') this.fixedFacetsOpened = false;
-    };
-    document.addEventListener('click', this.onDocumentClick);
-    document.addEventListener('keyup', this.onKeyup);
-    this.fetchResult();
-  },
-  beforeDestroy () {
-    document.removeEventListener('click', this.onDocumentClick);
-    document.removeEventListener('keyup', this.onKeyup);
-    document.body.classList.remove('faceting');
-  },
-  methods: {
-    productImage (product) {
-      return productImage(product, this.mediaSize);
-    },
-    productPath,
-    productPrice,
-    formatCurrency,
-
-    // ---- Busca ----
-
-    buildParams (page) {
-      const query = this.$route.query;
-      const params = {
-        q: this.term,
-        size: this.size,
-        sort: query.sort || 'relevance',
-        page: page || query.page || 1
-      };
-      Object.keys(query).forEach((key) => {
-        const value = query[key];
-        if (value === undefined || value === null || value === '') return;
-        if (key === this.queryParam || key === 'q' || key === 'sort' || key === 'page') return;
-        const lower = key.toLowerCase();
-        if (TRACKING_PARAMS.includes(lower) || lower.indexOf('utm_') === 0) return;
-        params[key] = Array.isArray(value) ? value.join(';') : value;
-      });
-      if (this.isCategory && this.categoryId) params.categoryId = this.categoryId;
-      return params;
-    },
-
-    async fetchResult (page) {
-      const seq = this.seq = (this.seq || 0) + 1;
-      const append = this.livescrolling;
-      this.isLoading = true;
-      document.body.classList.add('faceting');
-
-      try {
-        const start = Date.now();
-        const response = await this.$rocket.search(this.buildParams(page));
-        if (seq !== this.seq) return;
-        const responseTime = Date.now() - start;
-        this.context = Object.assign(emptyContext(), response);
-        this.$rocket.rememberSearchPrices(this.context.products);
-
-        if (this.term !== '') {
-          this.$rocket.dispatchEvent('search', {
-            query: this.term,
-            resultsCount: this.context.total,
-            meta: { query: this.term, resultsCount: this.context.total, responseTime }
-          }).catch(() => {});
-        }
-
-        // Rocket ordena/filtra; o card mostra o produto como a Uappi o tem.
-        const ids = (this.context.products || []).map(p => p.id);
-        const products = await fetchUappiProducts(this.$axios, ids);
-        if (seq !== this.seq) return;
-        this.products = append ? this.products.concat(products) : products;
-        this.$emit('products-loaded', { products: this.products, total: this.context.total, term: this.term });
-      }
-      catch (e) {
-        if (seq !== this.seq) return;
-        if (!append) this.products = [];
-        console.warn('[RocketSearch] busca falhou', e && e.message ? e.message : e);
-      }
-      this.isLoading = false;
-      this.livescrolling = false;
-      this.loaded = true;
-      document.body.classList.remove('faceting');
-      // Depois da resposta: o layout do tema rola para o topo a cada troca de rota, e um
-      // scroll disparado junto com o push perderia para ele.
-      if (this.pendingScroll) {
-        this.pendingScroll = false;
-        this.$nextTick(() => this.scrollIntoView());
-      }
-    },
-
-    // Estado mora na URL (como na Linx): toda mudança vira navegação, e o watch de
-    // $route.query refaz a busca — voltar/avançar do navegador funciona sozinho.
-    updateQuery (mutate) {
-      const query = Object.assign({}, this.$route.query);
-      mutate(query);
-      Object.keys(query).forEach((key) => {
-        const keepEmpty = key === this.queryParam && !this.isCategory;
-        if (!keepEmpty && (query[key] === '' || query[key] == null)) delete query[key];
-      });
-      // Na busca o param fica mesmo vazio: é ele que marca "busca sem termo".
-      if (!this.isCategory && query[this.queryParam] === undefined) query[this.queryParam] = this.term;
-      this.pendingScroll = true;
-      this.$router.push({ path: this.$route.path, query }).catch(() => {});
-    },
-
-    scrollIntoView () {
-      const el = this.$refs.products;
-      if (el && el.scrollIntoView) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    },
-
-    // ---- Facets ----
-
-    isSelected (value, facet) {
-      if (value === 0 || value === 1) {
-        const booleanFilter = (this.context.appliedFilters || []).find(f => f.type === 'boolean' && f.field === facet.field);
-        return !!booleanFilter && booleanFilter.value === (value === 1);
-      }
-      return (this.context.appliedFilters || []).some(f => (f.values || []).includes(value));
-    },
-
-    clickFacet (value, facet) {
-      const selected = this.isSelected(value.value, facet);
-      this.updateQuery((query) => {
-        if (value.value === 0 || value.value === 1) {
-          query[facet.label] = selected ? '' : String(value.value);
-        }
-        else {
-          let values = splitValues(query[facet.label]);
-          values = selected ? values.filter(v => v !== String(value.value)) : values.concat(String(value.value));
-          query[facet.label] = values.join(';');
-        }
-        delete query.page;
-        delete query.minPrice;
-        delete query.maxPrice;
-      });
-    },
-
-    applyPrice ({ min, max }) {
-      this.updateQuery((query) => {
-        query.minPrice = String(min);
-        query.maxPrice = String(max);
-        delete query.page;
-      });
-    },
-
-    clearFacet (value, facet) {
-      this.updateQuery((query) => {
-        query[facet.alias] = splitValues(query[facet.alias]).filter(v => v !== String(value)).join(';');
-      });
-    },
-
-    clearPrice () {
-      this.rangeKey++;
-      this.updateQuery((query) => {
-        delete query.page;
-        delete query.minPrice;
-        delete query.maxPrice;
-      });
-    },
-
-    clearBoolean (facet) {
-      this.updateQuery((query) => {
-        delete query[facet.alias];
-        delete query.page;
-      });
-    },
-
-    clearAllFilters () {
-      this.rangeKey++;
-      this.updateQuery((query) => {
-        Object.keys(query).forEach((key) => {
-          if (key !== this.queryParam) delete query[key];
-        });
-      });
-    },
-
-    toggleFacet (facet) {
-      const i = this.closedFacets.indexOf(facet.field);
-      if (i !== -1) this.closedFacets.splice(i, 1);
-      else this.closedFacets.push(facet.field);
-    },
-
-    // ---- Ordenação / paginação ----
-
-    changeSort (option) {
-      this.showSortOptions = false;
-      this.updateQuery((query) => {
-        query.sort = option.id;
-        delete query.page;
-      });
-    },
-
-    changePage (page) {
-      this.updateQuery((query) => {
-        query.page = String(page);
-      });
-    },
-
-    // Sem mexer na URL (diferente da Linx): toda troca de rota faz o layout do tema rolar
-    // para o topo, o que jogaria o cliente para cima no meio da lista.
-    nextPageLivescroll () {
-      if (this.livescrolling) return;
-      this.livescrolling = true;
-      this.fetchResult((this.context.page || 1) + 1);
-    },
-
-    // ---- Tracking ----
-
-    // Captura o clique em qualquer link do card (o tema navega pelo próprio router-link;
-    // em SPA a página não descarrega, então o evento sai sem precisar segurar a navegação).
-    trackProductClick (product, index, event) {
-      const link = event.target && event.target.closest ? event.target.closest('a[href]') : null;
-      if (!link) return;
-      // position = índice na lista exibida (mesma semântica da Linx).
-      this.$rocket.dispatchEvent('click', {
-        productId: String(product.id),
-        position: index,
-        meta: { source: 'search-page', query: this.term || '' }
-      }).catch(() => {});
-    }
-  }
-};
-</script>
-
-<style src="../css/common.css"></style>
-<style src="../css/search.css"></style>
+<template>
+  <div
+    class="rocket-search rocket-search__product-search rocket-search--page"
+    data-search-mode="page"
+    :data-facets-mode="mode"
+  >
+    <div class="rocket-search__content">
+      <div class="rocket-search__products-result opened">
+        <div class="wrapper">
+          <div v-if="mode === 'side'" class="rocket-search__products-result__col-left">
+            <RocketSearchFacets
+              :facets="context.facets"
+              :applied-filters="context.appliedFilters"
+              :closed-facets="closedFacets"
+              facets-mode="side"
+              :is-mobile="isMobile"
+              :is-selected="isSelected"
+              :range-key="rangeKey"
+              @toggle-facet="toggleFacet"
+              @click-facet="clickFacet"
+              @apply-price="applyPrice"
+              @clear-facet="clearFacet"
+              @clear-price="clearPrice"
+              @clear-boolean="clearBoolean"
+              @clear-all="clearAllFilters"
+            />
+          </div>
+
+          <div class="rocket-search__products-result__col-right">
+            <div class="rocket-search__header">
+              <span class="rocket-search__count"><span v-text="context.total" /> produtos encontrados.</span>
+
+              <button v-if="mode === 'fixed'" class="rocket-search__open-facets" @click="fixedFacetsOpened = true">
+                <svg xmlns="http://www.w3.org/2000/svg" width="15.096" height="15.812" viewBox="0 0 15.096 15.812">
+                  <g transform="translate(-8.37 -6.396)">
+                    <path d="M9.028,9.525h7.593a2.457,2.457,0,0,0,4.741,0h1.445a.658.658,0,0,0,0-1.316H21.357a2.457,2.457,0,0,0-4.741,0H9.028a.658.658,0,1,0,0,1.316ZM19,7.713a1.153,1.153,0,1,1-1.16,1.15A1.153,1.153,0,0,1,19,7.713Z" fill="#fff" />
+                    <path d="M22.808,38.18h-7.6a2.455,2.455,0,0,0-4.74,0H9.028a.658.658,0,1,0,0,1.316h1.451a2.455,2.455,0,0,0,4.74,0h7.59a.658.658,0,1,0,0-1.316Zm-9.972,1.811a1.155,1.155,0,1,1,.82-.336A1.153,1.153,0,0,1,12.836,39.992Z" transform="translate(0 -24.536)" fill="#fff" />
+                    <path d="M22.808,68.168H21.357a2.457,2.457,0,0,0-4.741,0H9.028a.658.658,0,1,0,0,1.316h7.593a2.457,2.457,0,0,0,4.741,0h1.445a.658.658,0,1,0,0-1.316ZM19,69.981a1.153,1.153,0,1,1,1.146-1.151A1.153,1.153,0,0,1,19,69.981Z" transform="translate(0 -49.088)" fill="#fff" />
+                  </g>
+                </svg>
+                Filtrar
+              </button>
+
+              <div class="rocket-search__sorter">
+                <div class="select" @click="showSortOptions = !showSortOptions">
+                  <span class="text" v-text="appliedSortLabel" />
+                  <svg xmlns="http://www.w3.org/2000/svg" width="10.582" height="6.692" viewBox="0 0 10.582 6.692">
+                    <path d="M5.291 4.314L1.401.424l-.977.977 4.867 4.867 4.867-4.867-.977-.977z" fill="#9e9e9e" stroke="#9e9e9e" stroke-width=".6" fill-rule="evenodd" />
+                  </svg>
+                </div>
+                <ul v-show="showSortOptions" class="select-options">
+                  <li
+                    v-for="option in context.sortOptions"
+                    :key="option.id"
+                    :class="{ selected: context.sortInfo.applied === option.id }"
+                    @click="changeSort(option)"
+                    v-text="option.label"
+                  />
+                </ul>
+              </div>
+            </div>
+
+            <div v-if="context.appliedFilters.length > 0" class="rocket-search__facets__selected--v2">
+              <span>Filtros aplicados:</span>
+              <ul>
+                <template v-for="(facet, i) in context.appliedFilters">
+                  <li v-for="(value, j) in facet.values || []" :key="'f-' + i + '-' + j" :data-alias="facet.alias">
+                    <span class="option-title" :data-alias="facet.alias">
+                      <span class="name" v-text="facet.alias + ':'" />
+                      <span class="label" v-text="value" />
+                    </span>
+                    <button class="rocket-search__facets__selected__clear-filter" aria-label="Remover filtro" @click="clearFacet(value, facet)">
+                      x
+                    </button>
+                  </li>
+                  <li v-if="facet.type === 'range'" :key="'r-' + i" :data-alias="facet.alias">
+                    <span class="option-title" :data-alias="facet.alias">
+                      <span class="name" v-text="facet.alias + ':'" />
+                      <span class="label">De {{ formatCurrency(facet.min) }} até {{ formatCurrency(facet.max) }}</span>
+                    </span>
+                    <button class="rocket-search__facets__selected__clear-filter" aria-label="Remover filtro" @click="clearPrice">
+                      x
+                    </button>
+                  </li>
+                  <li v-if="facet.type === 'boolean'" :key="'b-' + i" :data-alias="facet.alias" :data-type="facet.type">
+                    <span class="option-title" :data-alias="facet.alias">
+                      <span class="name" v-text="facet.alias + ':'" />
+                      <span class="label" v-text="facet.value ? 'Sim' : 'Não'" />
+                    </span>
+                    <button class="rocket-search__facets__selected__clear-filter" aria-label="Remover filtro" @click="clearBoolean(facet)">
+                      x
+                    </button>
+                  </li>
+                </template>
+                <li class="rocket-search__clear-all-filters">
+                  <button @click="clearAllFilters">
+                    Limpar
+                  </button>
+                </li>
+              </ul>
+            </div>
+
+            <div v-show="isLoading && !livescrolling" class="rocket-search__product-placeholder">
+              <div v-for="n in size" :key="n" class="rocket-search__product-placeholder__product-line">
+                <div v-for="i in 6" :key="i" class="rocket-search__product-placeholder__item" :class="'item-' + i" />
+              </div>
+            </div>
+
+            <ul v-show="!isLoading || livescrolling" ref="products" class="rocket-search__products">
+              <li
+                v-for="(product, index) in products"
+                :key="product.id"
+                :data-product-id="product.id"
+                class="rocket-search__product"
+                @click.capture="trackProductClick(product, index, $event)"
+              >
+                <slot name="product" :product="product" :position="index">
+                  <nuxt-link :to="productPath(product)" class="rocket-search__card">
+                    <img v-if="productImage(product)" :src="productImage(product)" :alt="product.nome" loading="lazy">
+                    <span class="rocket-search__card-name" v-text="product.nome" />
+                    <span v-if="productPrice(product) !== null" class="rocket-search__card-price" v-text="formatCurrency(productPrice(product))" />
+                  </nuxt-link>
+                </slot>
+              </li>
+            </ul>
+
+            <p v-if="!isLoading && loaded && !products.length" class="rocket-search__empty">
+              Nenhum produto encontrado.
+            </p>
+
+            <RocketSearchPagination
+              v-if="!livescroll && context.totalPages > 1"
+              :page="context.page"
+              :total-pages="context.totalPages"
+              :has-prev-page="context.hasPrevPage"
+              :has-next-page="context.hasNextPage"
+              @change="changePage"
+            />
+
+            <div v-if="livescroll && context.hasNextPage" class="rocket-search__footer">
+              <button class="rocket-search__livescroll" :class="{ 'button-loading': livescrolling }" @click="nextPageLivescroll">
+                Veja mais
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="fixedFacetsOpened && mode === 'fixed'" id="rocket-search__overlay" class="visible" @click="fixedFacetsOpened = false" />
+      <RocketSearchFacets
+        v-if="mode === 'fixed'"
+        :facets="context.facets"
+        :applied-filters="context.appliedFilters"
+        :closed-facets="closedFacets"
+        :fixed-facets-opened="fixedFacetsOpened"
+        facets-mode="fixed"
+        :is-mobile="isMobile"
+        :is-selected="isSelected"
+        :range-key="rangeKey"
+        @close="fixedFacetsOpened = false"
+        @toggle-facet="toggleFacet"
+        @click-facet="clickFacet"
+        @apply-price="applyPrice"
+        @clear-facet="clearFacet"
+        @clear-price="clearPrice"
+        @clear-boolean="clearBoolean"
+        @clear-all="clearAllFilters"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import RocketSearchFacets from './search/RocketSearchFacets.vue';
+import RocketSearchPagination from './search/RocketSearchPagination.vue';
+import { fetchUappiProducts, productImage, productPath, productPrice, formatCurrency } from '../uappi.js';
+import { TRACKING_PARAMS } from '../listing.js';
+
+// Parâmetros de campanha nunca viram filtro na busca.
+function emptyContext () {
+  return {
+    appliedFilters: [],
+    total: 0,
+    page: 0,
+    size: 0,
+    totalPages: 0,
+    hasNextPage: false,
+    hasPrevPage: false,
+    products: [],
+    facets: {},
+    sortInfo: { requested: 'relevance', applied: 'relevance' },
+    sortOptions: []
+  };
+}
+
+function splitValues (raw) {
+  return String(raw || '').split(';').filter(v => v !== '');
+}
+
+export default {
+  name: 'RocketSearch',
+  components: { RocketSearchFacets, RocketSearchPagination },
+  props: {
+    pageSize: { type: Number, default: 20 },
+    facetsMode: { type: String, default: 'side' },
+    livescroll: { type: Boolean, default: false },
+    // Modo categoria: filtra a busca pela categoria (id da Rocket = id da categoria na Uappi).
+    isCategory: { type: Boolean, default: false },
+    categoryId: { type: [String, Number], default: '' },
+    mediaSize: { type: String, default: 'medium' }
+  },
+  data () {
+    return {
+      context: emptyContext(),
+      products: [],
+      isLoading: true,
+      loaded: false,
+      livescrolling: false,
+      showSortOptions: false,
+      fixedFacetsOpened: false,
+      closedFacets: [],
+      isMobile: false,
+      rangeKey: 0
+    };
+  },
+  computed: {
+    size () {
+      return this.pageSize;
+    },
+    mode () {
+      // Mobile sempre usa o painel fixo (mesma regra da Linx).
+      return this.isMobile || this.facetsMode === 'fixed' ? 'fixed' : 'side';
+    },
+    queryParam () {
+      return this.$rocket.config.searchPageParam;
+    },
+    term () {
+      const q = this.$route.query;
+      return String(q[this.queryParam] || q.q || '');
+    },
+    appliedSortLabel () {
+      const applied = this.context.sortInfo && this.context.sortInfo.applied;
+      const option = (this.context.sortOptions || []).find(o => o.id === applied);
+      return option ? option.label : 'Ordenar';
+    }
+  },
+  watch: {
+    '$route.query' () {
+      this.fetchResult();
+    }
+  },
+  mounted () {
+    this.isMobile = window.innerWidth < 1024;
+    this.onDocumentClick = (event) => {
+      if (!event.target.closest || !event.target.closest('.rocket-search__sorter')) this.showSortOptions = false;
+    };
+    this.onKeyup = (event) => {
+      if (event.code === 'Escape') this.fixedFacetsOpened = false;
+    };
+    document.addEventListener('click', this.onDocumentClick);
+    document.addEventListener('keyup', this.onKeyup);
+    this.fetchResult();
+  },
+  beforeDestroy () {
+    document.removeEventListener('click', this.onDocumentClick);
+    document.removeEventListener('keyup', this.onKeyup);
+    document.body.classList.remove('faceting');
+  },
+  methods: {
+    productImage (product) {
+      return productImage(product, this.mediaSize);
+    },
+    productPath,
+    productPrice,
+    formatCurrency,
+
+    // ---- Busca ----
+
+    buildParams (page) {
+      const query = this.$route.query;
+      const params = {
+        q: this.term,
+        size: this.size,
+        sort: query.sort || 'relevance',
+        page: page || query.page || 1
+      };
+      Object.keys(query).forEach((key) => {
+        const value = query[key];
+        if (value === undefined || value === null || value === '') return;
+        if (key === this.queryParam || key === 'q' || key === 'sort' || key === 'page') return;
+        const lower = key.toLowerCase();
+        if (TRACKING_PARAMS.includes(lower) || lower.indexOf('utm_') === 0) return;
+        params[key] = Array.isArray(value) ? value.join(';') : value;
+      });
+      if (this.isCategory && this.categoryId) params.categoryId = this.categoryId;
+      return params;
+    },
+
+    async fetchResult (page) {
+      const seq = this.seq = (this.seq || 0) + 1;
+      const append = this.livescrolling;
+      this.isLoading = true;
+      document.body.classList.add('faceting');
+
+      try {
+        const start = Date.now();
+        const response = await this.$rocket.search(this.buildParams(page));
+        if (seq !== this.seq) return;
+        const responseTime = Date.now() - start;
+        this.context = Object.assign(emptyContext(), response);
+        this.$rocket.rememberSearchPrices(this.context.products);
+
+        if (this.term !== '') {
+          this.$rocket.dispatchEvent('search', {
+            query: this.term,
+            resultsCount: this.context.total,
+            meta: { query: this.term, resultsCount: this.context.total, responseTime }
+          }).catch(() => {});
+        }
+
+        // Rocket ordena/filtra; o card mostra o produto como a Uappi o tem.
+        const ids = (this.context.products || []).map(p => p.id);
+        const products = await fetchUappiProducts(this.$axios, ids);
+        if (seq !== this.seq) return;
+        this.products = append ? this.products.concat(products) : products;
+        this.$emit('products-loaded', { products: this.products, total: this.context.total, term: this.term });
+      }
+      catch (e) {
+        if (seq !== this.seq) return;
+        if (!append) this.products = [];
+        console.warn('[RocketSearch] busca falhou', e && e.message ? e.message : e);
+      }
+      this.isLoading = false;
+      this.livescrolling = false;
+      this.loaded = true;
+      document.body.classList.remove('faceting');
+      // Depois da resposta: o layout do tema rola para o topo a cada troca de rota, e um
+      // scroll disparado junto com o push perderia para ele.
+      if (this.pendingScroll) {
+        this.pendingScroll = false;
+        this.$nextTick(() => this.scrollIntoView());
+      }
+    },
+
+    // Estado mora na URL (como na Linx): toda mudança vira navegação, e o watch de
+    // $route.query refaz a busca — voltar/avançar do navegador funciona sozinho.
+    updateQuery (mutate) {
+      const query = Object.assign({}, this.$route.query);
+      mutate(query);
+      Object.keys(query).forEach((key) => {
+        const keepEmpty = key === this.queryParam && !this.isCategory;
+        if (!keepEmpty && (query[key] === '' || query[key] == null)) delete query[key];
+      });
+      // Na busca o param fica mesmo vazio: é ele que marca "busca sem termo".
+      if (!this.isCategory && query[this.queryParam] === undefined) query[this.queryParam] = this.term;
+      this.pendingScroll = true;
+      this.$router.push({ path: this.$route.path, query }).catch(() => {});
+    },
+
+    scrollIntoView () {
+      const el = this.$refs.products;
+      if (el && el.scrollIntoView) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    },
+
+    // ---- Facets ----
+
+    isSelected (value, facet) {
+      if (value === 0 || value === 1) {
+        const booleanFilter = (this.context.appliedFilters || []).find(f => f.type === 'boolean' && f.field === facet.field);
+        return !!booleanFilter && booleanFilter.value === (value === 1);
+      }
+      return (this.context.appliedFilters || []).some(f => (f.values || []).includes(value));
+    },
+
+    clickFacet (value, facet) {
+      const selected = this.isSelected(value.value, facet);
+      this.updateQuery((query) => {
+        if (value.value === 0 || value.value === 1) {
+          query[facet.label] = selected ? '' : String(value.value);
+        }
+        else {
+          let values = splitValues(query[facet.label]);
+          values = selected ? values.filter(v => v !== String(value.value)) : values.concat(String(value.value));
+          query[facet.label] = values.join(';');
+        }
+        delete query.page;
+        delete query.minPrice;
+        delete query.maxPrice;
+      });
+    },
+
+    applyPrice ({ min, max }) {
+      this.updateQuery((query) => {
+        query.minPrice = String(min);
+        query.maxPrice = String(max);
+        delete query.page;
+      });
+    },
+
+    clearFacet (value, facet) {
+      this.updateQuery((query) => {
+        query[facet.alias] = splitValues(query[facet.alias]).filter(v => v !== String(value)).join(';');
+      });
+    },
+
+    clearPrice () {
+      this.rangeKey++;
+      this.updateQuery((query) => {
+        delete query.page;
+        delete query.minPrice;
+        delete query.maxPrice;
+      });
+    },
+
+    clearBoolean (facet) {
+      this.updateQuery((query) => {
+        delete query[facet.alias];
+        delete query.page;
+      });
+    },
+
+    clearAllFilters () {
+      this.rangeKey++;
+      this.updateQuery((query) => {
+        Object.keys(query).forEach((key) => {
+          if (key !== this.queryParam) delete query[key];
+        });
+      });
+    },
+
+    toggleFacet (facet) {
+      const i = this.closedFacets.indexOf(facet.field);
+      if (i !== -1) this.closedFacets.splice(i, 1);
+      else this.closedFacets.push(facet.field);
+    },
+
+    // ---- Ordenação / paginação ----
+
+    changeSort (option) {
+      this.showSortOptions = false;
+      this.updateQuery((query) => {
+        query.sort = option.id;
+        delete query.page;
+      });
+    },
+
+    changePage (page) {
+      this.updateQuery((query) => {
+        query.page = String(page);
+      });
+    },
+
+    // Sem mexer na URL (diferente da Linx): toda troca de rota faz o layout do tema rolar
+    // para o topo, o que jogaria o cliente para cima no meio da lista.
+    nextPageLivescroll () {
+      if (this.livescrolling) return;
+      this.livescrolling = true;
+      this.fetchResult((this.context.page || 1) + 1);
+    },
+
+    // ---- Tracking ----
+
+    // Captura o clique em qualquer link do card (o tema navega pelo próprio router-link;
+    // em SPA a página não descarrega, então o evento sai sem precisar segurar a navegação).
+    trackProductClick (product, index, event) {
+      const link = event.target && event.target.closest ? event.target.closest('a[href]') : null;
+      if (!link) return;
+      // position = índice na lista exibida (mesma semântica da Linx).
+      this.$rocket.dispatchEvent('click', {
+        productId: String(product.id),
+        position: index,
+        meta: { source: 'search-page', query: this.term || '' }
+      }).catch(() => {});
+    }
+  }
+};
+</script>
+
+<style src="../css/common.css"></style>
+<style src="../css/search.css"></style>

package/runtime/components/RocketShowcase.vue

@@ -1,5 +1,9 @@
 <template>
-  <div v-if="showcase || loading" class="rocket-search" :data-rocket-showcase-position="position">
+  <div
+    v-if="showcase || loading || debug"
+    :class="['rocket-search', { 'rocket-search--empty': !showcase && !loading }]"
+    :data-rocket-showcase-position="position"
+  >
     <div v-if="loading" class="rocket-search__showcase rocket-search__showcase--skeleton" :style="columnsStyle">
       <div class="rocket-search__showcase__title rocket-search__product-placeholder__item" />
       <div class="rocket-search__product-placeholder">
@@ -13,7 +17,7 @@
     <RocketBannerItem v-else-if="bannerOnly" :item="showcase" :position="position" />
 
     <section
-      v-else
+      v-else-if="showcase"
       ref="root"
       class="rocket-search__showcase"
       :data-rocket-showcase-id="showcase.id"
@@ -62,7 +66,7 @@ export default {
     mediaSize: { type: String, default: 'medium' }
   },
   data () {
-    return { showcase: null, products: [], loading: false };
+    return { showcase: null, products: [], loading: false, debug: false };
   },
   computed: {
     columns () {
@@ -88,6 +92,9 @@ export default {
     }
   },
   mounted () {
+    // ?rocket-search-debug=true: o slot aparece mesmo vazio. Lido no mounted (não no data)
+    // para o HTML do SSR bater com a hidratação.
+    this.debug = document.body.classList.contains('rocket-search-debug');
     if (this.pageType || this.$rocket.getPage().section) this.load();
   },
   beforeDestroy () {

package/runtime/css/common.css

@@ -93,63 +93,76 @@
   }
 }
 
-/* DEBUG: ?rocket-search-debug=true contorna e rotula cada slot de vitrine/banner. */
+/* DEBUG: ?rocket-search-debug=true contorna e rotula toda posição de vitrine — inclusive as
+   vazias, que o RocketShowcase só renderiza no debug. Mesmo layout da Linx 2.0.0. */
 body.rocket-search-debug {
   & [data-rocket-showcase-position] {
+    --color: #64748b;
+    --content: attr(data-rocket-showcase-position);
     position: relative;
-    border: 2px solid var(--color);
-    padding: 60px 15px;
-
-    &::before,
-    &::after {
+    min-height: 140px;
+    padding: 52px 16px 16px;
+    border: 2px dashed var(--color);
+    border-radius: 12px;
+    overflow: hidden;
+    background-color: color-mix(in srgb, var(--color) 6%, transparent);
+
+    /* Selo com o nome da posição */
+    &::before {
       content: var(--content);
       position: absolute;
-      left: 50%;
-      width: fit-content;
-      margin: 0 auto;
-      padding: 0 5px;
+      top: 12px;
+      left: 12px;
+      padding: 5px 12px;
+      border-radius: 999px;
+      color: #fff;
+      background-color: var(--color);
+      font: 700 12px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      z-index: 2;
+    }
+
+    /* Atributo do slot, para quem vai mexer no template */
+    &::after {
+      content: "data-rocket-showcase-position=\"" attr(data-rocket-showcase-position) "\"";
+      position: absolute;
+      top: 16px;
+      right: 14px;
       color: var(--color);
-      display: block;
-      font-size: 18px;
-      font-weight: 700;
-      text-align: center;
-      background-color: #f6f6f6;
-      z-index: 1;
+      font: 500 11px/1.2 ui-monospace, Consolas, monospace;
+      opacity: 0.8;
+      z-index: 2;
     }
 
-    &::before {
-      top: 0;
-      transform: translate(-50%, -50%);
-    }
-
-    &::after {
-      bottom: 0;
-      transform: translate(-50%, 50%);
+    /* Posição sem vitrine (o RocketShowcase só a renderiza no debug) */
+    &.rocket-search--empty::before {
+      content: var(--content) " · vazia";
     }
 
     &[data-rocket-showcase-position="hero"] {
-      --color: lab(52.0183% 66.11 -78.2316);
+      --color: #7c3aed;
       --content: "Hero";
     }
 
     &[data-rocket-showcase-position="top"] {
-      --color: lab(70.5521% -66.5147 45.8073);
+      --color: #059669;
       --content: "Topo";
     }
 
     &[data-rocket-showcase-position="middle"] {
-      --color: lab(64.272% 57.1788 90.3583);
+      --color: #d97706;
       --content: "Meio";
     }
 
     &[data-rocket-showcase-position="bottom"] {
-      --color: lab(55.4814% 75.0732 48.8528);
-      --content: "Rodape";
+      --color: #dc2626;
+      --content: "Rodapé";
     }
 
     &[data-rocket-showcase-position="prefooter"] {
-      --color: lab(48.295% 38.3129 -81.9673);
-      --content: "Antes do Footer";
+      --color: #2563eb;
+      --content: "Antes do footer";
     }
   }
 }

package/runtime/plugin.js

@@ -51,10 +51,16 @@ export default function ({ app, store, $axios }, inject) {
   // chega hidratado — não há mutation no cliente para ouvir.
   if (store && store.state.dadosPageAtual) applyPage(store.state.dadosPageAtual);
 
+  // Cliente logado (ROC-656): o tema guarda o retorno de checkout/user (`{ id, logado }`) no
+  // Vuex — `setUser` no SSR, então chega hidratado — e commita `setUser` de novo no login e na
+  // troca de perfil, que não recarregam a página.
+  if (store && store.state.user) rocket.trackLogin(store.state.user).catch(() => {});
+
   // Navegação SPA: o tema commita setDadosPageAtual quando a página nova carrega os dados.
   if (store) {
     store.subscribe((mutation) => {
       if (mutation.type === 'setDadosPageAtual') applyPage(mutation.payload);
+      else if (mutation.type === 'setUser') rocket.trackLogin(mutation.payload).catch(() => {});
     });
   }
 

package/runtime/rocket.js

@@ -22,6 +22,7 @@ const PENDING_CART_EVENTS_KEY = 'rs_pending_add_to_cart_events';
 const ANON_SESSION_KEY = 'rs_anon_session_id';
 const ANON_SESSION_TTL = 30 * 60 * 1000;
 const LAST_SECTION_KEY = 'rs_last_section';
+const LOGIN_SENT_KEY = 'rs_login_sent';
 const DEBUG_TOKEN_KEY = 'rs_debug_token';
 const SHOWCASE_DEBUG_KEY = 'rs_showcase_debug';
 // 2h — em sincronia com DEBUG_SESSION_TTL_SECONDS no backend.
@@ -489,6 +490,22 @@ export function createRocket (config) {
     rocket.dispatchEvent('page_view', { meta: { pageType: section, fromSection: prev || null } }).catch(() => {});
   };
 
+  // Cliente logado → 'login' com o id do cliente na Uappi (o mesmo `cliente.id` dos pedidos),
+  // uma vez por (sessão, cliente) na aba (ROC-656). `user` é a resposta da Front API em
+  // checkout/user, checkout/login e checkout/login-multiple-profile: `{ id, logado, ... }`.
+  // A Uappi não tem verificador de comprador: o vínculo fica `declared`. A marca só é gravada
+  // depois de entregue — envio perdido sai de novo na próxima resposta com o cliente.
+  rocket.trackLogin = async function (user) {
+    const customerId = user && user.logado !== false ? toPositiveNumber(user.id) : null;
+    if (!isBrowser || !customerId) return;
+    const sessionId = await rocket.getSessionId();
+    if (!sessionId) return;
+    const mark = sessionId + ':' + customerId;
+    if (storageGet(LOGIN_SENT_KEY) === mark) return;
+    const res = await rocket.dispatchEvent('login', { customerId });
+    if (res && res.ok) storageSet(LOGIN_SENT_KEY, mark);
+  };
+
   rocket.fireProductView = function () {
     if (!page.productId) return;
     const viewData = { productId: page.productId };