@rocketsearch/vue-uappi 0.1.1 → 0.1.2

package/README.md

@@ -27,4 +27,7 @@ optimizeDeps: { exclude: ['@rocketsearch/vue-uappi'] }
 Use os componentes em PascalCase (`<RocketSearch>`, `<RocketShowcase position="top">`): o tema pode ter
 `isCustomElement` para tags com hífen.
 
+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="..."`.
+
 Documentação completa: https://api.rocketsearch.com.br/sdk/uappi/docs.html

package/index.js

@@ -109,6 +109,7 @@ export default {
     app.component('RocketBanner', defineAsyncComponent(() => import('./runtime/components/RocketBanner.vue')));
     app.component('RocketSearch', defineAsyncComponent(() => import('./runtime/components/RocketSearch.vue')));
     app.component('RocketShowcase', defineAsyncComponent(() => import('./runtime/components/RocketShowcase.vue')));
+    app.component('RocketLanding', defineAsyncComponent(() => import('./runtime/components/RocketLanding.vue')));
 
     // Conexão fria + preflight CORS era o grosso da latência do storefront, não a busca.
     const preconnect = document.createElement('link');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rocketsearch/vue-uappi",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "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/RocketLanding.vue

@@ -0,0 +1,57 @@
+<template>
+  <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="$slots.default" #default="scope">
+      <slot v-bind="scope" />
+    </template>
+    <template v-if="$slots.product" #product="scope">
+      <slot name="product" v-bind="scope" />
+    </template>
+  </RocketShowcase>
+</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). Sem elemento próprio: as vitrines entram
+// direto no container do tema e herdam o espaçamento dele.
+export default {
+  name: 'RocketLanding',
+  components: { RocketShowcase },
+  inheritAttrs: false,
+  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;
+      const path = (this.$route && this.$route.path) || location.pathname;
+      return path.split('/').filter(Boolean).pop() || '';
+    }
+  },
+  watch: {
+    key: 'load'
+  },
+  mounted () {
+    this.load();
+  },
+  methods: {
+    async load () {
+      this.showcases = this.key ? await this.$rocket.getPageShowcases('custom', this.key) : [];
+    }
+  }
+};
+</script>

package/runtime/components/RocketShowcase.vue

@@ -69,6 +69,10 @@ export default {
     position: { type: String, required: true },
     // Força o pageType; sem ele vem da página atual (currentPageData do tema).
     pageType: { type: String, default: '' },
+    // 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, a primeira da posição.
+    showcaseId: { type: [String, Number], default: null },
     mediaSize: { type: String, default: 'medium' }
   },
   data () {
@@ -117,8 +121,10 @@ 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 showcase = showcases.find(s => this.showcaseId != null
+          ? String(s.id) === String(this.showcaseId)
+          : ((s.placement && s.placement.position) || s.position) === this.position);
         if (!showcase) return;
         // Banner autônomo: render direto, sem produtos, skeleton nem impressão de vitrine
         // (o RocketBannerItem mede o criativo).

package/runtime/rocket.js

@@ -122,7 +122,7 @@ export function createRocket (config) {
 
   rocket.setPage = function (next) {
     page = Object.assign({ section: null, productId: null, categoryId: null, product: null }, next);
-    pageShowcases = null;
+    pageShowcases = {};
   };
   rocket.getPage = () => page;
 
@@ -294,13 +294,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();
@@ -317,11 +319,13 @@ 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. Zera no setPage.
+  let pageShowcases = {};
+  rocket.getPageShowcases = function (type, customKey) {
+    const key = (type || '') + '|' + (customKey || '');
+    if (!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 [].