@viur/shop-components 0.1.9 → 0.1.10

package/package.json

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

package/src/Shop.vue

@@ -88,13 +88,15 @@ const props = defineProps({
       default:'shop'
     },
     debug:false,
-    showCartNodes:false
+    showCartNodes:false,
+    topActions:false
 })
 
 
 onBeforeMount(()=>{
     shopStore.state.showNodes = props.showCartNodes
     shopStore.state.debug = props.debug
+    shopStore.state.topActions = props.topActions
     if(props.tabs){
         shopStore.state.tabs = props.tabs
     }

package/src/ShopOrderStepper.vue

@@ -13,8 +13,27 @@
             <sl-tab-panel :name="name">
                 <template v-if="tab?.['loaded']">
 
-
                     <component :is="tab['component']" :params="tab['params']">
+                      <template #top_actions="slotProps">
+                        <sl-bar class="viur-shop-stepper-bar">
+                          <div v-if="slotProps.left" slot="left" :id="slotProps.left"></div>
+                          <div slot="right">
+                            <span v-if="slotProps.hint" class="hint">{{ slotProps.hint }}</span>
+                            <sl-button
+                              :class="{'action-button-hint':slotProps.hint}"
+                              variant="success"
+                              size="large"
+                              :disabled="active(slotProps)"
+                              @click="nextStep(slotProps)"
+                              :loading="tab['validating']"
+                            >
+                              {{slotProps.nextName}}
+                              <sl-icon slot="suffix" name="chevron-right"></sl-icon>
+                            </sl-button>
+                          </div>
+                        </sl-bar>
+                      </template>
+
                       <template #['template_'+name]>
                         <slot :name="'template_'+name"></slot>
                       </template>

package/src/Steps/ShopCart.vue

@@ -1,4 +1,11 @@
 <template>
+    <slot name="top_actions"  v-if="shopStore.state.topActions"
+        :nextName="$t('shop.proceed-checkout')"
+        :activefunction="()=>state.items.length>0"
+        :nextfunction="nextStep"
+    >
+    </slot>
+
     <loading-handler :isLoading="cartState.isLoading" :isUpdating="cartState.isUpdating">
         <div class="viur-shop-item-wrapper" v-if="state.items.length>0">
             <cart-item v-for="item in state.items" :item="item"

package/src/Steps/ShopPaymentProvider.vue

@@ -1,4 +1,11 @@
 <template>
+  <slot name="top_actions"  v-if="shopStore.state.topActions"
+      nextName="weiter"
+      :activefunction="()=>shopStore.state.order?.['payment_provider']"
+      :nextfunction="()=>true"
+  >
+  </slot>
+
   <sl-radio-group :value="state.selection">
     <sl-details-group>
 

package/src/Steps/ShopShippingMethod.vue

@@ -1,4 +1,11 @@
 <template>
+  <slot name="top_actions"  v-if="shopStore.state.topActions"
+        nextName="weiter"
+        :activefunction="()=>shopStore.state.cartRoot?.['shipping']"
+        :nextfunction="()=>nextStep"
+    >
+    </slot>
+
   <loading-handler :isLoading="shippingState.isLoading" :hasError="shippingState.hasError" :errorMessage="shippingState.errorMessage">
 
     <card-selector :options="shippingState.shippingData"

package/src/Steps/ShopUserDataGuest.vue

@@ -1,4 +1,12 @@
 <template>
+    <slot name="top_actions" v-if="shopStore.state.topActions"
+        nextName="weiter"
+        :activefunction="()=>true"
+        :nextfunction="nextStep"
+        :hint="$t('messages.order_check_later')"
+    >
+    </slot>
+
     <div class="viur-shop-user-data-headline">
         {{ $t("skeleton.address.address_type.billing") }}
     </div>

package/src/shop.js

@@ -20,6 +20,7 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
             return `${state.hostUrl}/json/${state.moduleName}/api`
         }),
         debug:false,
+        topActions:false,
         //default Tabs
         tabs:{
             cart: {
@@ -243,6 +244,9 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
         })
     }
 
+
+
+    
     return {
         state,
         navigateToTab,
@@ -253,6 +257,5 @@ export const useViurShopStore = defineStore("viurshopStore", () => {
         checkoutOrder,
         addTab,
         removeTab
-
     }
 })