@rocketsearch/nuxt-uappi 0.1.0

package/README.md

@@ -0,0 +1,16 @@
+# @rocketsearch/nuxt-uappi
+
+Rocket Search (busca, autocomplete, vitrines, banners e analytics) para lojas Uappi em Nuxt 2.
+
+```bash
+npm install @rocketsearch/nuxt-uappi
+```
+
+```js
+// nuxt.config.js
+modules: [
+  ['@rocketsearch/nuxt-uappi', { storeId: 'minha-loja', apiKey: 'pk_live_xxx', uappiDomain: 'loja.minhaloja.com.br' }]
+]
+```
+
+Documentação completa: https://api.rocketsearch.com.br/sdk/uappi/docs.html

package/module.js

@@ -0,0 +1,90 @@
+/**
+ * Módulo Nuxt 2 do Rocket Search para lojas Uappi (wap.store).
+ *
+ * Port do SDK Linx 2.0.0 (backend/public/sdk/linxecommerce/2.0.0). O que lá era
+ * snippet + leitura do DOM/browsingContext aqui é módulo + hooks do Nuxt.
+ *
+ * nuxt.config.js:
+ *   modules: [['@rocketsearch/nuxt-uappi', {
+ *     storeId: 'daikin',
+ *     apiKey: 'pk_live_xxx',
+ *     uappiDomain: 'homolog.loja.daikin.uappi.dev.br'
+ *   }]]
+ */
+const path = require('path');
+
+const DEFAULTS = {
+  storeId: '',
+  apiKey: '',
+  apiUrl: 'https://api.rocketsearch.com.br/api/v2',
+  // Domínio da API Uappi da loja. Trava contra snippet colado no repo errado: se não bater
+  // com o axios.baseURL do tema, o módulo não sobe (mesma ideia do data-platform-store-id
+  // da Nuvemshop — sem isso, a loja B serviria o catálogo da loja A em silêncio).
+  uappiDomain: '',
+  // Origin enviado nas chamadas feitas no SERVIDOR (banner loading="ssr"). Node não é
+  // navegador: sem Origin explícito a API pública responde "Domínio não autorizado".
+  siteOrigin: '',
+  searchPagePath: '/busca',
+  searchPageParam: 'busca',
+  debug: false
+};
+
+function hostOf (url) {
+  try {
+    return new URL(url).hostname.toLowerCase();
+  }
+  catch (e) {
+    return '';
+  }
+}
+
+module.exports = function rocketSearchUappi (moduleOptions) {
+  const options = Object.assign({}, DEFAULTS, this.options.rocketSearch, moduleOptions);
+  const tag = '[RocketSearch]';
+
+  if (!options.storeId || !options.apiKey) {
+    console.error(tag, 'storeId e apiKey são obrigatórios — módulo desativado.');
+    return;
+  }
+
+  const axiosHost = hostOf((this.options.axios || {}).baseURL);
+  if (options.uappiDomain && axiosHost && axiosHost !== options.uappiDomain.toLowerCase()) {
+    console.error(tag, `uappiDomain "${options.uappiDomain}" não bate com axios.baseURL "${axiosHost}" — módulo desativado.`);
+    return;
+  }
+
+  if (!options.siteOrigin) {
+    const domain = options.uappiDomain || axiosHost;
+    if (domain) options.siteOrigin = `https://${domain}`;
+  }
+  options.apiUrl = String(options.apiUrl).replace(/\/$/, '');
+
+  // addTemplate + push em vez de addPlugin: o addPlugin faz unshift, e o plugin rodaria
+  // antes do @nuxtjs/axios — sem $axios não há interceptor de add_to_cart.
+  const { dst } = this.addTemplate({
+    src: path.resolve(__dirname, 'runtime/plugin.js'),
+    fileName: 'rocket-search.js',
+    options: {
+      config: options,
+      runtimeDir: path.resolve(__dirname, 'runtime').replace(/\\/g, '/')
+    }
+  });
+  this.options.plugins.push(path.resolve(this.options.buildDir, dst));
+
+  this.nuxt.hook('components:dirs', (dirs) => {
+    // Só o 1º nível: os subcomponentes de search/ são internos (importados pelo RocketSearch).
+    dirs.push({ path: path.resolve(__dirname, 'runtime/components'), pattern: '*.vue' });
+  });
+
+  // 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);
+
+  // 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 || [];
+  this.options.head.link.push(
+    { rel: 'preconnect', href: new URL(options.apiUrl).origin, crossorigin: '' }
+  );
+};
+
+module.exports.meta = require('./package.json');

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@rocketsearch/nuxt-uappi",
+  "version": "0.1.0",
+  "description": "Rocket Search para storefronts Uappi (Nuxt 2): busca, autocomplete, vitrines, banners e eventos",
+  "main": "module.js",
+  "files": [
+    "module.js",
+    "runtime",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "nuxt": "^2.15.0",
+    "vue": "^2.7.0"
+  },
+  "license": "UNLICENSED",
+  "homepage": "https://api.rocketsearch.com.br/sdk/uappi/docs.html",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/runtime/banner.js

@@ -0,0 +1,168 @@
+/**
+ * Banners — port das partes puras de linxecommerce/2.0.0/src/js/rs-banner.js
+ * (URL de resize, proporção, estilos, contrato dos eventos). DOM/observer ficam
+ * no RocketBannerItem.vue.
+ *
+ * Contrato (alinhado às vitrines, incrementa showcases.metrics):
+ *   view  + meta.type = 'showcase_impression' + showcaseId
+ *   click + meta.type = 'banner_click' + showcaseId (sem productId)
+ */
+
+// Larguras do srcset — o BE guarda 1 master (até 3840px) e o CF gera as variantes.
+export const SRCSET_WIDTHS = [360, 480, 768, 1024, 1366, 1600, 1920, 2560];
+export const VIEW_MILESTONES = [0.25, 0.5, 0.75];
+export const MOBILE_MEDIA = '(max-width: 768px)';
+// Sem proporção conhecida, reserva 3:1 (hero típico) para não haver CLS.
+const DEFAULT_ASPECT_RATIO = '3 / 1';
+// Cada largura distinta é uma variante nova no cache da CF: arredonda num passo.
+const WIDTH_STEP = 100;
+const MAX_EXACT_WIDTH = 3840;
+
+export function clamp01 (n) {
+  if (typeof n !== 'number' || isNaN(n)) return undefined;
+  if (n < 0) return 0;
+  if (n > 1) return 1;
+  return Math.round(n * 10000) / 10000;
+}
+
+export function highestMilestone (ratio) {
+  let best = 0;
+  VIEW_MILESTONES.forEach((m) => {
+    if (ratio >= m) best = m;
+  });
+  return best;
+}
+
+/**
+ * Cloudflare Image Resizing na origem da própria imagem (o /cdn-cgi/image/ só existe
+ * na zona que a serve). ⚠️ Sem o recurso na zona, responde 404 e o banner some —
+ * por isso dá para desligar (prop imageResizing=false).
+ */
+export function cdnResize (url, width, enabled) {
+  if (!url || enabled === false) return url;
+  if (/\/cdn-cgi\/image\//.test(url) || /^data:/i.test(url)) return url;
+  try {
+    const abs = new URL(url);
+    if (abs.protocol !== 'https:' && abs.protocol !== 'http:') return url;
+    return abs.origin + '/cdn-cgi/image/width=' + width + ',format=auto,quality=82,fit=scale-down' + abs.pathname + abs.search;
+  }
+  catch (e) {
+    return url;
+  }
+}
+
+export function buildSrcset (url, enabled) {
+  if (!url || enabled === false) return '';
+  return SRCSET_WIDTHS.map(w => cdnResize(url, w, enabled) + ' ' + w + 'w').join(', ');
+}
+
+// Largura a pedir à CF: slot × DPR (teto 2), arredondada para cima no passo.
+export function exactWidth (cssWidth, dpr) {
+  if (!cssWidth) return 0;
+  const ratio = Math.min(Math.max(dpr || 1, 1), 2);
+  return Math.min(Math.ceil((cssWidth * ratio) / WIDTH_STEP) * WIDTH_STEP, MAX_EXACT_WIDTH);
+}
+
+// Aceita "16/9", "16:9" ou número. Sem valor, o placeholder anti-CLS.
+export function resolveAspectRatio (styles, fallback) {
+  const raw = styles && (styles.aspectRatio || styles.aspect_ratio);
+  if (raw == null || raw === '') return fallback || DEFAULT_ASPECT_RATIO;
+  return String(raw).trim().replace(':', ' / ') || fallback || DEFAULT_ASPECT_RATIO;
+}
+
+export function hasExplicitAspectRatio (styles, fallback) {
+  const raw = styles && (styles.aspectRatio || styles.aspect_ratio);
+  return (raw != null && raw !== '') || !!fallback;
+}
+
+// Só deixa passar chave CSS conhecida — o JSON de styles vem do dashboard.
+const ALLOWED_STYLE_KEYS = {
+  backgroundColor: 'backgroundColor',
+  textColor: 'color',
+  borderRadius: 'borderRadius',
+  objectFit: 'objectFit',
+  objectPosition: 'objectPosition',
+  minHeight: 'minHeight',
+  maxWidth: 'maxWidth',
+  padding: 'padding',
+  margin: 'margin'
+};
+
+export function pickStyles (styles, keys) {
+  const out = {};
+  if (!styles) return out;
+  keys.forEach((key) => {
+    const value = styles[key];
+    if (ALLOWED_STYLE_KEYS[key] && value != null && value !== '') out[ALLOWED_STYLE_KEYS[key]] = String(value);
+  });
+  return out;
+}
+
+export function isHeroSlot (position) {
+  return /^(hero|fullbanner|header|top)$/i.test(String(position || ''));
+}
+
+/** True para banner autônomo vindo de /showcases/context (type='banner', ou sem produtos + imagem). */
+export function isBannerItem (item) {
+  if (!item) return false;
+  if (item.type === 'banner') return true;
+  const hasProducts = Array.isArray(item.products) && item.products.length > 0;
+  const content = item.banner || {};
+  return !hasProducts && !!(content.imageUrl || content.mobileImageUrl);
+}
+
+/**
+ * Quem medir (contrato ROC-26):
+ * - autônomo → o próprio id (já é o showcaseId do banner);
+ * - embutido em vitrine → showcaseId da VITRINE + bannerId do criativo.
+ */
+export function bannerTracking (item, opts) {
+  const o = opts || {};
+  const embedded = item.type !== 'banner' && item.bannerId != null && item.bannerId !== '';
+  const ownId = item.bannerId != null && item.bannerId !== '' ? item.bannerId : item.id;
+  const tracking = {
+    id: embedded ? item.id : ownId,
+    slot: (item.placement && item.placement.position) || item.position || o.slot || '',
+    slideIndex: o.slideIndex
+  };
+  if (embedded) tracking.bannerId = item.bannerId;
+  if (item.experiment) {
+    tracking.experimentId = item.experiment.experimentId;
+    tracking.variantId = item.experiment.variantId;
+  }
+  return tracking;
+}
+
+function baseData (t, meta) {
+  const data = { vitrine: t.id, showcaseId: t.id, meta };
+  if (t.slot) meta.slot = String(t.slot);
+  if (t.imageVariant) meta.imageVariant = t.imageVariant;
+  if (t.bannerId != null) {
+    data.bannerId = t.bannerId;
+    meta.bannerId = t.bannerId;
+  }
+  if (t.slideIndex != null && t.slideIndex !== '') {
+    data.position = Number(t.slideIndex) || 0;
+    meta.slideIndex = data.position;
+  }
+  if (t.experimentId) data.experimentId = t.experimentId;
+  if (t.variantId) data.variantId = t.variantId;
+  return data;
+}
+
+export function bannerViewData (t, visibleRatio, milestone) {
+  const meta = { type: 'showcase_impression', source: 'showcase:' + t.id };
+  const vr = clamp01(visibleRatio);
+  if (vr) meta.visibleRatio = vr;
+  if (milestone > 0) meta.visibleThreshold = milestone;
+  return baseData(t, meta);
+}
+
+export function bannerClickData (t, clickX, clickY) {
+  const data = baseData(t, { source: 'showcase:' + t.id, type: 'banner_click' });
+  const cx = clamp01(clickX);
+  const cy = clamp01(clickY);
+  if (cx != null) data.clickX = data.meta.clickX = cx;
+  if (cy != null) data.clickY = data.meta.clickY = cy;
+  return data;
+}

package/runtime/components/RocketAutocomplete.vue

@@ -0,0 +1,279 @@
+<template>
+  <div
+    class="rocket-search rocket-search--autocomplete"
+    :data-button-type-mode="searchButtonType"
+    data-search-mode="autocomplete"
+  >
+    <div class="rocket-search__content">
+      <form class="rocket-search__form" @submit.prevent="handleSubmit">
+        <input
+          ref="inputSearch"
+          v-model="term"
+          :name="searchPageParam"
+          autocomplete="off"
+          type="text"
+          :placeholder="inputPlaceholder"
+          aria-label="Buscar produtos"
+          class="rocket-search__form__input"
+          @keyup="handleKeyup"
+          @focus="openAutocomplete"
+        >
+        <button type="submit" class="rocket-search__form__button" aria-label="Buscar produtos">
+          <span v-if="searchButtonType === 'text'" class="rocket-search__form__button-text" v-text="searchButtonText" />
+          <svg v-else xmlns="http://www.w3.org/2000/svg" width="20.35" height="20.35">
+            <path
+              d="M14.355 15.383a8.727 8.727 0 111.028-1.028l4.759 4.758a.728.728 0 11-1.029 1.029zm0-2.06a7.271 7.271 0 10-1.032 1.027 7.536 7.536 0 001.027-1.027z"
+              fill="#29282e"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </button>
+      </form>
+
+      <div class="rocket-search__autocomplete-panel" :class="{ opened: suggestionTermsVisible || isOpened }">
+        <div v-if="suggestionTerms.length > 0 && term === ''" class="rocket-search__autocomplete-section">
+          <strong class="rocket-search__terms-suggestions__title" v-text="suggestionsTitle" />
+          <ul class="rocket-search__autocomplete-terms">
+            <li v-for="(t, index) in suggestionTerms" :key="'term-' + index">
+              <a :href="searchUrl(t)" @click="handleClickTerm(t, $event)">
+                <i><span v-text="index + 1" />º</i>
+                <span v-text="t" />
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <div v-if="autocompleteProducts.length > 0" class="rocket-search__autocomplete-section">
+          <strong class="rocket-search__terms-suggestions__title" v-text="productsTitle" />
+          <ul class="rocket-search__autocomplete-products">
+            <li
+              v-for="(product, index) in autocompleteProducts"
+              :key="'product-' + product.id"
+              :data-product-id="product.id"
+            >
+              <a :href="productPath(product)" @click="handleClickProduct(product, index, $event)">
+                <span class="rocket-search__autocomplete-thumb">
+                  <img v-if="productImage(product)" :src="productImage(product)" :alt="product.nome" loading="lazy">
+                  <span v-else class="rocket-search__autocomplete-thumb-placeholder" />
+                </span>
+                <span class="rocket-search__autocomplete-info">
+                  <strong
+                    v-if="product.marca && product.marca.nome"
+                    class="rocket-search__autocomplete-brand"
+                    v-text="product.marca.nome"
+                  />
+                  <span class="rocket-search__autocomplete-name" v-text="product.nome" />
+                  <span
+                    v-if="productPrice(product) !== null"
+                    class="rocket-search__autocomplete-price"
+                    v-text="formatCurrency(productPrice(product))"
+                  />
+                </span>
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <div
+          v-if="term.length >= minChars && suggestionTerms.length === 0 && autocompleteProducts.length === 0 && !isLoading"
+          class="rocket-search__autocomplete-empty"
+        >
+          Nenhum resultado encontrado.
+        </div>
+      </div>
+
+      <div
+        v-show="suggestionTermsVisible || isOpened"
+        class="rocket-search__autocomplete-overlay"
+        @mousedown.prevent="closeSearch"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { fetchUappiProducts, productImage, productPath, productPrice, formatCurrency } from '../uappi.js';
+
+// Limite opcional: null = exibe tudo que o backend mandou (quem manda é o maxSuggestions
+// do admin). Só um valor explícito na prop volta a cortar.
+function limitList (list, limit) {
+  const arr = list || [];
+  return limit === null || limit === undefined || limit === '' ? arr : arr.slice(0, Number(limit));
+}
+
+function normalizeTerm (item) {
+  if (item && typeof item === 'object') return String(item.term || item.label || item.value || '');
+  return String(item || '');
+}
+
+export default {
+  name: 'RocketAutocomplete',
+  props: {
+    minChars: { type: Number, default: 2 },
+    productsLimit: { type: Number, default: null },
+    termsLimit: { type: Number, default: null },
+    mediaSize: { type: String, default: 'small' },
+    inputPlaceholder: { type: String, default: 'O que você procura?' },
+    searchButtonType: { type: String, default: 'icon' },
+    searchButtonText: { type: String, default: 'Buscar' },
+    suggestionsTitle: { type: String, default: 'Termos mais buscados:' },
+    productsTitle: { type: String, default: 'Produtos' }
+  },
+  data () {
+    return {
+      term: '',
+      isOpened: false,
+      isLoading: false,
+      suggestionTerms: [],
+      suggestionTermsVisible: false,
+      autocompleteProducts: []
+    };
+  },
+  computed: {
+    searchPagePath () {
+      return this.$rocket.config.searchPagePath;
+    },
+    searchPageParam () {
+      return this.$rocket.config.searchPageParam;
+    }
+  },
+  watch: {
+    term () {
+      if (!this.term) {
+        this.autocompleteProducts = [];
+        this.isOpened = false;
+      }
+    }
+  },
+  mounted () {
+    this.onDocumentClick = (event) => {
+      if (!this.$el.contains(event.target)) {
+        this.suggestionTermsVisible = false;
+        this.isOpened = false;
+      }
+    };
+    this.onKeyup = (event) => {
+      if (event.code === 'Escape') this.closeSearch();
+    };
+    document.addEventListener('click', this.onDocumentClick);
+    document.addEventListener('keyup', this.onKeyup);
+  },
+  beforeDestroy () {
+    clearTimeout(this.timeout);
+    document.removeEventListener('click', this.onDocumentClick);
+    document.removeEventListener('keyup', this.onKeyup);
+  },
+  methods: {
+    productImage (product) {
+      return productImage(product, this.mediaSize);
+    },
+    productPath,
+    productPrice,
+    formatCurrency,
+    searchUrl (term) {
+      return this.$router.resolve({ path: this.searchPagePath, query: { [this.searchPageParam]: term || '' } }).href;
+    },
+    goToSearch (term) {
+      this.closeSearch();
+      this.$router.push({ path: this.searchPagePath, query: { [this.searchPageParam]: term || '' } });
+    },
+    openAutocomplete () {
+      if (this.term && this.term.length >= this.minChars) {
+        this.fetchResult();
+        return;
+      }
+      this.fetchTerms();
+    },
+    handleKeyup (event) {
+      // Enter é tratado pelo submit do form.
+      if (event && event.key === 'Enter') return;
+      clearTimeout(this.timeout);
+      if (this.term.length < this.minChars) {
+        this.isOpened = false;
+        this.autocompleteProducts = [];
+        this.fetchTerms();
+        return;
+      }
+      this.timeout = setTimeout(() => this.fetchResult(), 250);
+    },
+    // Submit (botão ou Enter) é submissão explícita: mesmo com o campo vazio vai para a
+    // página de busca, que lista o catálogo. O dropdown abre pelo foco.
+    handleSubmit () {
+      this.goToSearch(this.term);
+    },
+    closeSearch () {
+      this.isOpened = false;
+      this.suggestionTermsVisible = false;
+      if (this.$refs.inputSearch) this.$refs.inputSearch.blur();
+    },
+    async fetchTerms () {
+      try {
+        const response = await this.$rocket.autocomplete('');
+        this.suggestionTerms = limitList((response.terms || []).map(normalizeTerm), this.termsLimit);
+      }
+      catch (e) {
+        this.suggestionTerms = [];
+      }
+      this.autocompleteProducts = [];
+      this.suggestionTermsVisible = this.suggestionTerms.length > 0;
+      this.isOpened = false;
+      this.isLoading = false;
+    },
+    async fetchResult () {
+      if (!this.term || this.term.length < this.minChars) {
+        this.autocompleteProducts = [];
+        this.isOpened = false;
+        this.suggestionTermsVisible = this.suggestionTerms.length > 0;
+        return;
+      }
+
+      this.isLoading = true;
+      const searchedTerm = this.term;
+      try {
+        const response = await this.$rocket.autocomplete(searchedTerm);
+        // Digitou de novo enquanto a resposta vinha: descarta a resposta velha.
+        if (searchedTerm !== this.term) return;
+        this.suggestionTerms = limitList((response.terms || []).map(normalizeTerm), this.termsLimit);
+        const ids = limitList(response.products || [], this.productsLimit).map(p => p && p.id);
+        const products = await fetchUappiProducts(this.$axios, ids);
+        if (searchedTerm !== this.term) return;
+        this.autocompleteProducts = products;
+      }
+      catch (e) {
+        if (searchedTerm !== this.term) return;
+        this.suggestionTerms = [];
+        this.autocompleteProducts = [];
+      }
+      finally {
+        if (searchedTerm === this.term) this.isLoading = false;
+      }
+      this.suggestionTermsVisible = false;
+      this.isOpened = true;
+    },
+    handleClickTerm (term, event) {
+      // Ctrl/cmd/meio: o browser abre pelo href em nova aba. Não mexe no painel.
+      if (this.$rocket.isModifiedClick(event)) return;
+      if (event && event.preventDefault) event.preventDefault();
+      this.term = term;
+      this.goToSearch(term);
+    },
+    handleClickProduct (product, index, event) {
+      const href = productPath(product);
+      const send = () => this.$rocket.dispatchEvent('click', {
+        productId: String(product.id),
+        position: index,
+        meta: { source: 'autocomplete', query: this.term || '' }
+      });
+      const el = event && event.currentTarget;
+      const took = this.$rocket.trackThenNavigate(event, el, href, send, (path) => {
+        this.closeSearch();
+        this.$router.push(path);
+      });
+      if (!took && !this.$rocket.isModifiedClick(event, el)) this.closeSearch();
+    }
+  }
+};
+</script>
+
+<style src="../css/common.css"></style>
+<style src="../css/autocomplete.css"></style>