@viur/shop-components 0.0.1-dev.3 → 0.0.1-dev.30

package/src/components/order/item/ItemView.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="wrap">
+    <div class="viur-shop-item-view-image-wrap">
+      <sl-carousel class="viur-shop-item-view-carousel-thumbnails" navigation loop>
+        <sl-carousel-item>
+          <img
+            :alt="state.item.shop_name"
+            :src="getImage(state.item)"
+          />
+        </sl-carousel-item>
+      </sl-carousel>
+
+      <div class="viur-shop-item-view-thumbnails">
+        <div class="viur-shop-item-view-thumbnails-scroller">
+          <img :alt="state.item.shop_name"
+               class="viur-shop-item-view-thumbnails-image active"
+               :src="getImage(state.item)" />
+        </div>
+      </div>
+    </div>
+
+    <div class="viur-shop-item-view-info-wrap">
+      <h1 class="viur-shop-item-view-headline">{{ state.item.shop_name }}</h1>
+      <h2 class="viur-shop-item-view-subline">B 21 x H 6,5 x T 19 cm</h2>
+
+      <div class="viur-shop-item-view-price">
+        {{ state.item.shop_price_retail }} €
+      </div>
+
+      <div class="viur-shop-item-view-paragraph">
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+        Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+        gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+      </div>
+
+      <div class="viur-shop-item-view-btn-wrap">
+        <sl-button
+            size="small"
+            class="viur-shop-item-view-add-to-cart-btn"
+            variant="primary"
+            title="Add to cart"
+            @click.stop="cartStore.addToCart(item.key, cartStore.state.currentCart)"
+          >
+            <sl-icon name="bag-plus"
+                     slot="prefix"
+                     ></sl-icon>
+
+            In den Warenkorb
+          </sl-button>
+
+          <sl-button
+            size="small"
+            outline
+            class="viur-shop-item-view-add-to-favourites-btn"
+            variant="primary"
+            title="Add to favourites"
+          >
+            <sl-icon name="heart"
+                     slot="prefix"
+                     ></sl-icon>
+            Auf die Wunschliste
+          </sl-button>
+      </div>
+    </div>
+
+  </div>
+  <br>
+  <h1 class="viur-shop-item-view-headline">Ähnliche Artikel</h1>
+  <div class="viur-shop-item-view-item-grid">
+      <ItemCard :item="state.item">
+      </ItemCard>
+
+  </div>
+
+</template>
+
+<script setup>
+import { computed, onBeforeMount, reactive } from "vue";
+import { Request } from "@viur/vue-utils";
+import { useRoute } from "vue-router";
+// component imports
+import ItemCard from "../item/ItemCard.vue";
+import '@viur/shoelace/dist/components/carousel/carousel.js';
+
+const route = useRoute();
+
+const state = reactive({
+  item: {},
+});
+
+function getImage(item) {
+  console.log("hier", item.dk_artikel);
+  let imageUrl =
+    "https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80";
+  if (item?.dk_artikel.dest.image) {
+    return Request.downloadUrlFor(item.dk_artikel.dest.image);
+  }
+
+  return imageUrl;
+}
+
+onBeforeMount(async () => {
+  Request.get(`/json/variante/view/${route.params.item}`).then(async (resp) => {
+    let data = await resp.json();
+
+    state.item = data.values;
+  });
+});
+</script>
+
+<style scoped>
+  .wrap{
+    display: grid;
+    grid-template-columns: 45% minmax(0 ,1fr);
+  }
+
+  .viur-shop-item-view-info-wrap{
+    padding: var(--sl-spacing-x-large);
+  }
+
+  .viur-shop-item-view-image-wrap{
+    display: flex;
+    flex-direction: column;
+  }
+
+  sl-carousel{
+    aspect-ratio: 1;
+    background-color: var(--sl-color-neutral-200);
+
+    &::part(base){
+      display: flex;
+      gap: 0;
+     }
+
+     &::part(scroll-container){
+      border-radius: 0;
+      }
+
+    &::part(navigation-button){
+      position: absolute;
+      background-color: color-mix(in hsl, var(--sl-color-neutral-0) 85%, transparent);
+      color: var(--app-primary-color);
+      border-radius: 0;
+      transition: all ease.3s;
+      opacity: 0;
+     }
+
+    &::part(navigation-button--previous){
+      left: 0;
+     }
+
+    &::part(navigation-button--next){
+      right: 0;
+     }
+
+    &:hover{
+      &::part(navigation-button){
+        opacity: 1;
+       }
+     }
+  }
+
+  .viur-shop-item-view-thumbnails {
+    display: flex;
+    justify-content: start;
+    margin-top: vaR(--sl-spacing-medium)
+  }
+
+  .viur-shop-item-view-thumbnails-scroller {
+    display: flex;
+    gap: var(--sl-spacing-small);
+    overflow-x: auto;
+    scrollbar-width: none;
+    scroll-behavior: smooth;
+    scroll-padding: var(--sl-spacing-small);
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .viur-shop-item-view-thumbnails-image {
+    width: 64px;
+    height: 64px;
+    object-fit: cover;
+    opacity: 0.3;
+    will-change: opacity;
+    transition: 250ms opacity;
+    cursor: pointer;
+
+    &.active {
+      opacity: 1;
+    }
+  }
+
+
+  .viur-shop-item-view-headline{
+    margin-bottom: var(--sl-spacing-small);
+  }
+
+  .viur-shop-item-view-subline{
+    margin-bottom: var(--sl-spacing-small);
+  }
+
+  .viur-shop-item-view-price{
+    font-size: 1.4em;
+    margin-bottom: var(--sl-spacing-small);
+  }
+
+  .viur-shop-item-view-paragraph{
+    margin-bottom: var(--sl-spacing-x-large);
+  }
+
+  .viur-shop-item-view-btn-wrap{
+    display: flex;
+    flex-direction: column;
+
+    sl-button{
+      margin-bottom: var(--sl-spacing-x-small);
+    }
+  }
+
+  .viur-shop-item-view-item-grid{
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    grid-gap: var(--sl-spacing-medium);
+  }
+</style>

package/src/components/order/process/ExampleUsage.vue

@@ -0,0 +1,111 @@
+<template>
+  <order-view :tabs="state.tabs" @tabChange="handleTabs" />
+</template>
+
+<script setup>
+import { onBeforeMount, reactive, shallowRef, computed } from "vue";
+import { ListRequest } from "@viur/vue-utils";
+
+import CartView from "../../cart/CartView.vue";
+import ConfirmView from "../../cart/ConfirmView.vue";
+import OrderView from "./OrderView.vue";
+import CategoryView from "../category/CategoryView.vue";
+import OrderComplete from "./OrderComplete.vue";
+import UserInformation from "../information/UserInformation.vue";
+import UserInfoMulti from "../information/UserInfoMulti.vue";
+import { useCartStore } from "../../../stores/cart";
+
+const cartStore = useCartStore();
+
+const rootNode = computed(() =>
+  cartStore.state.basketRootNode.key ? cartStore.state.basketRootNode.key : "",
+);
+const state = reactive({
+  rootNode: {},
+  tabs: {
+    cart: {
+      component: shallowRef(CartView),
+      props: {
+        sidebar: true,
+        mode: "basket",
+        cartKey: rootNode,
+      }, // cartKey (on initial call has to be a root node) is a required prop, make sure that cartStore.init() is called before cart is mounted
+      displayName: "Warenkorb",
+      icon: { name: "cart", library: "hsk" },
+      position: 2,
+      disabled: false,
+      atShow: null,
+      atHide: null,
+    },
+    // confirm: {
+    //   component: shallowRef(ConfirmView),
+    //   props: {},
+    //   displayName: "Bestellung prüfen",
+    //   icon: { name: "order-check", library: "hsk" },
+    //   position: 5,
+    //   disabled: false,
+    //   atShow: null,
+    //   atHide: null,
+    // },
+    // order: {
+    //   component: shallowRef(CategoryView),
+    //   props: {
+    //     listHandler: ListRequest("categorystore", {
+    //       module: "variante",
+    //       params: { type: "dk", limit: 99 },
+    //     }),
+    //   },
+    //   displayName: "Artikel Bestellen",
+    //   icon: { name: "cart-add", library: "hsk" },
+    //   position: 1,
+    //   disabled: false,
+    //   atShow: null,
+    //   atHide: null,
+    // },
+    // orderComplete: {
+    //   component: shallowRef(OrderComplete),
+    //   props: {},
+    //   displayName: "Bestellung Abgeschlossen",
+    //   icon: { name: "order-confirmed", library: "hsk" },
+    //   position: 6,
+    //   disabled: true,
+    //   atShow: null,
+    //   atHide: null,
+    // },
+    userInfo: {
+      component: shallowRef(UserInformation),
+      props: {},
+      displayName: "Daten Eingeben",
+      icon: { name: "user", library: "hsk" },
+      position: 3,
+      disabled: false,
+      atShow: null,
+      atHide: null,
+    },
+    // userInfoMulti: {
+    //   component: shallowRef(UserInfoMulti),
+    //   props: {},
+    //   displayName: "Daten Eingeben (Multi)",
+    //   icon: { name: "user", library: "hsk" },
+    //   position: 4,
+    //   disabled: false,
+    //   atShow: null,
+    //   atHide: null,
+    // },
+  },
+});
+
+function handleTabs(e) {
+  // console.dir("hier", e.target)
+  if (e?.detail.name === "confirm") {
+    state.tabs.orderComplete.disabled = false;
+  }
+}
+
+onBeforeMount(async () => {
+  await cartStore.init();
+  await cartStore.getAdressStructure();
+
+  console.log("debug init exampleusage :", cartStore.state.basketRootNode);
+});
+</script>

package/src/components/order/process/OrderComplete.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="bind">
+    <h1 class="headline">Vielen Dank für Ihre Bestellung</h1>
+    <br>
+    <p class="paragraph">
+      <strong>Ihre Bestellnummer:</strong> 123345670
+    </p>
+    <p class="paragraph">
+      Wir haben Ihre Bestellung erhalten und werden diese schenllstmöglich bearbeiten.<br>
+      Sie erhalten in wenigen Minuten eine Bestätigung per E-Mail.
+
+      <div class="btn-wrap">
+        <sl-button size="medium">
+          Zur Startseite
+        </sl-button>
+
+        <sl-button variant="primary"
+                   size="medium">
+          Weiter Einkaufen
+        </sl-button>
+      </div>
+    </p>
+
+  </div>
+</template>
+
+<script setup></script>
+
+<style scoped>
+
+.btn-wrap{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  width: 100%;
+
+  margin-top: var(--sl-spacing-x-large);
+}
+
+</style>

package/src/components/order/process/OrderTabHeader.vue

@@ -0,0 +1,7 @@
+<template>
+
+  HALLO
+</template>
+
+<script setup>
+</script>

package/src/components/order/process/OrderView.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="bind viur-shop-wrap">
+    <sl-tab-group
+      class="viur-shop-order-tab"
+      noScrollControls
+      @sl-tab-show="onTabChange"
+      ref="tabGroup"
+    >
+      <sl-tab
+        slot="nav"
+        :panel="tab"
+        v-for="(tab, index) in state.tabNames"
+        :key="tab"
+        :disabled="tabs[tab].disabled"
+      >
+        <div class="viur-shop-order-step">
+          <sl-icon
+            :name="tabs[tab].icon.name"
+            :library="tabs[tab].icon.library"
+          >
+          </sl-icon>
+          <div class="viur-shop-order-status-text">
+            {{ index + 1 }}. {{ tabs[tab].displayName }}
+          </div>
+        </div>
+        <sl-icon
+          name="chevron-right"
+          class="viur-shop-order-tab-check"
+          v-if="index < state.tabNames.length - 1"
+        ></sl-icon>
+      </sl-tab>
+
+      <sl-tab-panel
+        :name="tab"
+        v-for="(tab, index) in state.tabNames"
+        :key="tab"
+      >
+        <component
+          :is="tabs[tab].component"
+          v-bind="tabs[tab].props ? tabs[tab].props : ''"
+        >
+        </component>
+        <div
+          class="viur-shop-form-footer"
+          :class="{ 'flex-end': state.isFirstTab(index) }"
+          v-if="index !== state.tabNames.length - 1"
+        >
+          <sl-button type="submit" v-show="index !== 0" @click="prevTab(state.tabNames[index-1])">
+            Zurück
+          </sl-button>
+          <!-- :disabled="!state.requiredFieldsFilled" -->
+          <sl-button type="submit" variant="primary" @click="nextTab(state.tabNames[index+1])">
+            Weiter
+          </sl-button>
+        </div>
+      </sl-tab-panel>
+    </sl-tab-group>
+
+    <div class="viur-shop-sidebar" id="order_sidebar"></div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, computed, ref } from "vue";
+
+const props = defineProps({
+  tabs: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(["tabChange"]);
+
+const state = reactive({
+  tabNames: computed(() => sortTabs(props.tabs)),
+  isFirstTab: (index) => {
+    if (index === 0) {
+      return true;
+    }
+    return false;
+  },
+});
+
+const tabGroup = ref(null);
+
+function sortTabs(tabs) {
+  let sortedArray = [];
+  let outputArray = [];
+
+  for (const tab in tabs) {
+    if (tabs[tab].position) {
+      sortedArray.push([tab, tabs[tab].position]);
+    } else {
+      sortedArray.push([tab, 0]);
+    }
+  }
+
+  sortedArray.sort((a, b) => {
+    return a[1] - b[1];
+  });
+
+  sortedArray.forEach((tab) => {
+    outputArray.push(tab[0]);
+  });
+
+  return outputArray;
+}
+
+function onTabChange(e) {
+  emit("tabChange", e);
+}
+
+
+function prevTab(tabName) {
+  tabGroup.value.show(tabName);
+}
+
+function nextTab(tabName) {
+  tabGroup.value.show(tabName);
+}
+</script>
+
+<style scoped>
+.viur-shop-wrap {
+  flex-direction: row;
+  gap: var(--sl-spacing-x-large);
+  align-items: flex-start;
+}
+
+.viur-shop-sidebar {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--sl-color-neutral-100);
+  min-width: 300px;
+  padding: var(--sl-spacing-medium);
+  position: sticky;
+  top: 0;
+}
+
+.viur-shop-order-tab {
+  sl-tab {
+    width: 25%;
+
+    &::part(base) {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      position: relative;
+      color: var(--sl-color-neutral-400);
+    }
+
+    &[aria-selected="true"]::part(base) {
+      color: var(--ignt-color-primary) !important;
+    }
+  }
+}
+
+.viur-shop-order-step {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+
+  @media (--ignt-mq-max-break-small) {
+    justify-content: center;
+  }
+
+  sl-icon {
+    font-size: 2.5em;
+    margin-bottom: 10px;
+
+    @media (--ignt-mq-max-break-small) {
+      display: none;
+    }
+  }
+}
+
+.viur-shop-order-tab-check {
+  position: absolute;
+  right: -0.5em;
+
+  @media (--ignt-mq-max-break-small) {
+    font-size: 0.7em;
+    right: -0.35em;
+    top: calc(50% - 0.35em);
+  }
+}
+
+.viur-shop-order-status-text {
+  font-size: 0.8em;
+  color: inherit;
+  text-align: center;
+  margin-top: 0.6em;
+  white-space: initial;
+}
+
+.viur-shop-form-footer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: var(--sl-spacing-large);
+}
+.flex-end {
+  justify-content: flex-end;
+}
+</style>

package/src/router/index.js

@@ -0,0 +1,103 @@
+// @ts-nocheck
+import { createRouter, createWebHashHistory } from "vue-router";
+import ViewMissing from "../views/ViewMissing.vue";
+
+const default_routes = [
+  {
+    path: "/:pathMatch(.*)*",
+    name: "view_missing",
+    component: ViewMissing,
+  },
+  {
+    path: "/shop/category/:identifier",
+    name: "CategoryView",
+    component: () => import("../components/order/category/CategoryView.vue"),
+  },
+  {
+    path: "/shop/item/:item",
+    name: "itemView",
+    component: () => import("../components/order/item/ItemView.vue"),
+  },
+  {
+    path: "/shop/cart/view",
+    name: "CartView",
+    component: () => import("../components/cart/CartView.vue"),
+  },
+  {
+    path: "/shop/order/",
+    name: "OrderView",
+    component: () => import("../components/order/process/ExampleUsage.vue"),
+  },
+  {
+    path: "/shop/order/confirm",
+    name: "ConfirmView",
+    component: () => import("../components/cart/ConfirmView.vue"),
+  },
+];4
+
+function createRouterInstance(routes, replace = false) {
+  let newRoutes = [];
+  if (replace) {
+    newRoutes = routes;
+  } else {
+    newRoutes = routes.concat(default_routes);
+  }
+
+  const router = createRouter({
+    // @ts-ignore
+    history: createWebHashHistory(import.meta.env.BASE_URL),
+    routes: newRoutes,
+  });
+
+  // router.afterEach((to, from) => {
+  //   //useUserStore().addAction();
+  // });
+
+  // router.beforeEach((to, from, next) => {
+  //   const contextStore = useContextStore();
+  //   let localContext = {};
+  //   let handlerId = to.query["_"]?.toString();
+  //   if (!handlerId) next();
+  //   if (Object.keys(contextStore.state.localContext).includes(handlerId)) {
+  //     localContext = contextStore.state.localContext[handlerId];
+  //   }
+  //   let newQuery = {
+  //     ...contextStore.state.globalContext,
+  //     ...localContext,
+  //     ...to.query,
+  //   };
+  //   if (
+  //     Object.keys(to.query).every(
+  //       (key) =>
+  //         to.query[key] === newQuery[key] &&
+  //         to.query.hasOwnProperty(key) &&
+  //         newQuery.hasOwnProperty(key),
+  //     ) &&
+  //     Object.keys(newQuery).every(
+  //       (key) =>
+  //         to.query[key] === newQuery[key] &&
+  //         to.query.hasOwnProperty(key) &&
+  //         newQuery.hasOwnProperty(key),
+  //     )
+  //   ) {
+  //     //disabled because of to much context copy and updates
+  //     // Writes query to context
+  //     /*
+  //     for (const [k, v] of Object.entries(to.query)) {
+  //       if (k.startsWith("_")) continue
+  //       if (Object.keys(contextStore.state.localContext).includes(handlerId)) {
+  //         contextStore.state.localContext[handlerId][k] = v
+  //       } else {
+  //         contextStore.state.localContext[handlerId] = { [k]: v }
+  //       }
+  //     }*/
+  //     next(); // no change
+  //   } else {
+  //     to.query = newQuery;
+  //     next(to);
+  //   }
+  // });
+  return router;
+}
+
+export default createRouterInstance;