@rocketsearch/vue-uappi 0.1.3 → 0.1.4

package/README.md

@@ -29,5 +29,6 @@ Use os componentes em PascalCase (`<RocketSearch>`, `<RocketShowcase position="t
 
 Landing page ("Personalizado" no painel): `<RocketLanding>` mostra todas as vitrines da landing, na ordem do
 painel. O identificador vem do nome da rota (`/black-friday` → `black-friday`) ou de `custom-key="..."`.
+Banners da landing: `<RocketBanner page-type="custom" />`, com a mesma regra do identificador.
 
 Documentação completa: https://api.rocketsearch.com.br/sdk/uappi/docs.html

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocketsearch/vue-uappi",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Rocket Search para storefronts Uappi em Vue 3 + Vite + Pinia: busca, autocomplete, vitrines, banners e eventos",
   "type": "module",
   "main": "index.js",

package/runtime/components/RocketBanner.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     :class="['rocket-search', 'rocket-search__banner-slot', { 'rocket-search--empty': !waiting && !banners.length }]"
-    :data-rocket-banner-position="position"
+    :data-rocket-banner-position="position || undefined"
   >
     <!-- Skeleton só com proporção declarada: sem saber a altura, ele é que causaria o pulo. -->
     <div v-if="waiting && ratio" class="rocket-search__banner-skeleton" :style="{ aspectRatio: ratioCss }" aria-hidden="true" />
@@ -30,12 +30,14 @@ import '../css/banner.css';
 import RocketBannerItem from './banner/RocketBannerItem.vue';
 import { exactWidth, isHeroSlot } from '../banner.js';
 
+const positionOf = b => (b && ((b.placement && b.placement.position) || b.position)) || '';
+
 export default {
   name: 'RocketBanner',
   components: { RocketBannerItem },
   props: {
-    // placement.position cadastrada no painel (hero, top, middle...).
-    position: { type: String, required: true },
+    // placement.position cadastrada no painel (hero, top, middle...). Obrigatória fora da landing.
+    position: { type: String, default: '' },
     // eager: busca assim que a página tem contexto (hero/LCP). ondemand: só quando o slot
     // chega perto da viewport.
     loading: {
@@ -45,6 +47,9 @@ export default {
     },
     // Força o pageType; sem ele vem da página atual (currentPageData do tema).
     pageType: { type: String, default: '' },
+    // Landing (page-type="custom"): identificador no painel; sem ele, o nome da rota
+    // (/black-friday -> black-friday). A landing não tem posição: vêm todos os banners dela.
+    customKey: { type: String, default: '' },
     limit: { type: Number, default: 0 },
     // Proporção do slot ("16/9", "3:1") — reserva a caixa e liga o skeleton.
     ratio: { type: String, default: '' },
@@ -63,11 +68,22 @@ export default {
     };
   },
   computed: {
+    landingKey () {
+      if (this.pageType !== 'custom') return '';
+      if (this.customKey) return this.customKey;
+      return ((this.$route && this.$route.path) || location.pathname).split('/').filter(Boolean).pop() || '';
+    },
     ratioCss () {
       return String(this.ratio).trim().replace(':', ' / ');
     }
   },
   watch: {
+    // Mesma página, outra landing (rota dinâmica reaproveita o componente): busca de novo.
+    landingKey () {
+      if (!this.requested) return;
+      this.requested = false;
+      this.tryLoad();
+    },
     // O contexto da página chega pelo currentPageData do tema (o plugin traduz para $rocket.setPage).
     '$rocket.currentPage.value' () {
       if (this.loading === 'eager' || this.visible) this.tryLoad();
@@ -99,16 +115,23 @@ export default {
       if (this.$el && this.$el.clientWidth) {
         this.width = exactWidth(this.$el.clientWidth, window.devicePixelRatio);
       }
-      const list = await this.$rocket.getBannersByContext(this.pageType || undefined, { position: this.position });
-      const mine = list.filter(b => ((b.placement && b.placement.position) || b.position) === this.position);
+      const key = this.landingKey;
+      const list = this.pageType === 'custom'
+        ? (key ? await this.$rocket.getBannersByContext('custom', { customKey: key }) : [])
+        : await this.$rocket.getBannersByContext(this.pageType || undefined, { position: this.position });
+      // Troca rápida de landing: a resposta da anterior não sobrescreve a atual.
+      if (key !== this.landingKey) return;
+      const mine = this.pageType === 'custom' ? list : list.filter(b => positionOf(b) === this.position);
       this.banners = this.limit > 0 ? mine.slice(0, this.limit) : mine;
       this.waiting = false;
     },
 
     itemProps (index) {
-      const hero = isHeroSlot(this.position) && index === 0;
+      // Na landing o slot é a posição do próprio banner.
+      const position = this.position || positionOf(this.banners[index]);
+      const hero = isHeroSlot(position) && index === 0;
       return {
-        position: this.position,
+        position,
         slideIndex: index,
         loading: hero ? 'eager' : 'lazy',
         fetchPriority: hero ? 'high' : '',

package/runtime/rocket.js

@@ -332,6 +332,7 @@ export function createRocket (config) {
   };
 
   // Só banners (DTO banner-native). Gated pela flag `banners`: loja sem ela recebe [].
+  // options.customKey: identificador da landing (pageType=custom); sem ele a API responde 400.
   rocket.getBannersByContext = async function (type, options) {
     const pageType = resolvePageType(type);
     if (!pageType) return [];
@@ -339,6 +340,7 @@ export function createRocket (config) {
     try {
       const sessionId = await getSessionIdWithTimeout();
       const params = { storeId: config.storeId, pageType, sessionId, position: opts.position };
+      if (pageType === 'custom') params.customKey = opts.customKey;
       const res = await fetch(config.apiUrl + '/banners/context?' + query(params), { headers: headers() });
       if (!res.ok) return [];
       const banners = await res.json();