@rocketsearch/nuxt-uappi 0.1.0 → 0.2.0

package/module.js

@@ -77,8 +77,9 @@ module.exports = function rocketSearchUappi (moduleOptions) {
   });
 
   // O pacote chega fora de node_modules via link em dev e dentro dele em produção:
-  // nos dois casos o Babel do tema precisa transpilar.
-  this.options.build.transpile.push(__dirname);
+  // nos dois casos o Babel do tema precisa transpilar. O nome cobre o import direto do
+  // tema (runtime/listing.js): sem ele o bundle do SSR faz require() de ES module.
+  this.options.build.transpile.push(__dirname, module.exports.meta.name);
 
   // Conexão fria + preflight CORS era o grosso da latência do storefront, não a busca.
   this.options.head.link = this.options.head.link || [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocketsearch/nuxt-uappi",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "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';
-
-// Parâmetros de campanha nunca viram filtro na busca.
-const TRACKING_PARAMS = ['gclid', 'gbraid', 'wbraid', 'gad_source', 'gad_campaignid', 'gclsrc', 'dclid', 'fbclid', 'msclkid', 'yclid', 'ttclid', 'twclid', 'epik', 'sccid', 'sc_click_id', 'li_fat_id', 'rdt_cid', 'irclickid', 'ko_click_id', 'ob_click_id', 'tblci', 'mc_cid', 'mc_eid', '_hsenc', '_hsmi', 'hsctatracking', 'mkt_tok', 'vero_id', 'wickedid'];
-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/listing.js

@@ -0,0 +1,189 @@
+/**
+ * Busca da Rocket no formato da listagem da Front API da Uappi
+ * (`/v2/front/url/product/listing/search`).
+ *
+ * Para o tema que quer manter a própria página de listagem (filtros, ordenação,
+ * paginação, card): troca só a fonte dos dados. A URL segue o vocabulário do tema
+ * (busca, pg, ipp, order, preco); facets da Rocket entram como `?<Facet>=v1;v2`.
+ */
+
+import { fetchUappiProducts } from './uappi.js';
+
+export const TRACKING_PARAMS = ['gclid', 'gbraid', 'wbraid', 'gad_source', 'gad_campaignid', 'gclsrc', 'dclid', 'fbclid', 'msclkid', 'yclid', 'ttclid', 'twclid', 'epik', 'sccid', 'sc_click_id', 'li_fat_id', 'rdt_cid', 'irclickid', 'ko_click_id', 'ob_click_id', 'tblci', 'mc_cid', 'mc_eid', '_hsenc', '_hsmi', 'hsctatracking', 'mkt_tok', 'vero_id', 'wickedid'];
+
+// Params do tema que não são facet. marca/filtro/atributo/selo são os filtros nativos da
+// Uappi (ids dela): link antigo com eles não pode zerar a busca.
+const THEME_PARAMS = ['busca', 'pg', 'ipp', 'order', 'preco', 'marca', 'filtro', 'atributo', 'selo'];
+
+const SEARCH_ROUTE = '/busca';
+
+function splitValues (raw) {
+  return String(raw || '').split(';').filter(v => v !== '');
+}
+
+function isForwardable (key) {
+  const lower = key.toLowerCase();
+  return !THEME_PARAMS.includes(key) && !TRACKING_PARAMS.includes(lower) && lower.indexOf('utm_') !== 0;
+}
+
+export function toRocketParams (query, limit) {
+  const params = {
+    q: String(query.busca || ''),
+    page: parseInt(query.pg, 10) || 1,
+    size: parseInt(query.ipp, 10) || limit,
+    sort: query.order || 'relevance'
+  };
+  if (query.preco) {
+    const [min, max] = String(query.preco).split('-');
+    if (min) params.minPrice = min;
+    if (max) params.maxPrice = max;
+  }
+  Object.keys(query).forEach((key) => {
+    const value = query[key];
+    if (value === undefined || value === null || value === '' || !isForwardable(key)) return;
+    params[key] = Array.isArray(value) ? value.join(';') : value;
+  });
+  return params;
+}
+
+function route (query) {
+  return { name: 'search', params: {}, query, route: SEARCH_ROUTE };
+}
+
+// Query do link de uma opção: estado atual com o valor ligado/desligado, página zerada.
+function toggled (query, key, value) {
+  const next = Object.assign({}, query);
+  delete next.pg;
+  const values = splitValues(next[key]);
+  const on = values.includes(value);
+  const result = on ? values.filter(v => v !== value) : values.concat(value);
+  if (result.length) next[key] = result.join(';');
+  else delete next[key];
+  return next;
+}
+
+function facetValues (facet, query) {
+  const active = splitValues(query[facet.label]);
+  return (facet.values || []).map((v, index) => {
+    const value = String(v.value);
+    return {
+      id: index + 1,
+      nome: value,
+      label: value,
+      imagem: '',
+      imagemOriginal: '',
+      ordem: index,
+      ativo: active.includes(value),
+      rota: route(toggled(query, facet.label, value)),
+      url: ''
+    };
+  });
+}
+
+export function toUappiListing (response, products, query, options) {
+  const opts = options || {};
+  const term = String(query.busca || '');
+  const facets = Object.values((response && response.facets) || {});
+  const baseQuery = Object.assign({}, query);
+  delete baseQuery.pg;
+
+  const marcas = [];
+  const atributos = [];
+  const filtrosPreco = [];
+  facets.forEach((facet, index) => {
+    if (facet.type === 'range') {
+      if (facet.min != null && facet.max != null) {
+        const de = Math.floor(facet.min);
+        const ate = Math.ceil(facet.max);
+        filtrosPreco.push({ de, ate, ativo: !!query.preco, rota: route(Object.assign({}, baseQuery, { preco: `${de}-${ate}` })), url: '' });
+      }
+      return;
+    }
+    // Disponibilidade (0/1) não tem par na listagem da Uappi.
+    if (facet.type !== 'terms' || facet.field === 'hasStock' || !(facet.values || []).length) return;
+    const values = facetValues(facet, query);
+    if (facet.field === 'brand.name') marcas.push(...values);
+    else atributos.push({ id: index + 1, nome: facet.label, tipo: 'texto', valores: values });
+  });
+
+  const ordenacao = ((response && response.sortOptions) || []).map(option => ({
+    label: option.label,
+    title: option.description || option.label,
+    atual: (query.order || 'relevance') === option.id,
+    rota: route(Object.assign({}, baseQuery, { order: option.id })),
+    url: ''
+  }));
+
+  const size = (response && response.size) || parseInt(query.ipp, 10) || opts.limit;
+  const page = (response && response.page) || 1;
+  const title = (term ? term.charAt(0).toUpperCase() + term.slice(1) : 'Busca') + (opts.titleSuffix || '');
+
+  return {
+    estrutura: {
+      nivel: 'product/listing/search',
+      seo: { title, titleSocial: title, description: '', descriptionSocial: '', keywords: '', indexar: false },
+      breadcrumb: [
+        { label: 'Home', atual: false, rota: { name: 'home', params: {}, query: {}, route: '/' }, url: '/' },
+        { label: 'Busca', atual: true, rota: route({ busca: term }), url: '' }
+      ]
+    },
+    conteudo: {
+      busca: { texto: term, sugestao: [] },
+      layoutPersonalizado: { layout: '', codigoCss: '' },
+      produtos: products,
+      detalhes: {
+        categorias: { niveisAnteriores: [], atual: [], irmas: [], filhas: [] },
+        marcas,
+        filtros: [],
+        filtrosPreco,
+        filtrosDescontoPrecoPor: [],
+        selos: [],
+        atributos,
+        ordenacao
+      }
+    },
+    info: {
+      filtros: { busca: term },
+      offset: (page - 1) * size,
+      limit: size,
+      exibindo: products.length,
+      total: (response && response.total) || 0
+    }
+  };
+}
+
+/**
+ * Busca na Rocket + dados dos produtos na Uappi, já no formato da listagem.
+ * `rocketSearch` leva o que o evento `search` precisa: no SSR o dispatchEvent é no-op,
+ * então quem chama dispara com `dispatchListingSearch` já no cliente.
+ */
+export async function rocketSearchListing ({ $rocket, $axios, query, limit, titleSuffix }) {
+  const start = Date.now();
+  const response = await $rocket.search(toRocketParams(query, limit));
+  const responseTime = Date.now() - start;
+  $rocket.rememberSearchPrices(response.products);
+  const products = await fetchUappiProducts($axios, (response.products || []).map(p => p.id));
+  const listing = toUappiListing(response, products, query, { limit, titleSuffix });
+  listing.rocketSearch = { query: String(query.busca || ''), total: response.total || 0, responseTime, sent: false };
+  return listing;
+}
+
+export function dispatchListingSearch ($rocket, listing) {
+  const info = listing && listing.rocketSearch;
+  if (!info || info.sent || !info.query || typeof window === 'undefined') return;
+  info.sent = true;
+  $rocket.dispatchEvent('search', {
+    query: info.query,
+    resultsCount: info.total,
+    meta: { query: info.query, resultsCount: info.total, responseTime: info.responseTime }
+  }).catch(() => {});
+}
+
+export function dispatchListingClick ($rocket, listing, product, position) {
+  if (!product || product.id == null) return;
+  $rocket.dispatchEvent('click', {
+    productId: String(product.id),
+    position,
+    meta: { source: 'search-page', query: (listing && listing.rocketSearch && listing.rocketSearch.query) || '' }
+  }).catch(() => {});
+}