@rocketsearch/vue-uappi 0.0.0-stage → 0.1.1

package/runtime/css/showcase.css

@@ -0,0 +1,56 @@
+/* Port de linxecommerce/2.0.0/src/scss/showcase.scss — CSS nested nativo.
+   O Swiper vira scroll-snap: arraste/touch nativos, setas rolam uma "página". */
+
+[data-rocket-showcase-position] {
+  margin-top: 60px;
+  margin-bottom: 60px;
+}
+
+.rocket-search__showcase {
+  --showcase-gap: 16px;
+  position: relative;
+
+  & .rocket-search__showcase__title {
+    position: relative;
+    display: block;
+    margin-bottom: 30px;
+    font-size: 25px;
+    font-weight: 700;
+    text-align: center;
+
+    &.rocket-search__product-placeholder__item {
+      width: 150px;
+      height: 30px;
+      margin-left: auto;
+      margin-right: auto;
+    }
+  }
+
+  & .rocket-search__showcase__description {
+    display: block;
+    margin-bottom: 30px;
+    text-align: center;
+  }
+
+  & .rocket-search__showcase__track {
+    display: flex;
+    gap: var(--showcase-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  & .rocket-search__showcase__slide {
+    flex: 0 0 calc((100% - (var(--product-columns) - 1) * var(--showcase-gap)) / var(--product-columns));
+    min-width: 0;
+    scroll-snap-align: start;
+  }
+}
+

package/runtime/listing.js

@@ -0,0 +1,274 @@
+/**
+ * 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 { productPath } 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, path) {
+  return { name: 'search', params: {}, query, route: path || 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, path) {
+  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), path),
+      url: ''
+    };
+  });
+}
+
+// Origem do "Você quis dizer?": vai à API na busca que veio da sugestão, mas não pode grudar nos
+// links de filtro/ordem — senão toda navegação seguinte seria gravada como vinda da sugestão.
+const ORIGIN_PARAMS = ['rs_src', 'rs_from'];
+
+export function toUappiListing (response, products, rawQuery, options) {
+  const query = Object.assign({}, rawQuery);
+  ORIGIN_PARAMS.forEach((key) => { delete query[key]; });
+  const opts = options || {};
+  const path = opts.path;
+  // Coleção não tem "relevância": a ordem padrão é a da própria coleção (1ª opção da resposta).
+  const currentSort = query.order || opts.defaultSort || 'relevance';
+  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}` }), path), 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, path);
+    if (facet.field === 'brand.name') marcas.push(...values);
+    else atributos.push({ id: index + 1, nome: facet.label, tipo: 'texto', campo: facet.field, valores: values });
+  });
+
+  const ordenacao = ((response && response.sortOptions) || []).map(option => ({
+    label: option.label,
+    title: option.description || option.label,
+    atual: currentSort === option.id,
+    rota: route(Object.assign({}, baseQuery, { order: option.id }), path),
+    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: quem chama dispara com
+ * `dispatchListingSearch` depois de exibir a página.
+ */
+export async function rocketSearchListing ({ $rocket, query, limit, titleSuffix }) {
+  const start = Date.now();
+  const response = await $rocket.search(toRocketParams(query, limit));
+  const responseTime = Date.now() - start;
+  const listing = await withUappiProducts($rocket, response, query, { limit, titleSuffix });
+  listing.rocketSearch = {
+    query: String(query.busca || ''),
+    total: response.total || 0,
+    responseTime,
+    // "Você quis dizer?" (ROC-349, flag `didYouMean` da loja): a API decide quando e o quê.
+    didYouMean: (response.didYouMean && response.didYouMean.query) || null,
+    sent: false
+  };
+  return listing;
+}
+
+async function withUappiProducts ($rocket, response, query, opts) {
+  $rocket.rememberSearchPrices(response.products);
+  const products = await $rocket.fetchProducts((response.products || []).map(p => p.id));
+  return toUappiListing(response, products, query, opts);
+}
+
+// Categoria e coleção: a página (SEO, breadcrumb, banner da descrição, subcategorias) segue sendo
+// a da Uappi (`base`); produtos, filtros, ordenação e paginação passam a ser os da Rocket. Os
+// filtros nativos da Uappi (ids dela) saem: não filtram nada na Rocket.
+export function mergeIntoUappiPage (base, listing) {
+  const conteudo = (base && base.conteudo) || {};
+  const rocket = listing.conteudo.detalhes;
+  // A faceta de categoria da Rocket duplicaria a navegação de (sub)categorias da Uappi, que a página
+  // mantém. Sem essa navegação (coleção, por exemplo), ela fica: é o único filtro de categoria ali.
+  const nav = (conteudo.detalhes && conteudo.detalhes.categorias) || {};
+  const hasCategoryNav = [nav.filhas, nav.niveisAnteriores].some(list => Array.isArray(list) && list.length > 0);
+  const detalhes = Object.assign({}, conteudo.detalhes, {
+    marcas: rocket.marcas,
+    atributos: hasCategoryNav ? rocket.atributos.filter(a => a.campo !== 'category.name') : rocket.atributos,
+    filtrosPreco: rocket.filtrosPreco,
+    ordenacao: rocket.ordenacao,
+    filtros: [],
+    selos: [],
+    filtrosDescontoPrecoPor: []
+  });
+  return Object.assign({}, base, {
+    conteudo: Object.assign({}, conteudo, { produtos: listing.conteudo.produtos, detalhes }),
+    info: listing.info
+  });
+}
+
+/** Categoria na Rocket (id da categoria = o da Uappi; a Rocket inclui as subcategorias). */
+export async function rocketCategoryListing ({ $rocket, categoryId, query, limit, base, path }) {
+  const params = Object.assign(toRocketParams(query, limit), { categoryId });
+  const response = await $rocket.search(params);
+  return mergeIntoUappiPage(base, await withUappiProducts($rocket, response, query, { limit, path }));
+}
+
+/** Coleção do painel pelo slug. null quando a Rocket não tem essa coleção no ar. */
+export async function rocketCollectionListing ({ $rocket, slug, query, limit, base, path }) {
+  const params = toRocketParams(query, limit);
+  delete params.q;
+  if (!query.order) delete params.sort;
+  const response = await $rocket.collection(slug, params);
+  if (!response) return null;
+  const defaultSort = response.sortOptions && response.sortOptions[0] && response.sortOptions[0].id;
+  return mergeIntoUappiPage(base, await withUappiProducts($rocket, response, query, { limit, path, defaultSort }));
+}
+
+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(() => {});
+}
+
+// Clique dentro da lista do tema (card dele): casa o link clicado com o produto pela rota.
+// -1 quando o clique não foi num link de produto da lista.
+export function productIndexFromClick (event, products) {
+  const link = event && event.target && event.target.closest ? event.target.closest('a[href]') : null;
+  if (!link) return -1;
+  const path = new URL(link.href, window.location.href).pathname;
+  return (products || []).findIndex(p => productPath(p) === path);
+}
+
+// Query da busca pela sugestão. rs_src/rs_from fazem a API gravar `origin: did_you_mean` no evento.
+export function didYouMeanQuery (suggestion, from) {
+  return { busca: suggestion, rs_src: 'dym', rs_from: from || '' };
+}
+
+// source: 'autocomplete' | 'search-page' (mesmo contrato do SDK Linx 2.0.0).
+export function dispatchDidYouMeanClick ($rocket, { from, suggestion, source }) {
+  $rocket.dispatchEvent('suggestion_click', {
+    query: from || '',
+    meta: { kind: 'did_you_mean', query: from || '', suggestion, source }
+  }).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(() => {});
+}