Merge pull request #605 from Stackla/feat/add-support-for-expanded-tile-variation

ref: add support for skeleton loader, and expanded tile variants

Author: olivernosto

esbuild.js

@@ -24,6 +24,8 @@ const getTemplatesEndpoint = () => {
       return "https://templates.teaser.stackla.com"
     case "development":
       return "http://localhost:4003"
+    default:
+      return "http://localhost:4003"
   }
 }
 

package-lock.json

@@ -102,7 +102,7 @@
     "vitest": "^3.2.4"
   },
   "dependencies": {
-    "@stackla/widget-utils": "workspace:*",
+    "@stackla/widget-utils": "^4.1.2",
     "apicache": "^1.6.3",
     "cookie-parser": "^1.4.7",
     "cors": "^2.8.5",

package.json

@@ -28,7 +28,8 @@ const widgetOptions: SharedWidgetOptions["widgetOptions"] & {
       show_votes: true,
       show_cross_sellers: true,
       show_add_to_cart: true,
-      show_carousel_grouping: false
+      show_carousel_grouping: false,
+      expanded_tile_variant: "horizontal"
     },
     tile_options: {
       show_comments: true,

packages/widget-utils

@@ -1,3 +1,3 @@
-export { Sdk, SwiperData } from "@stackla/widget-utils/types"
+export { ISdk, SwiperData } from "@stackla/widget-utils/types"
 export { BaseConfig } from "./IBaseConfig"
 export { IWidgetSettings } from "./IWidgetSettings"

tests/fixtures/widget.options.ts

@@ -71,7 +71,8 @@ export const config: {
     // Whether to show the add to cart
     show_add_to_cart: true,
     // Whether to show the carousel grouping
-    show_carousel_grouping: true
+    show_carousel_grouping: true,
+    expanded_tile_variant: "horizontal"
   },
   inlineTile: {
     // Whether to show the navigation options of the tile

types/index.ts

@@ -1,7 +1,7 @@
-import { Sdk } from "types"
+import { ISdk } from "types"
 import { initializeInlineSwiper } from "../utils/inline-swiper.loader"
 
-declare const sdk: Sdk
+declare const sdk: ISdk
 
 export function initializeInlineSwiperListeners() {
   initializeInlineSwiper({

widgets/blankcanvas/config.ts

@@ -1,6 +1,6 @@
-import { Sdk } from "types"
+import { ISdk } from "types"
 
-declare const sdk: Sdk
+declare const sdk: ISdk
 
 import { loadWidget } from "@stackla/widget-utils"
 import { initializeInlineSwiperListeners } from "./inline-carousel-swiper.loader"

widgets/carousel/inline-carousel-swiper.loader.ts

@@ -1,5 +1,5 @@
 import type { ISdk } from "@stackla/widget-utils"
-import { StoryExpandedTile } from "./tile.template"
+import { VerticalExpandedTile } from "./tile.template"
 import { createElement } from "@stackla/widget-utils"
 
 export function StoryExpandedTiles(sdk: ISdk) {
@@ -8,7 +8,7 @@ export function StoryExpandedTiles(sdk: ISdk) {
   const navigationArrowsEnabled = show_nav
 
   return (
-    <div class="expanded-tile-wrapper" variation="story">
+    <div class="expanded-tile-wrapper" variation="vertical">
       <div class="swiper swiper-expanded story-expanded">
         <div class="align-center">
           <div class="swiper-expanded-button-wrapper">
@@ -31,7 +31,7 @@ export function StoryExpandedTiles(sdk: ISdk) {
               data-id={tile.id}
               data-yt-id={tile.youtube_id || ""}
               data-tiktok-id={tile.tiktok_id || ""}>
-              <StoryExpandedTile sdk={sdk} tile={tile} />
+              <VerticalExpandedTile sdk={sdk} tile={tile} />
             </div>
           ))}
         </div>