@viur/shop-components 0.0.1-dev.58 → 0.0.1-dev.60

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

@@ -0,0 +1,168 @@
+<template>
+  <sl-card class="viur-shop-item-card-card">
+    <img
+      slot="image"
+      :src="getImage(item)"
+      :alt="item.shop_name"
+      loading="lazy"
+      class="viur-shop-item-card-image"
+    />
+    <h3 class="viur-shop-item-card-headline">{{ item.shop_name }}</h3>
+    <h4 class="viur-shop-item-card-subline">B 21 x H 6,5 x T 19 cm</h4>
+    <div class="viur-shop-item-card-price">{{ item.shop_price_retail }} €</div>
+    <div class="viur-shop-item-card-footer" slot="footer">
+      <!-- <sl-button-group label="Amount">
+              <sl-tooltip content="Remove">
+                <sl-icon-button
+                  variant="primary"
+                  name="cart-dash"
+                  label="Remove Amount"
+                  style="font-size: 2em"
+                >
+                </sl-icon-button>
+              </sl-tooltip>
+              <sl-tooltip content="Plus">
+                <sl-icon-button
+                  variant="primary"
+                  name="cart-plus"
+                  label="Add Amount"
+                  style="font-size: 2em"
+                >
+                </sl-icon-button>
+              </sl-tooltip>
+              <sl-tooltip content="Add to cart">
+                <sl-icon-button
+                  variant="primary"
+                  name="cart-check"
+                  label="Add to cart"
+                  style="font-size: 2em"
+                  @click="
+                    cartStore.addToCart(item.key, cartStore.state.currentCart)
+                  "
+                >
+                </sl-icon-button>
+              </sl-tooltip>
+            </sl-button-group> -->
+      <sl-button
+        size="small"
+        class="viur-shop-item-card-add-to-cart-btn"
+        variant="primary"
+        title="Add to cart"
+        @click.stop="cartStore.addToCart(item.key, cartStore.state.basket)"
+      >
+        <sl-icon name="bag-plus" slot="prefix"></sl-icon>
+
+        In den Warenkorb
+      </sl-button>
+
+      <sl-button
+        size="small"
+        outline
+        class="viur-shop-item-card-add-to-favourites-btn"
+        variant="primary"
+        title="Add to favourites"
+      >
+        <sl-icon name="heart" slot="prefix"></sl-icon>
+      </sl-button>
+    </div>
+  </sl-card>
+</template>
+
+<script setup>
+import { Request } from "@viur/vue-utils";
+import { useCartStore } from "../../../stores/cart";
+
+const props = defineProps({
+  item: {
+    type: Object,
+    required: true,
+  },
+});
+
+const cartStore = useCartStore();
+
+function getImage(item) {
+  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;
+}
+</script>
+
+<style scoped>
+.viur-shop-item-card-card {
+  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;
+  }
+
+  &:hover {
+    .viur-shop-item-card-add-to-cart-btn {
+      opacity: 1;
+    }
+
+    .viur-shop-item-card-headline {
+      color: var(--sl-color-primary-500);
+    }
+
+    .viur-shop-item-card-image {
+      transform: scale(1.02);
+    }
+  }
+}
+
+.viur-shop-item-card-footer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+}
+
+.viur-shop-item-card-add-to-cart-btn {
+  transition: all ease 0.3s;
+  margin-right: var(--sl-spacing-medium);
+  opacity: 0;
+}
+
+.viur-shop-item-card-add-to-favourites-btn {
+  margin-left: auto;
+}
+
+.viur-shop-item-card-image {
+  aspect-ratio: 1;
+  object-fit: cover;
+  transition: all ease 0.3s;
+}
+
+.viur-shop-item-card-headline {
+  font-size: 1.1em;
+  font-weight: bold;
+  color: var(--ignt-basic-color-text);
+  margin-bottom: var(--sl-spacing-2x-small);
+  transition: all ease 0.3s;
+}
+
+.viur-shop-item-card-subline {
+  color: var(--ignt-basic-color-text);
+  margin-bottom: var(--sl-spacing-2x-small);
+}
+
+.viur-shop-item-card-price {
+  font-size: 1.1em;
+  font-weight: bold;
+  color: var(--ignt-basic-color-text);
+  margin-left: auto;
+}
+</style>

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

@@ -0,0 +1,232 @@
+<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) {
+  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/ConfirmView.vue

@@ -0,0 +1,312 @@
+<template>
+  <Loader v-if="!state.cartIsInit"></Loader>
+
+  <template v-else>
+
+    <div class="list">
+      <h2 class="viur-shop-cart-headline headline">Bestellung prüfen</h2>
+      <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>
+          {{ cartStore.state.shippingAddress.firstname }} {{ cartStore.state.shippingAddress.lastname }}<br/>
+          {{ cartStore.state.shippingAddress.street_name }} {{ cartStore.state.shippingAddress.street_number }}<br/>
+          {{ cartStore.state.shippingAddress.zip_code }} {{ cartStore.state.shippingAddress.city }}
+          {{ cartStore.state.shippingAddress.country }}<br/>
+
+          <br/>
+          ##TODO MAIL<br/>
+          ##TODO Phone
+        </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>
+          {{ cartStore.state.billingAddress.firstname }} {{ cartStore.state.billingAddress.lastname }}<br/>
+          {{ cartStore.state.billingAddress.street_name }} {{ cartStore.state.billingAddress.street_number }}<br/>
+          {{ cartStore.state.billingAddress.zip_code }} {{ cartStore.state.billingAddress.city }}
+          {{ cartStore.state.billingAddress.country }}<br/>
+          <br/>
+          ##TODO MAIL<br/>
+          ##TODO Phone
+
+        </div>
+
+      </div>
+
+      <div class="viur-shop-cart-payment">
+        <div class="viur-shop-cart-payment-method">
+          <span>Zahlungsmethode:</span>
+          {{ state.selectedPaymentProvider }}
+        </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>
+
+      <CartView :in-order-confirm="true"></CartView>
+
+ <sl-checkbox @sl-change="onTosAccept">
+          Ich akzeptiere die geltenden AGBs und Datenschutzbestimmungen
+        </sl-checkbox>
+
+        <div class="viur-shop-cart-sidebar-btn-wrap" v-if="state.showOrderButton">
+          <sl-button
+            :variant="state.showOrderButton ? 'info' : 'disabled'"
+            size="small"
+            :disabled="!state.showOrderButton"
+            @click="addOrder"
+          >
+            Zahlungspflichtig bestellen
+          </sl-button>
+        </div>
+      <teleport to="#order_sidebar" v-show="false"><!--TOO-->
+        <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?.basket ? cartStore.state.carts[cartStore.state.basket].info.total : "00,00" }} €
+        </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?.basket ? cartStore.state.carts[cartStore.state.basket].info.total : "00" }} €
+        </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";
+import CartView from "../../cart/CartView.vue";
+
+const cartStore = useCartStore();
+
+// const searchWarning = ref()
+const state = reactive({
+  cartIsInit: computed(() => {
+    return true
+  }),
+  itemsIsInit: computed(() => {
+    return !!cartStore.state?.carts[cartStore.state.basket].items;
+  }),
+  selectedPaymentProvider: computed(() => {
+    /* fixme  this compute generates an error
+      Uncaught (in promise) TypeError: Cannot set properties of null (setting '__vnode')
+      but the value is correct.
+     */
+    return cartStore.state?.selectedPaymentProvider.title;
+
+
+  }),
+  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) {
+  state.showOrderButton = e.target.checked;
+}
+function addOrder()
+{
+  console.log("start order add");
+  cartStore.orderAdd();
+}
+
+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;
+  }
+}
+
+.viur-shop-cart-headline {
+  margin: 0 0 var(--sl-spacing-x-large) 0;
+  font-size: var(--shop-form-headline-size);
+}
+</style>