@lightspeed/crane 1.0.3 → 1.1.1

package/template/headers/example-header/assets/search.svg

@@ -0,0 +1,13 @@
+<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M16.8333 9.83333C16.8333 5.96667 13.7 2.86667 9.86667 2.86667C6 2.86667 2.9 6 2.9 9.83333C2.9 13.7 6.03333 16.8 9.86667 16.8C13.7 16.8333 16.8333 13.7 16.8333 9.83333ZM22 21.4L21.4 22L15.0667 15.6667C13.6667 16.9 11.8667 17.6667 9.83333 17.6667C5.5 17.6667 2 14.1667 2 9.83333C2 5.5 5.5 2 9.83333 2C14.1667 2 17.6667 5.5 17.6667 9.83333C17.6667 11.8333 16.9 13.6667 15.6667 15.0667L22 21.4Z"
+    fill="#f5faff"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+  />
+</svg>

package/template/headers/example-header/client.ts

@@ -0,0 +1,5 @@
+import { createVueClientApp } from '@lightspeed/crane';
+import ExampleHeader from './ExampleHeader.vue';
+import { Content, Design } from './type.ts';
+
+export default createVueClientApp<Content, Design>(ExampleHeader);

package/template/headers/example-header/component/Cart.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="cart-icon">
+    <a href="/products/cart" role="button">
+      <img alt="cart" src="../assets/cart.svg">
+      <span
+        v-if="cartItemCount > 0"
+        class="item-count"
+      >
+        {{ cartItemCount > 99 ? '99+' : cartItemCount }}
+      </span>
+    </a>
+  </div>
+</template>
+
+<script setup>
+import Ecommerce from '@ecwid/sdk';
+import { ref } from 'vue';
+
+const cartItemCount = ref(0);
+const ecommerce = new Ecommerce({
+  storeId: window.Ecwid.getOwnerId(),
+});
+
+function setCartItemCount() {
+  ecommerce.cart.get().then((result) => {
+    cartItemCount.value = result?.productsQuantity ?? 0;
+  });
+}
+
+function subscribeOnCartChange() {
+  if (typeof document === 'undefined') {
+    return;
+  }
+
+  document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState !== 'hidden') {
+      setCartItemCount();
+    }
+  }, false);
+
+  setCartItemCount();
+}
+
+subscribeOnCartChange();
+</script>
+
+<style scoped>
+.cart-icon {
+  position: relative;
+  a:visited{
+    text-decoration: none;
+    color: black;
+  }
+}
+.item-count {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  font-weight: 400;
+  font-size: 13px;
+}
+</style>

package/template/headers/example-header/component/SampleComponent.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/template/headers/example-header/component/SearchForm.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="search-form__wrapper">
+    <form
+      role="search"
+      class="search-form"
+      method="get"
+      @submit.prevent="openSearchPage"
+    >
+      <input
+        ref="searchInputRef"
+        class="search-form__input"
+        type="search"
+        enterkeyhint="search"
+        name="keyword"
+        value=""
+        autocomplete="off"
+        maxlength="2048"
+        aria-label="Search"
+        placeholder="Search"
+      >
+      <button
+        type="submit"
+        aria-label="Search the website"
+        class="search-form__button"
+      >
+        <img src="../assets/search.svg" alt="Search" />
+      </button>
+    </form>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useInstantsiteJsApi } from '@lightspeed/crane';
+
+const instantsiteJsApi = useInstantsiteJsApi();
+const searchInputRef = ref<HTMLInputElement>();
+
+function openSearchPage() {
+  const searchInput = searchInputRef.value;
+  instantsiteJsApi?.openSearchPage(searchInput?.value);
+}
+</script>
+
+<style scoped>
+.search-form {
+  position: relative;
+}
+
+.search-form__wrapper {
+  width: 250px;
+  margin-right: 10px;
+  margin-left: 10px;
+}
+
+.search-form__input {
+  background-color: #313132;
+  color: #f5faff;
+  font-size: 16px;
+  width: 100%;
+  height: 30px;
+  padding: 0 40px 0 10px;
+  border: 1px solid transparent;
+  border-radius: 20px;
+  outline: none;
+
+  &::-webkit-search-cancel-button {
+    appearance: none;
+  }
+}
+
+.search-form__button {
+  display: flex;
+  position: absolute;
+  top: 1px;
+  right: 8px;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 28px;
+  border: 0 none;
+  cursor: pointer;
+
+  img {
+    width: 20px;
+    height: 20px;
+  }
+}
+</style>

package/template/headers/example-header/server.ts

@@ -0,0 +1,5 @@
+import { createVueServerApp } from '@lightspeed/crane';
+import ExampleHeader from './ExampleHeader.vue';
+import { Content, Design } from './type.ts';
+
+export default createVueServerApp<Content, Design>(ExampleHeader);

package/template/headers/example-header/settings/content.ts

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

package/template/headers/example-header/settings/design.ts

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

package/template/headers/example-header/settings/layout.ts

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

package/template/headers/example-header/settings/translations.ts

@@ -0,0 +1,5 @@
+export default {
+  en: {},
+
+  nl: {},
+} as const;

package/template/headers/example-header/showcases/1.ts

@@ -0,0 +1,11 @@
+export default {
+  previewImage: {
+    set: {
+      ORIGINAL: {
+        url: 'example_header_showcase_1_preview.jpg',
+      },
+    },
+  },
+  content: {},
+  design: {},
+} as const;

package/template/headers/example-header/showcases/translations.ts

@@ -0,0 +1,5 @@
+export default {
+  en: {},
+
+  nl: {},
+} as const;

package/template/headers/example-header/type.ts

@@ -0,0 +1,5 @@
+import ContentSettings from './settings/content.ts';
+import DesignSettings from './settings/design.ts';
+
+export type Content = InferContentType<typeof ContentSettings>;
+export type Design = InferDesignType<typeof DesignSettings>;

package/template/package.json

@@ -7,9 +7,10 @@
     "deploy": "crane build && crane deploy"
   },
   "dependencies": {
-    "@lightspeed/crane": "1.0.3",
+    "@lightspeed/crane": "1.1.1",
     "@lightspeed/eslint-config-crane": "1.0.2",
-    "vue": "^3.4.0"
+    "vue": "^3.4.0",
+    "@ecwid/sdk": "^0.8.0"
   },
   "engines": {
     "node": ">=20"

package/template/sections/example-section/component/image/ImagesGrid.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="size > 0"
-    :class="`image-grid__${images.length}`"
+    :class="`image-grid__${images?.length}`"
   >
     <div
       v-for="(image, index) in images"
@@ -19,45 +19,26 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { useImageElementContent, useInputboxElementContent, useTextareaElementContent } from '@lightspeed/crane';
+import {
+  useDeckElementContent,
+  Card,
+  EditorTypes,
+  ImageContent,
+  TextAreaContent,
+  InputBoxContent,
+} from '@lightspeed/crane';
 import CustomSectionExampleImage from './Image.vue';
 import { Content } from '../../type.ts';
 
-const imageText1 = useTextareaElementContent<Content>('image_text_1');
-const imageText2 = useTextareaElementContent<Content>('image_text_2');
-const imageText3 = useTextareaElementContent<Content>('image_text_3');
-const imageText4 = useTextareaElementContent<Content>('image_text_4');
-const imageContent1 = useImageElementContent<Content>('image_content_1');
-const imageContent2 = useImageElementContent<Content>('image_content_2');
-const imageContent3 = useImageElementContent<Content>('image_content_3');
-const imageContent4 = useImageElementContent<Content>('image_content_4');
-const imageLink1 = useInputboxElementContent<Content>('image_link_1');
-const imageLink2 = useInputboxElementContent<Content>('image_link_2');
-const imageLink3 = useInputboxElementContent<Content>('image_link_3');
-const imageLink4 = useInputboxElementContent<Content>('image_link_4');
-const images = computed(() => ([
-  {
-    text: imageText1,
-    content: imageContent1,
-    link: imageLink1,
-  },
-  {
-    text: imageText2,
-    content: imageContent2,
-    link: imageLink2,
-  },
-  {
-    text: imageText3,
-    content: imageContent3,
-    link: imageLink3,
-  },
-  {
-    text: imageText4,
-    content: imageContent4,
-    link: imageLink4,
-  },
-].filter((image) => image.content.hasContent)));
-const size = computed(() => images.value.length);
+const imagesRaw = useDeckElementContent<Content>('images');
+const images = computed(() => (
+  imagesRaw?.cards?.map((card: Card) => ({
+    text: imagesRaw.getReactiveRef(card, EditorTypes.TEXTAREA, 'image_text') as unknown as TextAreaContent | undefined,
+    content: imagesRaw.getReactiveRef(card, EditorTypes.IMAGE, 'image_content') as unknown as ImageContent | undefined,
+    link: imagesRaw.getReactiveRef(card, EditorTypes.INPUTBOX, 'image_link') as unknown as InputBoxContent | undefined,
+  })).filter((image) => (image.content !== undefined && image.content.hasContent))));
+
+const size = computed(() => (images.value?.length ? images.value.length : 0));
 
 const windowWidth = ref(window.innerWidth);
 const onWidthChange = () => { windowWidth.value = window.innerWidth; };

package/template/sections/example-section/settings/content.ts

@@ -9,60 +9,58 @@ export default {
     label: '$label.section_description.label',
     placeholder: '$label.section_description.placeholder',
   },
-  image_content_1: {
-    type: 'IMAGE',
-    label: '$label.image_content_1.label',
-  },
-  image_text_1: {
-    type: 'TEXTAREA',
-    label: '$label.image_text_1.label',
-    placeholder: '$label.image_text.placeholder',
-  },
-  image_link_1: {
-    type: 'INPUTBOX',
-    label: '$label.image_link_1.label',
-    placeholder: '$label.image_link.placeholder',
-  },
-  image_content_2: {
-    type: 'IMAGE',
-    label: '$label.image_content_2.label',
-  },
-  image_text_2: {
-    type: 'TEXTAREA',
-    label: '$label.image_text_2.label',
-    placeholder: '$label.image_text.placeholder',
-  },
-  image_link_2: {
-    type: 'INPUTBOX',
-    label: '$label.image_link_2.label',
-    placeholder: '$label.image_link.placeholder',
-  },
-  image_content_3: {
-    type: 'IMAGE',
-    label: '$label.image_content_3.label',
-  },
-  image_text_3: {
-    type: 'TEXTAREA',
-    label: '$label.image_text_3.label',
-    placeholder: '$label.image_text.placeholder',
-  },
-  image_link_3: {
-    type: 'INPUTBOX',
-    label: '$label.image_link_3.label',
-    placeholder: '$label.image_link.placeholder',
-  },
-  image_content_4: {
-    type: 'IMAGE',
-    label: '$label.image_content_4.label',
-  },
-  image_text_4: {
-    type: 'TEXTAREA',
-    label: '$label.image_text_4.label',
-    placeholder: '$label.image_text.placeholder',
-  },
-  image_link_4: {
-    type: 'INPUTBOX',
-    label: '$label.image_link_4.label',
-    placeholder: '$label.image_link.placeholder',
+
+  images: {
+    type: 'DECK',
+    label: '$label.images.deck_title',
+    addButtonLabel: '$label.images.add_card_button',
+    maxCards: 5,
+    cards: {
+      defaultCardContent: {
+        label: '$label.images.card_title',
+        settings: {
+          image_content: {
+            type: 'IMAGE',
+            label: '$label.image_content_1.label',
+            defaults: {
+              set: {
+                LOW_RES: {
+                  url: 'new_arrivals_mobile_low.jpeg',
+                },
+                MOBILE_WEBP_LOW_RES: {
+                  url: 'new_arrivals_mobile_low.jpeg',
+                },
+                MOBILE_WEBP_HI_RES: {
+                  url: 'new_arrivals_mobile_high.jpeg',
+                },
+                WEBP_LOW_RES: {
+                  url: 'new_arrivals_pc_low.jpeg',
+                },
+                WEBP_HI_2X_RES: {
+                  url: 'new_arrivals_pc_high.jpeg',
+                },
+              },
+              borderInfo: {},
+            },
+          },
+          image_text: {
+            type: 'TEXTAREA',
+            label: '$label.image_text_1.label',
+            placeholder: '$label.image_text.placeholder',
+            defaults: {
+              text: '$label.images.default.image_text',
+            },
+          },
+          image_link: {
+            type: 'INPUTBOX',
+            label: '$label.image_link_1.label',
+            placeholder: '$label.image_link.placeholder',
+            defaults: {
+              text: '$label.images.default.image_link.text',
+            },
+          },
+        },
+      },
+    },
   },
 } as const;

package/template/sections/example-section/settings/translations.ts

@@ -5,22 +5,29 @@ export default {
     '$label.section_description.label': 'Long description',
     '$label.section_description.placeholder': 'This description will be displayed below the title',
     '$label.image_text.label': 'Image Caption',
-    '$label.image_text_1.label': 'Image 1 caption',
-    '$label.image_text_2.label': 'Image 2 caption',
-    '$label.image_text_3.label': 'Image 3 caption',
-    '$label.image_text_4.label': 'Image 4 caption',
+
     '$label.image_text.placeholder': 'This caption will be displayed on or below the image',
     '$label.image_content.label': 'Image Content',
-    '$label.image_content_1.label': 'Image 1',
-    '$label.image_content_2.label': 'Image 2',
-    '$label.image_content_3.label': 'Image 3',
-    '$label.image_content_4.label': 'Image 4',
-    '$label.image_link_1.label': 'Image 1 link',
-    '$label.image_link_2.label': 'Image 2 link',
-    '$label.image_link_3.label': 'Image 3 link',
-    '$label.image_link_4.label': 'Image 4 link',
     '$label.image_link.placeholder': 'Enter an optional URL for the image',
     '$label.background.label': 'Background',
+
+    '$label.image_text_1.label': 'Content.ts: Image caption',
+    '$label.image_content_1.label': 'Content.ts: Image',
+    '$label.image_link_1.label': 'Content.ts: Image link',
+
+    '$label.images.deck_title': 'Content.ts: Image settings',
+    '$label.images.add_card_button': 'Content.ts: Add new image settings',
+    '$label.images.card_title': 'Content.ts: Image settings',
+
+    '$label.images.default.image_text': 'Default of Content.ts: Default image text',
+    '$label.images.default.image_link.text': 'Default of Content.ts: Default image link text',
+    '$label.images.default.button_title': 'Default of Content.ts: Default button title',
+
+    '$label.images.toggle.label': 'Content.ts: Image toggle',
+    '$label.images.selectbox.label': 'Content.ts: Image select',
+    '$label.images.selectbox_option_1.label': 'Content.ts: Image select option 1',
+    '$label.images.selectbox_option_2.label': 'Content.ts: Image select option 2',
+    '$label.images.button.label': 'Content.ts: Image button label',
   },
 
   nl: {
@@ -29,21 +36,17 @@ export default {
     '$label.section_description.label': 'Lange beschrijving',
     '$label.section_description.placeholder': 'Deze beschrijving wordt onder de titel weergegeven',
     '$label.image_text.label': 'Bijschrift afbeelding',
-    '$label.image_text_1.label': 'Onderschrift afbeelding 1',
-    '$label.image_text_2.label': 'Bijschrift afbeelding 2',
-    '$label.image_text_3.label': 'Bijschrift afbeelding 3',
-    '$label.image_text_4.label': 'Bijschrift afbeelding 4',
+    '$label.image_text_1.label': 'Onderschrift afbeelding',
     '$label.image_text.placeholder': 'Dit bijschrift wordt op of onder de afbeelding weergegeven',
     '$label.image_content.label': 'Afbeeldingsinhoud',
-    '$label.image_content_1.label': 'Afbeelding 1',
-    '$label.image_content_2.label': 'Afbeelding 2',
-    '$label.image_content_3.label': 'Afbeelding 3',
-    '$label.image_content_4.label': 'Afbeelding 4',
-    '$label.image_link_1.label': 'Afbeelding 1 link',
-    '$label.image_link_2.label': 'Afbeelding 2 link',
-    '$label.image_link_3.label': 'Afbeelding 3 link',
-    '$label.image_link_4.label': 'Afbeelding 4 link',
+    '$label.image_content_1.label': 'Afbeelding',
+    '$label.image_link_1.label': 'Afbeelding link',
     '$label.image_link.placeholder': 'Voer een optionele URL in voor de afbeelding',
     '$label.background.label': 'Achtergrond',
+
+    '$label.images.deck_title': 'Afbeeldingsinstellingen',
+    '$label.images.add_card_button': 'Afbeeldingsinstellingen toevoegen',
+    '$label.images.card_title': 'Afbeeldingsinstellingen',
+    '$label.images.image_text_default': 'Standaardtekst',
   },
 } as const;