@viur/shop-components 0.0.1-dev.2 → 0.0.1-dev.4

package/src/components/cart/ConfirmView.vue

@@ -0,0 +1,314 @@
+<template>
+  <Loader v-if="!state.cartIsInit"></Loader>
+
+  <template v-else>
+      <div class="list">
+        <h2 class="viur-shop-cart-headline headline">Bestellung prüfen</h2>
+        <br />
+
+        <div class="viur-shop-cart-address-wrap">
+          <div class="viur-shop-cart-address">
+            <div class="viur-shop-cart-address-headline">
+              Versandadresse
+              <sl-button outline size="small">
+                <sl-icon name="pencil" slot="prefix"></sl-icon>
+              </sl-button>
+            </div>
+            Roland Brose<br />
+            Speicherstraße 33<br />
+            44147 Dortmund, DE<br />
+            <br />
+            rb@mausbrand.de<br />
+            0231 21 34 68 90
+          </div>
+          <div class="viur-shop-cart-address">
+            <div class="viur-shop-cart-address-headline">
+              Rechnungsadresse
+              <sl-button outline size="small">
+                <sl-icon name="pencil" slot="prefix"></sl-icon>
+              </sl-button>
+            </div>
+            Roland Brose<br />
+            Speicherstraße 33<br />
+            44147 Dortmund, DE<br />
+            <br />
+            rb@mausbrand.de<br />
+            0231 21 34 68 90
+          </div>
+        </div>
+
+        <div class="viur-shop-cart-payment">
+          <div class="viur-shop-cart-payment-method">
+            <span>Zahlungsmethode:</span>
+            Paypal
+          </div>
+          <sl-button outline size="small">
+            <sl-icon name="pencil" slot="prefix"></sl-icon>
+          </sl-button>
+        </div>
+
+        <h2 class="viur-shop-cart-headline headline">Warenkorb</h2>
+        <br />
+
+        <sl-card
+          horizontal
+          class="viur-shop-cart-mini-card"
+          v-for="item in cartStore.state.carts[cartStore.state.basket].items"
+        >
+          <img
+            class="viur-shop-cart-mini-card-img"
+            slot="image"
+            :src="getImage(item.article.dest.key)"
+          />
+
+          <div class="viur-shop-cart-mini-cart-header" slot="header">
+            <h4 class="viur-shop-cart-mini-headline headline">{{ item.article.dest.shop_name }} | 425018</h4>
+          </div>
+          <div class="viur-shop-cart-mini-card-body-row">
+            <div class="viur-shop-cart-mini-card-body-info">
+              <div class="viur-shop-cart-mini-card-info-wrap">
+                <div class="viur-shop-cart-mini-card-info">
+                  <span>Anzahl: </span>
+                  1
+                </div>
+                <div class="viur-shop-cart-mini-card-info">
+                  <span>Preis: </span>
+                  {{ item.article.dest.shop_price_recommended }} €
+                </div>
+              </div>
+            </div>
+          </div>
+        </sl-card>
+
+      <teleport to="#order_sidebar">
+        <h2 class="viur-shop-cart-sidebar-headline headline">Jetzt Bestellen</h2>
+        <br />
+        <div class="viur-shop-cart-sidebar-info-line">
+          <span>Zwischensumme</span>
+          {{ cartStore.state.carts[cartStore.state.basket].info.total }} €
+        </div>
+        <div class="viur-shop-cart-sidebar-info-line">
+          <span>Rabatt</span>
+          0 €
+        </div>
+        <div class="viur-shop-cart-sidebar-info-line">
+          <span>Versandkosten</span>
+          0 €
+        </div>
+        <div class="viur-shop-cart-sidebar-info-line total">
+          <span>Gesamt:</span>
+          {{ cartStore.state.carts[cartStore.state.basket].info.total }} €
+        </div>
+
+        <sl-checkbox @sl-change="onTosAccept">
+          Ich akzeptiere die geltenden AGBs und Datenschutzbestimmungen
+        </sl-checkbox>
+
+        <div class="viur-shop-cart-sidebar-btn-wrap">
+          <sl-button
+            :variant="state.showOrderButton ? 'info' : 'disabled'"
+            size="small"
+            :disabled="!state.showOrderButton"
+          >
+            Zahlungspflichtig bestellen
+          </sl-button>
+        </div>
+      </teleport>
+    </div>
+  </template>
+</template>
+
+<script setup>
+import { reactive, onBeforeMount, computed } from "vue";
+import Loader from "@viur/vue-utils/generic/Loader.vue";
+import { useCartStore } from "../../stores/cart.js";
+import { Request } from "@viur/vue-utils";
+
+const cartStore = useCartStore();
+
+// const searchWarning = ref()
+const state = reactive({
+  cartIsInit: computed(() => {
+    return cartStore.state.basket.length ? true : false;
+  }),
+  itemsIsInit: computed(() => {
+    return cartStore.state.carts[cartStore.state.basket].items ? true : false;
+  }),
+  images: {},
+  showOrderButton: false,
+});
+
+function getImage(item) {
+  Request.get(`/json/dk_variante/view/${item}`).then(async (resp) => {
+    let data = await resp.json();
+
+    data = data.values;
+
+    let imageUrl = data.dk_artikel.dest.image
+      ? Request.downloadUrlFor(data.dk_artikel.dest.image)
+      : "https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80";
+
+    state.images[item] = imageUrl;
+  });
+
+  return state.images[item];
+}
+
+function onTosAccept(e) {
+  if (e.target.checked) state.showOrderButton = true;
+  if (!e.target.checked) state.showOrderButton = false;
+}
+
+onBeforeMount(async () => {
+  await cartStore.init();
+});
+</script>
+
+<style scoped>
+
+.viur-shop-cart-sidebar-btn-wrap {
+  display: flex;
+  flex-direction: column;
+  margin-top: var(--sl-spacing-large);
+
+  sl-button {
+    margin-bottom: var(--sl-spacing-x-small);
+  }
+}
+
+sl-alert {
+  margin-top: var(--sl-spacing-medium);
+  margin-bottom: var(--sl-spacing-medium);
+}
+
+sl-tooltip {
+  &::part(body) {
+    line-height: 1.2;
+    font-weight: 400;
+    padding: 10px;
+  }
+}
+
+sl-menu-item {
+  &::part(base) {
+    padding: 0.2em 0.9em 0.2em 0.8em;
+  }
+
+  &::part(checked-icon) {
+    display: none;
+  }
+
+  &::part(prefix) {
+    margin-right: 10px;
+  }
+
+  &::part(suffix) {
+    margin-right: -1.5em;
+  }
+}
+
+.viur-shop-cart-sidebar-info-line {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  margin: var(--sl-spacing-2x-small) 0;
+
+  span {
+    margin-right: auto;
+  }
+
+  &.total {
+    font-weight: 600;
+    border-top: 1px solid var(--sl-color-neutral-300);
+    border-bottom: 1px solid var(--sl-color-neutral-300);
+    padding: var(--sl-spacing-x-small) 0;
+    margin: var(--sl-spacing-small) 0;
+  }
+}
+
+.viur-shop-cart-mini-card {
+  margin-bottom: var(--sl-spacing-x-large);
+
+  &::part(header) {
+    border-bottom: none;
+    padding-top: 0;
+    padding-right: 0;
+  }
+
+  &::part(image) {
+    flex-basis: 25%;
+    max-width: 90px;
+  }
+
+  &::part(body) {
+    display: flex;
+    flex: 1;
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-right: 0;
+  }
+
+  &::part(group) {
+    padding: var(--sl-spacing-small) 0;
+  }
+}
+
+.viur-shop-cart-mini-card-body-row {
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  gap: var(--sl-spacing-large);
+  flex: 1;
+}
+
+.viur-shop-cart-mini-card-body-info {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.viur-shop-cart-mini-card-info-wrap {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--sl-spacing-medium);
+}
+
+.viur-shop-cart-mini-card-info {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+
+  span {
+    margin-right: var(--sl-spacing-x-small);
+    font-weight: 600;
+  }
+}
+
+.viur-shop-cart-address-wrap {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--sl-spacing-x-large);
+  margin-bottom: var(--sl-spacing-x-large);
+}
+
+.viur-shop-cart-address-headline {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 600;
+}
+
+.viur-shop-cart-payment {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--sl-spacing-x-large);
+
+  span {
+    font-weight: 600;
+  }
+}
+</style>

package/src/components/order/category/CategoryList.vue

@@ -2,17 +2,17 @@
     <RouterLink :to="{ name: 'CategoryView', params: { identifier: 'dk' } }"
                 v-for="item in list"
                 :key="item"
-                class="item-link"
+                class="viur-shop-category-list-item-link"
     >
-      <sl-card class="item">
+      <sl-card class="viur-shop-category-list-item">
         <img
           slot="image"
           src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
           alt="A kitten."
-          class="item-img"
+          class="viur-shop-category-list-item-img"
         />
-        <h2 class="item-headline"> {{ item }}</h2>
-        <div class="fake-link">Alle anzeigen &raquo;</div>
+        <h2 class="viur-shop-category-list-item-headline"> {{ item }}</h2>
+        <div class="viur-shop-category-list-fake-link">Alle anzeigen &raquo;</div>
 
       </sl-card>
     </RouterLink>
@@ -29,29 +29,29 @@ const props = defineProps({
 });
 
 onBeforeMount(async () => {
-  // cartStore.init();
+  await cartStore.init();
 });
 </script>
 
 <style scoped>
 
-.item-link{
+.viur-shop-category-list-item-link{
   display: flex;
   flex-direction: column;
   width: 100%;
 
   &:hover{
-    .fake-link{
+    .viur-shop-category-list-fake-link{
       text-decoration: underline;
     }
 
-    .item-img{
+    .viur-shop-category-list-item-img{
       transform: scale(1.02);
     }
  }
 }
 
-.item{
+.viur-shop-category-list-item{
   width: 100%;
 
   &::part(header){
@@ -67,13 +67,13 @@ onBeforeMount(async () => {
    }
 }
 
-.item-headline{
+.viur-shop-category-list-item-headline{
   font-size: 1.4em;
   margin-bottom: var(--sl-spacing-medium);
   color: var(--ignt-basic-color-text);
 }
 
-.item-img{
+.viur-shop-category-list-item-img{
   aspect-ratio: 1;
   object-fit: cover;
   transition: all ease .3s;

package/src/components/order/category/CategoryView.vue

@@ -1,21 +1,40 @@
 <template>
-  <div class="item-list">
-    <router-link
-      v-for="item in state.skellist"
-      :key="item.shop_name"
-      :to="{ name: 'itemView', params: { item: item.key } }"
-    >
-      <ItemCard :item="item"> </ItemCard>
-    </router-link>
+  <div class="viur-shop-loading-wrap" v-if="state.loading">
+    <sl-spinner></sl-spinner>
   </div>
 
-  <sl-button
-    @click="loadMore"
-    :loading="state.loading"
-    :disabled="state.isLastItem"
-  >
-    Mehr anzeigen
-  </sl-button>
+  <div class="bind" v-else>
+    <div class="page-header">
+      <h1>{{ pageHeader }}</h1>
+    </div>
+    <slot name="filter" v-if="filter">
+      text-transform text-transform TEST
+    </slot>
+    <div class="viur-shop-category-view-list">
+      <!-- <router-link
+        v-for="item in state.skellist"
+        :key="item.shop_name"
+        :to="{ name: 'itemView', params: { item: item.key } }"
+      > -->
+
+      <ItemCard
+        v-for="item in state.skellist"
+        :key="item.shop_name"
+        :item="item"
+      >
+      </ItemCard>
+      <!-- </router-link> -->
+    </div>
+
+    <sl-button
+      @click="loadMore"
+      :loading="state.loading"
+      :disabled="state.isLastItem"
+      class="viur-shop-category-view-more-button"
+    >
+      Mehr anzeigen
+    </sl-button>
+  </div>
 </template>
 
 <script setup>
@@ -28,6 +47,13 @@ import { Request, ListRequest } from "@viur/vue-utils";
 // component imports
 import ItemCard from "../item/ItemCard.vue";
 
+const props = defineProps({
+  skellist: { type: Array },
+  filter: { type: Boolean, default: true },
+  pageHeader: { type: String, default: "Artikel Liste" },
+  listHandler: { type: Object, required: true },
+});
+
 const route = useRoute();
 
 const cartStore = useCartStore();
@@ -41,10 +67,7 @@ const state = reactive({
   itemType: computed(() => route.params.identifier),
 });
 
-const categoryList = ListRequest("categorystore", {
-  module: "variante",
-  params: { type: state.itemType, limit: state.itemCount },
-});
+const categoryList = props.listHandler;
 
 function listItems() {
   let params = {
@@ -85,6 +108,7 @@ async function loadMore() {
 }
 
 onMounted(async () => {
+  await cartStore.init();
   await categoryList.fetch(true);
   state.skellist = categoryList.state.skellist;
   state.loading = false;
@@ -94,10 +118,26 @@ onMounted(async () => {
 </script>
 
 <style scoped>
-.item-list {
+.viur-shop-category-view-list {
   display: grid;
   width: 100%;
   grid-gap: var(--sl-spacing-medium);
   grid-template-columns: repeat(4, 1fr);
 }
+
+.viur-shop-loading-wrap {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  sl-spinner {
+    font-size: 3.5em;
+    --track-width: 4px;
+  }
+}
 </style>