@viur/shop-components 0.0.1-dev.10 → 0.0.1-dev.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viur/shop-components",
-  "version": "0.0.1-dev.10",
+  "version": "0.0.1-dev.12",
   "description": "Frontend Vue components for the shop module of ViUR",
   "repository": {
     "type": "git",

package/src/components/cart/CartLeaf.vue

@@ -0,0 +1,11 @@
+<template>
+<div>test</div>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped>
+
+</style>

package/src/components/cart/CartView.vue

@@ -1,6 +1,8 @@
 <template>
-  <Loader v-if="!state.cartIsInit"></Loader>
-  <pre v-else> {{ cartStore.state }}</pre>
+  <pre> {{ state.nodes }}</pre>
+  <pre> {{ state.leaves }}</pre>
+  <!-- <CartNode></CartNode>
+  <CartLeaf></CartLeaf> -->
   <!-- <template v-else>
     <div class="bind viur-shop-cart-wrap">
       <sl-dialog ref="confirm" @sl-hide="onDialogHide">
@@ -233,11 +235,12 @@
 import { reactive, computed, onBeforeMount, ref } from "vue";
 import Loader from "@viur/vue-utils/generic/Loader.vue";
 import { useCartStore } from "../../stores/cart.js";
-import { Request } from "@viur/vue-utils";
+import CartNode from "./CartNode.vue";
+import CartLeaf from "./CartLeaf.vue";
 
 const props = defineProps({
   mode: { type: String, default: "basket" },
-  cartKey: { type: String, default: "" },
+  cartKey: { type: String, required: true },
   sidebar: { type: Boolean, default: true },
 });
 
@@ -254,6 +257,8 @@ const state = reactive({
   }),
   images: {},
   currentItem: {},
+  nodes: [],
+  leaves: {},
 });
 
 const currentCartKey = computed(() => {
@@ -308,8 +313,29 @@ function onDialogHide() {
   state.currentItem = {};
 }
 
+async function getChildren(parentKey = props.key) {
+  const children = await cartStore.getChildren(parentKey);
+
+  children.forEach(async (child) => {
+    if (child.skel_type === "node") {
+      state.nodes.push(child);
+      await getChildren(child.key);
+    } else {
+      if (!Object.keys(state.leaves).includes(parentKey)) {
+        state.leaves[parentKey] = [];
+      }
+      state.leaves[parentKey].push(child);
+    }
+  });
+}
+
 onBeforeMount(async () => {
   await cartStore.init();
+  await getChildren();
+
+  console.log("state.nodes", state.nodes);
+
+  console.log("state.leaves", state.leaves);
 });
 </script>
 

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

@@ -21,7 +21,11 @@ const state = reactive({
   tabs: {
     cart: {
       component: shallowRef(CartView),
-      props: { sidebar: true, mode: "basket" },
+      props: {
+        sidebar: true,
+        mode: "basket",
+        cartKey: cartStore.state.basketRootNode.key,
+      }, // 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,
@@ -95,6 +99,7 @@ function handleTabs(e) {
 }
 
 onBeforeMount(async () => {
+  await cartStore.init();
   await cartStore.getAdressStructure();
 });
 </script>

package/src/stores/cart.js

@@ -33,9 +33,9 @@ export const useCartStore = defineStore("cartstore", () => {
         await getChildren(child.key);
       } else {
         if (!Object.keys(state.children).includes(child.key)) {
-          children[parentKey] = [];
+          state.children[parentKey] = [];
         }
-        children[parentKey].push(child);
+        state.children[parentKey].push(child);
       }
     });
   }
@@ -48,7 +48,7 @@ export const useCartStore = defineStore("cartstore", () => {
         if (rootNode.cart_type === "basket") {
           state.basketRootNode = rootNode;
         } else {
-          whishlistRootNodes.push(rootNode);
+          state.whishlistRootNodes.push(rootNode);
         }
       }
     });