@lightspeed/crane 1.1.1 → 1.1.3

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

@@ -1,30 +1,64 @@
 <template>
   <div class="custom-header">
-    <div class="custom-header__left" />
+    <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/components/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{
+.custom-header {
   display: flex;
   justify-content: space-between;
-  padding: 10px;
+  padding: 5px 10px;
+
   .custom-header__right{
     display: flex;
     flex: 0 0 auto;
+    gap: 10px;
     align-items: center;
-    justify-content: flex-end;
+    justify-content: flex-start;
+  }
+
+  .custom-header__right {
     order: 3;
     text-align: right;
   }
+
+  .custom-header__left{
+    display: flex;
+    flex: 0 0 auto;
+    gap: 10px;
+    align-items: center;
+    justify-content: flex-end;
+    order: 3;
+    text-align: left;
+  }
+}
+
+.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/component/Account.vue

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

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

@@ -1,47 +1,28 @@
 <template>
   <div class="cart-icon">
-    <a href="/products/cart" role="button">
+    <a :href="cart.url" role="button">
       <img alt="cart" src="../assets/cart.svg">
       <span
-        v-if="cartItemCount > 0"
+        v-if="cart.count > 0"
         class="item-count"
       >
-        {{ cartItemCount > 99 ? '99+' : cartItemCount }}
+        {{ cart.count > 99 ? '99+' : cart.count }}
       </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 setup lang="ts">
+import { useVueBaseProps } from '@lightspeed/crane';
+import { computed } from 'vue';
+import { Design } from '../type.ts';
+
+const baseProps = useVueBaseProps<unknown, Design>();
+const siteContent = computed(() => baseProps.site?.value satisfies SiteContent);
+const cart = computed(() => ({
+  count: siteContent.value?.cart?.count ?? 0,
+  url: siteContent.value?.cart?.url ?? '',
+}));
 </script>
 
 <style scoped>

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/settings/translations.ts

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

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

@@ -1,11 +1,40 @@
 export default {
+  showcaseId: '1',
   previewImage: {
     set: {
       ORIGINAL: {
-        url: 'example_header_showcase_1_preview.jpg',
+        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',
       },
     },
   },
-  content: {},
-  design: {},
 } 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

@@ -1,5 +1,17 @@
 export default {
-  en: {},
+  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: {},
+  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/package.json

@@ -7,7 +7,7 @@
     "deploy": "crane build && crane deploy"
   },
   "dependencies": {
-    "@lightspeed/crane": "1.1.1",
+    "@lightspeed/crane": "1.1.3",
     "@lightspeed/eslint-config-crane": "1.0.2",
     "vue": "^3.4.0",
     "@ecwid/sdk": "^0.8.0"

package/template/reference/sections/about-us/AboutUs.vue

@@ -0,0 +1,73 @@
+<template>
+  <SectionWrapper class="about-us-section" :style="backgroundStyle">
+    <div class="about-us-section__wrapper">
+      <Image
+        v-if="isImageVisible"
+        class="about-us-section__image"
+      />
+
+      <div class="about-us-section__content">
+        <Title v-if="isTitleVisible" />
+        <Stats />
+      </div>
+    </div>
+  </SectionWrapper>
+</template>
+
+<script setup lang="ts">
+import { useBackgroundElementDesign } from '@lightspeed/crane';
+import { computed, CSSProperties } from 'vue';
+
+import Image from './component/Image.vue';
+import type { Design } from './type.ts';
+import { useVisibilityProvider } from './util/visibility-provider.ts';
+import Stats from './component/Stats.vue';
+import Title from './component/Title.vue';
+import SectionWrapper from '../../shared/components/SectionWrapper.vue';
+
+const { isImageVisible, isTitleVisible } = useVisibilityProvider();
+
+const backgroundDesign = useBackgroundElementDesign<Design>('background');
+const background = computed(() => ({
+  type: backgroundDesign.background?.type,
+  solidColor: backgroundDesign.background?.solid?.color as Color,
+  fromColor: backgroundDesign.background?.gradient?.fromColor as Color,
+  toColor: backgroundDesign.background?.gradient?.toColor as Color,
+}));
+
+const backgroundStyle = computed<CSSProperties>(() => {
+  if (background.value.type === 'gradient') {
+    return { 'background-image': `linear-gradient(to right, ${background.value.fromColor.hex}, ${background.value.toColor.hex})` };
+  }
+  return { 'background-color': background.value.solidColor.hex };
+});
+</script>
+
+<style lang="scss" scoped>
+.about-us-section {
+  &__wrapper {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 75px;
+
+    @media screen and (min-width: 900px) {
+      grid-template-columns: 1fr 1fr;
+      align-items: center;
+      gap: 100px;
+    }
+  }
+
+  &__image {
+    max-width: 479px;
+    max-height: 610px;
+    margin: 0 auto;
+  }
+
+  &__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-self: center;
+  }
+}
+</style>

package/template/reference/sections/about-us/client.ts

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

package/template/reference/sections/about-us/component/Image.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="image-section">
+    <div
+      :class="overlayClass"
+      class="image-section__overlay"
+      :style="overlayStyle"
+    >
+      <img
+        class="image-section__content"
+        :src="imageContent.highResolutionMobileImage"
+        loading="lazy"
+        alt=""
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  useImageElementContent,
+  useImageElementDesign,
+  useLayoutElementDesign,
+} from '@lightspeed/crane';
+import { computed, CSSProperties } from 'vue';
+
+import type { Content, Design } from '../type.ts';
+
+function getColor(color: string) {
+  return `${color}20`;
+}
+
+const imageContent = useImageElementContent<Content>('image');
+const imageDesign = useImageElementDesign<Design>('image');
+const layoutDesign = useLayoutElementDesign();
+
+const overlayConfig = computed(() => ({
+  solidOverlay: getColor((imageDesign.overlay?.solid?.color as Color).raw),
+  gradientOverlay: 'linear-gradient(180deg, '
+      + `${getColor((imageDesign.overlay?.gradient?.fromColor as Color).raw)} 0%, `
+      + `${getColor((imageDesign.overlay?.gradient?.toColor as Color).raw)} 100%)`,
+}));
+
+const overlayClass = computed(() => ([
+  'image-section__overlay',
+  {
+    'image-section__overlay--border-radius': layoutDesign.layout === 'Images_With_Border_Radius',
+  },
+]));
+
+const overlayStyle = computed(() => {
+  const style: CSSProperties = {};
+
+  if (imageDesign.visible && imageDesign.overlay?.type === 'gradient') {
+    style.background = overlayConfig.value.gradientOverlay;
+  }
+  if (imageDesign.visible && imageDesign.overlay?.type === 'solid') {
+    style.background = overlayConfig.value.solidOverlay;
+  }
+
+  return style;
+});
+</script>
+
+<style lang="scss" scoped>
+.image-section {
+  height: 100%;
+  position: relative;
+  width: 100%;
+  display: flex;
+  z-index: 999;
+
+  &__overlay {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    &--border-radius {
+      border-radius: 24px;
+
+      @media screen and (min-width: 900px) {
+        border-radius: 32px;
+      }
+    }
+  }
+
+  &__content {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    z-index: -1;
+  }
+}
+</style>