@rocketsearch/nuxt-uappi 0.2.4 → 0.2.6

package/README.md

@@ -13,4 +13,8 @@ modules: [
 ]
 ```
 
+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/nuxt-uappi",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Rocket Search para storefronts Uappi (Nuxt 2): busca, autocomplete, vitrines, banners e eventos",
   "main": "module.js",
   "files": [

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" />
@@ -26,12 +26,14 @@
 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: '' },
     // ssr: vem no HTML (hero/LCP). ondemand: busca só quando o slot chega perto da viewport.
     loading: {
       type: String,
@@ -40,6 +42,9 @@ export default {
     },
     // Força o pageType; sem ele vem da página atual (dadosPageAtual 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: '' },
@@ -65,11 +70,22 @@ export default {
     return this.loading === 'ssr';
   },
   computed: {
+    landingKey () {
+      if (this.pageType !== 'custom') return '';
+      if (this.customKey) return this.customKey;
+      return ((this.$route && this.$route.path) || '').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 por setDadosPageAtual (o plugin traduz para $rocket.setPage).
     '$store.state.dadosPageAtual' () {
       if (this.loading === 'ssr' || this.visible) this.tryLoad();
@@ -101,16 +117,23 @@ export default {
       if (process.client && 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/components/RocketLanding.vue

@@ -0,0 +1,60 @@
+<template>
+  <!-- Vue 2 exige um elemento raiz: display: contents faz as vitrines herdarem o espaçamento do container do tema. -->
+  <div v-if="showcases.length" class="rocket-search-landing" style="display: contents">
+    <RocketShowcase
+      v-for="showcase in showcases"
+      :key="showcase.id"
+      page-type="custom"
+      :custom-key="key"
+      :showcase-id="showcase.id"
+      :position="(showcase.placement && showcase.placement.position) || 'middle'"
+      :media-size="mediaSize"
+    >
+      <template v-if="$scopedSlots.default" #default="scope">
+        <slot v-bind="scope" />
+      </template>
+      <template v-if="$scopedSlots.product" #product="scope">
+        <slot name="product" v-bind="scope" />
+      </template>
+    </RocketShowcase>
+  </div>
+</template>
+
+<script>
+import RocketShowcase from './RocketShowcase.vue';
+
+// Landing page ("Personalizado" no painel): todas as vitrines da landing, empilhadas pela ordem
+// do painel (a API já responde por display_order).
+export default {
+  name: 'RocketLanding',
+  components: { RocketShowcase },
+  props: {
+    // Identificador da landing no painel; sem ele, o nome da rota (/black-friday -> black-friday).
+    customKey: { type: String, default: '' },
+    mediaSize: { type: String, default: 'medium' }
+  },
+  data () {
+    return { showcases: [] };
+  },
+  computed: {
+    key () {
+      if (this.customKey) return this.customKey;
+      return ((this.$route && this.$route.path) || '').split('/').filter(Boolean).pop() || '';
+    }
+  },
+  watch: {
+    key: 'load'
+  },
+  mounted () {
+    this.load();
+  },
+  methods: {
+    async load () {
+      const key = this.key;
+      const showcases = key ? await this.$rocket.getPageShowcases('custom', key, true) : [];
+      // Troca rápida de rota: a resposta da landing anterior não sobrescreve a atual.
+      if (key === this.key) this.showcases = showcases;
+    }
+  }
+};
+</script>

package/runtime/components/RocketShowcase.vue

@@ -1,8 +1,8 @@
 <template>
   <div
-    v-if="showcase || loading || debug"
-    :class="['rocket-search', { 'rocket-search--empty': !showcase && !loading }]"
-    :data-rocket-showcase-position="position"
+    v-if="showcase || loading || debug || restIds.length"
+    :class="['rocket-search', { 'rocket-search--empty': !showcase && !loading && !restIds.length, 'rocket-search--stacked': stacked }]"
+    :data-rocket-showcase-position="stacked ? null : 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" />
@@ -47,6 +47,26 @@
         <button type="button" class="rocket-search__swiper-button-next" aria-label="Próximos" @click="slide(1)" />
       </slot>
     </section>
+
+    <!-- Demais vitrines da mesma posição, na ordem da API: cada uma medida por conta própria. -->
+    <RocketShowcase
+      v-for="id in restIds"
+      :key="id"
+      :position="position"
+      :page-type="pageType"
+      :custom-key="customKey"
+      :showcase-id="id"
+      :media-size="mediaSize"
+      stacked
+      @products-loaded="$emit('products-loaded', $event)"
+    >
+      <template v-if="$scopedSlots.default" #default="scope">
+        <slot v-bind="scope" />
+      </template>
+      <template v-if="$scopedSlots.product" #product="scope">
+        <slot name="product" v-bind="scope" />
+      </template>
+    </RocketShowcase>
   </div>
 </template>
 
@@ -63,10 +83,17 @@ export default {
     position: { type: String, required: true },
     // Força o pageType; sem ele vem da página atual (dadosPageAtual do tema).
     pageType: { type: String, default: '' },
-    mediaSize: { type: String, default: 'medium' }
+    // Landing (page-type="custom"): identificador cadastrado no painel em "Personalizado".
+    customKey: { type: String, default: '' },
+    // Vitrine específica (a landing tem várias na mesma posição); sem ele, todas as da posição.
+    showcaseId: { type: [String, Number], default: null },
+    mediaSize: { type: String, default: 'medium' },
+    // Uso interno: vitrine empilhada abaixo da primeira da posição. Sem o atributo de posição,
+    // o debug contorna a posição uma vez só.
+    stacked: { type: Boolean, default: false }
   },
   data () {
-    return { showcase: null, products: [], loading: false, debug: false };
+    return { showcase: null, products: [], restIds: [], loading: false, debug: false };
   },
   computed: {
     columns () {
@@ -112,9 +139,14 @@ export default {
       if (this.started) return;
       this.started = true;
       try {
-        const showcases = await this.$rocket.getPageShowcases(this.pageType || undefined);
-        const showcase = showcases.find(s => ((s.placement && s.placement.position) || s.position) === this.position);
+        const showcases = await this.$rocket.getPageShowcases(this.pageType || undefined, this.customKey || undefined);
+        const inPosition = showcases.filter(s => ((s.placement && s.placement.position) || s.position) === this.position);
+        const showcase = this.showcaseId != null
+          ? showcases.find(s => String(s.id) === String(this.showcaseId))
+          : inPosition[0];
         if (!showcase) return;
+        // Posição sem showcaseId: este slot mostra a primeira e empilha as demais logo abaixo.
+        if (this.showcaseId == null) this.restIds = inPosition.slice(1).map(s => s.id);
         // Banner autônomo: render direto, sem produtos, skeleton nem impressão de vitrine
         // (o RocketBannerItem mede o criativo).
         if (isBannerItem(showcase)) {

package/runtime/css/showcase.css

@@ -6,6 +6,11 @@
   margin-bottom: 60px;
 }
 
+/* Segunda vitrine em diante na mesma posição: o mesmo respiro entre elas. */
+.rocket-search--stacked {
+  margin-top: 60px;
+}
+
 .rocket-search__showcase {
   --showcase-gap: 16px;
   position: relative;

package/runtime/rocket.js

@@ -123,7 +123,10 @@ export function createRocket (config) {
 
   rocket.setPage = function (next) {
     page = Object.assign({ section: null, productId: null, categoryId: null, product: null }, next);
-    pageShowcases = null;
+    // A landing (custom) não depende do contexto da página e fica: senão, um setPage entre a busca
+    // do RocketLanding e a montagem das vitrines dele dispararia uma segunda chamada. Ela se
+    // renova quando o RocketLanding monta (refresh).
+    Object.keys(pageShowcases).forEach((k) => { if (k.indexOf('custom|') !== 0) delete pageShowcases[k]; });
   };
   rocket.getPage = () => page;
 
@@ -282,13 +285,15 @@ export function createRocket (config) {
     return res.json();
   };
 
-  rocket.getShowcasesByContext = async function (type) {
+  // customKey: identificador da landing (pageType=custom); sem ele a API responde 400.
+  rocket.getShowcasesByContext = async function (type, customKey) {
     const pageType = resolvePageType(type);
     if (!pageType) return [];
     const sessionId = await getSessionIdWithTimeout();
     const params = { storeId: config.storeId, pageType, page: pageType, sessionId };
     if (pageType === 'product' && page.productId) params.productId = page.productId;
     if (pageType === 'category' && page.categoryId) params.categoryId = page.categoryId;
+    if (pageType === 'custom') params.customKey = customKey;
 
     const res = await fetch(config.apiUrl + '/showcases/context?' + query(params), { headers: headers() });
     const showcases = await res.json();
@@ -305,14 +310,17 @@ export function createRocket (config) {
   };
 
   // Uma chamada por página, repartida entre os slots (<RocketShowcase position>) — na Linx
-  // era o fetchShowCases único distribuindo por data-rocket-showcase-position. Zera no setPage.
-  let pageShowcases = null;
-  rocket.getPageShowcases = function (type) {
-    if (!pageShowcases) pageShowcases = rocket.getShowcasesByContext(type).catch(() => []);
-    return pageShowcases;
+  // era o fetchShowCases único distribuindo por data-rocket-showcase-position. Por pageType +
+  // customKey: a landing e o contexto da página são chamadas distintas. O setPage zera só o contexto.
+  let pageShowcases = {};
+  rocket.getPageShowcases = function (type, customKey, refresh) {
+    const key = (type || '') + '|' + (customKey || '');
+    if (refresh || !pageShowcases[key]) pageShowcases[key] = rocket.getShowcasesByContext(type, customKey).catch(() => []);
+    return pageShowcases[key];
   };
 
   // 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 [];
@@ -320,6 +328,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();