@viur/shop-components 0.1.18 → 0.1.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viur/shop-components",
-  "version": "0.1.18",
+  "version": "0.1.19",
   "description": "Frontend Vue components for the shop module of ViUR",
   "repository": {
     "type": "git",

package/src/Shop.vue

@@ -3,7 +3,7 @@
         <div class="viur-shop-stepper-wrap"
             :class="{ 'full-width': (!summary || summary==='bottom' || shopStore.state.currentTab==='complete') }"
         >
-            <shop-order-stepper >
+            <shop-order-stepper>
               <template #template_cart>
                 <slot name="template_cart"></slot>
               </template>
@@ -53,7 +53,7 @@
           paid: {{ shopStore.state.order?.['is_paid'] }}<br><br>
 
           OrderObject: {{shopStore.state.order}}
-        
+
       </sl-details>
     </template>
     <div id="dialogs"></div>

package/src/ShopSummary.vue

@@ -27,7 +27,7 @@
       <sl-format-number lang="de" type="currency" currency="EUR" :value="state.shippingTotal">
       </sl-format-number>
     </div>
-    <div class="viur-shop-cart-shipping-item" v-if="shopStore.state.order?.cart?.dest?.shipping">
+    <div class="viur-shop-cart-sidebar-info viur-shop-cart-shipping-item" v-if="shopStore.state.order?.cart?.dest?.shipping">
       <span v-html="$t('viur.shop.summary_delivery_time')"></span>
       <span>
         {{
@@ -94,11 +94,9 @@ const state = reactive({
   }),
   shippingTotal: computed(() => {
     let total = 0
-
-    // let hasOrder = Object.keys(shopStore.state.order).length ? true : false
-    // let hasShipping = Object.keys(shopStore.state.order.cart.dest.shipping).length ? true : false
-
-    if( shopStore.state?.order?.cart?.dest?.shipping?.dest?.shipping_cost > 0 ) {
+    if (shopStore.state.cartRoot.shipping?.dest?.shipping_cost>=0 ){
+      total += shopStore.state.cartRoot.shipping?.dest?.shipping_cost
+    }else if( shopStore.state?.order?.cart?.dest?.shipping?.dest?.shipping_cost) {
       total += shopStore.state.order.cart.dest.shipping.dest.shipping_cost
     }
 
@@ -150,7 +148,7 @@ function calc_percent(val){
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
-  span {
+  span:first-of-type {
     margin-right: auto;
   }
 }

package/src/Steps/ShopCart.vue

@@ -65,7 +65,6 @@ onBeforeMount(()=>{
 async function nextStep(){
     try{
         let resp = await addOrUpdateOrder()
-        console.log(resp)
         return true
 
     } catch(error){

package/src/Steps/ShopOrderConfirm.vue

@@ -71,9 +71,9 @@
   <component :is="params['additionalComponent']" v-if="params['additionalComponent']" ref="additionalComponent">
   </component>
 
-  <div class="wrapper">
-    <sl-button size="small" @click="startCheckout" :disabled="!shopStore.state.canCheckout" variant="success">{{ $t('viur.shop.order_pay') }}</sl-button>
-  </div>
+  <sl-bar class="wrapper">
+    <sl-button slot="right" size="large" @click="startCheckout" :disabled="!shopStore.state.canCheckout" variant="success">{{ $t('viur.shop.order_pay') }}</sl-button>
+  </sl-bar>
 
   <template v-if="shopStore.state.order?.['payment_provider'] !== null && shopStore.state.order?.['payment_provider'].startsWith('unzer-')">
     <sl-dialog v-if="state.paymentPopup" label="Zahlung" :open="state.paymentPopup" @sl-after-hide="state.paymentPopup=false">

package/src/Steps/ShopShippingMethod.vue

@@ -13,7 +13,7 @@
                     @change="updateShippingMethod"
     >
       <template v-slot="{option, index}">
-          <img slot="image">
+          <!--<img slot="image">-->
 
           <sl-format-number lang="de" type="currency" currency="EUR" :value=" option['dest']['shipping_cost']" v-if="option['dest']['shipping_cost']">
           </sl-format-number>

package/src/components/CardSelector.vue

@@ -37,7 +37,7 @@ function changeSelection(i){
         state.currentSelection = i
         selection.value = props.options[i]
     }
-    emits("change", selection.value)
+    emits("change", props.options[i])
 }
 
 onMounted(()=>{
@@ -50,19 +50,24 @@ onMounted(()=>{
 </script>
 
 <style scoped>
-sl-card{
-    width: 100%;
-    &[selected]::part(base){
-        border:1px solid var(--sl-color-primary-500);
-        box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
-    }
+sl-radio-group {
+  margin-top: var(--ignt-spacing-small);
+}
 
-   &::part(body){
-     display:flex;
-     flex-direction: row;
-        justify-content: space-between;
-        align-items: center;
-   }
+sl-card {
+  width: calc(100% - 6px);
+  margin-left: 3px;
+  &[selected]::part(base){
+    border:1px solid var(--sl-color-primary-500);
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
+  }
+
+  &::part(body){
+    display:flex;
+    flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+  }
 }
 
-</style>
+</style>

package/src/components/CartItemSmall.vue

@@ -183,17 +183,18 @@ function removeArticle(){
   }
 
   .viur-shop-cart-leaf-article-number {
-    align-self: center;
+    align-self: flex-end;
     grid-column: span 2;
   }
 
   .viur-shop-cart-leaf-quantity {
-    align-self: center;
+    align-self: flex-end;
   }
 
   .viur-shop-cart-leaf-unitprice {
-    align-self: center;
+    align-self: flex-end;
     grid-column: 4 / span 1;
+    text-align: right;
   }
 
   .viur-shop-cart-leaf-label,