@lightspeed/crane 3.2.1 → 3.4.0

package/template/layouts/category/example-category/settings/translations.ts

@@ -0,0 +1,285 @@
+import { translation } from '@lightspeed/crane-api';
+
+export default translation.init({
+  en: {
+    '$label.accordion.catalog_page_settings': 'Catalog page settings',
+    '$label.accordion.product_card_settings': 'Product card settings',
+    '$label.accordion.categories_settings': 'Categories settings',
+
+    '$label.show': 'Show',
+    '$label.do_not_show': 'Do not show',
+    '$label.show_on_mouse_hover': 'Show on mouse hover',
+
+    '$label.category_view.label': 'Category view',
+    '$label.category_view.description': 'Display products from root categories on respective category pages only. '
+      + 'This option fits catalogs with a large number of products.',
+    '$label.category_view.expanded': 'Expanded categories',
+    '$label.category_view.collapsed': 'Collapsed categories',
+
+    '$label.product_filter_placement.label': 'Product filter placement',
+    '$label.product_filter_placement.category_pages': 'On category pages',
+    '$label.product_filter_placement.all_pages': 'On catalog and category pages',
+
+    '$label.filter_panel_orientation.label': 'Filter panel orientation',
+    '$label.filter_panel_orientation.vertical': 'Vertical',
+    '$label.filter_panel_orientation.horizontal': 'Horizontal',
+
+    '$label.filter_priority.label': 'Filter priority',
+    '$label.filter_priority.description': 'Up to 4 filters can be displayed horizontally. The rest are grouped '
+      + 'under \u201COther filters\u201D. To show a certain filter horizontally, place it among the top 4 '
+      + 'in filter sorting in the control panel.',
+    '$label.filter_priority.button': 'Sort product filters',
+
+    '$label.side_to_show_filters.label': 'Side to show filters',
+    '$label.side_to_show_filters.right': 'Right',
+    '$label.side_to_show_filters.left': 'Left',
+
+    '$label.expand_filter_panel.label': 'Expand filter panel',
+    '$label.show_sort_by_options.label': 'Show "Sort by" options',
+    '$label.show_bottom_navigation_menu.label': 'Show bottom navigation menu',
+    '$label.show_signin_link.label': 'Show "Sign In" link',
+
+    '$label.card_grid_spacing.label': 'Card grid spacing',
+    '$label.card_grid_spacing.description': 'Applies to both product and category cards.',
+    '$label.card_grid_spacing.none': 'None',
+    '$label.card_grid_spacing.narrow': 'Narrow',
+    '$label.card_grid_spacing.medium': 'Medium',
+    '$label.card_grid_spacing.wide': 'Wide',
+
+    '$label.content_alignment.label': 'Content alignment',
+    '$label.content_alignment.left': 'Left',
+    '$label.content_alignment.center': 'Center',
+    '$label.content_alignment.right': 'Right',
+    '$label.content_alignment.justify': 'Justify',
+
+    '$label.image_proportions.label': 'Image proportions',
+    '$label.image_proportions.portrait_2_3': 'Portrait (2:3)',
+    '$label.image_proportions.portrait_3_4': 'Portrait (3:4)',
+    '$label.image_proportions.square_1_1': 'Square (1:1)',
+    '$label.image_proportions.landscape_4_3': 'Landscape (4:3)',
+    '$label.image_proportions.landscape_2_3': 'Landscape (2:3)',
+
+    '$label.card_size.label': 'Card size',
+    '$label.card_size.small': 'Small',
+    '$label.card_size.medium': 'Medium',
+    '$label.card_size.large': 'Large',
+
+    '$label.product_name.label': 'Product name',
+    '$label.product_subtitle.label': 'Product subtitle',
+    '$label.price.label': 'Price',
+
+    '$label.color_swatches.label': 'Color swatches',
+    '$label.color_swatches.description': 'You can set up the appearance of color swatches in Product Details.',
+
+    '$label.sku.label': 'SKU',
+    '$label.buy_now_button.label': '"Buy now" button',
+    '$label.product_rating.label': 'Product rating',
+
+    '$label.rating_view.label': 'Rating view',
+    '$label.rating_view.five_stars': 'Five stars view',
+    '$label.rating_view.one_star': 'One star view',
+
+    '$label.show_average_product_rating.label': 'Show average product rating',
+    '$label.show_total_number_of_reviews.label': 'Show total number of reviews',
+    '$label.show_product_card_frame.label': 'Show product card frame',
+    '$label.show_main_product_image.label': 'Show main product image',
+    '$label.show_additional_image_on_hover.label': 'Show additional image on hover',
+
+    '$label.divider': '',
+
+    '$label.name_position.label': 'Name position',
+    '$label.name_position.on_the_image': 'On the image',
+    '$label.name_position.below_the_image': 'Below the image',
+    '$label.name_position.on_mouse_hover': 'On mouse hover',
+    '$label.name_position.hide_category_names': 'Hide category names',
+    '$label.name_position.hide_category_images': 'Hide category images',
+  },
+
+  nl: {
+    '$label.accordion.catalog_page_settings': 'Cataloguspagina-instellingen',
+    '$label.accordion.product_card_settings': 'Productkaart-instellingen',
+    '$label.accordion.categories_settings': 'Categorie-instellingen',
+
+    '$label.show': 'Tonen',
+    '$label.do_not_show': 'Niet tonen',
+    '$label.show_on_mouse_hover': 'Tonen bij muisaanwijzer',
+
+    '$label.category_view.label': 'Categorieweergave',
+    '$label.category_view.description': 'Toon producten uit hoofdcategorieën alleen op de bijbehorende categoriepagina\'s. '
+      + 'Deze optie past bij catalogi met een groot aantal producten.',
+    '$label.category_view.expanded': 'Uitgevouwen categorieën',
+    '$label.category_view.collapsed': 'Samengevouwen categorieën',
+
+    '$label.product_filter_placement.label': 'Plaatsing productfilter',
+    '$label.product_filter_placement.category_pages': 'Op categoriepagina\'s',
+    '$label.product_filter_placement.all_pages': 'Op catalogus- en categoriepagina\'s',
+
+    '$label.filter_panel_orientation.label': 'Oriëntatie filterpaneel',
+    '$label.filter_panel_orientation.vertical': 'Verticaal',
+    '$label.filter_panel_orientation.horizontal': 'Horizontaal',
+
+    '$label.filter_priority.label': 'Filterprioriteit',
+    '$label.filter_priority.description': 'Er kunnen maximaal 4 filters horizontaal worden weergegeven. De rest wordt '
+      + 'gegroepeerd onder \u201CAndere filters\u201D. Om een bepaald filter horizontaal weer te geven, '
+      + 'plaatst u het bij de top 4 in de filtersortering in het configuratiescherm.',
+    '$label.filter_priority.button': 'Productfilters sorteren',
+
+    '$label.side_to_show_filters.label': 'Zijde om filters te tonen',
+    '$label.side_to_show_filters.right': 'Rechts',
+    '$label.side_to_show_filters.left': 'Links',
+
+    '$label.expand_filter_panel.label': 'Filterpaneel uitvouwen',
+    '$label.show_sort_by_options.label': 'Opties "Sorteren op" tonen',
+    '$label.show_bottom_navigation_menu.label': 'Onderste navigatiemenu tonen',
+    '$label.show_signin_link.label': 'Link "Aanmelden" tonen',
+
+    '$label.card_grid_spacing.label': 'Rasterafstand kaarten',
+    '$label.card_grid_spacing.description': 'Geldt voor zowel product- als categoriekaarten.',
+    '$label.card_grid_spacing.none': 'Geen',
+    '$label.card_grid_spacing.narrow': 'Smal',
+    '$label.card_grid_spacing.medium': 'Gemiddeld',
+    '$label.card_grid_spacing.wide': 'Breed',
+
+    '$label.content_alignment.label': 'Uitlijning inhoud',
+    '$label.content_alignment.left': 'Links',
+    '$label.content_alignment.center': 'Gecentreerd',
+    '$label.content_alignment.right': 'Rechts',
+    '$label.content_alignment.justify': 'Uitvullen',
+
+    '$label.image_proportions.label': 'Beeldverhoudingen',
+    '$label.image_proportions.portrait_2_3': 'Portret (2:3)',
+    '$label.image_proportions.portrait_3_4': 'Portret (3:4)',
+    '$label.image_proportions.square_1_1': 'Vierkant (1:1)',
+    '$label.image_proportions.landscape_4_3': 'Landschap (4:3)',
+    '$label.image_proportions.landscape_2_3': 'Landschap (2:3)',
+
+    '$label.card_size.label': 'Kaartgrootte',
+    '$label.card_size.small': 'Klein',
+    '$label.card_size.medium': 'Gemiddeld',
+    '$label.card_size.large': 'Groot',
+
+    '$label.product_name.label': 'Productnaam',
+    '$label.product_subtitle.label': 'Productondertitel',
+    '$label.price.label': 'Prijs',
+
+    '$label.color_swatches.label': 'Kleurstalen',
+    '$label.color_swatches.description': 'U kunt het uiterlijk van kleurstalen instellen in Productdetails.',
+
+    '$label.sku.label': 'SKU',
+    '$label.buy_now_button.label': 'Knop "Nu kopen"',
+    '$label.product_rating.label': 'Productbeoordeling',
+
+    '$label.rating_view.label': 'Beoordelingsweergave',
+    '$label.rating_view.five_stars': 'Vijf sterren weergave',
+    '$label.rating_view.one_star': 'Eén ster weergave',
+
+    '$label.show_average_product_rating.label': 'Gemiddelde productbeoordeling tonen',
+    '$label.show_total_number_of_reviews.label': 'Totaal aantal beoordelingen tonen',
+    '$label.show_product_card_frame.label': 'Productkaart kader tonen',
+    '$label.show_main_product_image.label': 'Hoofdproductafbeelding tonen',
+    '$label.show_additional_image_on_hover.label': 'Extra afbeelding tonen bij muisaanwijzer',
+
+    '$label.divider': '',
+
+    '$label.name_position.label': 'Naampositie',
+    '$label.name_position.on_the_image': 'Op de afbeelding',
+    '$label.name_position.below_the_image': 'Onder de afbeelding',
+    '$label.name_position.on_mouse_hover': 'Bij muisaanwijzer',
+    '$label.name_position.hide_category_names': 'Categorienamen verbergen',
+    '$label.name_position.hide_category_images': 'Categorieafbeeldingen verbergen',
+  },
+
+  fr: {
+    '$label.accordion.catalog_page_settings': 'Paramètres de la page catalogue',
+    '$label.accordion.product_card_settings': 'Paramètres de la fiche produit',
+    '$label.accordion.categories_settings': 'Paramètres des catégories',
+
+    '$label.show': 'Afficher',
+    '$label.do_not_show': 'Ne pas afficher',
+    '$label.show_on_mouse_hover': 'Afficher au survol de la souris',
+
+    '$label.category_view.label': 'Vue des catégories',
+    '$label.category_view.description': 'Affichez les produits des catégories racines uniquement sur les pages de catégories respectives. '
+      + 'Cette option convient aux catalogues comportant un grand nombre de produits.',
+    '$label.category_view.expanded': 'Catégories dépliées',
+    '$label.category_view.collapsed': 'Catégories repliées',
+
+    '$label.product_filter_placement.label': 'Emplacement du filtre produit',
+    '$label.product_filter_placement.category_pages': 'Sur les pages de catégories',
+    '$label.product_filter_placement.all_pages': 'Sur les pages catalogue et catégories',
+
+    '$label.filter_panel_orientation.label': 'Orientation du panneau de filtres',
+    '$label.filter_panel_orientation.vertical': 'Vertical',
+    '$label.filter_panel_orientation.horizontal': 'Horizontal',
+
+    '$label.filter_priority.label': 'Priorité des filtres',
+    '$label.filter_priority.description': 'Jusqu\'à 4 filtres peuvent être affichés horizontalement. Les autres sont regroupés '
+      + 'sous \u201CAutres filtres\u201D. Pour afficher un filtre horizontalement, placez-le parmi les 4 premiers '
+      + 'dans le tri des filtres du panneau de configuration.',
+    '$label.filter_priority.button': 'Trier les filtres produits',
+
+    '$label.side_to_show_filters.label': 'Côté pour afficher les filtres',
+    '$label.side_to_show_filters.right': 'Droite',
+    '$label.side_to_show_filters.left': 'Gauche',
+
+    '$label.expand_filter_panel.label': 'Déplier le panneau de filtres',
+    '$label.show_sort_by_options.label': 'Afficher les options "Trier par"',
+    '$label.show_bottom_navigation_menu.label': 'Afficher le menu de navigation inférieur',
+    '$label.show_signin_link.label': 'Afficher le lien "Se connecter"',
+
+    '$label.card_grid_spacing.label': 'Espacement de la grille de cartes',
+    '$label.card_grid_spacing.description': 'S\'applique aux cartes de produits et de catégories.',
+    '$label.card_grid_spacing.none': 'Aucun',
+    '$label.card_grid_spacing.narrow': 'Étroit',
+    '$label.card_grid_spacing.medium': 'Moyen',
+    '$label.card_grid_spacing.wide': 'Large',
+
+    '$label.content_alignment.label': 'Alignement du contenu',
+    '$label.content_alignment.left': 'Gauche',
+    '$label.content_alignment.center': 'Centré',
+    '$label.content_alignment.right': 'Droite',
+    '$label.content_alignment.justify': 'Justifié',
+
+    '$label.image_proportions.label': 'Proportions de l\'image',
+    '$label.image_proportions.portrait_2_3': 'Portrait (2:3)',
+    '$label.image_proportions.portrait_3_4': 'Portrait (3:4)',
+    '$label.image_proportions.square_1_1': 'Carré (1:1)',
+    '$label.image_proportions.landscape_4_3': 'Paysage (4:3)',
+    '$label.image_proportions.landscape_2_3': 'Paysage (2:3)',
+
+    '$label.card_size.label': 'Taille de la carte',
+    '$label.card_size.small': 'Petit',
+    '$label.card_size.medium': 'Moyen',
+    '$label.card_size.large': 'Grand',
+
+    '$label.product_name.label': 'Nom du produit',
+    '$label.product_subtitle.label': 'Sous-titre du produit',
+    '$label.price.label': 'Prix',
+
+    '$label.color_swatches.label': 'Échantillons de couleurs',
+    '$label.color_swatches.description': 'Vous pouvez configurer l\'apparence des échantillons de couleurs dans les Détails du produit.',
+
+    '$label.sku.label': 'SKU',
+    '$label.buy_now_button.label': 'Bouton "Acheter maintenant"',
+    '$label.product_rating.label': 'Évaluation du produit',
+
+    '$label.rating_view.label': 'Vue des évaluations',
+    '$label.rating_view.five_stars': 'Vue cinq étoiles',
+    '$label.rating_view.one_star': 'Vue une étoile',
+
+    '$label.show_average_product_rating.label': 'Afficher la note moyenne du produit',
+    '$label.show_total_number_of_reviews.label': 'Afficher le nombre total d\'avis',
+    '$label.show_product_card_frame.label': 'Afficher le cadre de la fiche produit',
+    '$label.show_main_product_image.label': 'Afficher l\'image principale du produit',
+    '$label.show_additional_image_on_hover.label': 'Afficher une image supplémentaire au survol',
+
+    '$label.divider': '',
+
+    '$label.name_position.label': 'Position du nom',
+    '$label.name_position.on_the_image': 'Sur l\'image',
+    '$label.name_position.below_the_image': 'Sous l\'image',
+    '$label.name_position.on_mouse_hover': 'Au survol de la souris',
+    '$label.name_position.hide_category_names': 'Masquer les noms de catégories',
+    '$label.name_position.hide_category_images': 'Masquer les images de catégories',
+  },
+});

package/template/layouts/product/example-product/Main.vue

@@ -13,7 +13,8 @@
     </div>
     <slot :name="Slot.REVIEW_LIST" />
     <slot :name="Slot.RELATED_PRODUCTS" />
-    <slot :name="Slot.BOTTOM_BAR" />
+    <!-- Footer navigation part of the page is hidden by default. Uncomment below slot to make it visible -->
+    <!-- <slot :name="Slot.BOTTOM_BAR" /> -->
   </div>
 </template>
 

package/template/layouts/product/example-product/client.ts

@@ -0,0 +1,6 @@
+import { createLayoutApp } from '@lightspeed/crane-api';
+
+import Main from './Main.vue';
+import { Content, Design } from './type.ts';
+
+export default createLayoutApp<Content, Design>(Main);

package/template/layouts/product/example-product/settings/layout.ts

@@ -0,0 +1 @@
+export default [] as const;

package/template/layouts/product/example-product/settings/translations.ts

@@ -0,0 +1 @@
+export default {} as const;

package/template/package.json

@@ -21,7 +21,7 @@
     "node": ">=22"
   },
   "overrides": {
-    "glob": "^11.1.0",
+    "glob": "^13.0.6",
     "stylus": "^0.64.0"
   }
 }

package/template/preview/shared/api-routes.ts

@@ -16,6 +16,9 @@ import { debugLog } from './logger';
 import { getShowcaseData,  BlockType, BLOCK_TYPES } from './preview';
 import { fetchTiles, updateTilesSection, updateCustomContent, getBlockType } from './utils';
 
+/** Maximum allowed nesting depth for DECK settings */
+const MAX_DECK_DEPTH = 2;
+
 /**
  * AppBlock type definition for block-config response
  */
@@ -206,9 +209,14 @@ function processEditorExceptDeck(setting: ContentEditor, fieldName: string) {
 }
 
 /**
- * Process a DECK editor: transform cards.defaultCardContent.settings into editors array
+ * Process a DECK editor: transform cards.defaultCardContent.settings into editors array.
+ * Supports nested DECK up to MAX_DECK_DEPTH levels.
  */
-function processDeckEditor(editor: DeckContentEditor, fieldName: string): Record<string, unknown> {
+function processDeckEditor(
+  editor: DeckContentEditor,
+  fieldName: string,
+  depth: number = 1,
+): Record<string, unknown> {
   const result: Record<string, unknown> = {
     field: fieldName,
     type: 'DECK_EDITOR',
@@ -228,8 +236,23 @@ function processDeckEditor(editor: DeckContentEditor, fieldName: string): Record
     // Create editors array from settings and add to defaultCard
     if (settings) {
       const editors: Record<string, unknown>[] = [];
-      for (const [settingFieldName, settingEditor] of Object.entries(settings)) {
-        const processedEditor: Record<string, unknown> = processEditorExceptDeck(settingEditor, settingFieldName);
+      for (const [settingFieldName, settingEditor] of Object.entries(settings) as [string, ContentEditor][]) {
+        let processedEditor: Record<string, unknown>;
+        // Recursively process nested DECK editors, enforcing MAX_DECK_DEPTH
+        if (settingEditor.type === 'DECK') {
+          if (depth >= MAX_DECK_DEPTH) {
+            throw new Error(
+              `Maximum DECK nesting depth of ${MAX_DECK_DEPTH} exceeded at field "${settingFieldName}".`,
+            );
+          }
+          processedEditor = processDeckEditor(
+            settingEditor as DeckContentEditor,
+            settingFieldName,
+            depth + 1,
+          );
+        } else {
+          processedEditor = processEditorExceptDeck(settingEditor, settingFieldName);
+        }
         editors.push(processedEditor);
       }
       defaultCard.editors = editors;

package/template/preview/shared/mock.ts

@@ -55,9 +55,18 @@ export const externalContentMock: ExternalContentMock = {
       url: 'https://www.lightspeedhq.com',
       target: '_blank',
       icon: '/assets/lightspeed-icon.png',
+      iconSvg: undefined,
       poweredBy: 'Powered by',
       company: 'Lightspeed',
     },
+    madeWithV2: {
+      url: 'https://www.lightspeedhq.com',
+      target: '_blank',
+      icon: undefined,
+      iconSvg: undefined,
+      poweredBy: 'Powered by Lightspeed',
+      company: undefined,
+    },
   },
 
   category: {

package/template/preview/shared/preview.ts

@@ -244,6 +244,9 @@ function parseAccordionDesign(comp: any): Record<string, any> {
   Object.entries(comp.items || {}).forEach(([itemName, item]: [string, any]) => {
     const editors: Record<string, any> = {};
     Object.entries(item.editors || {}).forEach(([editorName, editor]: [string, any]) => {
+      if (editor?.type === 'DIVIDER' || editor?.type === 'INFO') {
+        return;
+      }
       editors[editorName] = editor.defaults || {};
     });
     items[itemName] = { label: item.label, editors };

package/template/preview/vite.config.js

@@ -40,6 +40,10 @@ export default defineConfig({
           fs.writeFileSync(analyticsFile, JSON.stringify({}, null, 2), 'utf-8');
         }
 
+        // Exclude analytics file from Vite's file watcher to prevent
+        // HMR triggers when bumpSectionCount writes to it.
+        server.watcher.unwatch(analyticsFile);
+
         // helper to bump and persist counter for a given section
         function bumpSectionCount(section) {
           const raw = fs.readFileSync(analyticsFile, 'utf-8');

package/template/reference/sections/tag-lines/TagLines.vue

@@ -128,11 +128,11 @@ const {
   }
 }
 
-.tag-lines-section::v-deep(.tag-lines-section__highlighted-texts:has(.tag-lines-section__highlighted-text:hover)) .tag-lines-section__highlighted-text {
+.tag-lines-section :deep(.tag-lines-section__highlighted-texts:has(.tag-lines-section__highlighted-text:hover)) .tag-lines-section__highlighted-text {
   opacity: 0.2;
 }
 
-.tag-lines-section::v-deep(.tag-lines-section__highlighted-texts:has(.tag-lines-section__highlighted-text:hover)) .tag-lines-section__highlighted-text:hover {
+.tag-lines-section :deep(.tag-lines-section__highlighted-texts:has(.tag-lines-section__highlighted-text:hover)) .tag-lines-section__highlighted-text:hover {
   opacity: 1;
 }
 
@@ -140,13 +140,13 @@ const {
   transition: opacity ease-in-out 0.3s;
 }
 
-.tag-lines-section:has(.tag-lines-section__highlighted-text:hover)::v-deep(.section-image__element) {
+.tag-lines-section:has(.tag-lines-section__highlighted-text:hover) :deep(.section-image__element) {
   opacity: 0;
 }
 
-.tag-lines-section:has(.tag-lines-section__highlighted-text--1:hover)::v-deep(.section-image__element--1),
-.tag-lines-section:has(.tag-lines-section__highlighted-text--2:hover)::v-deep(.section-image__element--2),
-.tag-lines-section:has(.tag-lines-section__highlighted-text--3:hover)::v-deep(.section-image__element--3) {
+.tag-lines-section:has(.tag-lines-section__highlighted-text--1:hover) :deep(.section-image__element--1),
+.tag-lines-section:has(.tag-lines-section__highlighted-text--2:hover) :deep(.section-image__element--2),
+.tag-lines-section:has(.tag-lines-section__highlighted-text--3:hover) :deep(.section-image__element--3) {
   opacity: 1;
 }
 </style>

package/template/eslint.config.cjs

@@ -1 +0,0 @@
-module.exports = require('@lightspeed/eslint-config-crane');