@lightspeed/crane 1.1.0 → 1.1.2

package/template/headers/example-header/ExampleHeader.vue

@@ -1,17 +1,49 @@
 <template>
-  <div
-    class="custom-header"
-  >
-    <div>
-      the components will sit here
+  <div class="custom-header">
+    <div class="custom-header__left">
+      <Logo />
+      <NavigationMenu />
+    </div>
+    <div class="custom-header__right">
+      <SearchForm />
+      <LanguageSelector />
+      <Account />
+      <CartIcon />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-
+import NavigationMenu from './component/NavigationMenu.vue';
+import LanguageSelector from '../../shared/LanguageSelector.vue';
+import CartIcon from './component/Cart.vue';
+import Logo from './component/Logo.vue';
+import SearchForm from './component/SearchForm.vue';
+import Account from './component/Account.vue';
 </script>
 
 <style scoped lang="scss">
-
+.custom-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 5px 10px;
+  .custom-header__right{
+    display: flex;
+    flex: 0 0 auto;
+    gap: 10px;
+    align-items: center;
+    justify-content: flex-end;
+    order: 3;
+    text-align: right;
+  }
+}
+.header-content {
+  padding: 0 12px;
+  height: 48px;
+  width: min(1280px, 100%);
+  margin: auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 </style>

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

@@ -0,0 +1,11 @@
+<svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+>
+    <path
+            d="M23.5 12.0037C23.5012 10.0898 23.0244 8.20585 22.1129 6.52281C21.2014 4.83976 19.884 3.41084 18.2802 2.36565C16.6764 1.32047 14.8369 0.692104 12.9287 0.537549C11.0204 0.382995 9.10378 0.707143 7.35258 1.48059C5.60138 2.25404 4.07105 3.45232 2.9004 4.96672C1.72975 6.48113 0.955821 8.26374 0.64882 10.1529C0.34182 12.042 0.511461 13.9779 1.14235 15.7848C1.77325 17.5918 2.84543 19.2128 4.26165 20.5006C4.28966 20.5338 4.32226 20.5629 4.35848 20.5869C6.46141 22.4631 9.18149 23.5 12.0001 23.5C14.8188 23.5 17.5388 22.463 19.6417 20.5867C19.6778 20.5628 19.7102 20.5338 19.7381 20.5007C20.9235 19.4252 21.8705 18.1135 22.5184 16.6501C23.1663 15.1867 23.5007 13.604 23.5 12.0037ZM1.42 12.0037C1.41878 10.2648 1.84643 8.55248 2.66509 7.01827C3.48375 5.48405 4.66817 4.17528 6.11348 3.20782C7.55879 2.24035 9.22042 1.64404 10.9512 1.47168C12.6821 1.29931 14.4287 1.55621 16.0365 2.21963C17.6444 2.88305 19.0638 3.93252 20.1691 5.27513C21.2744 6.61775 22.0316 8.21209 22.3735 9.91701C22.7155 11.6219 22.6317 13.3848 22.1295 15.0496C21.6274 16.7145 20.7224 18.2298 19.4947 19.4616C18.3528 17.55 16.5208 16.1493 14.3764 15.5482C15.373 15.0182 16.1638 14.1702 16.6228 13.1392C17.0819 12.1081 17.1828 10.9532 16.9096 9.85816C16.6364 8.76314 16.0047 7.79091 15.1151 7.09614C14.2254 6.40136 13.1289 6.02395 12 6.02395C10.8711 6.02395 9.77458 6.40136 8.88494 7.09614C7.9953 7.79091 7.36363 8.76314 7.09042 9.85816C6.8172 10.9532 6.91814 12.1081 7.37717 13.1392C7.8362 14.1702 8.62696 15.0182 9.62364 15.5482C7.4792 16.1493 5.64721 17.55 4.50533 19.4616C3.52633 18.4819 2.74996 17.3191 2.22057 16.0394C1.69119 14.7598 1.41915 13.3884 1.42 12.0037ZM12 15.2226C11.1812 15.2226 10.3808 14.9799 9.69994 14.5252C9.01912 14.0704 8.48848 13.424 8.17514 12.6678C7.86179 11.9115 7.77981 11.0794 7.93955 10.2765C8.09929 9.4737 8.49359 8.73626 9.07258 8.15745C9.65157 7.57864 10.3892 7.18447 11.1923 7.02478C11.9954 6.86509 12.8278 6.94705 13.5843 7.26029C14.3408 7.57354 14.9874 8.10401 15.4423 8.78461C15.8972 9.46522 16.14 10.2654 16.14 11.084C16.1388 12.1812 15.7022 13.2332 14.9261 14.0091C14.1499 14.785 13.0976 15.2214 12 15.2226ZM5.19947 20.0991C5.88217 18.8976 6.87116 17.8985 8.06574 17.2035C9.26032 16.5084 10.6178 16.1422 12 16.1422C13.3822 16.1422 14.7397 16.5084 15.9343 17.2035C17.1288 17.8985 18.1178 18.8976 18.8005 20.0991C16.897 21.7015 14.4885 22.5803 12 22.5803C9.51148 22.5803 7.10295 21.7015 5.19947 20.0991Z"
+            fill="currentColor"
+    />
+</svg>

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

@@ -0,0 +1,20 @@
+<svg
+  width="30"
+  height="30"
+  viewBox="0 0 24 24"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M18 23.5H6C3.8 23.5 2 21.7 2 19.5V4.2H22V19.5C22 21.7 20.2 23.5 18 23.5ZM3 5.2V19.5C3 21.2 4.3 22.5 6 22.5H18C19.7 22.5 21 21.2 21 19.5V5.2H3Z"
+  />
+  <path
+    d="M12 1C9.7 1 8 2.5 8 4.5C8 4.8 7.8 5 7.5 5C7.2 5 7 4.8 7 4.5C7 1.8 9.3 0 12 0C14.7 0 17 1.8 17 4.5C17 4.8 16.8 5 16.5 5C16.2 5 16 4.8 16 4.5C16 2.5 14.3 1 12 1Z"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+  />
+  <path
+    d="M2 4.18018H22V19.5002C22 21.7093 20.2091 23.5002 18 23.5002H6C3.79086 23.5002 2 21.7093 2 19.5002V4.18018Z"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+  />
+</svg>

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/component/Account.vue

@@ -0,0 +1,20 @@
+<template>
+  <div v-if="externalContent?.account">
+    <a :href="externalContent.account?.url" :target="externalContent.account?.target">
+      <img :src="accountIcon" alt="account icon" />
+    </a>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useVueBaseProps } from '@lightspeed/crane';
+import { computed } from 'vue';
+import { Design } from '../type.ts';
+import accountIcon from '../assets/account_icon.svg';
+
+const baseProps = useVueBaseProps<unknown, Design>();
+const externalContent: ExternalContentData = computed(() => baseProps.externalContent).value as ExternalContentData;
+</script>
+
+<style lang="scss" scoped>
+</style>

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/Logo.vue

@@ -0,0 +1,95 @@
+<template>
+  <div
+    v-if="logoDesign.visible"
+    class="logo-section"
+  >
+    <div
+      v-if="logoContent.type === 'TEXT'"
+      class="logo-section__text-frame"
+      :style="logoFrameStyle"
+    >
+      <h1
+        :style="logoTextStyle"
+      >
+        {{ logoTextContent }}
+      </h1>
+    </div>
+    <div
+      v-if="logoContent.type === 'IMAGE'"
+      class="logo-section-image"
+    >
+      <img
+        v-if="logoContent.image?.lowResolutionDesktopImage !== undefined"
+        class="logo-section-image__content"
+        :src="logoContent.image?.lowResolutionDesktopImage"
+      >
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useLogoElementContent, useLogoElementDesign } from '@lightspeed/crane';
+import { computed } from 'vue';
+
+function getColor(color: Color | undefined) {
+  if (typeof color === 'undefined') {
+    return '';
+  }
+  return color.hex;
+}
+
+const logoContent = useLogoElementContent();
+const logoDesign = useLogoElementDesign();
+
+const logoTextContent = computed(() => {
+  if (logoContent.text !== undefined) {
+    if (logoDesign.value.capitalization === 'all') {
+      return logoContent.text.toUpperCase();
+    }
+    if (logoDesign.value.capitalization === 'small') {
+      return logoContent.text.toLowerCase();
+    }
+  }
+  return logoContent.text;
+});
+
+const logoTextStyle = computed(() => ({
+  fontSize: `${logoDesign.value.size}px`,
+  fontFamily: logoDesign.value.font,
+  color: getColor(logoDesign.value.color),
+  'font-style': logoDesign.value.italic ? 'italic' : 'normal',
+  'font-weight': logoDesign.value.bold ? 'bold' : 'normal',
+  'letter-spacing': `${logoDesign.value.spacing ?? 0}px`,
+}));
+
+const logoFrameStyle = computed(() => ({
+  'border-style': logoDesign.value.frame?.visible ? 'solid' : 'hidden',
+  'border-width': `${logoDesign.value.frame?.width ?? 1}px`,
+  'border-color': getColor(logoDesign.value.frame?.color),
+}));
+</script>
+
+<style lang="scss" scoped>
+.logo-section {
+  height: 100%;
+  width: 300px;
+  text-align: center;
+}
+
+.logo-section__text-frame {
+  text-align: center;
+  border-radius: 3px;
+}
+
+.logo-section-image {
+  height: 100%;
+  width: 100%;
+  display:block;
+
+  &__content {
+    height: 100%;
+    width: 100%;
+    object-fit: contain;
+  }
+}
+</style>

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

@@ -0,0 +1,53 @@
+<template>
+  <nav
+    v-if="navigationMenu.hasContent"
+    role="navigation"
+  >
+    <ul>
+      <li
+        v-for="item in navigationMenu.items"
+        :key="item.id"
+      >
+        <a @click="item.performAction">
+          {{ item.title }}
+        </a>
+      </li>
+    </ul>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { useNavigationMenuElementContent } from '@lightspeed/crane';
+
+const navigationMenu = useNavigationMenuElementContent();
+</script>
+
+<style lang="scss" scoped>
+ul {
+  gap: 16px;
+  display: flex;
+  overflow-x: auto;
+  white-space: nowrap;
+  height: 48px;
+}
+
+li {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  min-width: fit-content;
+}
+
+a {
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 500;
+  color: #080d12;
+  text-decoration: none;
+  transition: color 0.35s ease;
+
+  &:hover {
+    color: #0056b3
+  }
+}
+</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/settings/content.ts

@@ -0,0 +1,9 @@
+export default {
+  menu: {
+    type: 'NAVIGATION_MENU',
+  },
+  logo: {
+    type: 'LOGO',
+    label: '$label.logo.label',
+  },
+} as const;

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

@@ -0,0 +1,23 @@
+export default {
+  logo: {
+    type: 'LOGO',
+    label: '$label.logo.label',
+    colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
+    sizes: [18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60],
+    defaults: {
+      font: 'global.fontFamily.body',
+      size: 20,
+      bold: true,
+      italic: false,
+      color: '#313131',
+      visible: true,
+      spacing: 2,
+      capitalization: 'all',
+      frame: {
+        visible: true,
+        width: 3,
+        color: '#313131',
+      },
+    },
+  },
+} as const;

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

@@ -0,0 +1,9 @@
+export default {
+  en: {
+    '$label.logo.label': 'Logo',
+  },
+
+  nl: {
+    '$label.logo.label': 'Logo',
+  },
+} as const;

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

@@ -0,0 +1,40 @@
+export default {
+  showcaseId: '1',
+  previewImage: {
+    set: {
+      ORIGINAL: {
+        url: 'example_header_showcase_1_preview.png',
+      },
+    },
+  },
+  blockName: '$label.showcase_1.blockName',
+  content: {
+    logo: {
+      type: 'LOGO',
+      logoType: 'TEXT',
+      text: '$label.showcase_1.logo.text',
+    },
+    menu: {
+      type: 'NAVIGATION_MENU',
+      text: '$label.showcase_1.menu.text',
+    },
+  },
+  design: {
+    logo: {
+      type: 'LOGO',
+      font: 'global.fontFamily.body',
+      size: 20,
+      bold: true,
+      italic: true,
+      color: '#313131',
+      visible: true,
+      spacing: 2,
+      capitalization: 'none',
+      frame: {
+        visible: true,
+        width: 3,
+        color: '#313131',
+      },
+    },
+  },
+} as const;

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

@@ -0,0 +1,42 @@
+export default {
+  showcaseId: '2',
+  previewImage: {
+    set: {
+      ORIGINAL: {
+        url: 'custom_section_showcase_2_preview.png',
+      },
+    },
+  },
+  blockName: '$label.showcase_2.blockName',
+  content: {
+    menu: {
+      type: 'NAVIGATION_MENU',
+      text: '$label.showcase_2.menu.text',
+    },
+    logo: {
+      type: 'LOGO',
+      logoType: 'IMAGE',
+      imageData: {
+        set: {
+          LOW_RES: {
+            url: 'lightspeed_logo.png',
+          },
+          MOBILE_WEBP_LOW_RES: {
+            url: 'lightspeed_logo.png',
+          },
+          MOBILE_WEBP_HI_RES: {
+            url: 'lightspeed_logo.png',
+          },
+          WEBP_LOW_RES: {
+            url: 'lightspeed_logo.png',
+          },
+          WEBP_HI_2X_RES: {
+            url: 'lightspeed_logo.png',
+          },
+        },
+        borderInfo: {},
+      },
+    },
+  },
+  design: {},
+} as const;

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

@@ -0,0 +1,17 @@
+export default {
+  en: {
+    '$label.showcase_1.blockName': 'Custom Header',
+    '$label.showcase_1.menu.text': 'Navigation Menu',
+    '$label.showcase_2.blockName': 'Custom Header',
+    '$label.showcase_2.menu.text': 'Navigation Menu',
+    '$label.showcase_1.logo.text': 'Example Text Logo',
+  },
+
+  nl: {
+    '$label.showcase_1.blockName': 'Custom Header',
+    '$label.showcase_1.menu.text': 'Navigatie Menu',
+    '$label.showcase_2.blockName': 'Custom Header',
+    '$label.showcase_2.menu.text': 'Navigatie Menu',
+    '$label.showcase_1.logo.text': 'Voorbeeld Tekst Logo',
+  },
+} as const;

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

@@ -1,5 +1,5 @@
-import ContentSettings from '../settings/content.ts';
-import DesignSettings from '../settings/design.ts';
+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.1.0",
+    "@lightspeed/crane": "1.1.2",
     "@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; };