@viur/shop-components 0.0.1-dev.3 → 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

@@ -0,0 +1,83 @@
+<template>
+    <RouterLink :to="{ name: 'CategoryView', params: { identifier: 'dk' } }"
+                v-for="item in list"
+                :key="item"
+                class="viur-shop-category-list-item-link"
+    >
+      <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="viur-shop-category-list-item-img"
+        />
+        <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>
+</template>
+
+<script setup>
+import { onBeforeMount } from "vue";
+import ItemCard from "../item/ItemCard.vue";
+import { useCartStore } from "../../../stores/cart";
+
+const cartStore = useCartStore();
+const props = defineProps({
+  list: { type: Array, required: true },
+});
+
+onBeforeMount(async () => {
+  await cartStore.init();
+});
+</script>
+
+<style scoped>
+
+.viur-shop-category-list-item-link{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  &:hover{
+    .viur-shop-category-list-fake-link{
+      text-decoration: underline;
+    }
+
+    .viur-shop-category-list-item-img{
+      transform: scale(1.02);
+    }
+ }
+}
+
+.viur-shop-category-list-item{
+  width: 100%;
+
+  &::part(header){
+    padding: var(--sl-spacing-medium) 0;
+   }
+
+  &::part(body){
+    padding: var(--sl-spacing-medium) 0;
+   }
+
+  &::part(footer){
+    padding: var(--sl-spacing-medium) 0;
+   }
+}
+
+.viur-shop-category-list-item-headline{
+  font-size: 1.4em;
+  margin-bottom: var(--sl-spacing-medium);
+  color: var(--ignt-basic-color-text);
+}
+
+.viur-shop-category-list-item-img{
+  aspect-ratio: 1;
+  object-fit: cover;
+  transition: all ease .3s;
+ }
+
+
+</style>

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

@@ -0,0 +1,143 @@
+<template>
+  <div class="viur-shop-loading-wrap" v-if="state.loading">
+    <sl-spinner></sl-spinner>
+  </div>
+
+  <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>
+import { onMounted, reactive, computed } from "vue";
+import { useCartStore } from "../../../stores/cart";
+import { useRoute } from "vue-router";
+import { Request, ListRequest } from "@viur/vue-utils";
+// import { ViURShopClient } from "@viur/viur-shop-client";
+
+// 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();
+
+const state = reactive({
+  skellist: [],
+  loading: true,
+  currentCursor: "",
+  isLastItem: false,
+  itemCount: 99,
+  itemType: computed(() => route.params.identifier),
+});
+
+const categoryList = props.listHandler;
+
+function listItems() {
+  let params = {
+    limit: state.itemCount,
+    cursor: state.currentCursor,
+    type: state.itemType,
+  };
+
+  state.loading = true;
+
+  Request.get("/json/variante/list", { dataObj: params }).then(async (resp) => {
+    let data = await resp.json();
+
+    if (data.cursor !== state.currentCursor && !state.isLastItem) {
+      state.currentCursor = data.cursor;
+      state.skellist.push(...data.skellist);
+      state.loading = false;
+    } else if (data.cursor === state.currentCursor) {
+      state.isLastItem = true;
+      state.loading = false;
+    }
+
+    console.log("hier", data);
+  });
+}
+
+async function loadMore() {
+  state.loading = true;
+  await categoryList.next();
+
+  if (state.skellist.length < categoryList.state.skellist.length) {
+    state.skellist = categoryList.state.skellist;
+    state.loading = false;
+  } else {
+    state.loading = false;
+    state.isLastItem = true;
+  }
+}
+
+onMounted(async () => {
+  await cartStore.init();
+  await categoryList.fetch(true);
+  state.skellist = categoryList.state.skellist;
+  state.loading = false;
+
+  // await cartStore.init();
+});
+</script>
+
+<style scoped>
+.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>