@viur/shop-components 0.0.1-dev.20 → 0.0.1-dev.21

package/package.json

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

package/src/components/cart/CartLeaf.vue

@@ -1,7 +1,13 @@
 <template>
-  <div>test</div>
+  <pre>{{ leaf }}</pre>
 </template>
 
-<script setup></script>
+<script setup>
+import { computed, reactive } from "vue";
 
-<style scoped></style>
+const props = defineProps({
+  leaf: { type: Object, required: true },
+});
+
+const state = reactive({});
+</script>

package/src/components/cart/CartNode.vue

@@ -1,17 +1,17 @@
 <template>
-  <h1>{{ state.headline }}</h1>
+  <pre>{{ state.headline }}</pre>
 </template>
 
 <script setup>
 import { computed, reactive } from "vue";
 
 const props = defineProps({
-  headline: { type: String, default: "TEST" },
+  node: { type: Object, required: true },
 });
 
 const state = reactive({
   headline: computed(() => {
-    props.headline;
+    props.node;
   }),
 });
 </script>

package/src/components/cart/CartView.vue

@@ -1,7 +1,20 @@
 <template>
   <Loader v-if="!cartKey.length"></Loader>
   <template v-else>
-    <pre> {{ state.nodes }}</pre>
+    <div v-for="node in state.nodes">
+      <template
+        v-if="Object.keys(state.leaves).includes(node.key)"
+        :key="node.key"
+      >
+        <CartNode :node="node"> </CartNode>
+        <CartLeaf
+          v-for="leaf in state.leaves[node.key]"
+          :key="leaf.key"
+          :leaf="leaf"
+        >
+        </CartLeaf>
+      </template>
+    </div>
     <pre> {{ state.leaves }}</pre>
   </template>
 

package/src/stores/cart.js

@@ -19,8 +19,6 @@ export const useCartStore = defineStore("cartstore", () => {
   });
 
   async function init() {
-    // ! initializes only children for cart of type basket
-    // ! for whishlists this has to be done in the component
     await getRootNodes();
   }