diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 92749b7..0e6d39f 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -18,6 +18,6 @@ module.exports = {
     "vue/html-self-closing": 0,
     "no-unused-vars": 1,
     "vue/order-in-components": 0,
-    "vue/no-deprecated-slot-attribute":0,
+    "vue/no-deprecated-slot-attribute": 0
   }
 }
diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
index bf799c6..aaacd99 100644
--- a/.github/workflows/npm-publish.yml
+++ b/.github/workflows/npm-publish.yml
@@ -5,7 +5,7 @@ name: Node.js Package
 
 on:
   push:
-     tags:
+    tags:
       - v*
 
 jobs:
@@ -24,7 +24,6 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_API_TOKEN}}
 
-
   gh-release:
     runs-on: ubuntu-latest
     permissions: write-all
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..4942c74
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,5 @@
+node_modules
+dist
+build
+*.min.js
+package-lock.json
diff --git a/.prettierrc b/.prettierrc
index 12b122c..6af6365 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -7,5 +7,6 @@
   "bracketSpacing": true,
   "bracketSameLine": false,
   "arrowParens": "always",
-  "trailingComma": "none"
+  "trailingComma": "none",
+  "tabWidth": 2
 }
diff --git a/README.md b/README.md
index c94ec30..482c202 100644
--- a/README.md
+++ b/README.md
@@ -13,10 +13,11 @@
 </div>
 
 ### Structure
-* **Main components** have to be exported in `./src/main.js`. Main Components should be in folder `./src/components`.
-* **Ui Elements** for main components should be in `./src/components/ui` so everyone who contributes can see if there is an element/component already for their use.  
-* Components should be as small as possible to make the code easier to access and understand, thats why the directory structure has importance.  
-* Every logic/function according to articles/items/cart or anything else should be in the `cartStore` in `./src/stores/cart.js` - reason is as follows - all components get their data with so called props which are not "reactive" by nature. We want to trigger a rerender if we change/add/edit... items thats why anything according to that should be in the cartStore. Read the cartStore carefully and use the already existing states to grant a clean rerender/reactive process. The props all get updated as soon as the main states get updated in the `cartStore` -> rerender --> profit...
+
+- **Main components** have to be exported in `./src/main.js`. Main Components should be in folder `./src/components`.
+- **Ui Elements** for main components should be in `./src/components/ui` so everyone who contributes can see if there is an element/component already for their use.
+- Components should be as small as possible to make the code easier to access and understand, thats why the directory structure has importance.
+- Every logic/function according to articles/items/cart or anything else should be in the `cartStore` in `./src/stores/cart.js` - reason is as follows - all components get their data with so called props which are not "reactive" by nature. We want to trigger a rerender if we change/add/edit... items thats why anything according to that should be in the cartStore. Read the cartStore carefully and use the already existing states to grant a clean rerender/reactive process. The props all get updated as soon as the main states get updated in the `cartStore` -> rerender --> profit...
 
 Try to understand this structure and adopt it with new components for easy implementation without much effort.
 
diff --git a/package-lock.json b/package-lock.json
index 920a5b4..dec5c5d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,19 +11,19 @@
       "dependencies": {
         "@viur/ignite": "^5.1.2",
         "@viur/shoelace": "^1.0.10-v2.20.0",
-        "@viur/vue-utils": "^3.1.4",
-        "@vueuse/core": "^13.1.0",
+        "@viur/vue-utils": "^3.1.5",
+        "@vueuse/core": "^13.5.0",
         "pinia": "^2.3.1",
-        "vue": "^3.5.13",
-        "vue-i18n": "^11.1.3",
-        "vue-router": "^4.5.0"
+        "vue": "^3.5.17",
+        "vue-i18n": "^11.1.10",
+        "vue-router": "^4.5.1"
       },
       "devDependencies": {
-        "@vitejs/plugin-vue": "^5.2.3",
-        "postcss-custom-media": "^11.0.5",
-        "postcss-nesting": "^13.0.1",
-        "prettier": "^3.5.3",
-        "vite": "^6.2.6"
+        "@vitejs/plugin-vue": "^6.0.0",
+        "postcss-custom-media": "^11.0.6",
+        "postcss-nesting": "^13.0.2",
+        "prettier": "^3.6.2",
+        "vite": "^7.0.5"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -1663,12 +1663,13 @@
       }
     },
     "node_modules/@intlify/core-base": {
-      "version": "11.1.7",
-      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.1.7.tgz",
-      "integrity": "sha512-gYiGnQeJVp3kNBeXQ73m1uFOak0ry4av8pn+IkEWigyyPWEMGzB+xFeQdmGMFn49V+oox6294oGVff8bYOhtOw==",
+      "version": "11.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.1.10.tgz",
+      "integrity": "sha512-JhRb40hD93Vk0BgMgDc/xMIFtdXPHoytzeK6VafBNOj6bb6oUZrGamXkBKecMsmGvDQQaPRGG2zpa25VCw8pyw==",
+      "license": "MIT",
       "dependencies": {
-        "@intlify/message-compiler": "11.1.7",
-        "@intlify/shared": "11.1.7"
+        "@intlify/message-compiler": "11.1.10",
+        "@intlify/shared": "11.1.10"
       },
       "engines": {
         "node": ">= 16"
@@ -1678,11 +1679,12 @@
       }
     },
     "node_modules/@intlify/message-compiler": {
-      "version": "11.1.7",
-      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.1.7.tgz",
-      "integrity": "sha512-0ezkep1AT30NyuKj8QbRlmvMORCCRlOIIu9v8RNU8SwDjjTiFCZzczCORMns2mCH4HZ1nXgrfkKzYUbfjNRmng==",
+      "version": "11.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.1.10.tgz",
+      "integrity": "sha512-TABl3c8tSLWbcD+jkQTyBhrnW251dzqW39MPgEUCsd69Ua3ceoimsbIzvkcPzzZvt1QDxNkenMht+5//V3JvLQ==",
+      "license": "MIT",
       "dependencies": {
-        "@intlify/shared": "11.1.7",
+        "@intlify/shared": "11.1.10",
         "source-map-js": "^1.0.2"
       },
       "engines": {
@@ -1693,9 +1695,10 @@
       }
     },
     "node_modules/@intlify/shared": {
-      "version": "11.1.7",
-      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.1.7.tgz",
-      "integrity": "sha512-4yZeMt2Aa/7n5Ehy4KalUlvt3iRLcg1tq9IBVfOgkyWFArN4oygn6WxgGIFibP3svpaH8DarbNaottq+p0gUZQ==",
+      "version": "11.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.1.10.tgz",
+      "integrity": "sha512-6ZW/f3Zzjxfa1Wh0tYQI5pLKUtU+SY7l70pEG+0yd0zjcsYcK0EBt6Fz30Dy0tZhEqemziQQy2aNU3GJzyrMUA==",
+      "license": "MIT",
       "engines": {
         "node": ">= 16"
       },
@@ -1836,6 +1839,13 @@
         "@codemirror/view": "^6.0.0"
       }
     },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.19",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.19.tgz",
+      "integrity": "sha512-3FL3mnMbPu0muGOCaKAhhFEYmqv9eTfPSJRJmANrCwtgK8VuxpsZDGK+m0LYAGoyO8+0j5uRe4PeyPDK1yA/hA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.44.1",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.44.1.tgz",
@@ -2205,15 +2215,19 @@
       "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA=="
     },
     "node_modules/@vitejs/plugin-vue": {
-      "version": "5.2.4",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.2.4.tgz",
-      "integrity": "sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.0.tgz",
+      "integrity": "sha512-iAliE72WsdhjzTOp2DtvKThq1VBC4REhwRcaA+zPAAph6I+OQhUXv+Xu2KS7ElxYtb7Zc/3R30Hwv1DxEo7NXQ==",
       "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rolldown/pluginutils": "1.0.0-beta.19"
+      },
       "engines": {
-        "node": "^18.0.0 || >=20.0.0"
+        "node": "^20.19.0 || >=22.12.0"
       },
       "peerDependencies": {
-        "vite": "^5.0.0 || ^6.0.0",
+        "vite": "^5.0.0 || ^6.0.0 || ^7.0.0",
         "vue": "^3.2.25"
       }
     },
@@ -2262,9 +2276,9 @@
       }
     },
     "node_modules/@viur/vue-utils": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/@viur/vue-utils/-/vue-utils-3.1.4.tgz",
-      "integrity": "sha512-NW/4fhZN01UMwOYINEL4C5tuEj+YWInV3RrarADK28xJX6UhMc6XGulEVASkTyWWOUob8R1V3CeJe/IId4cZBQ==",
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/@viur/vue-utils/-/vue-utils-3.1.5.tgz",
+      "integrity": "sha512-59EIDB8Q3z0ai3veND1N9WSOFIy0UeT9oC7wfeJ9b1CwKjuqnLGtV9L/kKirvTfh9cPMYsyFTkzumkQX4p3oQw==",
       "license": "MIT",
       "dependencies": {
         "@ckeditor/ckeditor5-vue": "^7.3.0",
@@ -2392,13 +2406,14 @@
       "integrity": "sha512-CabR+UN630VnsJO/jHWYBC1YVXyMq94KKp6iF5MQgZJs5I8cmjw6oVMO1oDbtBkENSHSSn/UadWlW/OAgdmKrg=="
     },
     "node_modules/@vueuse/core": {
-      "version": "13.4.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.4.0.tgz",
-      "integrity": "sha512-OnK7zW3bTq/QclEk17+vDFN3tuAm8ONb9zQUIHrYQkkFesu3WeGUx/3YzpEp+ly53IfDAT9rsYXgGW6piNZC5w==",
+      "version": "13.5.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-13.5.0.tgz",
+      "integrity": "sha512-wV7z0eUpifKmvmN78UBZX8T7lMW53Nrk6JP5+6hbzrB9+cJ3jr//hUlhl9TZO/03bUkMK6gGkQpqOPWoabr72g==",
+      "license": "MIT",
       "dependencies": {
         "@types/web-bluetooth": "^0.0.21",
-        "@vueuse/metadata": "13.4.0",
-        "@vueuse/shared": "13.4.0"
+        "@vueuse/metadata": "13.5.0",
+        "@vueuse/shared": "13.5.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/antfu"
@@ -2408,17 +2423,19 @@
       }
     },
     "node_modules/@vueuse/core/node_modules/@vueuse/metadata": {
-      "version": "13.4.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.4.0.tgz",
-      "integrity": "sha512-CPDQ/IgOeWbqItg1c/pS+Ulum63MNbpJ4eecjFJqgD/JUCJ822zLfpw6M9HzSvL6wbzMieOtIAW/H8deQASKHg==",
+      "version": "13.5.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-13.5.0.tgz",
+      "integrity": "sha512-euhItU3b0SqXxSy8u1XHxUCdQ8M++bsRs+TYhOLDU/OykS7KvJnyIFfep0XM5WjIFry9uAPlVSjmVHiqeshmkw==",
+      "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
     },
     "node_modules/@vueuse/core/node_modules/@vueuse/shared": {
-      "version": "13.4.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.4.0.tgz",
-      "integrity": "sha512-+AxuKbw8R1gYy5T21V5yhadeNM7rJqb4cPaRI9DdGnnNl3uqXh+unvQ3uCaA2DjYLbNr1+l7ht/B4qEsRegX6A==",
+      "version": "13.5.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-13.5.0.tgz",
+      "integrity": "sha512-K7GrQIxJ/ANtucxIXbQlUHdB0TPA8c+q5i+zbrjxuhJCnJ9GtBg75sBSnvmLSxHKPg2Yo8w62PWksl9kwH0Q8g==",
+      "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       },
@@ -3163,6 +3180,7 @@
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
       "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
       "dev": true,
+      "license": "MIT",
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -3380,23 +3398,24 @@
       }
     },
     "node_modules/vite": {
-      "version": "6.3.5",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
-      "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.5.tgz",
+      "integrity": "sha512-1mncVwJxy2C9ThLwz0+2GKZyEXuC3MyWtAAlNftlZZXZDP3AJt5FmwcMit/IGGaNZ8ZOB2BNO/HFUB+CpN0NQw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
-        "fdir": "^6.4.4",
+        "fdir": "^6.4.6",
         "picomatch": "^4.0.2",
-        "postcss": "^8.5.3",
-        "rollup": "^4.34.9",
-        "tinyglobby": "^0.2.13"
+        "postcss": "^8.5.6",
+        "rollup": "^4.40.0",
+        "tinyglobby": "^0.2.14"
       },
       "bin": {
         "vite": "bin/vite.js"
       },
       "engines": {
-        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+        "node": "^20.19.0 || >=22.12.0"
       },
       "funding": {
         "url": "https://github.com/vitejs/vite?sponsor=1"
@@ -3405,14 +3424,14 @@
         "fsevents": "~2.3.3"
       },
       "peerDependencies": {
-        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "@types/node": "^20.19.0 || >=22.12.0",
         "jiti": ">=1.21.0",
-        "less": "*",
+        "less": "^4.0.0",
         "lightningcss": "^1.21.0",
-        "sass": "*",
-        "sass-embedded": "*",
-        "stylus": "*",
-        "sugarss": "*",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
         "terser": "^5.16.0",
         "tsx": "^4.8.1",
         "yaml": "^2.4.2"
@@ -3515,12 +3534,13 @@
       }
     },
     "node_modules/vue-i18n": {
-      "version": "11.1.7",
-      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.1.7.tgz",
-      "integrity": "sha512-CDrU7Cmyh1AxJjerQmipV9nVa//exVBdhTcWGlbfcDCN8bKp/uAe7Le6IoN4//5emIikbsSKe9Uofmf/xXkhOA==",
+      "version": "11.1.10",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.1.10.tgz",
+      "integrity": "sha512-C+IwnSg8QDSOAox0gdFYP5tsKLx5jNWxiawNoiNB/Tw4CReXmM1VJMXbduhbrEzAFLhreqzfDocuSVjGbxQrag==",
+      "license": "MIT",
       "dependencies": {
-        "@intlify/core-base": "11.1.7",
-        "@intlify/shared": "11.1.7",
+        "@intlify/core-base": "11.1.10",
+        "@intlify/shared": "11.1.10",
         "@vue/devtools-api": "^6.5.0"
       },
       "engines": {
diff --git a/package.json b/package.json
index f24df98..8c15b67 100644
--- a/package.json
+++ b/package.json
@@ -20,23 +20,25 @@
   "main": "src/main.js",
   "scripts": {
     "build": "vite build",
-    "watch": "vite build --watch"
+    "watch": "vite build --watch",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
   },
   "dependencies": {
     "@viur/ignite": "^5.1.2",
     "@viur/shoelace": "^1.0.10-v2.20.0",
-    "@viur/vue-utils": "^3.1.4",
-    "@vueuse/core": "^13.1.0",
+    "@viur/vue-utils": "^3.1.5",
+    "@vueuse/core": "^13.5.0",
     "pinia": "^2.3.1",
-    "vue": "^3.5.13",
-    "vue-i18n": "^11.1.3",
-    "vue-router": "^4.5.0"
+    "vue": "^3.5.17",
+    "vue-i18n": "^11.1.10",
+    "vue-router": "^4.5.1"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^5.2.3",
-    "postcss-custom-media": "^11.0.5",
-    "postcss-nesting": "^13.0.1",
-    "prettier": "^3.5.3",
-    "vite": "^6.2.6"
+    "@vitejs/plugin-vue": "^6.0.0",
+    "postcss-custom-media": "^11.0.6",
+    "postcss-nesting": "^13.0.2",
+    "prettier": "^3.6.2",
+    "vite": "^7.0.5"
   }
 }
diff --git a/src/Shop.vue b/src/Shop.vue
index 3880aaf..6a27a2b 100644
--- a/src/Shop.vue
+++ b/src/Shop.vue
@@ -1,161 +1,166 @@
 <template>
-    <div class="bind viur-shop-wrap" v-bind="$attrs" v-if="shopStore.state.cartReady && shopStore.state.orderReady && state.translationsLoaded">
-        <div class="viur-shop-stepper-wrap"
-            :class="{ 'full-width': (!summary || summary==='bottom' || shopStore.state.currentTab==='complete') }"
-        >
-            <shop-order-stepper >
-              <template #template_cart>
-                <slot name="template_cart"></slot>
-              </template>
-              <template #template_userdata>
-                <slot name="template_userdata"></slot>
-              </template>
-              <template #template_shippingmethod>
-                <slot name="template_shippingmethod"></slot>
-              </template>
-              <template #template_paymentprovider>
-                <slot name="template_paymentprovider"></slot>
-              </template>
-              <template #template_confirm>
-                <slot name="template_confirm"></slot>
-              </template>
-              <template #template_complete>
-                <slot name="template_complete"></slot>
-              </template>
-            </shop-order-stepper>
-        </div>
-
-        <div class="viur-shop-sidebar-wrap" :class="{ bottom: (summary==='bottom') }" v-if="shopStore.state.currentTab!=='complete'">
-          <shop-summary ></shop-summary>
-        </div>
+  <div
+    class="bind viur-shop-wrap"
+    v-bind="$attrs"
+    v-if="shopStore.state.cartReady && shopStore.state.orderReady && state.translationsLoaded"
+  >
+    <div
+      class="viur-shop-stepper-wrap"
+      :class="{ 'full-width': !summary || summary === 'bottom' || shopStore.state.currentTab === 'complete' }"
+    >
+      <shop-order-stepper>
+        <template #template_cart>
+          <slot name="template_cart"></slot>
+        </template>
+        <template #template_userdata>
+          <slot name="template_userdata"></slot>
+        </template>
+        <template #template_shippingmethod>
+          <slot name="template_shippingmethod"></slot>
+        </template>
+        <template #template_paymentprovider>
+          <slot name="template_paymentprovider"></slot>
+        </template>
+        <template #template_confirm>
+          <slot name="template_confirm"></slot>
+        </template>
+        <template #template_complete>
+          <slot name="template_complete"></slot>
+        </template>
+      </shop-order-stepper>
     </div>
-    <template v-if="shopStore.state.debug">
-      <br>
-      <sl-details summary="Debug">
-          <sl-icon slot="prefix" name="bug"></sl-icon>
-          order: {{ shopStore.state.orderKey }}<br>
-          cart: {{ shopStore.state.cartRoot?.['key'] }}<br><br>
-
-          shippingaddress: {{shopStore.state.cartRoot?.['shipping_address']}}<br>
-          billingaddress: {{shopStore.state.order?.['billing_address']}}<br><br>
-
-          shipping: {{shopStore.state.cartRoot?.['shipping']}}<br><br>
-          Payment: {{shopStore.state.order?.['payment_provider']}}<br><br>
-
-          Order Status<br>
-          ------<br>
-          canCheckout: {{ shopStore.state.canCheckout }}<br>
-          canOrder: {{ shopStore.state.canOrder }}<br>
-          CheckoutStarted: {{ shopStore.state.order?.['is_checkout_in_progress'] }}<br><br>
 
-          ordered: {{ shopStore.state.order?.['is_ordered'] }}<br>
-          readytoship: {{ shopStore.state.order?.['is_rts'] }}<br>
-          paid: {{ shopStore.state.order?.['is_paid'] }}<br><br>
-
-          OrderObject: {{shopStore.state.order}}
-
-      </sl-details>
-    </template>
-    <div id="dialogs"></div>
+    <div
+      class="viur-shop-sidebar-wrap"
+      :class="{ bottom: summary === 'bottom' }"
+      v-if="shopStore.state.currentTab !== 'complete'"
+    >
+      <shop-summary></shop-summary>
+    </div>
+  </div>
+  <template v-if="shopStore.state.debug">
+    <br />
+    <sl-details summary="Debug">
+      <sl-icon
+        slot="prefix"
+        name="bug"
+      ></sl-icon>
+      order: {{ shopStore.state.orderKey }}<br />
+      cart: {{ shopStore.state.cartRoot?.["key"] }}<br /><br />
+
+      shippingaddress: {{ shopStore.state.cartRoot?.["shipping_address"] }}<br />
+      billingaddress: {{ shopStore.state.order?.["billing_address"] }}<br /><br />
+
+      shipping: {{ shopStore.state.cartRoot?.["shipping"] }}<br /><br />
+      Payment: {{ shopStore.state.order?.["payment_provider"] }}<br /><br />
+
+      Order Status<br />
+      ------<br />
+      canCheckout: {{ shopStore.state.canCheckout }}<br />
+      canOrder: {{ shopStore.state.canOrder }}<br />
+      CheckoutStarted: {{ shopStore.state.order?.["is_checkout_in_progress"] }}<br /><br />
+
+      ordered: {{ shopStore.state.order?.["is_ordered"] }}<br />
+      readytoship: {{ shopStore.state.order?.["is_rts"] }}<br />
+      paid: {{ shopStore.state.order?.["is_paid"] }}<br /><br />
+
+      OrderObject: {{ shopStore.state.order }}
+    </sl-details>
+  </template>
+  <div id="dialogs"></div>
 </template>
 
-
 <script setup>
-import { onBeforeMount, watch, reactive } from 'vue';
-import ShopOrderStepper from './ShopOrderStepper.vue'
+import { onBeforeMount, watch, reactive } from "vue"
+import ShopOrderStepper from "./ShopOrderStepper.vue"
 import ShopSummary from "./ShopSummary.vue"
-import {useViurShopStore} from './shop'
-import { useUrlSearchParams } from '@vueuse/core'
-import { useOrder } from './composables/order';
-import { useCart } from './composables/cart';
-import {getTranslations} from './utils'
-
+import { useViurShopStore } from "./shop"
+import { useUrlSearchParams } from "@vueuse/core"
+import { useOrder } from "./composables/order"
+import { useCart } from "./composables/cart"
+import { getTranslations } from "./utils"
 
 const shopStore = useViurShopStore()
-const {fetchOrder} = useOrder()
-const {fetchCart} = useCart()
-
-const emit = defineEmits('change')
+const { fetchOrder } = useOrder()
+const { fetchCart } = useCart()
 
+const emit = defineEmits("change")
 
 const props = defineProps({
-    summary:{
-      default:false
-    }, // bottom, sidebar
-    initTab:{
-      default:'cart'
-    },
-    modulename:{
-      default:'shop'
-    },
-    debug:{
-      default:false
-    },
-    showCartNodes:{
-      default:false
-    },
-    topActions:{
-      default:false
-    },
-    language:{
-      default:"de"
-    }
+  summary: {
+    default: false
+  }, // bottom, sidebar
+  initTab: {
+    default: "cart"
+  },
+  modulename: {
+    default: "shop"
+  },
+  debug: {
+    default: false
+  },
+  showCartNodes: {
+    default: false
+  },
+  topActions: {
+    default: false
+  },
+  language: {
+    default: "de"
+  }
 })
 
 const state = reactive({
-  translationsLoaded:false
+  translationsLoaded: false
 })
 
+onBeforeMount(() => {
+  getTranslations([props.language], "viur.shop.*").then((resp) => {
+    state.translationsLoaded = true
+  })
+  shopStore.state.language = props.language
+  shopStore.state.showNodes = props.showCartNodes
+  shopStore.state.debug = props.debug
+  shopStore.state.topActions = props.topActions
+  if (props.tabs) {
+    shopStore.state.tabs = props.tabs
+  }
 
-onBeforeMount(()=>{
-    getTranslations([props.language], "viur.shop.*").then((resp)=>{
-      state.translationsLoaded = true
-    })
-    shopStore.state.language = props.language
-    shopStore.state.showNodes = props.showCartNodes
-    shopStore.state.debug = props.debug
-    shopStore.state.topActions = props.topActions
-    if(props.tabs){
-        shopStore.state.tabs = props.tabs
-    }
-
-    shopStore.state.moduleName= props.modulename
-    fetchCart()
-    shopStore.fetchMetaData()
-    const params = useUrlSearchParams('hash')
-    if (Object.keys(params).includes('order')){
-        shopStore.state.orderKey = params['order']
-        fetchOrder(shopStore.state.orderKey).then(()=>{
-          shopStore.state.orderReady = true
-          // navigate to order state
-          if(shopStore.state.order?.['is_ordered']){
-            shopStore.navigateToTab('complete')
-          } else if (shopStore.state.order?.['is_checkout_in_progress']){
-            shopStore.navigateToTab('confirm')
-          }
-        })
-    }else{
+  shopStore.state.moduleName = props.modulename
+  fetchCart()
+  shopStore.fetchMetaData()
+  const params = useUrlSearchParams("hash")
+  if (Object.keys(params).includes("order")) {
+    shopStore.state.orderKey = params["order"]
+    fetchOrder(shopStore.state.orderKey).then(() => {
       shopStore.state.orderReady = true
-    }
-
-
-    if (Object.keys(params).includes('step')){
-        shopStore.navigateToTab(params['step'])
-    }else{
-        shopStore.navigateToTab('cart')
-    }
-})
-
+      // navigate to order state
+      if (shopStore.state.order?.["is_ordered"]) {
+        shopStore.navigateToTab("complete")
+      } else if (shopStore.state.order?.["is_checkout_in_progress"]) {
+        shopStore.navigateToTab("confirm")
+      }
+    })
+  } else {
+    shopStore.state.orderReady = true
+  }
 
-watch(()=>shopStore.state.currentTab, (newVal,oldVal)=>{
-  emit('change', newVal)
+  if (Object.keys(params).includes("step")) {
+    shopStore.navigateToTab(params["step"])
+  } else {
+    shopStore.navigateToTab("cart")
+  }
 })
 
-
+watch(
+  () => shopStore.state.currentTab,
+  (newVal, oldVal) => {
+    emit("change", newVal)
+  }
+)
 </script>
 
 <style scoped>
-
 * {
   box-sizing: border-box;
 }
@@ -180,8 +185,8 @@ watch(()=>shopStore.state.currentTab, (newVal,oldVal)=>{
 }
 
 @layer foundation.shop {
-  :root{
-    --viur-shop-sidebar-height-offset:0;
+  :root {
+    --viur-shop-sidebar-height-offset: 0;
   }
   .viur-shop-sidebar-wrap {
     --padding: var(--sl-spacing-large);
@@ -255,7 +260,4 @@ watch(()=>shopStore.state.currentTab, (newVal,oldVal)=>{
     grid-row-start: 3;
   }
 }
-
-
-
 </style>
diff --git a/src/ShopOrderStepper.vue b/src/ShopOrderStepper.vue
index d20efd5..7eec500 100644
--- a/src/ShopOrderStepper.vue
+++ b/src/ShopOrderStepper.vue
@@ -1,105 +1,132 @@
 <template>
-    <sl-tab-group
-        class="viur-shop-order-tabgroup"
-        noScrollControls
-        ref="stepper"
-    >
-        <template v-for="(tab,name) in shopStore.state.tabs">
-            <StepperTab v-show="shopStore.state.currentTab!=='complete'"
-                :tab="name"
+  <sl-tab-group
+    class="viur-shop-order-tabgroup"
+    noScrollControls
+    ref="stepper"
+  >
+    <template v-for="(tab, name) in shopStore.state.tabs">
+      <StepperTab
+        v-show="shopStore.state.currentTab !== 'complete'"
+        :tab="name"
+      >
+      </StepperTab>
+
+      <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
+              v-if="name"
+              v-slot:[`template_${name}`]
             >
-            </StepperTab>
-
-            <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>
-
-                      <template v-slot="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>
-                    </component>
-                </template>
-            </sl-tab-panel>
+              <slot :name="`template_${name}`"></slot>
+            </template>
+            <template v-slot="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>
+          </component>
         </template>
-    </sl-tab-group>
+      </sl-tab-panel>
+    </template>
+  </sl-tab-group>
 </template>
 
 <script setup>
-import {reactive, shallowRef, watch, ref, onBeforeMount, onMounted} from 'vue'
-import {useViurShopStore} from './shop'
-import StepperTab from './components/StepperTab.vue'
-import { useTimeoutFn  } from '@vueuse/core'
+import { reactive, shallowRef, watch, ref, onBeforeMount, onMounted } from "vue"
+import { useViurShopStore } from "./shop"
+import StepperTab from "./components/StepperTab.vue"
+import { useTimeoutFn } from "@vueuse/core"
 
 const shopStore = useViurShopStore()
 const stepper = ref()
 
-
 // Activate Tab if currentTab changes
-watch(()=>shopStore.state.currentTab, (newVal, oldVal)=>{
+watch(
+  () => shopStore.state.currentTab,
+  (newVal, oldVal) => {
     stepper.value.show(shopStore.state.currentTab)
-    shopStore.state.tabs[shopStore.state.currentTab]['loaded'] = true
-})
+    shopStore.state.tabs[shopStore.state.currentTab]["loaded"] = true
+  }
+)
 
-onMounted(()=>{
-    // wait shoelace component is ready
-    stepper.value.updateComplete.then(() => {
-        shopStore.state.tabs[shopStore.state.currentTab]['loaded'] = true
-        stepper.value.show(shopStore.state.currentTab)
-    })
+onMounted(() => {
+  // wait shoelace component is ready
+  stepper.value.updateComplete.then(() => {
+    shopStore.state.tabs[shopStore.state.currentTab]["loaded"] = true
+    stepper.value.show(shopStore.state.currentTab)
+  })
 })
 
-function nextStep(obj){
+function nextStep(obj) {
   shopStore.tabValidation(obj.nextfunction, shopStore.navigateToNext)
 }
 
-function active(obj){
+function active(obj) {
   return !obj.activefunction()
 }
-
 </script>
 
 <style scoped>
-
 sl-tab-group {
   flex-grow: 1;
   &::part(base) {
@@ -124,19 +151,19 @@ sl-tap-panel {
   justify-self: flex-end;
 }
 
-.hint{
-  border:1px solid var(--sl-color-neutral-200);
+.hint {
+  border: 1px solid var(--sl-color-neutral-200);
   border-top-left-radius: var(--sl-input-border-radius-medium);
   border-bottom-left-radius: var(--sl-input-border-radius-medium);
   background-color: var(--sl-color-neutral-100);
-  color:var(--sl-color-neutral-800);
+  color: var(--sl-color-neutral-800);
   padding: 0 var(--sl-spacing-small);
   height: auto;
   min-height: var(--sl-input-height-large);
   font-size: var(--sl-button-font-size-large);
   line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
 }
-.action-button-hint::part(base){
+.action-button-hint::part(base) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
diff --git a/src/ShopSummary.vue b/src/ShopSummary.vue
index 56f6f36..5b7449d 100644
--- a/src/ShopSummary.vue
+++ b/src/ShopSummary.vue
@@ -1,16 +1,32 @@
 <template>
   <LoadingHandler :isLoading="state.loading">
-    <h2 class="viur-shop-cart-sidebar-headline headline" v-html="$t('viur.shop.summary_headline')"></h2>
+    <h2
+      class="viur-shop-cart-sidebar-headline headline"
+      v-html="$t('viur.shop.summary_headline')"
+    ></h2>
     <div class="viur-shop-cart-sidebar-summary">
-      <div class="viur-shop-cart-sidebar-summary-item" v-for="item in state.items">
+      <div
+        class="viur-shop-cart-sidebar-summary-item"
+        v-for="item in state.items"
+      >
         <template v-if="(!shopStore.state.showNodes && item.skel_type === 'leaf') || shopStore.state.showNodes">
-          <div class="viur-shop-cart-sidebar-summary-item-amount" v-if="item.skel_type === 'leaf'">
+          <div
+            class="viur-shop-cart-sidebar-summary-item-amount"
+            v-if="item.skel_type === 'leaf'"
+          >
             {{ item.quantity }}&nbsp;&times;
           </div>
-          <div class="viur-shop-cart-sidebar-summary-item-name" v-html="item.skel_type === 'node' ? item.name : item.shop_name"></div>
+          <div
+            class="viur-shop-cart-sidebar-summary-item-name"
+            v-html="item.skel_type === 'node' ? item.name : item.shop_name"
+          ></div>
           <div class="viur-shop-cart-sidebar-summary-item-price">
-            <sl-format-number lang="de" type="currency" currency="EUR"
-              :value="item.total ? item.total : item.price?.current">
+            <sl-format-number
+              lang="de"
+              type="currency"
+              currency="EUR"
+              :value="item.total ? item.total : item.price?.current"
+            >
             </sl-format-number>
           </div>
         </template>
@@ -18,142 +34,185 @@
     </div>
     <template v-if="showFeatures">
       <div class="viur-shop-cart-sidebar-info">
-      <span v-html="$t('viur.shop.summary_subtotal')"></span>
-      <sl-format-number lang="de" type="currency" currency="EUR" :value="state.cartTotal">
-      </sl-format-number>
-    </div>
-    <div class="viur-shop-cart-sidebar-info">
-      <span v-html="$t('viur.shop.summary_shipping_total')"></span>
-      <sl-format-number lang="de" type="currency" currency="EUR" :value="state.shippingTotal">
-      </sl-format-number>
-    </div>
-    <div class="viur-shop-cart-sidebar-info" v-if="shopStore.state.cartRoot.discount">
-      <span v-html="$t('viur.shop.summary_discount')"></span>
-      <sl-format-number lang="de" type="currency" currency="EUR" :value="state.discount">
-      </sl-format-number>
-    </div>
-    <discount-input v-if="shopStore.state.currentTab!=='complete'"></discount-input>
+        <span v-html="$t('viur.shop.summary_subtotal')"></span>
+        <sl-format-number
+          lang="de"
+          type="currency"
+          currency="EUR"
+          :value="state.cartTotal"
+        >
+        </sl-format-number>
+      </div>
+      <div class="viur-shop-cart-sidebar-info">
+        <span v-html="$t('viur.shop.summary_shipping_total')"></span>
+        <sl-format-number
+          lang="de"
+          type="currency"
+          currency="EUR"
+          :value="state.shippingTotal"
+        >
+        </sl-format-number>
+      </div>
+      <div
+        class="viur-shop-cart-sidebar-info"
+        v-if="shopStore.state.cartRoot.discount"
+      >
+        <span v-html="$t('viur.shop.summary_discount')"></span>
+        <sl-format-number
+          lang="de"
+          type="currency"
+          currency="EUR"
+          :value="state.discount"
+        >
+        </sl-format-number>
+      </div>
+      <discount-input v-if="shopStore.state.currentTab !== 'complete'"></discount-input>
     </template>
 
-    <div class="viur-shop-cart-sidebar-info">
-    </div>
+    <div class="viur-shop-cart-sidebar-info"></div>
 
     <div class="viur-shop-cart-sidebar-info viur-shop-cart-sidebar-info--total">
       <span v-html="$t('viur.shop.summary_total')"></span>
-      <sl-format-number lang="de" type="currency" currency="EUR" :value="state.total">
+      <sl-format-number
+        lang="de"
+        type="currency"
+        currency="EUR"
+        :value="state.total"
+      >
       </sl-format-number>
     </div>
-    <div class="viur-shop-cart-sidebar-info " v-for="vatObj in state.vat">
-      <span v-html="$t('viur.shop.summary_vat', {'percentage':calc_percent(vatObj.percentage) })"></span>
-      <sl-format-number lang="de" type="currency" currency="EUR" :value="vatObj.value">
+    <div
+      class="viur-shop-cart-sidebar-info"
+      v-for="vatObj in state.vat"
+    >
+      <span v-html="$t('viur.shop.summary_vat', { percentage: calc_percent(vatObj.percentage) })"></span>
+      <sl-format-number
+        lang="de"
+        type="currency"
+        currency="EUR"
+        :value="vatObj.value"
+      >
       </sl-format-number>
     </div>
-    <div class="viur-shop-cart-sidebar-info 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>
         {{
-          shopStore.state.order?.cart?.dest?.shipping?.dest?.delivery_time_range ?
-            shopStore.state.order?.cart?.dest?.shipping?.dest?.delivery_time_range :
-            0
-        }} {{ $t('viur.shop.day',state.shippingTime) }}
+          shopStore.state.order?.cart?.dest?.shipping?.dest?.delivery_time_range
+            ? shopStore.state.order?.cart?.dest?.shipping?.dest?.delivery_time_range
+            : 0
+        }}
+        {{ $t("viur.shop.day", state.shippingTime) }}
       </span>
     </div>
 
-    <slot name="action-buttons" >
-      <div class="viur-shop-cart-sidebar-btn-wrap" v-if="false && !shopStore.state.order?.['is_paid']">
-        <sl-button variant="success" size="large">{{ $t("shop.summary_checkout") }}</sl-button>
+    <slot name="action-buttons">
+      <div
+        class="viur-shop-cart-sidebar-btn-wrap"
+        v-if="false && !shopStore.state.order?.['is_paid']"
+      >
+        <sl-button
+          variant="success"
+          size="large"
+          >{{ $t("shop.summary_checkout") }}</sl-button
+        >
       </div>
     </slot>
   </LoadingHandler>
-
 </template>
 
 <script setup>
-import { reactive, computed, onBeforeMount } from 'vue'
-import { useViurShopStore } from "./shop";
-import { useCart } from "./composables/cart";
+import { reactive, computed, onBeforeMount } from "vue"
+import { useViurShopStore } from "./shop"
+import { useCart } from "./composables/cart"
 import LoadingHandler from "./components/LoadingHandler.vue"
-import DiscountInput from './components/DiscountInput.vue';
+import DiscountInput from "./components/DiscountInput.vue"
 
-const shopStore = useViurShopStore();
-const { fetchCart, addItem, state: cartState } = useCart();
+const shopStore = useViurShopStore()
+const { fetchCart, addItem, state: cartState } = useCart()
 
 const props = defineProps({
-  showFeatures: {type: Boolean, default: true},
+  showFeatures: { type: Boolean, default: true }
 })
 
 const state = reactive({
-  items: computed(() => { return shopStore.state.cartList }),
+  items: computed(() => {
+    return shopStore.state.cartList
+  }),
   cartTotal: computed(() => {
-    let sum = state.items.reduce((acc,item)=>{
-      if (item.skel_type==="leaf"){
-        acc+=item.price.current *item.quantity
+    let sum = state.items.reduce((acc, item) => {
+      if (item.skel_type === "leaf") {
+        acc += item.price.current * item.quantity
       }
 
-      return acc;
-    },0)
+      return acc
+    }, 0)
     return sum
   }),
   shippingTotal: computed(() => {
     let total = 0
-    if (shopStore.state.cartRoot.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) {
+    } else if (shopStore.state?.order?.cart?.dest?.shipping?.dest?.shipping_cost) {
       total += shopStore.state.order.cart.dest.shipping.dest.shipping_cost
     }
 
     return total
   }),
-  shippingTime:computed(()=>{
-    try{
-       let times = shopStore.state.order?.cart?.dest?.shipping?.dest?.delivery_time_range.split(" - ").map(x=>parseInt(x))
-       return times[1] - times[0]
-    }catch(e){
+  shippingTime: computed(() => {
+    try {
+      let times = shopStore.state.order?.cart?.dest?.shipping?.dest?.delivery_time_range
+        .split(" - ")
+        .map((x) => parseInt(x))
+      return times[1] - times[0]
+    } catch (e) {
       return "-"
     }
   }),
-  discount:computed(()=> (state.cartTotal - shopStore.state.cartRoot.total_discount_price)*-1),
+  discount: computed(() => (state.cartTotal - shopStore.state.cartRoot.total_discount_price) * -1),
   total: computed(() => {
     return shopStore.state.cartRoot.total
   }),
-  vat:computed(()=>{
+  vat: computed(() => {
     return shopStore.state.cartRoot.vat
   }),
-  sum:computed(()=>{
-    let sum = state.items.reduce((acc,item)=>{
-      if (item.skel_type==="leaf"){
-        acc+=item.price.current *item.quantity
+  sum: computed(() => {
+    let sum = state.items.reduce((acc, item) => {
+      if (item.skel_type === "leaf") {
+        acc += item.price.current * item.quantity
       }
 
-      return acc;
-    },0)
+      return acc
+    }, 0)
     return sum
   }),
-  loading:false
+  loading: false
 })
 
 onBeforeMount(() => {
-  state.loading=true
+  state.loading = true
   if (!shopStore.state.cartList.length) {
-    fetchCart().then(()=>state.loading=false).catch(()=>state.loading=false)
-  }else{
-    state.loading=false
+    fetchCart()
+      .then(() => (state.loading = false))
+      .catch(() => (state.loading = false))
+  } else {
+    state.loading = false
   }
 })
 
-function calc_percent(val){
+function calc_percent(val) {
   return new Intl.NumberFormat("de-DE", {
     style: "percent",
     minimumFractionDigits: 0,
     maximumFractionDigits: 0
-  }).format(val);
+  }).format(val)
 }
-
-
 </script>
 
 <style scoped>
-
 .viur-shop-cart-sidebar-info {
   display: flex;
   flex-direction: row;
@@ -200,7 +259,7 @@ function calc_percent(val){
 
   &::-webkit-scrollbar-thumb {
     background: var(--sl-color-neutral-300);
-    transition: background ease .3s;
+    transition: background ease 0.3s;
   }
 
   &::-webkit-scrollbar-thumb:hover {
diff --git a/src/Steps/ShopCart.vue b/src/Steps/ShopCart.vue
index d238b9c..16c4d7a 100644
--- a/src/Steps/ShopCart.vue
+++ b/src/Steps/ShopCart.vue
@@ -1,84 +1,91 @@
 <template>
-    <slot name="top_actions"  v-if="shopStore.state.topActions"
-        :nextName="$t('viur.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"
-            :edit="!shopStore.state.order?.['is_checkout_in_progress']"
-            >
-
-            </cart-item>
-        </div>
-        <shop-alert v-else variant="info" duration="Infinity">
-            <template #alertMsg>
-                {{ $t('viur.shop.cart_empty') }}
-            </template>
-        </shop-alert>
-    </loading-handler>
+  <slot
+    name="top_actions"
+    v-if="shopStore.state.topActions"
+    :nextName="$t('viur.shop.proceed-checkout')"
+    :activefunction="() => state.items.length > 0"
+    :nextfunction="nextStep"
+  >
+  </slot>
 
-    <slot name="template_cart">
-    </slot>
-
-    <slot
-        :nextName="$t('viur.shop.proceed-checkout')"
-        :activefunction="()=>state.items.length>0"
-        :nextfunction="nextStep"
+  <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"
+        :edit="!shopStore.state.order?.['is_checkout_in_progress']"
+      >
+      </cart-item>
+    </div>
+    <shop-alert
+      v-else
+      variant="info"
+      duration="Infinity"
     >
-    </slot>
+      <template #alertMsg>
+        {{ $t("viur.shop.cart_empty") }}
+      </template>
+    </shop-alert>
+  </loading-handler>
+
+  <slot name="template_cart"> </slot>
 
+  <slot
+    :nextName="$t('viur.shop.proceed-checkout')"
+    :activefunction="() => state.items.length > 0"
+    :nextfunction="nextStep"
+  >
+  </slot>
 </template>
 
 <script setup>
-import { useViurShopStore } from '../shop'
-import {computed, onBeforeMount, onMounted, reactive, watch} from 'vue'
-import { useCart } from '../composables/cart';
-import LoadingHandler from '../components/LoadingHandler.vue';
-import CartItem from '../components/CartItem.vue';
-import CartItemSmall from '../components/CartItemSmall.vue';
-import ShopAlert from '../components/ShopAlert.vue';
-import { useOrder } from '../composables/order';
+import { useViurShopStore } from "../shop"
+import { computed, onBeforeMount, onMounted, reactive, watch } from "vue"
+import { useCart } from "../composables/cart"
+import LoadingHandler from "../components/LoadingHandler.vue"
+import CartItem from "../components/CartItem.vue"
+import CartItemSmall from "../components/CartItemSmall.vue"
+import ShopAlert from "../components/ShopAlert.vue"
+import { useOrder } from "../composables/order"
 
 const shopStore = useViurShopStore()
-const {fetchCart,addItem, state:cartState} = useCart()
-const {addOrUpdateOrder}  = useOrder()
+const { fetchCart, addItem, state: cartState } = useCart()
+const { addOrUpdateOrder } = useOrder()
 
 const props = defineProps({
-  params:{
-    type:Object,
-    default:{}
+  params: {
+    type: Object,
+    default: {}
   }
 })
 
 const state = reactive({
-    items: computed(()=>shopStore.state.cartList.filter(i=>i['skel_type']==='leaf'))
+  items: computed(() => shopStore.state.cartList.filter((i) => i["skel_type"] === "leaf"))
 })
 
-onBeforeMount(()=>{
-    fetchCart()
+onBeforeMount(() => {
+  fetchCart()
 })
 
-async function nextStep(){
-    try{
-        let resp = await addOrUpdateOrder()
-        return true
-
-    } catch(error){
-        return false
-    }
+async function nextStep() {
+  try {
+    let resp = await addOrUpdateOrder()
+    return true
+  } catch (error) {
+    return false
+  }
 }
-
 </script>
 <style scoped>
-
 .viur-shop-item-wrapper {
-  display:flex;
+  display: flex;
   flex-direction: column;
   gap: var(--shop-leaf-gap, var(--ignt-spacing-small));
 }
-
 </style>
diff --git a/src/Steps/ShopOrderComplete.vue b/src/Steps/ShopOrderComplete.vue
index 7322ddb..8ebed84 100644
--- a/src/Steps/ShopOrderComplete.vue
+++ b/src/Steps/ShopOrderComplete.vue
@@ -1,40 +1,48 @@
 <template>
   <div>
     <h1 class="viur-shop-success-headline headline">
-      {{ $t('viur.shop.order_thanks') }}
+      {{ $t("viur.shop.order_thanks") }}
     </h1>
-    <p class="paragraph"><strong>{{ $t('viur.shop.order_number') }}:</strong> {{ shopStore.state.order?.["order_uid"] }}</p>
-    <p class="paragraph" v-html=" $t('viur.shop.order_message')">
+    <p class="paragraph">
+      <strong>{{ $t("viur.shop.order_number") }}:</strong> {{ shopStore.state.order?.["order_uid"] }}
     </p>
+    <p
+      class="paragraph"
+      v-html="$t('viur.shop.order_message')"
+    ></p>
 
-    <p class="paragraph" v-if="shopStore.state.order?.['is_paid']">
-      {{ $t('viur.shop.order_paid') }}
+    <p
+      class="paragraph"
+      v-if="shopStore.state.order?.['is_paid']"
+    >
+      {{ $t("viur.shop.order_paid") }}
     </p>
 
-    <p class="paragraph" v-if="shopStore.state.order?.['is_rts']">
-      {{ $t('viur.shop.order_ready_to_ship') }}
+    <p
+      class="paragraph"
+      v-if="shopStore.state.order?.['is_rts']"
+    >
+      {{ $t("viur.shop.order_ready_to_ship") }}
     </p>
 
-    <slot name="template_complete">
-    </slot>
+    <slot name="template_complete"> </slot>
 
     <sl-details :summary="$t('viur.shop.order_summary')">
-      <shop-summary ></shop-summary>
+      <shop-summary></shop-summary>
     </sl-details>
   </div>
 </template>
 
 <script setup>
-import {computed, reactive} from 'vue'
-import { useViurShopStore } from '../shop';
-import ShopSummary from '../ShopSummary.vue';
+import { computed, reactive } from "vue"
+import { useViurShopStore } from "../shop"
+import ShopSummary from "../ShopSummary.vue"
 const shopStore = useViurShopStore()
 
 const props = defineProps({
-  params:{
-    type:Object,
-    default:{}
+  params: {
+    type: Object,
+    default: {}
   }
 })
-
 </script>
diff --git a/src/Steps/ShopOrderConfirm.vue b/src/Steps/ShopOrderConfirm.vue
index aa5d2b3..90235eb 100644
--- a/src/Steps/ShopOrderConfirm.vue
+++ b/src/Steps/ShopOrderConfirm.vue
@@ -1,10 +1,10 @@
 <template>
-    <div class="list">
-    <h2 class="viur-shop-cart-headline headline">{{ $t('viur.shop.check_order')}}</h2>
+  <div class="list">
+    <h2 class="viur-shop-cart-headline headline">{{ $t("viur.shop.check_order") }}</h2>
     <div class="viur-shop-cart-address-wrap">
       <div class="viur-shop-cart-address">
         <div class="viur-shop-user-data-headline">
-          {{ $t('viur.shop.skeleton.cartnode.shipping_address') }}
+          {{ $t("viur.shop.skeleton.cartnode.shipping_address") }}
         </div>
         <template v-if="state.shippingAddress">
           {{ state.shippingAddress?.firstname }}
@@ -13,12 +13,12 @@
           {{ state.shippingAddress?.street_number }}<br />
           {{ state.shippingAddress?.zip_code }}
           {{ state.shippingAddress?.city }}<br />
-          {{ getDescrName('country',state.shippingAddress?.country) }}<br />
+          {{ getDescrName("country", state.shippingAddress?.country) }}<br />
         </template>
       </div>
       <div class="viur-shop-cart-address">
         <div class="viur-shop-user-data-headline">
-          {{ $t('viur.shop.skeleton.order.billing_address') }}
+          {{ $t("viur.shop.skeleton.order.billing_address") }}
         </div>
         <template v-if="state.billingAddress">
           {{ state.billingAddress.firstname }}
@@ -27,32 +27,30 @@
           {{ state.billingAddress.street_number }}<br />
           {{ state.billingAddress.zip_code }}
           {{ state.billingAddress.city }}<br />
-          {{ getDescrName('country',state.billingAddress.country) }}<br />
+          {{ getDescrName("country", state.billingAddress.country) }}<br />
         </template>
       </div>
     </div>
 
     <div class="viur-shop-cart-payment">
       <div class="viur-shop-cart-payment-method">
-        <span>{{ $t('viur.shop.skeleton.order.payment') }} </span>
+        <span>{{ $t("viur.shop.skeleton.order.payment") }} </span>
         <p>
-          {{ shopStore.state['paymentMeta']?.[state.payment]?.['title']}}
+          {{ shopStore.state["paymentMeta"]?.[state.payment]?.["title"] }}
         </p>
       </div>
     </div>
 
     <div class="viur-shop-cart-payment">
       <div class="viur-shop-cart-payment-method">
-        <span>{{ $t('viur.shop.module.shipping') }}</span>
+        <span>{{ $t("viur.shop.module.shipping") }}</span>
         <p>
           {{ state.shipping?.name }}
           -
           <sl-format-number
             type="currency"
             currency="EUR"
-            :value="
-              state.shipping?.shipping_cost
-            "
+            :value="state.shipping?.shipping_cost"
             lang="de"
           >
           </sl-format-number>
@@ -61,107 +59,134 @@
     </div>
 
     <sl-details :summary="$t('viur.shop.skeleton.order.cart')">
-      <template  v-for="item in state.cartList">
-      <cart-item-small v-if="item.skel_type==='leaf'" :item="item" @sl-show="getOrderCart">
-      </cart-item-small>
-    </template>
-  </sl-details>
+      <template v-for="item in state.cartList">
+        <cart-item-small
+          v-if="item.skel_type === 'leaf'"
+          :item="item"
+          @sl-show="getOrderCart"
+        >
+        </cart-item-small>
+      </template>
+    </sl-details>
   </div>
 
-  <component :is="params['additionalComponent']" v-if="params['additionalComponent']" ref="additionalComponent">
+  <component
+    :is="params['additionalComponent']"
+    v-if="params['additionalComponent']"
+    ref="additionalComponent"
+  >
   </component>
 
   <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-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="$t('viur.shop.order_pay')" :open="state.paymentPopup" @sl-after-hide="state.paymentPopup=false">
-        <payment-provider-unzer @cancel="paymentCanceled"></payment-provider-unzer>
+  <template
+    v-if="
+      shopStore.state.order?.['payment_provider'] !== null &&
+      shopStore.state.order?.['payment_provider'].startsWith('unzer-')
+    "
+  >
+    <sl-dialog
+      v-if="state.paymentPopup"
+      :label="$t('viur.shop.order_pay')"
+      :open="state.paymentPopup"
+      @sl-after-hide="state.paymentPopup = false"
+    >
+      <payment-provider-unzer @cancel="paymentCanceled"></payment-provider-unzer>
     </sl-dialog>
   </template>
 
-  <slot name="template_confirm">
-  </slot>
+  <slot name="template_confirm"> </slot>
 </template>
 <script setup>
-import {computed, onBeforeMount, reactive, watch, useTemplateRef} from 'vue'
-import { useViurShopStore } from '../shop';
-import boneUtils from '@viur/vue-utils/bones/utils'
-import {Request} from '@viur/vue-utils'
-import CartItemSmall from '../components/CartItemSmall.vue';
-import PaymentProviderUnzer from '../components/PaymentProviderUnzer.vue';
+import { computed, onBeforeMount, reactive, watch, useTemplateRef } from "vue"
+import { useViurShopStore } from "../shop"
+import boneUtils from "@viur/vue-utils/bones/utils"
+import { Request } from "@viur/vue-utils"
+import CartItemSmall from "../components/CartItemSmall.vue"
+import PaymentProviderUnzer from "../components/PaymentProviderUnzer.vue"
 const shopStore = useViurShopStore()
 
-const additionalComponent = useTemplateRef('additionalComponent')
+const additionalComponent = useTemplateRef("additionalComponent")
 
 const props = defineProps({
-  params:{
-    type:Object,
-    default:{}
+  params: {
+    type: Object,
+    default: {}
   }
 })
 
 // collected data from order Object > Session cart is not available anymore
 const state = reactive({
-    shippingAddress: computed(()=>shopStore.state.order?.['cart']?.['dest']?.['shipping_address']?.['dest']),
-    shipping: computed(()=>shopStore.state.order?.['cart']?.['dest']?.['shipping']?.['dest']),
-    billingAddress: computed(()=>shopStore.state.order?.['billing_address']?.['dest']),
-    payment: computed(()=>shopStore.state.order?.['payment_provider']),
-    cartList:[],
-    paymentPopup:false
+  shippingAddress: computed(() => shopStore.state.order?.["cart"]?.["dest"]?.["shipping_address"]?.["dest"]),
+  shipping: computed(() => shopStore.state.order?.["cart"]?.["dest"]?.["shipping"]?.["dest"]),
+  billingAddress: computed(() => shopStore.state.order?.["billing_address"]?.["dest"]),
+  payment: computed(() => shopStore.state.order?.["payment_provider"]),
+  cartList: [],
+  paymentPopup: false
 })
 
-
 // simple wrapper for value rendering
 function getDescrName(boneName, val) {
   if (!shopStore.state.addressStructure || !val) return val
-  return boneUtils.getDescr(shopStore.state.addressStructure[boneName],val)
+  return boneUtils.getDescr(shopStore.state.addressStructure[boneName], val)
 }
 
 // fetch cart from order
-function getOrderCart(){
-  let cartKey = shopStore.state.order?.['cart']?.['dest']?.['key']
-  Request.get(`${shopStore.state.shopApiUrl}/cart_list`,{dataObj:{
-      cart_key:cartKey
-  }}).then(async( resp) =>{
-      let data = await resp.json()
-      state.cartList=data
+function getOrderCart() {
+  let cartKey = shopStore.state.order?.["cart"]?.["dest"]?.["key"]
+  Request.get(`${shopStore.state.shopApiUrl}/cart_list`, {
+    dataObj: {
+      cart_key: cartKey
+    }
+  }).then(async (resp) => {
+    let data = await resp.json()
+    state.cartList = data
   })
 }
 
-function paymentCanceled(){
-  state.paymentPopup=false
+function paymentCanceled() {
+  state.paymentPopup = false
 }
 
 //open popup and freeze cart
-async function startCheckout(){
-  if (props.params?.additionalComponent){
-      let valid = await additionalComponent.value.valid()
-      if (!valid){
-        return false
-      }
+async function startCheckout() {
+  if (props.params?.additionalComponent) {
+    let valid = await additionalComponent.value.valid()
+    if (!valid) {
+      return false
+    }
   }
-  state.paymentPopup=true
+  state.paymentPopup = true
   shopStore.checkout()
 }
 
 //close popup if payment successfull
-watch(()=>shopStore.state.order?.['is_paid'],(newVal,oldVal)=>{
-  if(newVal){
-    state.paymentPopup=false
+watch(
+  () => shopStore.state.order?.["is_paid"],
+  (newVal, oldVal) => {
+    if (newVal) {
+      state.paymentPopup = false
+    }
   }
-})
+)
 
-onBeforeMount(()=>{
+onBeforeMount(() => {
   getOrderCart()
 })
-
 </script>
 
 <style scoped>
-.wrapper{
-  padding:20px;
+.wrapper {
+  padding: 20px;
 }
 
 .viur-shop-cart-sidebar-btn-wrap {
diff --git a/src/Steps/ShopPaymentProvider.vue b/src/Steps/ShopPaymentProvider.vue
index a931412..4121943 100644
--- a/src/Steps/ShopPaymentProvider.vue
+++ b/src/Steps/ShopPaymentProvider.vue
@@ -1,77 +1,76 @@
 <template>
-  <slot name="top_actions"  v-if="shopStore.state.topActions"
-      :nextName="$t('viur.shop.next')"
-      :activefunction="()=>shopStore.state.order?.['payment_provider']"
-      :nextfunction="()=>true"
+  <slot
+    name="top_actions"
+    v-if="shopStore.state.topActions"
+    :nextName="$t('viur.shop.next')"
+    :activefunction="() => shopStore.state.order?.['payment_provider']"
+    :nextfunction="() => true"
   >
   </slot>
 
   <sl-radio-group :value="state.selection">
     <sl-details-group>
-
-      <payment-option v-for="option in paymentState.paymentData" :key="option.id"
-                      :paymenttype="option.paymenttype"
-                      :name="option.name"
-                      :icon="option.icon"
-                      :widget="option.widget"
-                      :description="option.description"
-                      @change="optionChanged"
-
+      <payment-option
+        v-for="option in paymentState.paymentData"
+        :key="option.id"
+        :paymenttype="option.paymenttype"
+        :name="option.name"
+        :icon="option.icon"
+        :widget="option.widget"
+        :description="option.description"
+        @change="optionChanged"
       >
       </payment-option>
-
     </sl-details-group>
   </sl-radio-group>
 
-  <slot name="template_paymentprovider">
-  </slot>
+  <slot name="template_paymentprovider"> </slot>
 
   <slot
-      :nextName="$t('viur.shop.next')"
-      :activefunction="()=>shopStore.state.order?.['payment_provider']"
-      :nextfunction="()=>true"
+    :nextName="$t('viur.shop.next')"
+    :activefunction="() => shopStore.state.order?.['payment_provider']"
+    :nextfunction="() => true"
   >
   </slot>
-
 </template>
 <script setup>
-import {computed, reactive, onBeforeMount} from 'vue'
-import PaymentOption from "../components/PaymentOption.vue";
-import {usePayment} from "../composables/payment";
-import {useOrder} from "../composables/order";
-import {useViurShopStore} from "../shop";
+import { computed, reactive, onBeforeMount } from "vue"
+import PaymentOption from "../components/PaymentOption.vue"
+import { usePayment } from "../composables/payment"
+import { useOrder } from "../composables/order"
+import { useViurShopStore } from "../shop"
 
-const {state:paymentState, fetchPaymentData} = usePayment()
-const {addOrUpdateOrder} = useOrder()
+const { state: paymentState, fetchPaymentData } = usePayment()
+const { addOrUpdateOrder } = useOrder()
 const shopStore = useViurShopStore()
 
 const props = defineProps({
-  params:{
-    type:Object,
-    default:{}
+  params: {
+    type: Object,
+    default: {}
   }
 })
 
 const state = reactive({
-    selection:null,
+  selection: null
 })
 
-function optionChanged(type){
-  shopStore.state.order['payment_provider'] = null
-  state.selection=type
-  addOrUpdateOrder({payment_provider:type})
+function optionChanged(type) {
+  shopStore.state.order["payment_provider"] = null
+  state.selection = type
+  addOrUpdateOrder({ payment_provider: type })
 }
 
-onBeforeMount(()=>{
-  fetchPaymentData().then(()=>{
-    state.selection = shopStore.state.order?.['payment_provider']
+onBeforeMount(() => {
+  fetchPaymentData().then(() => {
+    state.selection = shopStore.state.order?.["payment_provider"]
   })
 })
 </script>
 
 <style scoped>
-  sl-radio-group {
-    margin-bottom: var(--ignt-spacing-medium);
-    margin-top: var(--ignt-spacing-medium);
-  }
+sl-radio-group {
+  margin-bottom: var(--ignt-spacing-medium);
+  margin-top: var(--ignt-spacing-medium);
+}
 </style>
diff --git a/src/Steps/ShopShippingMethod.vue b/src/Steps/ShopShippingMethod.vue
index 9a25424..7cb0bbe 100644
--- a/src/Steps/ShopShippingMethod.vue
+++ b/src/Steps/ShopShippingMethod.vue
@@ -1,61 +1,72 @@
 <template>
-  <slot name="top_actions"  v-if="shopStore.state.topActions"
-        :nextName="$t('viur.shop.next')"
-        :activefunction="()=>shopStore.state.cartRoot?.['shipping']"
-        :nextfunction="()=>nextStep"
-    >
-    </slot>
-
-  <loading-handler :isLoading="shippingState.isLoading" :hasError="shippingState.hasError" :errorMessage="shippingState.errorMessage">
+  <slot
+    name="top_actions"
+    v-if="shopStore.state.topActions"
+    :nextName="$t('viur.shop.next')"
+    :activefunction="() => shopStore.state.cartRoot?.['shipping']"
+    :nextfunction="() => nextStep"
+  >
+  </slot>
 
-    <card-selector :options="shippingState.shippingData"
-                    v-model:selection="state.selectedShippingMethod"
-                    @change="updateShippingMethod"
+  <loading-handler
+    :isLoading="shippingState.isLoading"
+    :hasError="shippingState.hasError"
+    :errorMessage="shippingState.errorMessage"
+  >
+    <card-selector
+      :options="shippingState.shippingData"
+      v-model:selection="state.selectedShippingMethod"
+      @change="updateShippingMethod"
     >
-      <template v-slot="{option, index}">
-          <!--<img slot="image">-->
-          <sl-bar class="shipping-bar">
-            <div slot="left">
-              <sl-format-number lang="de" type="currency" currency="EUR" :value=" option['dest']['shipping_cost']" v-if="option['dest']['shipping_cost']">
-              </sl-format-number>
-              <span v-else>{{ $t('viur.shop.free_shipping') }}</span>
-            </div>
-            <span slot="right">{{ option['dest']['description'] }}</span>
-            <!--
+      <template v-slot="{ option, index }">
+        <!--<img slot="image">-->
+        <sl-bar class="shipping-bar">
+          <div slot="left">
+            <sl-format-number
+              lang="de"
+              type="currency"
+              currency="EUR"
+              :value="option['dest']['shipping_cost']"
+              v-if="option['dest']['shipping_cost']"
+            >
+            </sl-format-number>
+            <span v-else>{{ $t("viur.shop.free_shipping") }}</span>
+          </div>
+          <span slot="right">{{ option["dest"]["description"] }}</span>
+          <!--
             <span slot="right">{{$t('viur.shop.deliverytime')}}: {{ option['dest']['delivery_time_range'] }} {{  $t('viur.shop.day',option['dest']['delivery_time_max'] - option['dest']['delivery_time_min']) }}</span>-->
-          </sl-bar>
+        </sl-bar>
       </template>
     </card-selector>
   </loading-handler>
 
-  <slot name="template_shippingmethod">
-  </slot>
+  <slot name="template_shippingmethod"> </slot>
 
   <slot
-        :nextName="$t('viur.shop.next')"
-        :activefunction="()=>shopStore.state.cartRoot?.['shipping']"
-        :nextfunction="nextStep"
-    >
-    </slot>
+    :nextName="$t('viur.shop.next')"
+    :activefunction="() => shopStore.state.cartRoot?.['shipping']"
+    :nextfunction="nextStep"
+  >
+  </slot>
 </template>
 <script setup>
-import {reactive,onBeforeMount} from "vue";
-import CardSelector from "../components/CardSelector.vue";
-import LoadingHandler from "../components/LoadingHandler.vue";
-import {useShipping} from "../composables/shipping";
-import {useCart} from "../composables/cart";
-import { useOrder } from "../composables/order";
-import {useViurShopStore} from "../shop";
+import { reactive, onBeforeMount } from "vue"
+import CardSelector from "../components/CardSelector.vue"
+import LoadingHandler from "../components/LoadingHandler.vue"
+import { useShipping } from "../composables/shipping"
+import { useCart } from "../composables/cart"
+import { useOrder } from "../composables/order"
+import { useViurShopStore } from "../shop"
 
-const shopStore = useViurShopStore();
-const {updateCart} = useCart();
-const {fetchOrder} = useOrder();
-const {state: shippingState,fetchShippingData} = useShipping();
+const shopStore = useViurShopStore()
+const { updateCart } = useCart()
+const { fetchOrder } = useOrder()
+const { state: shippingState, fetchShippingData } = useShipping()
 
 const props = defineProps({
-  params:{
-    type:Object,
-    default:{}
+  params: {
+    type: Object,
+    default: {}
   }
 })
 
@@ -63,14 +74,14 @@ const state = reactive({
   selectedShippingMethod: null
 })
 
-function updateShippingMethod(selection){
-  shopStore.state.cartRoot['shipping'] = null
-  if (selection){
-    updateCart({shipping_key:selection['dest']['key']})
+function updateShippingMethod(selection) {
+  shopStore.state.cartRoot["shipping"] = null
+  if (selection) {
+    updateCart({ shipping_key: selection["dest"]["key"] })
   }
 }
 
-async function nextStep(){
+async function nextStep() {
   return await fetchOrder(shopStore.state.orderKey)
 }
 
@@ -78,19 +89,20 @@ onBeforeMount(() => {
   // console.debug(shopStore.state.cartRoot?.['shipping_status']);
   // By default a cart has always the cheapest shipping set, therefore we can skip this step.
   // But with the link on verify the user is still able to choose a different shipping.
-  if (['cheapest', 'most_expensive'].includes(shopStore.state.cartRoot?.['shipping_status'])) {
-    console.debug(`Skip cheapest shipping @ %o`, shopStore.state.cartRoot);
-    nextStep().then(() => shopStore.navigateToNext());
-    return;
+  if (["cheapest", "most_expensive"].includes(shopStore.state.cartRoot?.["shipping_status"])) {
+    console.debug(`Skip cheapest shipping @ %o`, shopStore.state.cartRoot)
+    nextStep().then(() => shopStore.navigateToNext())
+    return
   }
 
   fetchShippingData()
-  state.selectedShippingMethod = shopStore.state.cartRoot?.['shipping']
+  state.selectedShippingMethod = shopStore.state.cartRoot?.["shipping"]
 })
 </script>
 
-
 <style scoped>
-  .shipping-bar {width: 100%; margin-right: var(--ignt-spacing-large)}
-
+.shipping-bar {
+  width: 100%;
+  margin-right: var(--ignt-spacing-large);
+}
 </style>
diff --git a/src/Steps/ShopUserDataGuest.vue b/src/Steps/ShopUserDataGuest.vue
index 9a1aef8..57c6992 100644
--- a/src/Steps/ShopUserDataGuest.vue
+++ b/src/Steps/ShopUserDataGuest.vue
@@ -1,101 +1,101 @@
 <template>
-    <slot name="top_actions" v-if="shopStore.state.topActions"
-        :nextName="$t('viur.shop.next')"
-        :activefunction="()=>true"
-        :nextfunction="nextStep"
-    >
-    </slot>
-
+  <slot
+    name="top_actions"
+    v-if="shopStore.state.topActions"
+    :nextName="$t('viur.shop.next')"
+    :activefunction="() => true"
+    :nextfunction="nextStep"
+  >
+  </slot>
+
+  <div class="viur-shop-user-data-headline">
+    {{ $t("skeleton.address.address_type.billing") }}
+  </div>
+  <address-form :formtype="addressState.billingIsShipping ? 'both' : 'billing'"> </address-form>
+
+  <sl-switch
+    class="viur-shop-user-data-switch"
+    :checked="addressState.billingIsShipping"
+    @sl-change="switchAddresses"
+  >
+    {{ $t("viur.shop.use_shipping_as_billing_address") }}
+  </sl-switch>
+
+  <div v-show="!addressState.billingIsShipping">
     <div class="viur-shop-user-data-headline">
-        {{ $t("skeleton.address.address_type.billing") }}
-    </div>
-    <address-form :formtype="addressState.billingIsShipping?'both':'billing'">
-    </address-form>
-
-    <sl-switch class="viur-shop-user-data-switch" :checked="addressState.billingIsShipping" @sl-change="switchAddresses">
-      {{  $t('viur.shop.use_shipping_as_billing_address') }}
-    </sl-switch>
-
-    <div v-show="!addressState.billingIsShipping">
-      <div class="viur-shop-user-data-headline">
-        {{ $t("skeleton.address.address_type.shipping") }}
-      </div>
-      <address-form formtype="shipping" >
-      </address-form>
+      {{ $t("skeleton.address.address_type.shipping") }}
     </div>
-
-    <component :is="params['additionalComponent']" v-if="params['additionalComponent']" ref="additionalComponent">
-    </component>
-
-    <slot name="template_userdata">
-    </slot>
-
-    <slot
-        :nextName="$t('viur.shop.next')"
-        :activefunction="()=>true"
-        :nextfunction="nextStep"
-        :hint="$t('messages.order_check_later')"
-    >
-    </slot>
+    <address-form formtype="shipping"> </address-form>
+  </div>
+
+  <component
+    :is="params['additionalComponent']"
+    v-if="params['additionalComponent']"
+    ref="additionalComponent"
+  >
+  </component>
+
+  <slot name="template_userdata"> </slot>
+
+  <slot
+    :nextName="$t('viur.shop.next')"
+    :activefunction="() => true"
+    :nextfunction="nextStep"
+    :hint="$t('messages.order_check_later')"
+  >
+  </slot>
 </template>
 
-
-
 <script setup>
-import {reactive, onBeforeMount, watch, useTemplateRef} from 'vue'
-import AddressForm from '../components/AddressForm.vue'
-import {useAddress} from "../composables/address";
-import {useViurShopStore} from "../shop";
-const shopStore = useViurShopStore();
-const {state:addressState,saveAddresses} = useAddress()
-const additionalComponent = useTemplateRef('additionalComponent')
+import { reactive, onBeforeMount, watch, useTemplateRef } from "vue"
+import AddressForm from "../components/AddressForm.vue"
+import { useAddress } from "../composables/address"
+import { useViurShopStore } from "../shop"
+const shopStore = useViurShopStore()
+const { state: addressState, saveAddresses } = useAddress()
+const additionalComponent = useTemplateRef("additionalComponent")
 const props = defineProps({
-  params:{
-    type:Object,
-    default:{}
+  params: {
+    type: Object,
+    default: {}
   }
 })
 
-const state = reactive({
-})
+const state = reactive({})
 
-function switchAddresses(event){
-  addressState.billingIsShipping=event.target.checked
+function switchAddresses(event) {
+  addressState.billingIsShipping = event.target.checked
 }
 
-onBeforeMount(()=>{
-  if (!shopStore.state.order?.['billing_address']?.['dest']){
+onBeforeMount(() => {
+  if (!shopStore.state.order?.["billing_address"]?.["dest"]) {
     addressState.billingIsShipping = true //init
-  }
-  else if (shopStore.state.order?.['billing_address']?.['dest']?.['address_type']?.includes('shipping')){
+  } else if (shopStore.state.order?.["billing_address"]?.["dest"]?.["address_type"]?.includes("shipping")) {
     addressState.billingIsShipping = true
-  }
-  else{
+  } else {
     addressState.billingIsShipping = false
   }
 })
 
-
-async function nextStep(){
+async function nextStep() {
   // form is only valid if the action field ends with Success
-  try{
-    if (props.params?.additionalComponent){
-        let valid = await additionalComponent.value.valid()
-        if (!valid){
-          return false
-        }
+  try {
+    if (props.params?.additionalComponent) {
+      let valid = await additionalComponent.value.valid()
+      if (!valid) {
+        return false
+      }
     }
 
     let result = await saveAddresses(addressState.billingIsShipping)
-    if (result?.['action'] && result['action'].endsWith('Success')){
+    if (result?.["action"] && result["action"].endsWith("Success")) {
       return true
     }
     return false
-  } catch(error){
+  } catch (error) {
     return false
   }
 }
-
 </script>
 
 <style scoped>
diff --git a/src/Steps/index.js b/src/Steps/index.js
index d0c3f98..11e81c1 100644
--- a/src/Steps/index.js
+++ b/src/Steps/index.js
@@ -1,15 +1,8 @@
-import ShopCart from './ShopCart.vue'
-import ShopUserDataGuest from './ShopUserDataGuest.vue'
-import ShopShippingMethod from './ShopShippingMethod.vue'
-import ShopPaymentProvider from './ShopPaymentProvider.vue'
-import ShopOrderConfirm from './ShopOrderConfirm.vue'
-import ShopOrderComplete from './ShopOrderComplete.vue'
+import ShopCart from "./ShopCart.vue"
+import ShopUserDataGuest from "./ShopUserDataGuest.vue"
+import ShopShippingMethod from "./ShopShippingMethod.vue"
+import ShopPaymentProvider from "./ShopPaymentProvider.vue"
+import ShopOrderConfirm from "./ShopOrderConfirm.vue"
+import ShopOrderComplete from "./ShopOrderComplete.vue"
 
-export {
-    ShopCart,
-    ShopUserDataGuest,
-    ShopShippingMethod,
-    ShopPaymentProvider,
-    ShopOrderConfirm,
-    ShopOrderComplete
-  }
\ No newline at end of file
+export { ShopCart, ShopUserDataGuest, ShopShippingMethod, ShopPaymentProvider, ShopOrderConfirm, ShopOrderComplete }
diff --git a/src/components/AddressForm.vue b/src/components/AddressForm.vue
index 126f486..21f8936 100644
--- a/src/components/AddressForm.vue
+++ b/src/components/AddressForm.vue
@@ -1,99 +1,101 @@
 <template>
-    <LoadingHandler :is-loading="addressState[`${state.formtype}IsLoading`]"></LoadingHandler>
-    <ViForm
-        :ref="(el)=>{addressState[`${state.formtype}Form`]=el; return el}"
-        :module="`${shopStore.state.moduleName}/address`"
-        :action="state.action"
-        :skelkey="state.skelkey"
-        :values="{'address_type':state.address_type, 'customer_type':'private'}"
-        :useCategories="false"
-        :layout="shopStore.state.UserDataLayout"
-        @change="formChange"
-        :default-language="state.language"
-        error-style="decent"
-      >
-    </ViForm>
+  <LoadingHandler :is-loading="addressState[`${state.formtype}IsLoading`]"></LoadingHandler>
+  <ViForm
+    :ref="
+      (el) => {
+        addressState[`${state.formtype}Form`] = el
+        return el
+      }
+    "
+    :module="`${shopStore.state.moduleName}/address`"
+    :action="state.action"
+    :skelkey="state.skelkey"
+    :values="{ address_type: state.address_type, customer_type: 'private' }"
+    :useCategories="false"
+    :layout="shopStore.state.UserDataLayout"
+    @change="formChange"
+    :default-language="state.language"
+    error-style="decent"
+  >
+  </ViForm>
 </template>
 
 <script setup>
-import {computed, reactive, watch} from 'vue'
-import LoadingHandler from './LoadingHandler.vue';
-import ViForm from "@viur/vue-utils/forms/ViForm.vue";
-import {useViurShopStore} from "../shop";
-import {useAddress} from "../composables/address";
-import { usePayment } from '../composables/payment';
+import { computed, reactive, watch } from "vue"
+import LoadingHandler from "./LoadingHandler.vue"
+import ViForm from "@viur/vue-utils/forms/ViForm.vue"
+import { useViurShopStore } from "../shop"
+import { useAddress } from "../composables/address"
+import { usePayment } from "../composables/payment"
 
-
-const shopStore = useViurShopStore();
-const {state:addressState} = useAddress();
-const {state:paymentState, fetchPaymentData} = usePayment()
+const shopStore = useViurShopStore()
+const { state: addressState } = useAddress()
+const { state: paymentState, fetchPaymentData } = usePayment()
 
 const props = defineProps({
-  formtype:{
-    type:String,
-    default:"billing" // formtype: shipping, billing, both
+  formtype: {
+    type: String,
+    default: "billing" // formtype: shipping, billing, both
   }
 })
 
 const state = reactive({
-  formtype:computed(()=>{
-    if (['billing','both'].includes(props.formtype)){
+  formtype: computed(() => {
+    if (["billing", "both"].includes(props.formtype)) {
       return "billing"
     }
-    return 'shipping'
+    return "shipping"
   }),
 
-  action: computed(()=>{
-    if (state.formtype ==='shipping' && shopStore.state.cartRoot?.['shipping_address']){
-      return 'edit'
-    } else if (state.formtype === 'billing' && shopStore.state.order?.['billing_address']){
-      return 'edit'
+  action: computed(() => {
+    if (state.formtype === "shipping" && shopStore.state.cartRoot?.["shipping_address"]) {
+      return "edit"
+    } else if (state.formtype === "billing" && shopStore.state.order?.["billing_address"]) {
+      return "edit"
     } else {
-      return 'add'
+      return "add"
     }
   }),
 
-  skelkey:computed(()=>{
-    if (state.formtype === 'shipping' && shopStore.state.cartRoot?.['shipping_address']){
-      return shopStore.state.cartRoot['shipping_address']?.['dest']?.['key']
-    } else if (state.formtype === 'billing' && shopStore.state.order?.['billing_address']){
-      return shopStore.state.order?.['billing_address']?.['dest']?.['key']
+  skelkey: computed(() => {
+    if (state.formtype === "shipping" && shopStore.state.cartRoot?.["shipping_address"]) {
+      return shopStore.state.cartRoot["shipping_address"]?.["dest"]?.["key"]
+    } else if (state.formtype === "billing" && shopStore.state.order?.["billing_address"]) {
+      return shopStore.state.order?.["billing_address"]?.["dest"]?.["key"]
     }
     return null
-
   }),
-  address_type:computed(()=>{
-    if (props.formtype === 'both'){
-      return ["shipping",'billing']
+  address_type: computed(() => {
+    if (props.formtype === "both") {
+      return ["shipping", "billing"]
     }
     return [state.formtype]
   }),
   language: "de"
 })
 
-function formChange(data){
-  if (data.name === "country"){
+function formChange(data) {
+  if (data.name === "country") {
     state.language = data.value
-    if (state.formtype === 'billing'){
+    if (state.formtype === "billing") {
       fetchPaymentData()
     }
   }
 }
 
-
-watch(()=>addressState.billingIsShipping, (newVal,oldVal)=>{
-  if(oldVal && !newVal){
-    if(shopStore.state.cartRoot?.['shipping_address']){
-      shopStore.state.cartRoot['shipping_address'] = null
+watch(
+  () => addressState.billingIsShipping,
+  (newVal, oldVal) => {
+    if (oldVal && !newVal) {
+      if (shopStore.state.cartRoot?.["shipping_address"]) {
+        shopStore.state.cartRoot["shipping_address"] = null
+      }
+      addressState[`shippingForm`].state.skel = { address_type: state.address_type, customer_type: "private" }
     }
-    addressState[`shippingForm`].state.skel = {'address_type':state.address_type, 'customer_type':'private'}
-  }
-
-  addressState[`${state.formtype}Form`].state.skel['address_type'] = state.address_type
-})
 
+    addressState[`${state.formtype}Form`].state.skel["address_type"] = state.address_type
+  }
+)
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/src/components/AddressFormLayout.vue b/src/components/AddressFormLayout.vue
index aac965e..e37cf78 100644
--- a/src/components/AddressFormLayout.vue
+++ b/src/components/AddressFormLayout.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="vi-shop-cart-form-wrap" v-if="Object.keys(formState.structure).length > 0">
+  <div
+    class="vi-shop-cart-form-wrap"
+    v-if="Object.keys(formState.structure).length > 0"
+  >
     <slot
       boneName="salutation"
       :widget="getBoneWidget(formState.structure['salutation']['type'])"
@@ -7,129 +10,140 @@
     >
     </slot>
 
-    <slot boneName="firstname"
-        :widget="getBoneWidget(formState.structure['firstname']['type'])"
-        label="placeholder">
+    <slot
+      boneName="firstname"
+      :widget="getBoneWidget(formState.structure['firstname']['type'])"
+      label="placeholder"
+    >
     </slot>
 
-    <slot boneName="lastname"
-          :widget="getBoneWidget(formState.structure['lastname']['type'])"
-          label="placeholder">
+    <slot
+      boneName="lastname"
+      :widget="getBoneWidget(formState.structure['lastname']['type'])"
+      label="placeholder"
+    >
     </slot>
 
-    <slot boneName="street_name"
-          :widget="getBoneWidget(formState.structure['street_name']['type'])"
-          label="placeholder">
+    <slot
+      boneName="street_name"
+      :widget="getBoneWidget(formState.structure['street_name']['type'])"
+      label="placeholder"
+    >
     </slot>
 
-    <slot boneName="street_number"
-          :widget="getBoneWidget(formState.structure['street_number']['type'])"
-          label="placeholder">
+    <slot
+      boneName="street_number"
+      :widget="getBoneWidget(formState.structure['street_number']['type'])"
+      label="placeholder"
+    >
     </slot>
 
-    <slot boneName="address_addition"
-          :widget="getBoneWidget(formState.structure['address_addition']['type'])"
-          label="placeholder">
+    <slot
+      boneName="address_addition"
+      :widget="getBoneWidget(formState.structure['address_addition']['type'])"
+      label="placeholder"
+    >
     </slot>
 
     <slot
-        boneName="zip_code"
-        :widget="getBoneWidget(formState.structure['zip_code']['type'])"
-        placeholder="placeholder"
-        label="placeholder"
+      boneName="zip_code"
+      :widget="getBoneWidget(formState.structure['zip_code']['type'])"
+      placeholder="placeholder"
+      label="placeholder"
     >
     </slot>
 
-    <slot boneName="city"
-          :widget="getBoneWidget(formState.structure['city']['type'])"
-          label="placeholder">
+    <slot
+      boneName="city"
+      :widget="getBoneWidget(formState.structure['city']['type'])"
+      label="placeholder"
+    >
     </slot>
 
+    <slot
+      boneName="country"
+      :widget="getBoneWidget(formState.structure['country']['type'])"
+      label="placeholder"
+    >
+    </slot>
 
-  <slot boneName="country"
-        :widget="getBoneWidget(formState.structure['country']['type'])"
-        label="placeholder">
-  </slot>
-
-  <slot boneName="email"
-        :widget="EmailCheckBone"
-        label="placeholder">
-  </slot>
-
-  <slot boneName="phone"
-        :widget="PhoneCheckBone"
-        label="placeholder">
-  </slot>
+    <slot
+      boneName="email"
+      :widget="EmailCheckBone"
+      label="placeholder"
+    >
+    </slot>
 
+    <slot
+      boneName="phone"
+      :widget="PhoneCheckBone"
+      label="placeholder"
+    >
+    </slot>
   </div>
 </template>
 <script setup>
-import { inject } from "vue";
-import { getBoneWidget } from "@viur/vue-utils/bones/edit";
-import EmailCheckBone from "../custombones/EmailCheckBone.vue";
-import PhoneCheckBone from "../custombones/PhoneCheckBone.vue";
+import { inject } from "vue"
+import { getBoneWidget } from "@viur/vue-utils/bones/edit"
+import EmailCheckBone from "../custombones/EmailCheckBone.vue"
+import PhoneCheckBone from "../custombones/PhoneCheckBone.vue"
 
-const formState = inject("formState");
-const formUpdate = inject("formUpdate");
+const formState = inject("formState")
+const formUpdate = inject("formUpdate")
 </script>
 <style scoped>
-
-.vi-shop-cart-form-wrap{
+.vi-shop-cart-form-wrap {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: var(--sl-spacing-small);
   margin-bottom: var(--sl-spacing-medium);
 }
 
-:deep(.bone-wrapper){
+:deep(.bone-wrapper) {
   margin: 0;
 }
 
-:deep(.wrapper-bone-firstname){
+:deep(.wrapper-bone-firstname) {
   grid-column: 1 / span 2;
 }
 
-:deep(.wrapper-bone-lastname){
+:deep(.wrapper-bone-lastname) {
   grid-column: 3 / span 2;
 }
 
-:deep(.wrapper-bone-street_name){
+:deep(.wrapper-bone-street_name) {
   grid-column: 1 / span 3;
 }
 
-:deep(.wrapper-bone-street_number){
+:deep(.wrapper-bone-street_number) {
   grid-column: 4 / span 1;
 }
 
-:deep(.wrapper-bone-address_addition){
+:deep(.wrapper-bone-address_addition) {
   grid-column: 1 / span 4;
 }
 
-:deep(.wrapper-bone-zip_code){
+:deep(.wrapper-bone-zip_code) {
   grid-column: 1 / span 2;
 }
 
-:deep(.wrapper-bone-city){
+:deep(.wrapper-bone-city) {
   grid-column: 3 / span 2;
 }
 
-:deep(.wrapper-bone-country){
+:deep(.wrapper-bone-country) {
   grid-column: 1 / span 4;
 }
-:deep(.wrapper-bone-email){
+:deep(.wrapper-bone-email) {
   grid-column: 1 / span 4;
 }
 
-:deep(.wrapper-bone-phone){
+:deep(.wrapper-bone-phone) {
   grid-column: 1 / span 4;
 }
 
-:deep(.wrapper-bone-is_default){
+:deep(.wrapper-bone-is_default) {
   padding: var(--sl-spacing-x-small) 0;
   grid-column: 1 / span 4;
 }
-
-
-
-
 </style>
diff --git a/src/components/CardSelector.vue b/src/components/CardSelector.vue
index 65ec08e..2f918c4 100644
--- a/src/components/CardSelector.vue
+++ b/src/components/CardSelector.vue
@@ -1,52 +1,60 @@
 <template>
   <sl-radio-group :value="state.currentSelection">
-    <template v-for="(option,i) in options">
-        <sl-card selectable @sl-change="changeSelection(i)" :selected="i===state.currentSelection" horizontal>
-            <slot :option="option" :index="i">
-                {{i}}: {{ option }}
-            </slot>
-          <sl-radio :value="i"></sl-radio>
-        </sl-card>
+    <template v-for="(option, i) in options">
+      <sl-card
+        selectable
+        @sl-change="changeSelection(i)"
+        :selected="i === state.currentSelection"
+        horizontal
+      >
+        <slot
+          :option="option"
+          :index="i"
+        >
+          {{ i }}: {{ option }}
+        </slot>
+        <sl-radio :value="i"></sl-radio>
+      </sl-card>
     </template>
   </sl-radio-group>
 </template>
 
 <script setup>
-import {onMounted, reactive, watch} from 'vue'
+import { onMounted, reactive, watch } from "vue"
 
 const selection = defineModel("selection")
 
-const emits = defineEmits(['change'])
+const emits = defineEmits(["change"])
 
 const props = defineProps({
-    options:{
-        type: Array,
-        default:[]
-    },
+  options: {
+    type: Array,
+    default: []
+  }
 })
 
 const state = reactive({
-    currentSelection:null
+  currentSelection: null
 })
 
-function changeSelection(i){
-    if (state.currentSelection === i){
-        state.currentSelection = null
-        selection.value = null
-    }else{
-        state.currentSelection = i
-        selection.value = props.options[i]
-    }
-    emits("change", props.options[i])
+function changeSelection(i) {
+  if (state.currentSelection === i) {
+    state.currentSelection = null
+    selection.value = null
+  } else {
+    state.currentSelection = i
+    selection.value = props.options[i]
+  }
+  emits("change", props.options[i])
 }
 
-onMounted(()=>{
-  if (selection){
-    state.currentSelection = props.options.findIndex((option)=>option['dest']['key']===selection.value?.['dest']?.['key'])
+onMounted(() => {
+  if (selection) {
+    state.currentSelection = props.options.findIndex(
+      (option) => option["dest"]["key"] === selection.value?.["dest"]?.["key"]
+    )
   }
-
 })
-
 </script>
 
 <style scoped>
@@ -59,17 +67,16 @@ sl-card {
   width: calc(100% - 6px);
   margin-left: 3px;
   margin-top: var(--ignt-spacing-small);
-  &[selected]::part(base){
-    border:1px solid var(--sl-color-primary-500);
+  &[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;
+  &::part(body) {
+    display: flex;
     flex-direction: row;
-      justify-content: space-between;
-      align-items: center;
+    justify-content: space-between;
+    align-items: center;
   }
 }
-
 </style>
diff --git a/src/components/CartItem.vue b/src/components/CartItem.vue
index f21a4c1..12b722c 100644
--- a/src/components/CartItem.vue
+++ b/src/components/CartItem.vue
@@ -1,41 +1,44 @@
 <template>
   <div class="viur-shop-item-wrapper">
-    <sl-card horizontal class="viur-shop-cart-leaf">
-    <img
-      class="viur-shop-cart-leaf-image"
-      slot="image"
-      :src="
-        getImage(
-            item?.shop_image
-            ? item.shop_image
-            : undefined,
-        )
-      "
-    />
-    <h5 v-if="item.shop_art_no_or_gtin" class="viur-shop-cart-leaf-artno" slot="header">
-      {{ getValue(item.shop_art_no_or_gtin) }}
-    </h5>
-    <a class="viur-shop-cart-leaf-headline-link"
-       v-if="item.article?.dest?.shop_view_url ?? item.article?.dest?.view_url"
-       :href="item.article?.dest?.shop_view_url ?? item.article?.dest?.view_url"
+    <sl-card
+      horizontal
+      class="viur-shop-cart-leaf"
     >
+      <img
+        class="viur-shop-cart-leaf-image"
+        slot="image"
+        :src="getImage(item?.shop_image ? item.shop_image : undefined)"
+      />
+      <h5
+        v-if="item.shop_art_no_or_gtin"
+        class="viur-shop-cart-leaf-artno"
+        slot="header"
+      >
+        {{ getValue(item.shop_art_no_or_gtin) }}
+      </h5>
+      <a
+        class="viur-shop-cart-leaf-headline-link"
+        v-if="item.article?.dest?.shop_view_url ?? item.article?.dest?.view_url"
+        :href="item.article?.dest?.shop_view_url ?? item.article?.dest?.view_url"
+      >
+        <h4
+          class="viur-shop-cart-leaf-headline headline"
+          v-html="getValue(item.shop_name)"
+        ></h4>
+      </a>
       <h4
+        v-else
         class="viur-shop-cart-leaf-headline headline"
         v-html="getValue(item.shop_name)"
       ></h4>
-    </a>
-    <h4 v-else
-        class="viur-shop-cart-leaf-headline headline"
-        v-html="getValue(item.shop_name)"
-      ></h4>
-    <div
-      class="viur-shop-cart-leaf-description"
-      v-html="getValue(item.shop_description)"
-    ></div>
-
-    <div class="viur-shop-cart-leaf-quantity">
-      <div class="viur-shop-cart-leaf-label">{{$t('viur.shop.quantity')}}</div>
-      <sl-input
+      <div
+        class="viur-shop-cart-leaf-description"
+        v-html="getValue(item.shop_description)"
+      ></div>
+
+      <div class="viur-shop-cart-leaf-quantity">
+        <div class="viur-shop-cart-leaf-label">{{ $t("viur.shop.quantity") }}</div>
+        <sl-input
           :disabled="!edit"
           class="viur-shop-cart-leaf-value viur-shop-cart-leaf-value--quantity"
           type="number"
@@ -45,87 +48,115 @@
           :value="item.quantity"
           @sl-change="changeAmount($event.target.value)"
         >
-        <dialog-Button slot="prefix" class="decent" v-if="item.quantity===1" variant="danger" outline>
-          <sl-icon name="trash"></sl-icon>
-          <template #dialog="{close}">
-            {{ $t('messages.remove_article_from_cart') }}
-            <sl-bar>
-              <sl-button slot="left" @click="close">{{$t('actions.cancel')}}</sl-button>
-              <sl-button slot="right" variant="danger" @click="removeArticle(); close()">{{ $t('actions.delete') }}</sl-button>
-            </sl-bar>
-          </template>
-        </dialog-Button>
-        <sl-button slot="prefix" v-else :disabled="!edit" @click="changeAmount(item.quantity-=1)">
-          <sl-icon name="dash-lg"></sl-icon>
-        </sl-button>
-        <sl-button slot="suffix" :disabled="!edit" @click="changeAmount(item.quantity+=1)">
-          <sl-icon name="plus-lg"></sl-icon>
-        </sl-button>
-      </sl-input>
-    </div>
-
-    <div class="viur-shop-cart-leaf-unitprice">
-      <div class="viur-shop-cart-leaf-label">{{$t('viur.shop.unit_price')}}</div>
-      <price-box :item="item"></price-box>
-    </div>
-
-    <div class="viur-shop-cart-leaf-availability">
-      <div class="viur-shop-cart-leaf-label">{{ $t('viur.shop.availability') }}</div>
-      <div class="availability"
-           :class="`availability--${item.shop_availability}`"
-      >
-        {{$t(item.shop_availability)}}
+          <dialog-Button
+            slot="prefix"
+            class="decent"
+            v-if="item.quantity === 1"
+            variant="danger"
+            outline
+          >
+            <sl-icon name="trash"></sl-icon>
+            <template #dialog="{ close }">
+              {{ $t("messages.remove_article_from_cart") }}
+              <sl-bar>
+                <sl-button
+                  slot="left"
+                  @click="close"
+                  >{{ $t("actions.cancel") }}</sl-button
+                >
+                <sl-button
+                  slot="right"
+                  variant="danger"
+                  @click="
+                    removeArticle()
+                    close()
+                  "
+                  >{{ $t("actions.delete") }}</sl-button
+                >
+              </sl-bar>
+            </template>
+          </dialog-Button>
+          <sl-button
+            slot="prefix"
+            v-else
+            :disabled="!edit"
+            @click="changeAmount((item.quantity -= 1))"
+          >
+            <sl-icon name="dash-lg"></sl-icon>
+          </sl-button>
+          <sl-button
+            slot="suffix"
+            :disabled="!edit"
+            @click="changeAmount((item.quantity += 1))"
+          >
+            <sl-icon name="plus-lg"></sl-icon>
+          </sl-button>
+        </sl-input>
       </div>
-    </div>
 
-    <div class="viur-shop-cart-leaf-price">
-      <div class="viur-shop-cart-leaf-label">{{ $t('viur.shop.total_price') }}</div>
-      <price-box :item="item" :amount="item.quantity" :retail="false"></price-box>
-    </div>
+      <div class="viur-shop-cart-leaf-unitprice">
+        <div class="viur-shop-cart-leaf-label">{{ $t("viur.shop.unit_price") }}</div>
+        <price-box :item="item"></price-box>
+      </div>
 
+      <div class="viur-shop-cart-leaf-availability">
+        <div class="viur-shop-cart-leaf-label">{{ $t("viur.shop.availability") }}</div>
+        <div
+          class="availability"
+          :class="`availability--${item.shop_availability}`"
+        >
+          {{ $t(item.shop_availability) }}
+        </div>
+      </div>
 
-  </sl-card>
-  <div class="loading" v-if="cartState.isUpdating">
+      <div class="viur-shop-cart-leaf-price">
+        <div class="viur-shop-cart-leaf-label">{{ $t("viur.shop.total_price") }}</div>
+        <price-box
+          :item="item"
+          :amount="item.quantity"
+          :retail="false"
+        ></price-box>
+      </div>
+    </sl-card>
+    <div
+      class="loading"
+      v-if="cartState.isUpdating"
+    >
       <sl-spinner></sl-spinner>
     </div>
   </div>
 </template>
 <script setup>
-import { useDebounceFn } from '@vueuse/core'
-import { getImage } from '../utils';
-import { useCart } from '../composables/cart';
-import dialogButton from './dialogButton.vue';
-import PriceBox from "./PriceBox.vue";
+import { useDebounceFn } from "@vueuse/core"
+import { getImage } from "../utils"
+import { useCart } from "../composables/cart"
+import dialogButton from "./dialogButton.vue"
+import PriceBox from "./PriceBox.vue"
 
-const {addItem, removeItem, state:cartState, getValue} = useCart()
+const { addItem, removeItem, state: cartState, getValue } = useCart()
 
 const changeAmount = useDebounceFn((amount) => {
   props.item.quantity = amount
-  addItem(props.item['article']['dest']['key'],amount)
+  addItem(props.item["article"]["dest"]["key"], amount)
 }, 1000)
 
-
-
-
-
 const props = defineProps({
-    item:{
-        required:true
-    },
-    edit:{
-      type:Boolean,
-      default:false //true
-    }
+  item: {
+    required: true
+  },
+  edit: {
+    type: Boolean,
+    default: false //true
+  }
 })
 
-function removeArticle(){
-  removeItem(props.item['article']['dest']['key'])
+function removeArticle() {
+  removeItem(props.item["article"]["dest"]["key"])
 }
-
 </script>
 <style scoped>
 @layer foundation.shop {
-  .viur-shop-cart-leaf-headline-link{
+  .viur-shop-cart-leaf-headline-link {
     grid-column: 1 / span 4;
     margin: 0;
     font-size: var(--shop-leaf-headline-font-size);
@@ -133,16 +164,16 @@ function removeArticle(){
   .availability {
     display: flex;
     flex-basis: 70%;
-    font-size: .9em;
+    font-size: 0.9em;
     align-items: center;
     justify-content: flex-start;
     white-space: nowrap;
     &:before {
-      content: '';
+      content: "";
       display: block;
       background-color: #666;
-      width: .7em;
-      height: .7em;
+      width: 0.7em;
+      height: 0.7em;
       border-radius: 50%;
       margin-right: 5px;
       margin-bottom: 2px;
@@ -236,7 +267,7 @@ function removeArticle(){
   }
 
   .viur-shop-cart-leaf-artno {
-    font-size: .8em;
+    font-size: 0.8em;
     grid-column: 1 / span 5;
     margin: 0;
 
@@ -310,11 +341,11 @@ function removeArticle(){
   .viur-shop-cart-leaf-value--quantity::part(form-control-label) {
     color: var(--shop-leaf-label-color);
     font-weight: var(--shop-leaf-label-font-weight);
-    font-size: calc(var(--shop-leaf-label-font-size) * .75);
+    font-size: calc(var(--shop-leaf-label-font-size) * 0.75);
     margin-bottom: var(--ignt-spacing-2x-small);
   }
 
-  .loading{
+  .loading {
     position: absolute;
     top: 0;
     background: #ffffffcc;
@@ -326,43 +357,39 @@ function removeArticle(){
     justify-content: center;
     align-items: center;
 
-
-    & sl-spinner{
-      font-size:3rem;
+    & sl-spinner {
+      font-size: 3rem;
     }
   }
 
-  .viur-shop-item-wrapper{
+  .viur-shop-item-wrapper {
     position: relative;
   }
 
-
-  .viur-shop-cart-leaf-value--quantity{
+  .viur-shop-cart-leaf-value--quantity {
     align-self: center;
     grid-column: span 1;
 
-    &::part(input){
+    &::part(input) {
       text-align: center;
       padding: 0;
     }
 
-    sl-button{
+    sl-button {
       margin: 0;
-      transition: all ease .3s;
+      transition: all ease 0.3s;
 
-      &::part(base){
+      &::part(base) {
         background-color: transparent;
         border: none;
       }
 
-      &::part(label){
+      &::part(label) {
         padding: 0;
         height: var(--sl-input-height-medium);
         width: calc(var(--sl-input-height-medium) / 5 * 4);
       }
     }
-
   }
-
 }
 </style>
diff --git a/src/components/CartItemSmall.vue b/src/components/CartItemSmall.vue
index b5ba1e5..bc6155b 100644
--- a/src/components/CartItemSmall.vue
+++ b/src/components/CartItemSmall.vue
@@ -1,23 +1,20 @@
 <template>
   <div class="viur-shop-item-wrapper">
-    <sl-card horizontal class="viur-shop-cart-leaf-small">
-    <img
-      class="viur-shop-cart-leaf-image"
-      slot="image"
-      :src="
-        getImage(
-            item?.shop_image
-            ? item.shop_image
-            : undefined,
-        )
-      "
-    />
-    <h4
-      class="viur-shop-cart-leaf-headline headline"
-      v-html="getValue(item.shop_name)"
-    ></h4>
-
-    <sl-input
+    <sl-card
+      horizontal
+      class="viur-shop-cart-leaf-small"
+    >
+      <img
+        class="viur-shop-cart-leaf-image"
+        slot="image"
+        :src="getImage(item?.shop_image ? item.shop_image : undefined)"
+      />
+      <h4
+        class="viur-shop-cart-leaf-headline headline"
+        v-html="getValue(item.shop_name)"
+      ></h4>
+
+      <sl-input
         :disabled="!edit"
         class="viur-shop-cart-leaf-value viur-shop-cart-leaf-value--quantity"
         type="number"
@@ -27,73 +24,106 @@
         :value="item.quantity"
         @sl-change="changeAmount($event.target.value)"
       >
-      <dialog-Button slot="prefix" class="decent" v-if="item.quantity===1" variant="danger" outline :disabled="!edit">
-        <sl-icon name="trash"></sl-icon>
-        <template #dialog="{close}">
-          {{ $t('messages.remove_article_from_cart') }}
-          <sl-bar>
-            <sl-button slot="left" @click="close">{{$t('actions.cancel')}}</sl-button>
-            <sl-button slot="right" variant="danger" @click="removeArticle(); close()">{{ $t('actions.delete') }}</sl-button>
-          </sl-bar>
-        </template>
-      </dialog-Button>
-      <sl-button slot="prefix" v-else :disabled="!edit" @click="changeAmount(item.quantity-=1)">
-        <sl-icon name="dash-lg"></sl-icon>
-      </sl-button>
-      <sl-button slot="suffix" :disabled="!edit" @click="changeAmount(item.quantity+=1)">
-        <sl-icon name="plus-lg"></sl-icon>
-      </sl-button>
-    </sl-input>
-
-    <div class="viur-shop-cart-leaf-article-number">
-      <div class="viur-shop-cart-leaf-label">{{ $t('viur.shop.article_number') }}</div>
-      {{ getValue(item.shop_art_no_or_gtin) }}
-    </div>
-
-    <div class="viur-shop-cart-leaf-unitprice">
-      <div class="viur-shop-cart-leaf-label">{{$t('viur.shop.unit_price')}}</div>
-      <price-box :item="item"></price-box>
-    </div>
+        <dialog-Button
+          slot="prefix"
+          class="decent"
+          v-if="item.quantity === 1"
+          variant="danger"
+          outline
+          :disabled="!edit"
+        >
+          <sl-icon name="trash"></sl-icon>
+          <template #dialog="{ close }">
+            {{ $t("messages.remove_article_from_cart") }}
+            <sl-bar>
+              <sl-button
+                slot="left"
+                @click="close"
+                >{{ $t("actions.cancel") }}</sl-button
+              >
+              <sl-button
+                slot="right"
+                variant="danger"
+                @click="
+                  removeArticle()
+                  close()
+                "
+                >{{ $t("actions.delete") }}</sl-button
+              >
+            </sl-bar>
+          </template>
+        </dialog-Button>
+        <sl-button
+          slot="prefix"
+          v-else
+          :disabled="!edit"
+          @click="changeAmount((item.quantity -= 1))"
+        >
+          <sl-icon name="dash-lg"></sl-icon>
+        </sl-button>
+        <sl-button
+          slot="suffix"
+          :disabled="!edit"
+          @click="changeAmount((item.quantity += 1))"
+        >
+          <sl-icon name="plus-lg"></sl-icon>
+        </sl-button>
+      </sl-input>
+
+      <div class="viur-shop-cart-leaf-article-number">
+        <div class="viur-shop-cart-leaf-label">{{ $t("viur.shop.article_number") }}</div>
+        {{ getValue(item.shop_art_no_or_gtin) }}
+      </div>
 
+      <div class="viur-shop-cart-leaf-unitprice">
+        <div class="viur-shop-cart-leaf-label">{{ $t("viur.shop.unit_price") }}</div>
+        <price-box :item="item"></price-box>
+      </div>
 
-    <div class="viur-shop-cart-leaf-price">
-        <div class="viur-shop-cart-leaf-label">{{ $t('viur.shop.total_price') }}</div>
-        <price-box :item="item" :amount="item.quantity" :retail="false"></price-box>
+      <div class="viur-shop-cart-leaf-price">
+        <div class="viur-shop-cart-leaf-label">{{ $t("viur.shop.total_price") }}</div>
+        <price-box
+          :item="item"
+          :amount="item.quantity"
+          :retail="false"
+        ></price-box>
       </div>
-  </sl-card>
-  <div class="loading" v-if="cartState.isUpdating">
+    </sl-card>
+    <div
+      class="loading"
+      v-if="cartState.isUpdating"
+    >
       <sl-spinner></sl-spinner>
     </div>
   </div>
 </template>
 <script setup>
-import { useDebounceFn } from '@vueuse/core'
-import { getImage } from '../utils';
-import { useCart } from '../composables/cart';
-import dialogButton from './dialogButton.vue';
-import PriceBox from "./PriceBox.vue";
+import { useDebounceFn } from "@vueuse/core"
+import { getImage } from "../utils"
+import { useCart } from "../composables/cart"
+import dialogButton from "./dialogButton.vue"
+import PriceBox from "./PriceBox.vue"
 
-const {addItem, removeItem, state:cartState, getValue} = useCart()
+const { addItem, removeItem, state: cartState, getValue } = useCart()
 
 const changeAmount = useDebounceFn((amount) => {
   props.item.quantity = amount
-  addItem(props.item['article']['dest']['key'],amount)
+  addItem(props.item["article"]["dest"]["key"], amount)
 }, 1000)
 
 const props = defineProps({
-    item:{
-        required:true
-    },
-    edit:{
-      type:Boolean,
-      default:false //true
-    }
+  item: {
+    required: true
+  },
+  edit: {
+    type: Boolean,
+    default: false //true
+  }
 })
 
-function removeArticle(){
-  removeItem(props.item['article']['dest']['key'])
+function removeArticle() {
+  removeItem(props.item["article"]["dest"]["key"])
 }
-
 </script>
 <style scoped>
 @layer foundation.shop {
@@ -188,11 +218,11 @@ function removeArticle(){
   .viur-shop-cart-leaf-value--quantity::part(form-control-label) {
     color: var(--shop-leaf-label-color);
     font-weight: var(--shop-leaf-label-font-weight);
-    font-size: calc(var(--shop-leaf-label-font-size) *.75);
+    font-size: calc(var(--shop-leaf-label-font-size) * 0.75);
     margin-bottom: var(--ignt-spacing-2x-small);
   }
 
-  .loading{
+  .loading {
     position: absolute;
     top: 0;
     background: #ffffffcc;
@@ -204,42 +234,39 @@ function removeArticle(){
     justify-content: center;
     align-items: center;
 
-
-    & sl-spinner{
-      font-size:3rem;
+    & sl-spinner {
+      font-size: 3rem;
     }
   }
 
-  .viur-shop-item-wrapper{
+  .viur-shop-item-wrapper {
     position: relative;
   }
 
-  .viur-shop-cart-leaf-value--quantity{
+  .viur-shop-cart-leaf-value--quantity {
     align-self: center;
     grid-column: span 1;
 
-    &::part(input){
+    &::part(input) {
       text-align: center;
       padding: 0;
     }
 
-    sl-button{
+    sl-button {
       margin: 0;
-      transition: all ease .3s;
+      transition: all ease 0.3s;
 
-      &::part(base){
+      &::part(base) {
         background-color: transparent;
         border: none;
       }
 
-      &::part(label){
+      &::part(label) {
         padding: 0;
         height: var(--sl-input-height-medium);
         width: calc(var(--sl-input-height-medium) / 5 * 4);
       }
     }
-
   }
-
 }
 </style>
diff --git a/src/components/DiscountInput.vue b/src/components/DiscountInput.vue
index 951aedf..3e577c6 100644
--- a/src/components/DiscountInput.vue
+++ b/src/components/DiscountInput.vue
@@ -1,23 +1,31 @@
 <template>
   {{ state.alert.msg }}
-    <shop-alert
-      v-if="state.alert.show"
-      :variant="state.alert.variant"
-      @onHide="state.alert = {}"
-      duration="infinity"
-    >
-  <template #alertMsg>
-    {{ state.alert.msg }}
-  </template>
+  <shop-alert
+    v-if="state.alert.show"
+    :variant="state.alert.variant"
+    @onHide="state.alert = {}"
+    duration="infinity"
+  >
+    <template #alertMsg>
+      {{ state.alert.msg }}
+    </template>
   </shop-alert>
 
   <template v-if="shopStore.state.cartRoot.discount">
     <div class="viur-shop-discount-view">
-    <span>Code: {{ shopStore.state.cartRoot.discount.dest.name }}</span>
-    <sl-button size="small"  outline variant="danger" @click="removeDiscountAction" :loading="state.loading">
-      <sl-icon name="x-lg" slot="prefix"></sl-icon>
-
-    </sl-button>
+      <span>Code: {{ shopStore.state.cartRoot.discount.dest.name }}</span>
+      <sl-button
+        size="small"
+        outline
+        variant="danger"
+        @click="removeDiscountAction"
+        :loading="state.loading"
+      >
+        <sl-icon
+          name="x-lg"
+          slot="prefix"
+        ></sl-icon>
+      </sl-button>
     </div>
   </template>
   <sl-button-group v-else>
@@ -28,62 +36,65 @@
       @keypress.enter="addDiscountAction()"
     >
     </sl-input>
-    <sl-button @click="addDiscountAction()" :loading="state.loading">{{ $t('viur.shop.add_discount') }}</sl-button>
+    <sl-button
+      @click="addDiscountAction()"
+      :loading="state.loading"
+      >{{ $t("viur.shop.add_discount") }}</sl-button
+    >
   </sl-button-group>
 </template>
 
 <script setup>
-import { reactive } from "vue";
-import { useViurShopStore } from "../shop";
-import { useCart } from '../composables/cart';
-const shopStore = useViurShopStore();
-const {addDiscount, removeDiscount} = useCart()
+import { reactive } from "vue"
+import { useViurShopStore } from "../shop"
+import { useCart } from "../composables/cart"
+const shopStore = useViurShopStore()
+const { addDiscount, removeDiscount } = useCart()
 
-import ShopAlert from "./ShopAlert.vue";
+import ShopAlert from "./ShopAlert.vue"
 
 const state = reactive({
   code: "",
   alert: {},
-  loading:false
-});
+  loading: false
+})
 
 function addDiscountAction() {
-  state.loading=true
+  state.loading = true
   addDiscount(state.code)
     .then(async (resp) => {
-      state.loading=false
+      state.loading = false
     })
     .catch((error) => {
-      state.loading=false
-      console.log("error bei rabatt", error);
-      state.alert.msg = "not found";
-      state.alert.show = true;
-      state.alert.variant = "danger";
-    });
+      state.loading = false
+      console.log("error bei rabatt", error)
+      state.alert.msg = "not found"
+      state.alert.show = true
+      state.alert.variant = "danger"
+    })
 }
 
-function removeDiscountAction(){
-  state.loading=true
+function removeDiscountAction() {
+  state.loading = true
   removeDiscount()
     .then(async (resp) => {
-      state.loading=false
-      state.alert.msg = "Discount removed";
-      state.alert.show = true;
-      state.alert.variant = "success";
+      state.loading = false
+      state.alert.msg = "Discount removed"
+      state.alert.show = true
+      state.alert.variant = "success"
     })
     .catch((error) => {
-      state.loading=false
-      console.log("error bei rabatt", error);
-      state.alert.msg = "not found";
-      state.alert.show = true;
-      state.alert.variant = "danger";
-    });
+      state.loading = false
+      console.log("error bei rabatt", error)
+      state.alert.msg = "not found"
+      state.alert.show = true
+      state.alert.variant = "danger"
+    })
 }
-
 </script>
 <style scoped>
-.viur-shop-discount-view{
-  font-size:0.8em;
+.viur-shop-discount-view {
+  font-size: 0.8em;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -92,5 +103,4 @@ function removeDiscountAction(){
 .viur-shop-discount-input {
   flex-basis: 100%;
 }
-
 </style>
diff --git a/src/components/LoadingHandler.vue b/src/components/LoadingHandler.vue
index def04bb..c3a5a7a 100644
--- a/src/components/LoadingHandler.vue
+++ b/src/components/LoadingHandler.vue
@@ -1,76 +1,89 @@
 <template>
-    <template v-if="isLoading">
-        <slot name="loading"> 
-            <shop-alert duration="Infinity" variant="info" :closeable="false">
-                <template #icon>
-                    <sl-spinner class="spinner-loading" slot="icon"></sl-spinner>
-                </template>
-                <template #alertMsg>
-                    {{ $t('messages.loading') }}
-                </template>
-            </shop-alert>
-        </slot>
-    </template>
-    <template v-else-if="isUpdating">
-        <slot name="updating"> 
-            <shop-alert duration="Infinity" variant="info" :closeable="false">
-                <template #icon>
-                    <sl-spinner class="spinner-loading" slot="icon"></sl-spinner>
-                </template>
-                <template #alertMsg>
-                    {{ $t('messages.updating') }}
-                </template>
-            </shop-alert>
-        </slot>
-    </template>
-    <template v-else-if="hasError">
-        <slot name="error"> 
-            <shop-alert duration="Infinity" iconName="x-lg" variant="danger" :closeable="false">
-                <template #alertMsg>
-                    {{ errorMessage }}
-                </template>
-            </shop-alert>
-        </slot>
-    </template>
-    <template v-else>
-        <slot>
-        </slot>
-    </template>
-
-
-    
+  <template v-if="isLoading">
+    <slot name="loading">
+      <shop-alert
+        duration="Infinity"
+        variant="info"
+        :closeable="false"
+      >
+        <template #icon>
+          <sl-spinner
+            class="spinner-loading"
+            slot="icon"
+          ></sl-spinner>
+        </template>
+        <template #alertMsg>
+          {{ $t("messages.loading") }}
+        </template>
+      </shop-alert>
+    </slot>
+  </template>
+  <template v-else-if="isUpdating">
+    <slot name="updating">
+      <shop-alert
+        duration="Infinity"
+        variant="info"
+        :closeable="false"
+      >
+        <template #icon>
+          <sl-spinner
+            class="spinner-loading"
+            slot="icon"
+          ></sl-spinner>
+        </template>
+        <template #alertMsg>
+          {{ $t("messages.updating") }}
+        </template>
+      </shop-alert>
+    </slot>
+  </template>
+  <template v-else-if="hasError">
+    <slot name="error">
+      <shop-alert
+        duration="Infinity"
+        iconName="x-lg"
+        variant="danger"
+        :closeable="false"
+      >
+        <template #alertMsg>
+          {{ errorMessage }}
+        </template>
+      </shop-alert>
+    </slot>
+  </template>
+  <template v-else>
+    <slot> </slot>
+  </template>
 </template>
 
 <script setup>
-import ShopAlert from './ShopAlert.vue'
+import ShopAlert from "./ShopAlert.vue"
 
 const props = defineProps({
-    isLoading:{
-        type:Boolean,
-        default:true
-    },
-    isUpdating:{
-        type:Boolean,
-        default:false
-    },
-    hasError:{
-        type:Boolean,
-        default:false
-    },
-    errorMessage:{
-        type:String,
-        default:"Ein Fehler ist aufgetreten."
-    }
-
+  isLoading: {
+    type: Boolean,
+    default: true
+  },
+  isUpdating: {
+    type: Boolean,
+    default: false
+  },
+  hasError: {
+    type: Boolean,
+    default: false
+  },
+  errorMessage: {
+    type: String,
+    default: "Ein Fehler ist aufgetreten."
+  }
 })
 </script>
 
 <style scoped>
-
-.spinner-loading{
-    --indicator-color:var(--sl-color-info-500);
+.spinner-loading {
+  --indicator-color: var(--sl-color-info-500);
 }
-.spinner-error{
-    --indicator-color:var(--sl-color-danger-500);
+.spinner-error {
+  --indicator-color: var(--sl-color-danger-500);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/PaymentOption.vue b/src/components/PaymentOption.vue
index 730ffdc..c1eafb5 100644
--- a/src/components/PaymentOption.vue
+++ b/src/components/PaymentOption.vue
@@ -1,57 +1,65 @@
 <template>
-  <sl-details :class="{
-    simple:widget==='simple'
-  }"
-              @sl-show="selection" >
-    <div slot="summary" class="payment-selection">
+  <sl-details
+    :class="{
+      simple: widget === 'simple'
+    }"
+    @sl-show="selection"
+  >
+    <div
+      slot="summary"
+      class="payment-selection"
+    >
       <div class="start">
         <sl-icon :name="icon"></sl-icon>
         {{ name }}
       </div>
-      <sl-radio :value="paymenttype" ></sl-radio>
+      <sl-radio :value="paymenttype"></sl-radio>
     </div>
     <slot>
-      {{description}}
+      {{ description }}
     </slot>
 
-    <template v-if="widget==='simple'">
-        <div slot="expand-icon" style="width:1em"></div>
-        <div slot="collapse-icon"  style="width:1em"></div>
+    <template v-if="widget === 'simple'">
+      <div
+        slot="expand-icon"
+        style="width: 1em"
+      ></div>
+      <div
+        slot="collapse-icon"
+        style="width: 1em"
+      ></div>
     </template>
   </sl-details>
 </template>
 
 <script setup>
-  const emits = defineEmits(['change'])
-  const props = defineProps({
-    paymenttype: {
-      type: String,
-      default: 'prepayment'
-    },
-    name: {
-      type: String,
-      default: 'Paymentname'
-    },
-    icon: {
-      type: String,
-      default: 'currency-euro'
-    },
-    description: {
-      type: String,
-      default: 'Payment description'
-    },
-    widget:{
-      type:String,
-      default:'default' //simple
-    }
-  })
-
-  function selection(){
-    emits('change',props.paymenttype)
+const emits = defineEmits(["change"])
+const props = defineProps({
+  paymenttype: {
+    type: String,
+    default: "prepayment"
+  },
+  name: {
+    type: String,
+    default: "Paymentname"
+  },
+  icon: {
+    type: String,
+    default: "currency-euro"
+  },
+  description: {
+    type: String,
+    default: "Payment description"
+  },
+  widget: {
+    type: String,
+    default: "default" //simple
   }
+})
 
-
-
+function selection() {
+  emits("change", props.paymenttype)
+}
 </script>
 
 <style scoped>
@@ -72,11 +80,11 @@ sl-details {
     display: flex;
     align-items: center;
     flex-wrap: nowrap;
-    gap:10px;
+    gap: 10px;
   }
 }
 
-.simple::part(content){
-  display:none;
+.simple::part(content) {
+  display: none;
 }
 </style>
diff --git a/src/components/PaymentProviderUnzer.vue b/src/components/PaymentProviderUnzer.vue
index af7df62..c011e4e 100644
--- a/src/components/PaymentProviderUnzer.vue
+++ b/src/components/PaymentProviderUnzer.vue
@@ -1,212 +1,270 @@
 <template>
-  <div class="loading-wrapper" v-if="state.loading">
+  <div
+    class="loading-wrapper"
+    v-if="state.loading"
+  >
     <sl-spinner class="loading"></sl-spinner>
   </div>
 
-  <div class="loading-wrapper" v-if="PaymentCheckIsActive">
+  <div
+    class="loading-wrapper"
+    v-if="PaymentCheckIsActive"
+  >
     <sl-spinner class="loading"></sl-spinner>
-    {{ $t('messages.wait_for_payment') }}
+    {{ $t("messages.wait_for_payment") }}
   </div>
   <div class="form-wrapper">
-      <sl-alert :open="state.hasError" variant="danger">{{state.errorMessage}}</sl-alert>
-      <form class="unzerUI form" novalidate>
-          <template v-if="shopStore.state.order?.['payment_provider'] === 'unzer-card'">
-              <div class="field">
-                  <div id="card-element-id-number" class="unzerInput">
-                      <!-- Card number UI Element is inserted here. -->
-                  </div>
-              </div>
-              <div class="two fields">
-                  <div class="field ten wide">
-                      <div id="card-element-id-expiry" class="unzerInput">
-                          <!-- Card expiry date UI Element is inserted here. -->
-                      </div>
-                  </div>
-                  <div class="field six wide">
-                      <div id="card-element-id-cvc" class="unzerInput">
-                          <!-- Card CVC UI Element is inserted here. -->
-                      </div>
-                  </div>
-              </div>
-          </template>
-
-          <template v-else-if="shopStore.state.order?.['payment_provider'] === 'unzer-paypal'">
-              <sl-alert open variant="danger">{{$t('viur.shop.paypal_client_popup_info')}}</sl-alert>
-              <div id="paypal-element" class="field"></div>
-          </template>
-
-          <template v-else-if="shopStore.state.order?.['payment_provider'] === 'unzer-ideal'">
-              <div id="ideal-element" class="field"></div>
-          </template>
-      </form>
-        <button :disabled="state.loading" class="unzerUI primary button fluid" @click="submitFormToUnzer">{{ $t('viur.shop.pay') }}</button>
-        <sl-button :disabled="state.loading" variant="danger" @click="cancelPayment">{{ $t('actions.cancel') }}</sl-button>
+    <sl-alert
+      :open="state.hasError"
+      variant="danger"
+      >{{ state.errorMessage }}</sl-alert
+    >
+    <form
+      class="unzerUI form"
+      novalidate
+    >
+      <template v-if="shopStore.state.order?.['payment_provider'] === 'unzer-card'">
+        <div class="field">
+          <div
+            id="card-element-id-number"
+            class="unzerInput"
+          >
+            <!-- Card number UI Element is inserted here. -->
+          </div>
+        </div>
+        <div class="two fields">
+          <div class="field ten wide">
+            <div
+              id="card-element-id-expiry"
+              class="unzerInput"
+            >
+              <!-- Card expiry date UI Element is inserted here. -->
+            </div>
+          </div>
+          <div class="field six wide">
+            <div
+              id="card-element-id-cvc"
+              class="unzerInput"
+            >
+              <!-- Card CVC UI Element is inserted here. -->
+            </div>
+          </div>
+        </div>
+      </template>
+
+      <template v-else-if="shopStore.state.order?.['payment_provider'] === 'unzer-paypal'">
+        <sl-alert
+          open
+          variant="danger"
+          >{{ $t("viur.shop.paypal_client_popup_info") }}</sl-alert
+        >
+        <div
+          id="paypal-element"
+          class="field"
+        ></div>
+      </template>
+
+      <template v-else-if="shopStore.state.order?.['payment_provider'] === 'unzer-ideal'">
+        <div
+          id="ideal-element"
+          class="field"
+        ></div>
+      </template>
+    </form>
+    <button
+      :disabled="state.loading"
+      class="unzerUI primary button fluid"
+      @click="submitFormToUnzer"
+    >
+      {{ $t("viur.shop.pay") }}
+    </button>
+    <sl-button
+      :disabled="state.loading"
+      variant="danger"
+      @click="cancelPayment"
+      >{{ $t("actions.cancel") }}</sl-button
+    >
   </div>
 </template>
 
 <script setup>
-import {computed, onBeforeMount, onMounted, reactive} from 'vue'
-import { useViurShopStore } from '../shop';
-import { useOrder } from '../composables/order';
-import {Request} from '@viur/vue-utils'
-import { useIntervalFn } from '@vueuse/core'
+import { computed, onBeforeMount, onMounted, reactive } from "vue"
+import { useViurShopStore } from "../shop"
+import { useOrder } from "../composables/order"
+import { Request } from "@viur/vue-utils"
+import { useIntervalFn } from "@vueuse/core"
 const shopStore = useViurShopStore()
-const {fetchOrder} = useOrder()
-
-const emits = defineEmits(['cancel'])
+const { fetchOrder } = useOrder()
 
-const { pause:PaymentCheckPause, resume:PaymentCheckResume, isActive:PaymentCheckIsActive } = useIntervalFn(() => {
-  fetchOrder(shopStore.state.orderKey)
+const emits = defineEmits(["cancel"])
 
-  if (shopStore.state.order?.['is_paid']){
-    PaymentCheckPause()
-  }
-
-}, 2000,{immediate:false})
+const {
+  pause: PaymentCheckPause,
+  resume: PaymentCheckResume,
+  isActive: PaymentCheckIsActive
+} = useIntervalFn(
+  () => {
+    fetchOrder(shopStore.state.orderKey)
 
+    if (shopStore.state.order?.["is_paid"]) {
+      PaymentCheckPause()
+    }
+  },
+  2000,
+  { immediate: false }
+)
 
 const state = reactive({
-    unzer:computed(()=>{
-        if (!shopStore.state.paymentProviderData) return null
-        return new unzer(shopStore.state.paymentProviderData["public_key"], {locale: 'de-DE'})
-    }),
-    paymentHandler:{},
-    loading:false,
-    hasError:false,
-    errorMessage:"Bei der Zahlung ist ein Fehler aufgetreten.",
-    waitPayment:false
+  unzer: computed(() => {
+    if (!shopStore.state.paymentProviderData) return null
+    return new unzer(shopStore.state.paymentProviderData["public_key"], { locale: "de-DE" })
+  }),
+  paymentHandler: {},
+  loading: false,
+  hasError: false,
+  errorMessage: "Bei der Zahlung ist ein Fehler aufgetreten.",
+  waitPayment: false
 })
 
+function initUnzerForm() {
+  //Unzer field definition
+  if (shopStore.state.order?.["payment_provider"] === "unzer-card") {
+    const card = state.unzer.Card()
+    // Rendering input field card number
+    card.create("number", {
+      containerId: "card-element-id-number",
+      onlyIframe: false
+    })
+    // Rendering input field card expiry
+    card.create("expiry", {
+      containerId: "card-element-id-expiry",
+      onlyIframe: false
+    })
+    // Rendering input field card cvc
+    card.create("cvc", {
+      containerId: "card-element-id-cvc",
+      onlyIframe: false
+    })
 
-function initUnzerForm(){
-    //Unzer field definition
-    if (shopStore.state.order?.['payment_provider'] === 'unzer-card') {
-        const card = state.unzer.Card();
-        // Rendering input field card number
-        card.create('number', {
-            containerId: 'card-element-id-number',
-            onlyIframe: false,
-        });
-        // Rendering input field card expiry
-        card.create('expiry', {
-            containerId: 'card-element-id-expiry',
-            onlyIframe: false,
-        });
-        // Rendering input field card cvc
-        card.create('cvc', {
-            containerId: 'card-element-id-cvc',
-            onlyIframe: false,
-        });
-
-        state.paymentHandler['unzer-card'] = card
-    } else if (shopStore.state.order?.['payment_provider'] === 'unzer-paypal') {
-        // Creating a PayPal instance
-        const paypal = state.unzer.Paypal()
-        // Rendering input field
-        //paypal.create('email', {
-        //     containerId: 'paypal-element',
-        //});
-        state.paymentHandler['unzer-paypal']= paypal;
-    } else if (shopStore.state.order?.['payment_provider'] === 'unzer-sofort') {
-        const sofort = state.unzer.Sofort()
-        state.paymentHandler['unzer-sofort'] = sofort;
-    } else if (shopStore.state.order?.['payment_provider'] === 'unzer-ideal') {
-        const ideal = state.unzer.Ideal()
-        ideal.create('ideal', {
-            containerId: 'ideal-element',
-        });
-        state.paymentHandler['unzer-ideal'] = ideal;
-    } else if (shopStore.state.order?.['payment_provider'] === 'unzer-bancontact') {
-        const bancontact = state.unzer.Bancontact();
-        state.paymentHandler['unzer-bancontact'] = bancontact;
-    } else {
-        console.warn(`Unknown payment provider: ${shopStore.state.order?.['payment_provider']}`);
-    }
-    state.loading = false
+    state.paymentHandler["unzer-card"] = card
+  } else if (shopStore.state.order?.["payment_provider"] === "unzer-paypal") {
+    // Creating a PayPal instance
+    const paypal = state.unzer.Paypal()
+    // Rendering input field
+    //paypal.create('email', {
+    //     containerId: 'paypal-element',
+    //});
+    state.paymentHandler["unzer-paypal"] = paypal
+  } else if (shopStore.state.order?.["payment_provider"] === "unzer-sofort") {
+    const sofort = state.unzer.Sofort()
+    state.paymentHandler["unzer-sofort"] = sofort
+  } else if (shopStore.state.order?.["payment_provider"] === "unzer-ideal") {
+    const ideal = state.unzer.Ideal()
+    ideal.create("ideal", {
+      containerId: "ideal-element"
+    })
+    state.paymentHandler["unzer-ideal"] = ideal
+  } else if (shopStore.state.order?.["payment_provider"] === "unzer-bancontact") {
+    const bancontact = state.unzer.Bancontact()
+    state.paymentHandler["unzer-bancontact"] = bancontact
+  } else {
+    console.warn(`Unknown payment provider: ${shopStore.state.order?.["payment_provider"]}`)
+  }
+  state.loading = false
 }
 
-function paymentError(error){
+function paymentError(error) {
   state.loading = false
   state.hasError = true
 }
 
+function submitFormToUnzer() {
+  PaymentCheckPause()
+  state.loading = true
+  state.hasError = false
+  let paymenttarget = shopStore.state.order?.["payment_provider"].split("-")[1]
+  //send to unzer
+  state.paymentHandler[shopStore.state.order?.["payment_provider"]]
+    .createResource()
+    .then((result) => {
+      Request.post(`${shopStore.state.shopUrl}/pp_unzer_${paymenttarget}/save_type`, {
+        dataObj: {
+          order_key: shopStore.state.orderKey,
+          type_id: result.id
+        }
+      })
+        .then(async (resp) => {
+          let data = await resp.json()
+          shopStore.state.order = data
 
-function submitFormToUnzer(){
-    PaymentCheckPause()
-    state.loading = true
-    state.hasError = false
-    let paymenttarget = shopStore.state.order?.['payment_provider'].split("-")[1]
-    //send to unzer
-    state.paymentHandler[shopStore.state.order?.['payment_provider']].createResource().then((result)=>{
-        Request.post(`${shopStore.state.shopUrl}/pp_unzer_${paymenttarget}/save_type`, {dataObj:{
-            order_key: shopStore.state.orderKey,
-            type_id: result.id,
-        }}).then(async (resp)=>{
-            let data = await resp.json()
-            shopStore.state.order = data
-
-            shopStore.checkoutOrder().then((resp)=>{
+          shopStore
+            .checkoutOrder()
+            .then((resp) => {
               state.loading = false
               state.hasError = false
-              if(shopStore.state.paymentProviderData?.redirectUrl){
+              if (shopStore.state.paymentProviderData?.redirectUrl) {
                 state.waitPayment = true
-                window.open(shopStore.state.paymentProviderData.redirectUrl,"_blank","popup")
+                window.open(shopStore.state.paymentProviderData.redirectUrl, "_blank", "popup")
                 PaymentCheckResume()
               }
-            }).catch(async (error)=>{
+            })
+            .catch(async (error) => {
               paymentError(error)
             })
-
-        }).catch(error => {
-            paymentError(error)
         })
-    }).catch((error)=> {
-        paymentError(error)
+        .catch((error) => {
+          paymentError(error)
+        })
+    })
+    .catch((error) => {
+      paymentError(error)
     })
 }
 
-
-function cancelPayment(){
-    PaymentCheckPause()
-    emits('cancel')
+function cancelPayment() {
+  PaymentCheckPause()
+  emits("cancel")
 }
 
-onBeforeMount(()=>{
-    state.loading = true
-    if (!shopStore.state.paymentProviderData){
-        shopStore.checkout().then(()=>{
-            initUnzerForm()
-        }).catch((error)=>{
-            console.log(error)
-        })
-    }else{
-      initUnzerForm()
-    }
+onBeforeMount(() => {
+  state.loading = true
+  if (!shopStore.state.paymentProviderData) {
+    shopStore
+      .checkout()
+      .then(() => {
+        initUnzerForm()
+      })
+      .catch((error) => {
+        console.log(error)
+      })
+  } else {
+    initUnzerForm()
+  }
 })
-
 </script>
 
 <style scoped>
-.loading-wrapper{
-  display:flex;
+.loading-wrapper {
+  display: flex;
   flex-direction: column;
   align-items: center;
 }
 
-.form-wrapper{
-  display:flex;
+.form-wrapper {
+  display: flex;
   flex-direction: column;
-  gap:20px;
+  gap: 20px;
 }
 
-.loading{
-  font-size:3rem;
+.loading {
+  font-size: 3rem;
 }
 </style>
 
 <style>
 /* global style to overwrite UnzerCSS */
-.unzerUI.primary.button, .unzerUI.primary.buttons .button {
+.unzerUI.primary.button,
+.unzerUI.primary.buttons .button {
   background-color: var(--ignt-color-primary) !important;
 }
 </style>
diff --git a/src/components/PaymentSelector.vue b/src/components/PaymentSelector.vue
index 2cae63e..1a9393e 100644
--- a/src/components/PaymentSelector.vue
+++ b/src/components/PaymentSelector.vue
@@ -1,29 +1,26 @@
 <template>
   <sl-radio-group :value="state.selection">
     <sl-details-group>
-
-      <payment-option v-for="option in options" :key="option.id"
-                      :paymenttype="option.paymenttype"
-                      :name="option.name"
-                      :icon="option.icon"
-                      :widget="option.widget"
-                      :description="option.description"
-                      @change="optionChanged"
-
+      <payment-option
+        v-for="option in options"
+        :key="option.id"
+        :paymenttype="option.paymenttype"
+        :name="option.name"
+        :icon="option.icon"
+        :widget="option.widget"
+        :description="option.description"
+        @change="optionChanged"
       >
-
       </payment-option>
-
     </sl-details-group>
   </sl-radio-group>
-
 </template>
 
 <script setup>
-import {usePaymentStore} from "../../../stores/payment"
+import { usePaymentStore } from "../../../stores/payment"
 import PaymentOption from "./PaymentOption.vue"
-import {computed, reactive, ref} from 'vue'
-import {Request} from "@viur/vue-utils";
+import { computed, reactive, ref } from "vue"
+import { Request } from "@viur/vue-utils"
 
 const paymentStore = usePaymentStore()
 const props = defineProps({
@@ -38,20 +35,18 @@ const props = defineProps({
 })
 
 const state = reactive({
-  selection:null,
-  hasError:false
+  selection: null,
+  hasError: false
 })
 
-function optionChanged(type){
-  state.selection=type
+function optionChanged(type) {
+  state.selection = type
   paymentStore.state.paymentSelection = state.selection
 }
-
-
 </script>
 
 <style scoped>
-  sl-radio-group {
-    margin-bottom: var(--ignt-spacing-small);
-  }
+sl-radio-group {
+  margin-bottom: var(--ignt-spacing-small);
+}
 </style>
diff --git a/src/components/PriceBox.vue b/src/components/PriceBox.vue
index a9a38c4..cd9be23 100644
--- a/src/components/PriceBox.vue
+++ b/src/components/PriceBox.vue
@@ -1,61 +1,59 @@
 <template>
-  <div style="display:flex;gap:10px;">
+  <div style="display: flex; gap: 10px">
     <sl-format-number
-        class="viur-shop-cart-leaf-value viur-shop-cart-leaf-value--unitprice"
+      class="viur-shop-cart-leaf-value viur-shop-cart-leaf-value--unitprice"
+      lang="de"
+      type="currency"
+      currency="EUR"
+      :value="item.price.current * amount"
+      :class="{ 'viur-shop-cart-leaf-value--current': !retail }"
+    >
+    </sl-format-number>
+    <div
+      style="position: relative"
+      v-if="retail && item.price.recommended > item.price.current"
+    >
+      <sl-format-number
+        class="viur-shop-cart-leaf-value viur-shop-cart-leaf-value--unitprice viur-shop-cart-leaf-value--recommended"
         lang="de"
         type="currency"
         currency="EUR"
-        :value="item.price.current * amount"
-        :class="{'viur-shop-cart-leaf-value--current':!retail}"
+        :value="item.price.recommended * amount"
       >
       </sl-format-number>
-    <div style="position: relative;" v-if="retail && (item.price.recommended > item.price.current)">
-      <sl-format-number
-          class="viur-shop-cart-leaf-value viur-shop-cart-leaf-value--unitprice viur-shop-cart-leaf-value--recommended"
-          lang="de"
-          type="currency"
-          currency="EUR"
-          :value="item.price.recommended * amount"
-        >
-        </sl-format-number>
-      </div>
+    </div>
   </div>
-
-
 </template>
 <script setup>
-
 const props = defineProps({
-  item:{
-    type:Object
+  item: {
+    type: Object
   },
-  amount:{
-    type:Number,
-    default:1
+  amount: {
+    type: Number,
+    default: 1
   },
-  retail:{
-    type:Boolean,
-    default:true
+  retail: {
+    type: Boolean,
+    default: true
   }
 })
-
 </script>
 
 <style scoped>
-
 .viur-shop-cart-leaf-value--recommended {
-    font-size: 0.8rem;
-    &:before {
-      content: " ";
-      border-bottom: 2px solid var(--sl-color-primary-500);
-      width: 100%;
-      display: block;
-      position: absolute;
-      top:calc(0.7rem);
+  font-size: 0.8rem;
+  &:before {
+    content: " ";
+    border-bottom: 2px solid var(--sl-color-primary-500);
+    width: 100%;
+    display: block;
+    position: absolute;
+    top: calc(0.7rem);
   }
 }
 
 .viur-shop-cart-leaf-value--current {
-    margin-left:auto;
+  margin-left: auto;
 }
 </style>
diff --git a/src/components/ShopAlert.vue b/src/components/ShopAlert.vue
index 9c60608..b7fef5a 100644
--- a/src/components/ShopAlert.vue
+++ b/src/components/ShopAlert.vue
@@ -1,8 +1,17 @@
 <template>
-  <sl-alert :variant="variant" open :closable="closeable" :duration="duration" @sl-hide="onHide">
-      <slot name="icon">
-          <sl-icon slot="icon" :name="iconName"></sl-icon>
-      </slot>
+  <sl-alert
+    :variant="variant"
+    open
+    :closable="closeable"
+    :duration="duration"
+    @sl-hide="onHide"
+  >
+    <slot name="icon">
+      <sl-icon
+        slot="icon"
+        :name="iconName"
+      ></sl-icon>
+    </slot>
     <slot name="alertMsg">{{ msg }}</slot>
   </sl-alert>
 </template>
@@ -11,20 +20,20 @@
 const props = defineProps({
   variant: { type: String, default: "primary" },
   iconName: { type: String, default: "info-circle" },
-  closeable:{
-    type:Boolean,
-    default:true
+  closeable: {
+    type: Boolean,
+    default: true
   },
-  duration:{
+  duration: {
     type: [Number, String],
     default: 3000 // use "Infinity" for fix message
   },
-  msg: { type: String, default: "ALERT!" },
-});
+  msg: { type: String, default: "ALERT!" }
+})
 
-const emit = defineEmits(["onHide"]);
+const emit = defineEmits(["onHide"])
 
 function onHide() {
-  emit("onHide");
+  emit("onHide")
 }
 </script>
diff --git a/src/components/StepperTab.vue b/src/components/StepperTab.vue
index 86b8f1a..590a894 100644
--- a/src/components/StepperTab.vue
+++ b/src/components/StepperTab.vue
@@ -38,23 +38,22 @@
 </template>
 
 <script setup>
-import { watch, onBeforeMount, inject } from "vue";
-import {useViurShopStore} from '../shop'
+import { watch, onBeforeMount, inject } from "vue"
+import { useViurShopStore } from "../shop"
 const shopStore = useViurShopStore()
 
 const props = defineProps({
   tab: {
     type: String,
     required: true,
-    default:"-"
+    default: "-"
   }
-});
+})
 
-function navigate(){
-  if (!shopStore.state.tabs[props.tab]['active']) return false
+function navigate() {
+  if (!shopStore.state.tabs[props.tab]["active"]) return false
   shopStore.navigateToTab(props.tab)
 }
-
 </script>
 
 <style scoped>
diff --git a/src/components/dialogButton.vue b/src/components/dialogButton.vue
index cba4bf3..b0e8684 100644
--- a/src/components/dialogButton.vue
+++ b/src/components/dialogButton.vue
@@ -1,49 +1,56 @@
 <template>
-    <sl-button v-bind="$attrs" @click="state.opened=true">
-        <slot>
-
-        </slot>
-    </sl-button>
-    <teleport to="#dialogs" v-if="state.opened">
-    <sl-dialog :open="state.opened"  @sl-after-hide="state.opened=false" noHeader>
-            <slot name="dialog" :close="close">
-
-            </slot>
-        </sl-dialog>
-    </teleport>
+  <sl-button
+    v-bind="$attrs"
+    @click="state.opened = true"
+  >
+    <slot> </slot>
+  </sl-button>
+  <teleport
+    to="#dialogs"
+    v-if="state.opened"
+  >
+    <sl-dialog
+      :open="state.opened"
+      @sl-after-hide="state.opened = false"
+      noHeader
+    >
+      <slot
+        name="dialog"
+        :close="close"
+      >
+      </slot>
+    </sl-dialog>
+  </teleport>
 </template>
 
 <script setup>
-import {reactive} from 'vue'
+import { reactive } from "vue"
 defineOptions({
   inheritAttrs: false
 })
 
 const state = reactive({
-    opened:false
+  opened: false
 })
 
-function close(){
-    state.opened=false
+function close() {
+  state.opened = false
 }
-
 </script>
 
 <style scoped>
-
-.decent{
-    margin: 0;
-    transition: all ease .3s;
-
-    &::part(base){
-        border: none;
-    }
-
-    &::part(label){
-        padding: 0;
-        height: var(--sl-input-height-medium);
-        width: calc(var(--sl-input-height-medium) / 5 * 4);
-    }
+.decent {
+  margin: 0;
+  transition: all ease 0.3s;
+
+  &::part(base) {
+    border: none;
+  }
+
+  &::part(label) {
+    padding: 0;
+    height: var(--sl-input-height-medium);
+    width: calc(var(--sl-input-height-medium) / 5 * 4);
+  }
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/src/composables/address.js b/src/composables/address.js
index bbf57e9..9641288 100644
--- a/src/composables/address.js
+++ b/src/composables/address.js
@@ -1,13 +1,13 @@
-import {defineStore} from 'pinia';
-import {computed, reactive, ref} from 'vue';
-import {useCart} from '../composables/cart';
-import {useOrder} from '../composables/order';
-import {useViurShopStore} from '../shop';
-import {useShipping} from './shipping.js';
+import { defineStore } from "pinia"
+import { computed, reactive, ref } from "vue"
+import { useCart } from "../composables/cart"
+import { useOrder } from "../composables/order"
+import { useViurShopStore } from "../shop"
+import { useShipping } from "./shipping.js"
 
-export const useAddress = defineStore('useAddressStore', () => {
-  const shopStore = useViurShopStore();
-  const {fetchShippingData} = useShipping();
+export const useAddress = defineStore("useAddressStore", () => {
+  const shopStore = useViurShopStore()
+  const { fetchShippingData } = useShipping()
 
   const state = reactive({
     billingIsShipping: true,
@@ -15,97 +15,104 @@ export const useAddress = defineStore('useAddressStore', () => {
     // for shipping and both mode
     shippingIsLoading: computed(() => {
       if (!state.shippingForm) {
-        return true;
+        return true
       }
-      return state.shippingForm.state.loading;
+      return state.shippingForm.state.loading
     }),
     shippingIsUpdating: false, // for shipping and both mode
     shippingData: {},
     shippingValid: computed(() => {
-      if (shopStore.state.cartRoot?.['shipping_address']) {
-        return true;
+      if (shopStore.state.cartRoot?.["shipping_address"]) {
+        return true
       }
-      return false;
+      return false
     }),
 
     billingForm: ref(null),
     billingIsLoading: computed(() => {
       if (!state.billingForm) {
-        return true;
+        return true
       }
-      return state.billingForm.state.loading;
+      return state.billingForm.state.loading
     }),
     billingIsUpdating: false,
     billingData: {},
     billingValid: computed(() => {
-      if (shopStore.state.order?.['billing_address']) {
-        return true;
+      if (shopStore.state.order?.["billing_address"]) {
+        return true
       }
-      return false;
-    }),
-
-  });
+      return false
+    })
+  })
 
   function saveForm(type, billingIsShipping = false) {
-    state[`${type}IsUpdating`] = true;
-    return state[`${type}Form`].sendData().then(async (resp) => {
-      let data = await resp.json();
+    state[`${type}IsUpdating`] = true
+    return state[`${type}Form`]
+      .sendData()
+      .then(async (resp) => {
+        let data = await resp.json()
 
-      if (['addSuccess', 'editSuccess'].includes(data['action'])) {
-        if (billingIsShipping) {
-          state.billingData = state.shippingData = data['values'];
-        } else {
-          state[`${type}Data`] = data['values'];
+        if (["addSuccess", "editSuccess"].includes(data["action"])) {
+          if (billingIsShipping) {
+            state.billingData = state.shippingData = data["values"]
+          } else {
+            state[`${type}Data`] = data["values"]
+          }
+          await updateAddresses(type, billingIsShipping)
         }
-        await updateAddresses(type, billingIsShipping);
-      }
-      state[`${type}IsUpdating`] = undefined;
-      return data;
-    }).catch(error => {
-      state[`${type}Form`].state.loading = false;
-      return {'action': 'error'};
-    });
+        state[`${type}IsUpdating`] = undefined
+        return data
+      })
+      .catch((error) => {
+        state[`${type}Form`].state.loading = false
+        return { action: "error" }
+      })
   }
 
   function saveAddresses(billingIsShipping = false) {
     return new Promise((resolve, reject) => {
       if (billingIsShipping) {
-        saveForm('billing', billingIsShipping)
-          .then(async res => {
-            await fetchShippingData(); // different address --> other shipping
-            resolve(res);
+        saveForm("billing", billingIsShipping)
+          .then(async (res) => {
+            await fetchShippingData() // different address --> other shipping
+            resolve(res)
           })
-          .catch(reject);
+          .catch(reject)
       } else {
-        saveForm('shipping').then(() => {
-          saveForm('billing').then(async () => {
-            await fetchShippingData(); // different address --> other shipping
-            resolve({'action': 'editSuccess'});
-          }).catch((e) => reject(e));
-        }).catch((e) => reject(e));
+        saveForm("shipping")
+          .then(() => {
+            saveForm("billing")
+              .then(async () => {
+                await fetchShippingData() // different address --> other shipping
+                resolve({ action: "editSuccess" })
+              })
+              .catch((e) => reject(e))
+          })
+          .catch((e) => reject(e))
       }
-    });
+    })
   }
 
   async function updateAddresses(type, billingIsShipping = false) {
-    let key = state[`${type}Data`]['key'];
-    if (type === 'shipping') {
-      const {updateCart, fetchCart, shippingAddressKey} = useCart();
+    let key = state[`${type}Data`]["key"]
+    if (type === "shipping") {
+      const { updateCart, fetchCart, shippingAddressKey } = useCart()
       if (key === shippingAddressKey.value) {
         // The address skel is the same, we just need to reload the relation
-        fetchCart();
+        fetchCart()
       } else {
-        await updateCart({shipping_address_key: key});
+        await updateCart({ shipping_address_key: key })
       }
-    } else if (type === 'billing') {
-      const {addOrUpdateOrder, fetchOrder, billingAddressKey} = useOrder();
-      if (key === billingAddressKey.value) { // The address skel is the same, we just need to reload the relation
-        fetchOrder(shopStore.state.orderKey);
+    } else if (type === "billing") {
+      const { addOrUpdateOrder, fetchOrder, billingAddressKey } = useOrder()
+      if (key === billingAddressKey.value) {
+        // The address skel is the same, we just need to reload the relation
+        fetchOrder(shopStore.state.orderKey)
       } else {
-        await addOrUpdateOrder({billing_address_key: key});
+        await addOrUpdateOrder({ billing_address_key: key })
       }
       if (billingIsShipping) {
-        await updateAddresses('shipping', false);
+        await updateAddresses("shipping", false)
       }
     }
   }
@@ -114,6 +121,6 @@ export const useAddress = defineStore('useAddressStore', () => {
     state,
     saveForm,
     updateAddresses,
-    saveAddresses,
-  };
-});
+    saveAddresses
+  }
+})
diff --git a/src/composables/cart.js b/src/composables/cart.js
index a991be9..08fb3c3 100644
--- a/src/composables/cart.js
+++ b/src/composables/cart.js
@@ -1,193 +1,200 @@
-import {computed, reactive} from 'vue';
-import {Request} from '@viur/vue-utils'
-import { removeUndefinedValues} from '../utils'
+import { computed, reactive } from "vue"
+import { Request } from "@viur/vue-utils"
+import { removeUndefinedValues } from "../utils"
 
-import { useViurShopStore } from '../shop'
+import { useViurShopStore } from "../shop"
 
 export function useCart() {
-    const shopStore = useViurShopStore()
-    const state = reactive({
-        isLoading:false,
-        isUpdating:false
-    })
-
-    function getValue(value){
-        if (value !== null &&
-            typeof value === 'object' &&
-            !Array.isArray(value) &&
-            Object.keys(value).includes(shopStore.state.language)
-        ){
-            return value[shopStore.state.language]
-        }
-        return value
+  const shopStore = useViurShopStore()
+  const state = reactive({
+    isLoading: false,
+    isUpdating: false
+  })
+
+  function getValue(value) {
+    if (
+      value !== null &&
+      typeof value === "object" &&
+      !Array.isArray(value) &&
+      Object.keys(value).includes(shopStore.state.language)
+    ) {
+      return value[shopStore.state.language]
     }
+    return value
+  }
+
+  function createCart() {
+    Request.post(shopStore.state.shopApiUrl + "/cart_add", {
+      dataObj: {
+        parent_cart_key: shopStore.state.cartRoot["key"],
+        cart_type: "wishlist"
+      }
+    }).then(async (resp) => {
+      let data = await resp.json()
+      console.log(data)
+    })
+  }
 
-    function createCart(){
-        Request.post(shopStore.state.shopApiUrl+'/cart_add',{dataObj:{
-            parent_cart_key:shopStore.state.cartRoot['key'],
-            cart_type:"wishlist"
-        }}).then(async( resp)=>{
-            let data = await resp.json()
-            console.log(data)
-        })
+  function fetchCart() {
+    //first fetch root then fetchItems for this root
+    state.isLoading = true
 
+    if (shopStore.state.order != null && shopStore.order?.cart?.key.length) {
+      shopStore.state.cartRoot = {}
+      shopStore.state.cartRoot = shopStore.state.order.cart
 
+      return fetchCartItems(shopStore.state.order.cart.key).then(() => {
+        state.isLoading = false
+        shopStore.state.cartReady = true
+      })
     }
+    return fetchCartRoot().then(() => {
+      if (!shopStore.state.cartRoot?.["key"]) return 0
+      fetchCartItems(shopStore.state.cartRoot["key"]).then(() => {
+        state.isLoading = false
+        shopStore.state.cartReady = true
+      })
+    })
+  }
 
+  function fetchCartRoot() {
+    // fetch list of Rootnodes and saves the first one
 
-    function fetchCart() {
-      //first fetch root then fetchItems for this root
-      state.isLoading = true;
-
-      if (shopStore.state.order != null && shopStore.order?.cart?.key.length) {
-        shopStore.state.cartRoot = {};
-        shopStore.state.cartRoot = shopStore.state.order.cart;
+    return Request.get(`${shopStore.state.shopUrl}/cart/listRootNodes`).then(async (resp) => {
+      let data = await resp.clone().json()
+      shopStore.state.cartRoot = data.filter((i) => i["cart_type"] === "basket")?.[0]
+        ? data.filter((i) => i["cart_type"] === "basket")[0]
+        : []
+      return resp
+    })
+  }
 
-        return fetchCartItems(shopStore.state.order.cart.key).then(() => {
-          state.isLoading = false;
-          shopStore.state.cartReady = true;
-        });
+  function fetchCartItems(key, parentKey = null) {
+    //fetch cart items
+    return Request.get(`${shopStore.state.shopApiUrl}/cart_list`, {
+      dataObj: {
+        cart_key: key
       }
-      return fetchCartRoot().then(() => {
-        if (!shopStore.state.cartRoot?.["key"]) return 0;
-        fetchCartItems(shopStore.state.cartRoot["key"]).then(() => {
-          state.isLoading = false;
-          shopStore.state.cartReady = true;
-        });
-      });
-    }
-
-    function fetchCartRoot(){
-        // fetch list of Rootnodes and saves the first one
-
-        return Request.get(`${shopStore.state.shopUrl}/cart/listRootNodes`).then(async (resp)=>{
-            let data = await resp.clone().json()
-            shopStore.state.cartRoot = data.filter(i=>i['cart_type']==='basket')?.[0] ? data.filter(i=>i['cart_type']==='basket')[0]:[]
-            return resp
-        })
+    }).then(async (resp) => {
+      let data = await resp.clone().json()
+      shopStore.state.cartList = data
+      return resp
+    })
+  }
+
+  function updateCart({
+    cart_key,
+    cart_type,
+    name,
+    customer_comment,
+    shipping_address_key,
+    shipping_key,
+    discount_key,
+    commission
+  } = {}) {
+    let data = {
+      cart_type: cart_type ? cart_type : shopStore.state.cartRoot["cart_type"],
+      name: name ? name : shopStore.state.cartRoot["name"],
+      customer_comment: customer_comment ? customer_comment : shopStore.state.cartRoot["customer_comment"],
+      shipping_address_key: shipping_address_key ? shipping_address_key : shippingAddressKey.value,
+      shipping_key: shipping_key, // only after explicit user selection
+      discount_key: discount_key ? discount_key : shopStore.state.cartRoot?.["discount"]?.["dest"]?.["key"],
+      cart_key: cart_key ? cart_key : shopStore.state.cartRoot["key"]
     }
 
-    function fetchCartItems(key, parentKey=null){
-        //fetch cart items
-        return Request.get(`${shopStore.state.shopApiUrl}/cart_list`,{dataObj:{
-            cart_key:key
-        }}).then(async( resp) =>{
-            let data = await resp.clone().json()
-            shopStore.state.cartList=data
-            return resp
-        })
+    if (commission) {
+      // TODO: that's not standard, must be more generic!
+      data.commission = commission
     }
 
-    function updateCart({
-                    cart_key,
-                    cart_type,
-                    name,
-                    customer_comment,
-                    shipping_address_key,
-                    shipping_key,
-                    discount_key,
-                    commission
-                } = {}){
-
-        let data= {
-            cart_type:cart_type?cart_type:shopStore.state.cartRoot['cart_type'],
-            name:name?name:shopStore.state.cartRoot['name'],
-            customer_comment:customer_comment?customer_comment:shopStore.state.cartRoot['customer_comment'],
-            shipping_address_key:shipping_address_key?shipping_address_key:shippingAddressKey.value,
-            shipping_key: shipping_key, // only after explicit user selection
-            discount_key:discount_key?discount_key:shopStore.state.cartRoot?.['discount']?.['dest']?.['key'],
-            cart_key:cart_key ? cart_key : shopStore.state.cartRoot['key'],
-        }
+    return Request.post(`${shopStore.state.shopApiUrl}/cart_update`, {
+      dataObj: removeUndefinedValues(data)
+    }).then(async (resp) => {
+      fetchCart()
+      return resp
+    })
+  }
+
+  function addItem(key, quantity = 1, cart = null, quantity_mode = "replace") {
+    //add Item to cart
+    state.isUpdating = true
+    return Request.post(`${shopStore.state.shopApiUrl}/article_add`, {
+      dataObj: {
+        article_key: key,
+        parent_cart_key: cart ? cart : shopStore.state.cartRoot["key"],
+        quantity: quantity,
+        quantity_mode: quantity_mode
+      }
+    }).then(async (resp) => {
+      state.isUpdating = false
+      fetchCart()
+    })
+  }
+  function removeItem(key, cart = null) {
+    state.isUpdating = true
+    return Request.post(`${shopStore.state.shopApiUrl}/article_remove`, {
+      dataObj: {
+        article_key: key,
+        parent_cart_key: cart ? cart : shopStore.state.cartRoot["key"]
+      }
+    }).then(async (resp) => {
+      state.isUpdating = false
+      fetchCart()
+    })
+  }
 
-        if (commission) { // TODO: that's not standard, must be more generic!
-          data.commission = commission
+  function addDiscount(code) {
+    return new Promise((resolve, reject) => {
+      Request.securePost(`${shopStore.state.shopApiUrl}/discount_add`, {
+        dataObj: {
+          code: code
         }
-
-        return Request.post(`${shopStore.state.shopApiUrl}/cart_update`, {
-            dataObj: removeUndefinedValues(data)
-        }).then(async (resp)=>{
-            fetchCart()
-            return resp
-        })
-    }
-
-    function addItem(key, quantity=1, cart=null, quantity_mode='replace'){
-        //add Item to cart
-        state.isUpdating = true
-        return Request.post(`${shopStore.state.shopApiUrl}/article_add`, {dataObj:{
-            article_key: key,
-            parent_cart_key:cart?cart:shopStore.state.cartRoot['key'],
-            quantity:quantity,
-            quantity_mode:quantity_mode
-        }}).then(async (resp)=>{
-            state.isUpdating=false
-            fetchCart()
-        })
-
-    }
-    function removeItem(key, cart=null){
-        state.isUpdating = true
-        return Request.post(`${shopStore.state.shopApiUrl}/article_remove`, {dataObj:{
-            article_key: key,
-            parent_cart_key:cart?cart:shopStore.state.cartRoot['key']
-        }}).then(async (resp)=>{
-            state.isUpdating=false
-            fetchCart()
-        })
-    }
-
-    function addDiscount(code) {
-        return new Promise((resolve, reject) => {
-          Request.securePost(`${shopStore.state.shopApiUrl}/discount_add`, {
-            dataObj: {
-              code: code,
-            },
-          })
+      })
         .then(async (resp) => {
-            let data = await resp.json();
-            fetchCart()
-            console.log("discount debug", data);
-            resolve()
+          let data = await resp.json()
+          fetchCart()
+          console.log("discount debug", data)
+          resolve()
         })
         .catch((error) => {
-            reject(error);
-        });
-    });
-    }
+          reject(error)
+        })
+    })
+  }
 
-    function removeDiscount() {
-        return new Promise((resolve, reject) => {
-          Request.securePost(`${shopStore.state.shopApiUrl}/discount_remove`, {
-            dataObj: {
-                discount_key: shopStore.state.cartRoot.discount.dest.key,
-            },
-          })
+  function removeDiscount() {
+    return new Promise((resolve, reject) => {
+      Request.securePost(`${shopStore.state.shopApiUrl}/discount_remove`, {
+        dataObj: {
+          discount_key: shopStore.state.cartRoot.discount.dest.key
+        }
+      })
         .then(async (resp) => {
-            let data = await resp.json();
-            fetchCart()
-            console.log("discount debug", data);
-            resolve()
+          let data = await resp.json()
+          fetchCart()
+          console.log("discount debug", data)
+          resolve()
         })
         .catch((error) => {
-            reject(error);
-        });
-    });
-    }
-
-    const shippingAddressKey = computed(() => shopStore.state.cartRoot?.['shipping_address']?.['dest']?.['key']);
-
-    return {
-        state,
-        fetchCartRoot,
-        fetchCartItems,
-        fetchCart,
-        updateCart,
-        addItem,
-        removeItem,
-        createCart,
-        getValue,
-        addDiscount,
-        removeDiscount,
-        shippingAddressKey,
-    }
+          reject(error)
+        })
+    })
+  }
+
+  const shippingAddressKey = computed(() => shopStore.state.cartRoot?.["shipping_address"]?.["dest"]?.["key"])
+
+  return {
+    state,
+    fetchCartRoot,
+    fetchCartItems,
+    fetchCart,
+    updateCart,
+    addItem,
+    removeItem,
+    createCart,
+    getValue,
+    addDiscount,
+    removeDiscount,
+    shippingAddressKey
+  }
 }
diff --git a/src/composables/order.js b/src/composables/order.js
index 926e2f0..e976a3c 100644
--- a/src/composables/order.js
+++ b/src/composables/order.js
@@ -1,87 +1,91 @@
-import {Request} from '@viur/vue-utils';
-import {useUrlSearchParams} from '@vueuse/core';
-import {computed, reactive} from 'vue';
-import {useViurShopStore} from '../shop';
-import {removeUndefinedValues} from '../utils';
+import { Request } from "@viur/vue-utils"
+import { useUrlSearchParams } from "@vueuse/core"
+import { computed, reactive } from "vue"
+import { useViurShopStore } from "../shop"
+import { removeUndefinedValues } from "../utils"
 
 export function useOrder() {
-    const state = reactive({
-        isLoading:false,
-        isUpdating:false
-    })
-    const shopStore = useViurShopStore()
-    function updateOrderState(key,data){
-        shopStore.state.order = data
-        shopStore.state.orderKey = key
-
-        const params = useUrlSearchParams('hash')
-        params['order'] = shopStore.state.orderKey
-
-    }
-    function fetchOrder(key){
-        state.isLoading = true
+  const state = reactive({
+    isLoading: false,
+    isUpdating: false
+  })
+  const shopStore = useViurShopStore()
+  function updateOrderState(key, data) {
+    shopStore.state.order = data
+    shopStore.state.orderKey = key
 
-        return Request.post(shopStore.state.shopApiUrl+"/order_view",{dataObj:{
-            "order_key": key
-        }}).then(async (resp)=>{
-            let data = await resp.clone().json()
-            updateOrderState(data['skel']['key'], data['skel'])
-            shopStore.state.canCheckout = data["can_checkout"]
-            shopStore.state.canOrder = data["can_order"]
-            state.isLoading = false
-            return resp
-        }).catch((error)=>{
-            shopStore.state.order = null
-            shopStore.state.orderKey = null
-            state.isLoading = false
-        })
-    }
+    const params = useUrlSearchParams("hash")
+    params["order"] = shopStore.state.orderKey
+  }
+  function fetchOrder(key) {
+    state.isLoading = true
 
-    function addOrUpdateOrder({
-      payment_provider,
-      billing_address_key,
-      customer_key,
-      state_ordered,
-      state_paid,
-      state_rts,
-      //TODO: ...additionalData Über alle requests in den components für customized Projekte
-      ...additionalData  // abfangen von nicht definierten Feldern
-  }={}){
-      state.isUpdating=true
-      let url = shopStore.state.shopApiUrl+"/order_add"
-      let data = {
-          payment_provider:payment_provider?payment_provider:shopStore.state.order?.['payment_provider'],
-          billing_address_key:billing_address_key?billing_address_key:billingAddressKey.value,
-          customer_key:customer_key?customer_key:shopStore.state.order?.['customer_key']?.['dest']?.['key'],
-          state_ordered:state_ordered?state_ordered:shopStore.state.order?.['state_ordered'],
-          state_paid:state_paid?state_paid:shopStore.state.order?.['state_paid'],
-          state_rts:state_rts?state_rts:shopStore.state.order?.['state_rts'],
-          ...additionalData
+    return Request.post(shopStore.state.shopApiUrl + "/order_view", {
+      dataObj: {
+        order_key: key
       }
-      if (shopStore.state.orderKey){
-          url = shopStore.state.shopApiUrl+"/order_update"
-          data["order_key"] = shopStore.state.orderKey
+    })
+      .then(async (resp) => {
+        let data = await resp.clone().json()
+        updateOrderState(data["skel"]["key"], data["skel"])
+        shopStore.state.canCheckout = data["can_checkout"]
+        shopStore.state.canOrder = data["can_order"]
+        state.isLoading = false
+        return resp
+      })
+      .catch((error) => {
+        shopStore.state.order = null
+        shopStore.state.orderKey = null
+        state.isLoading = false
+      })
+  }
 
-      }else{
-          data["cart_key"] = shopStore.state.cartRoot['key']
-      }
-      return Request.post(url,{dataObj:removeUndefinedValues(data)}).then(async(resp)=>{
-          let data = await resp.clone().json()
-          updateOrderState(data['key'], data)
-          state.isUpdating=false
-          return resp
-      }).then(async ( resp)=>{
-          fetchOrder(shopStore.state.orderKey)
-          return resp
+  function addOrUpdateOrder({
+    payment_provider,
+    billing_address_key,
+    customer_key,
+    state_ordered,
+    state_paid,
+    state_rts,
+    //TODO: ...additionalData Über alle requests in den components für customized Projekte
+    ...additionalData // abfangen von nicht definierten Feldern
+  } = {}) {
+    state.isUpdating = true
+    let url = shopStore.state.shopApiUrl + "/order_add"
+    let data = {
+      payment_provider: payment_provider ? payment_provider : shopStore.state.order?.["payment_provider"],
+      billing_address_key: billing_address_key ? billing_address_key : billingAddressKey.value,
+      customer_key: customer_key ? customer_key : shopStore.state.order?.["customer_key"]?.["dest"]?.["key"],
+      state_ordered: state_ordered ? state_ordered : shopStore.state.order?.["state_ordered"],
+      state_paid: state_paid ? state_paid : shopStore.state.order?.["state_paid"],
+      state_rts: state_rts ? state_rts : shopStore.state.order?.["state_rts"],
+      ...additionalData
+    }
+    if (shopStore.state.orderKey) {
+      url = shopStore.state.shopApiUrl + "/order_update"
+      data["order_key"] = shopStore.state.orderKey
+    } else {
+      data["cart_key"] = shopStore.state.cartRoot["key"]
+    }
+    return Request.post(url, { dataObj: removeUndefinedValues(data) })
+      .then(async (resp) => {
+        let data = await resp.clone().json()
+        updateOrderState(data["key"], data)
+        state.isUpdating = false
+        return resp
+      })
+      .then(async (resp) => {
+        fetchOrder(shopStore.state.orderKey)
+        return resp
       })
   }
 
-  const billingAddressKey = computed(() => shopStore.state.order?.['billing_address']?.['dest']?.['key']);
+  const billingAddressKey = computed(() => shopStore.state.order?.["billing_address"]?.["dest"]?.["key"])
 
   return {
     state,
     fetchOrder,
     addOrUpdateOrder,
-    billingAddressKey,
-  };
+    billingAddressKey
+  }
 }
diff --git a/src/composables/payment.js b/src/composables/payment.js
index 7cb6212..d1d8a20 100644
--- a/src/composables/payment.js
+++ b/src/composables/payment.js
@@ -1,76 +1,67 @@
-import {reactive} from 'vue'
-import {Request} from '@viur/vue-utils'
-import { removeUndefinedValues} from '../utils'
-import { useViurShopStore } from '../shop'
-import {defineStore} from "pinia";
+import { reactive } from "vue"
+import { Request } from "@viur/vue-utils"
+import { removeUndefinedValues } from "../utils"
+import { useViurShopStore } from "../shop"
+import { defineStore } from "pinia"
 
 export const usePayment = defineStore("usePaymentStore", () => {
-    const shopStore = useViurShopStore()
+  const shopStore = useViurShopStore()
 
-    const iconMap = {
-    'prepayment':'currency-euro',
-    'unzer-card':'credit-card-2-back-fill',
-    'unzer-paypal':'paypal',
-    'unzer-ideal':'bank2',
-    'unzer-sofort':'cash-coin'
+  const iconMap = {
+    prepayment: "currency-euro",
+    "unzer-card": "credit-card-2-back-fill",
+    "unzer-paypal": "paypal",
+    "unzer-ideal": "bank2",
+    "unzer-sofort": "cash-coin"
   }
 
-  const simpleProviders = [
-    "invoice",
-    'prepayment',
-    'unzer-paypal',
-    'unzer-sofort'
-  ]
-
-    const state = reactive({
-        isLoading:false,
-        isUpdating:false,
-        paymentData:[]
-    })
-
-    function _convertPayment(paymentProviders){
-        paymentProviders = Object.entries(paymentProviders)
-        let options = []
-        let option = {
-          paymenttype:null,
-          widget:"default",
-          name:null,
-          description:null,
-          icon:null
-
-        }
-
-        for (const provider of paymentProviders){
-          let currentOption = {...option}
-          currentOption.paymenttype = provider[0]
-          currentOption.name = provider[1]['title']
-          currentOption.description = provider[1]['descr']
-          currentOption.icon = iconMap[provider[0]]
-          currentOption.widget = "simple"
-          //if (simpleProviders.includes(provider[0])){
-          //  currentOption.widget = "simple"  // payment provider musst be initialized later
-          //}
-
-          options.push(currentOption)
-        }
+  const simpleProviders = ["invoice", "prepayment", "unzer-paypal", "unzer-sofort"]
 
+  const state = reactive({
+    isLoading: false,
+    isUpdating: false,
+    paymentData: []
+  })
 
-        return options
+  function _convertPayment(paymentProviders) {
+    paymentProviders = Object.entries(paymentProviders)
+    let options = []
+    let option = {
+      paymenttype: null,
+      widget: "default",
+      name: null,
+      description: null,
+      icon: null
     }
 
-    function fetchPaymentData() {
-        state.isLoading = true
-        return Request.get(`${shopStore.state.shopUrl}/order/payment_providers_list`).then(async (resp)=>{
-            let data = await resp.json()
-            state.paymentData = _convertPayment(data)
-            state.isLoading = false
-        })
+    for (const provider of paymentProviders) {
+      let currentOption = { ...option }
+      currentOption.paymenttype = provider[0]
+      currentOption.name = provider[1]["title"]
+      currentOption.description = provider[1]["descr"]
+      currentOption.icon = iconMap[provider[0]]
+      currentOption.widget = "simple"
+      //if (simpleProviders.includes(provider[0])){
+      //  currentOption.widget = "simple"  // payment provider musst be initialized later
+      //}
+
+      options.push(currentOption)
     }
 
+    return options
+  }
 
-    return {
-        state,
-        fetchPaymentData
+  function fetchPaymentData() {
+    state.isLoading = true
+    return Request.get(`${shopStore.state.shopUrl}/order/payment_providers_list`).then(async (resp) => {
+      let data = await resp.json()
+      state.paymentData = _convertPayment(data)
+      state.isLoading = false
+    })
+  }
 
-    }
+  return {
+    state,
+    fetchPaymentData
+  }
 })
diff --git a/src/composables/shipping.js b/src/composables/shipping.js
index 2b1758f..057d152 100644
--- a/src/composables/shipping.js
+++ b/src/composables/shipping.js
@@ -1,46 +1,45 @@
-import {Request} from '@viur/vue-utils';
-import {defineStore} from 'pinia';
-import {reactive} from 'vue';
-import {useI18n} from 'vue-i18n';
-import {useViurShopStore} from '../shop';
+import { Request } from "@viur/vue-utils"
+import { defineStore } from "pinia"
+import { reactive } from "vue"
+import { useI18n } from "vue-i18n"
+import { useViurShopStore } from "../shop"
 
 /**
  * Store that holds available shipping options
  */
-export const useShipping = defineStore('useShippingStore', () => {
-  const i18n = useI18n();
-  const shopStore = useViurShopStore();
-  const defaultErrorMessage = i18n.t('viur.shop.error_message');
+export const useShipping = defineStore("useShippingStore", () => {
+  const i18n = useI18n()
+  const shopStore = useViurShopStore()
+  const defaultErrorMessage = i18n.t("viur.shop.error_message")
   const state = reactive({
     isLoading: false,
     isUpdating: false,
     hasError: false,
     errorMessage: defaultErrorMessage,
-    shippingData: [],
-  });
+    shippingData: []
+  })
 
   /**
    * fetch available shipping options from API
    */
   function fetchShippingData() {
-    state.isLoading = true;
+    state.isLoading = true
     return Request.get(`${shopStore.state.shopApiUrl}/shipping_list`, {
       dataObj: {
-        cart_key: shopStore.state.cartRoot['key'],
-      },
+        cart_key: shopStore.state.cartRoot["key"]
+      }
     }).then(async (resp) => {
-      state.shippingData = await resp.json();
+      state.shippingData = await resp.json()
       if (state.shippingData.length === 0) {
-        state.hasError = true;
-        state.errorMessage = i18n.t('shop.no_valid_shipping_found');
+        state.hasError = true
+        state.errorMessage = i18n.t("shop.no_valid_shipping_found")
       }
-      state.isLoading = false;
-    });
+      state.isLoading = false
+    })
   }
 
-
   return {
     state,
-    fetchShippingData,
-  };
-});
+    fetchShippingData
+  }
+})
diff --git a/src/custombones/EmailCheckBone.vue b/src/custombones/EmailCheckBone.vue
index dd635fb..ec186db 100644
--- a/src/custombones/EmailCheckBone.vue
+++ b/src/custombones/EmailCheckBone.vue
@@ -1,89 +1,89 @@
 <template>
   <div class="widget-bone-wrapper-email">
-  <sl-input
-    class="widget-bone widget-bone-email widget-bone-email-default"
-    :class="([`widget-bone-email-${name}`])"
-    :name="name"
-    ref="emailBone"
-    :disabled="boneState.readonly"
-    type="email"
-    :value="value"
-    @sl-change="changeEvent"
-    :required="boneState.bonestructure.required && !boneState.bonestructure.multiple  && !boneState.bonestructure.languages"
-    :placeholder="boneState.label==='placeholder'?boneState?.bonestructure?.descr:undefined"
-    :data-user-invalid="boneState.errorMessages.length===0?undefined:true"
-  ></sl-input>
+    <sl-input
+      class="widget-bone widget-bone-email widget-bone-email-default"
+      :class="[`widget-bone-email-${name}`]"
+      :name="name"
+      ref="emailBone"
+      :disabled="boneState.readonly"
+      type="email"
+      :value="value"
+      @sl-change="changeEvent"
+      :required="
+        boneState.bonestructure.required && !boneState.bonestructure.multiple && !boneState.bonestructure.languages
+      "
+      :placeholder="boneState.label === 'placeholder' ? boneState?.bonestructure?.descr : undefined"
+      :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+    ></sl-input>
 
-  <sl-input
-    class="widget-bone widget-bone-email widget-bone-email-repeat"
-    :class="([`widget-bone-email-${name}`])"
-    ref="emailBone2"
-    :disabled="boneState.readonly"
-    type="email"
-    @sl-change="changeEvent"
-    :required="boneState.bonestructure.required && !boneState.bonestructure.multiple  && !boneState.bonestructure.languages"
-    :placeholder="boneState.label==='placeholder'?boneState?.bonestructure?.descr:undefined"
-    :data-user-invalid="boneState.errorMessages.length===0?undefined:true"
-  ></sl-input>
-
-</div>
+    <sl-input
+      class="widget-bone widget-bone-email widget-bone-email-repeat"
+      :class="[`widget-bone-email-${name}`]"
+      ref="emailBone2"
+      :disabled="boneState.readonly"
+      type="email"
+      @sl-change="changeEvent"
+      :required="
+        boneState.bonestructure.required && !boneState.bonestructure.multiple && !boneState.bonestructure.languages
+      "
+      :placeholder="boneState.label === 'placeholder' ? boneState?.bonestructure?.descr : undefined"
+      :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+    ></sl-input>
+  </div>
 </template>
 
 <script setup>
 import { reactive, onMounted, inject, ref, watchEffect } from "vue"
 import { useTimeoutFn } from "@vueuse/core"
 import { useI18n } from "vue-i18n"
-  defineOptions({
-    inheritAttrs: false
-  })
-  const props = defineProps( {
-    name: String,
-    value: [Object, String, Number, Boolean, Array],
-    index: Number,
-    lang: String,
-    bone:Object,
-    autofocus: Boolean
-  })
-  const i18n = useI18n()
-  const emit = defineEmits( ["change"])
-
-    const boneState = inject("boneState")
-    const state = reactive({
+defineOptions({
+  inheritAttrs: false
+})
+const props = defineProps({
+  name: String,
+  value: [Object, String, Number, Boolean, Array],
+  index: Number,
+  lang: String,
+  bone: Object,
+  autofocus: Boolean
+})
+const i18n = useI18n()
+const emit = defineEmits(["change"])
 
-    })
+const boneState = inject("boneState")
+const state = reactive({})
 
-    const emailBone = ref(null)
-    const emailBone2 = ref(null)
+const emailBone = ref(null)
+const emailBone2 = ref(null)
 
-    function changeEvent(event) {
-      if(emailBone.value.value!==emailBone2.value.value){
-        emailBone.value.setCustomValidity(i18n.t("messages.email_equal_error"))
-        emailBone.value.reportValidity()
-        if (!event.target.classList.contains('widget-bone-email-repeat')){
-          emit("change", props.name, event.target.value, props.lang, props.index,false)
-        }
-      }else{
-        emailBone.value.setCustomValidity('')
-        emit("change", props.name, event.target.value, props.lang, props.index,true)
-      }
+function changeEvent(event) {
+  if (emailBone.value.value !== emailBone2.value.value) {
+    emailBone.value.setCustomValidity(i18n.t("messages.email_equal_error"))
+    emailBone.value.reportValidity()
+    if (!event.target.classList.contains("widget-bone-email-repeat")) {
+      emit("change", props.name, event.target.value, props.lang, props.index, false)
     }
+  } else {
+    emailBone.value.setCustomValidity("")
+    emit("change", props.name, event.target.value, props.lang, props.index, true)
+  }
+}
 
-    watchEffect(() => {
-      if (props.autofocus) {
-        if (emailBone.value && emailBone.value !== null && emailBone !== null) {
-          const { start } = useTimeoutFn(() => {
-            emailBone.value.focus()
-          }, 600)
-
-          start()
-        }
-      }
-    })
+watchEffect(() => {
+  if (props.autofocus) {
+    if (emailBone.value && emailBone.value !== null && emailBone !== null) {
+      const { start } = useTimeoutFn(() => {
+        emailBone.value.focus()
+      }, 600)
 
-    onMounted(() => {
-      emit("change", props.name, props.value, props.lang, props.index) //init
-    })
+      start()
+    }
+  }
+})
 
+onMounted(() => {
+  emit("change", props.name, props.value, props.lang, props.index) //init
+})
 </script>
 
 <style scoped>
@@ -103,8 +103,8 @@ sl-input {
   }
 }
 
-.widget-bone-wrapper-email{
-  display:flex;
+.widget-bone-wrapper-email {
+  display: flex;
   gap: var(--sl-spacing-small);
 }
 </style>
diff --git a/src/custombones/PhoneCheckBone.vue b/src/custombones/PhoneCheckBone.vue
index 6d8c584..d7159fb 100644
--- a/src/custombones/PhoneCheckBone.vue
+++ b/src/custombones/PhoneCheckBone.vue
@@ -1,121 +1,122 @@
 <template>
   <div class="widget-bone-wrapper-string">
-  <sl-input
-    class="widget-bone widget-bone-string widget-bone-string-default"
-    :class="([`widget-bone-string-${name}`])"
-    :name="name"
-    ref="stringBone"
-    :disabled="boneState.readonly"
-    :value="value"
-    @sl-change="changeEvent"
-    :required="boneState.bonestructure.required && !boneState.bonestructure.multiple  && !boneState.bonestructure.languages"
-    :placeholder="boneState.label==='placeholder'?boneState?.bonestructure?.descr:undefined"
-    :data-user-invalid="boneState.errorMessages.length===0?undefined:true"
-    :pattern="state.pattern"
-    :maxlength="boneState.maxlength"
-    :minlength="boneState.minlength"
-  ></sl-input>
-
-  <sl-input
-    class="widget-bone widget-bone-string widget-bone-string-repeat"
-    :class="([`widget-bone-email-${name}`])"
-    ref="stringBone2"
-    :disabled="boneState.readonly"
-
-    @sl-change="changeEvent"
-    :required="boneState.bonestructure.required && !boneState.bonestructure.multiple  && !boneState.bonestructure.languages"
-    :placeholder="boneState.label==='placeholder'?boneState?.bonestructure?.descr:undefined"
-    :data-user-invalid="boneState.errorMessages.length===0?undefined:true"
-    :pattern="state.pattern"
-    :maxlength="boneState.maxlength"
-    :minlength="boneState.minlength"
-  ></sl-input>
-
-</div>
+    <sl-input
+      class="widget-bone widget-bone-string widget-bone-string-default"
+      :class="[`widget-bone-string-${name}`]"
+      :name="name"
+      ref="stringBone"
+      :disabled="boneState.readonly"
+      :value="value"
+      @sl-change="changeEvent"
+      :required="
+        boneState.bonestructure.required && !boneState.bonestructure.multiple && !boneState.bonestructure.languages
+      "
+      :placeholder="boneState.label === 'placeholder' ? boneState?.bonestructure?.descr : undefined"
+      :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+      :pattern="state.pattern"
+      :maxlength="boneState.maxlength"
+      :minlength="boneState.minlength"
+    ></sl-input>
+
+    <sl-input
+      class="widget-bone widget-bone-string widget-bone-string-repeat"
+      :class="[`widget-bone-email-${name}`]"
+      ref="stringBone2"
+      :disabled="boneState.readonly"
+      @sl-change="changeEvent"
+      :required="
+        boneState.bonestructure.required && !boneState.bonestructure.multiple && !boneState.bonestructure.languages
+      "
+      :placeholder="boneState.label === 'placeholder' ? boneState?.bonestructure?.descr : undefined"
+      :data-user-invalid="boneState.errorMessages.length === 0 ? undefined : true"
+      :pattern="state.pattern"
+      :maxlength="boneState.maxlength"
+      :minlength="boneState.minlength"
+    ></sl-input>
+  </div>
 </template>
 
 <script setup>
 import { reactive, onMounted, inject, ref, watchEffect, computed } from "vue"
 import { useTimeoutFn } from "@vueuse/core"
 import { useI18n } from "vue-i18n"
-  defineOptions({
-    inheritAttrs: false
-  })
-  const props = defineProps( {
-    name: String,
-    value: [Object, String, Number, Boolean, Array],
-    index: Number,
-    lang: String,
-    bone:Object,
-    autofocus: Boolean
+defineOptions({
+  inheritAttrs: false
+})
+const props = defineProps({
+  name: String,
+  value: [Object, String, Number, Boolean, Array],
+  index: Number,
+  lang: String,
+  bone: Object,
+  autofocus: Boolean
+})
+const i18n = useI18n()
+const emit = defineEmits(["change"])
+
+const boneState = inject("boneState")
+const state = reactive({
+  pattern: computed(() => {
+    let pat = boneState.params?.pattern
+    if (!pat) return undefined
+
+    if (typeof pat === "String") {
+      return pat
+    }
+    return pat?.[boneState.defaultLanguage]
+  }),
+  pattern_error: computed(() => {
+    let pat = boneState.params?.pattern_error
+    if (!pat) return ""
+
+    if (typeof pat === "String") {
+      return pat
+    }
+    return pat?.[boneState.defaultLanguage] ? pat?.[boneState.defaultLanguage] : ""
   })
-  const i18n = useI18n()
-  const emit = defineEmits( ["change"])
-
-    const boneState = inject("boneState")
-    const state = reactive({
-      pattern: computed(() => {
-        let pat = boneState.params?.pattern
-        if (!pat) return undefined
-
-        if (typeof(pat) === "String"){
-          return pat
-        }
-        return pat?.[boneState.defaultLanguage]
-      }),
-      pattern_error:computed(()=>{
-        let pat = boneState.params?.pattern_error
-        if (!pat) return ''
-
-        if (typeof(pat) === "String"){
-          return pat
-        }
-        return pat?.[boneState.defaultLanguage]?pat?.[boneState.defaultLanguage]:''
-      })
-    })
-
-    const stringBone = ref(null)
-    const stringBone2 = ref(null)
-
-    function changeEvent(event) {
-      for (const bone of [stringBone, stringBone2]){
-        let valid = bone.value.reportValidity()
-        let validStates = bone.value.validity
-        if(validStates['patternMismatch']){
-          bone.value.setCustomValidity(state.pattern_error)
-          return
-        }else{
-          bone.value.setCustomValidity('')
-        }
-      }
-      if(stringBone.value.value!==stringBone2.value.value){
-        stringBone.value.setCustomValidity(i18n.t("messages.phone_equal_error"))
-        stringBone.value.reportValidity()
-        if (!event.target.classList.contains('widget-bone-string-repeat')){
-          emit("change", props.name, event.target.value, props.lang, props.index,false)
-        }
-      }else{
-        stringBone.value.setCustomValidity('')
-        emit("change", props.name, event.target.value, props.lang, props.index,true)
-      }
+})
+
+const stringBone = ref(null)
+const stringBone2 = ref(null)
+
+function changeEvent(event) {
+  for (const bone of [stringBone, stringBone2]) {
+    let valid = bone.value.reportValidity()
+    let validStates = bone.value.validity
+    if (validStates["patternMismatch"]) {
+      bone.value.setCustomValidity(state.pattern_error)
+      return
+    } else {
+      bone.value.setCustomValidity("")
     }
+  }
+  if (stringBone.value.value !== stringBone2.value.value) {
+    stringBone.value.setCustomValidity(i18n.t("messages.phone_equal_error"))
+    stringBone.value.reportValidity()
+    if (!event.target.classList.contains("widget-bone-string-repeat")) {
+      emit("change", props.name, event.target.value, props.lang, props.index, false)
+    }
+  } else {
+    stringBone.value.setCustomValidity("")
+    emit("change", props.name, event.target.value, props.lang, props.index, true)
+  }
+}
 
-    watchEffect(() => {
-      if (props.autofocus) {
-        if (stringBone.value && stringBone.value !== null && stringBone !== null) {
-          const { start } = useTimeoutFn(() => {
-            stringBone.value.focus()
-          }, 600)
-
-          start()
-        }
-      }
-    })
+watchEffect(() => {
+  if (props.autofocus) {
+    if (stringBone.value && stringBone.value !== null && stringBone !== null) {
+      const { start } = useTimeoutFn(() => {
+        stringBone.value.focus()
+      }, 600)
 
-    onMounted(() => {
-      emit("change", props.name, props.value, props.lang, props.index) //init
-    })
+      start()
+    }
+  }
+})
 
+onMounted(() => {
+  emit("change", props.name, props.value, props.lang, props.index) //init
+})
 </script>
 
 <style scoped>
@@ -135,9 +136,9 @@ sl-input {
   }
 }
 
-.widget-bone-wrapper-string{
-  display:flex;
+.widget-bone-wrapper-string {
+  display: flex;
   gap: var(--sl-spacing-small);
-  margin-bottom:var(--sl-spacing-small);
+  margin-bottom: var(--sl-spacing-small);
 }
 </style>
diff --git a/src/main.js b/src/main.js
index bca493f..66be8c9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,57 +1,51 @@
 // imports
-import { createPinia } from "pinia";
-import { createI18n } from "vue-i18n";
-import { de_translations, en_translations } from "@viur/vue-utils";
-import {useTranslations} from "@viur/vue-utils/utils/translations"
+import { createPinia } from "pinia"
+import { createI18n } from "vue-i18n"
+import { de_translations, en_translations } from "@viur/vue-utils"
+import { useTranslations } from "@viur/vue-utils/utils/translations"
 
 import en from "./translations/en"
 import de from "./translations/de"
 import fr from "./translations/fr"
 
-export { default as ViurShop } from "./Shop.vue";
+export { default as ViurShop } from "./Shop.vue"
 
 const ViurShopComponents = {
-  async install(app,options) {
-    
+  async install(app, options) {
+    let defaultLocale = options?.defaultLocale ? options.defaultLocale : "de"
+    let locale = options?.locale ? options.locale : ["de"]
+    let fallback = options?.fallback ? options.fallback : "en"
 
+    let additionals = options?.additionals ? options.additionals : {}
 
-    
-    let defaultLocale = options?.defaultLocale?options.defaultLocale:'de'
-    let locale = options?.locale?options.locale:['de']
-    let fallback = options?.fallback?options.fallback:'en'
-
-    let additionals = options?.additionals?options.additionals:{}
-
-    app.use(createPinia());
+    app.use(createPinia())
 
     let messages = {}
     const i18n = createI18n({
       locale: defaultLocale,
       fallbackLocale: fallback,
-      messages: messages,
+      messages: messages
     })
-    const {fetchTranslations, updateLocaleMessages} = useTranslations(i18n.global)
+    const { fetchTranslations, updateLocaleMessages } = useTranslations(i18n.global)
     // fetch translations from server
-    let data = await fetchTranslations(locale,options?.pattern)
-    for(const loc of locale){
-      let locAdditionals = additionals?.[loc]?additionals[loc]:{}
-
-      if (loc === 'de'){
-        messages[loc] = { ...de_translations, ...de, ...locAdditionals, ...data[loc]}
-      }else if (loc === 'fr'){
-        messages[loc] = { ...fr, ...locAdditionals, ...data[loc]}
-      }else if (loc === 'en'){
-        messages[loc] = {...en_translations, ...en, ...locAdditionals, ...data[loc]}
-      }else{
-        messages[loc] = {...locAdditionals, ...data[loc]}
+    let data = await fetchTranslations(locale, options?.pattern)
+    for (const loc of locale) {
+      let locAdditionals = additionals?.[loc] ? additionals[loc] : {}
+
+      if (loc === "de") {
+        messages[loc] = { ...de_translations, ...de, ...locAdditionals, ...data[loc] }
+      } else if (loc === "fr") {
+        messages[loc] = { ...fr, ...locAdditionals, ...data[loc] }
+      } else if (loc === "en") {
+        messages[loc] = { ...en_translations, ...en, ...locAdditionals, ...data[loc] }
+      } else {
+        messages[loc] = { ...locAdditionals, ...data[loc] }
       }
       updateLocaleMessages(loc, messages[loc])
     }
-    app.use(
-      i18n
-    );
-  },
-};
+    app.use(i18n)
+  }
+}
 
 // Export the plugin as default
-export default ViurShopComponents;
+export default ViurShopComponents
diff --git a/src/shop.js b/src/shop.js
index 35838de..312a20a 100644
--- a/src/shop.js
+++ b/src/shop.js
@@ -1,293 +1,316 @@
-
-import { reactive, computed, watch, shallowRef } from "vue";
-import {ShopCart, ShopUserDataGuest, ShopShippingMethod, ShopPaymentProvider, ShopOrderComplete, ShopOrderConfirm} from './Steps/index'
-import { defineStore } from "pinia";
-import { useUrlSearchParams,useTimeoutFn } from '@vueuse/core'
-import AddressFormLayout from './components/AddressFormLayout.vue';
-
-import { Request } from "@viur/vue-utils";
+import { reactive, computed, watch, shallowRef } from "vue"
+import {
+  ShopCart,
+  ShopUserDataGuest,
+  ShopShippingMethod,
+  ShopPaymentProvider,
+  ShopOrderComplete,
+  ShopOrderConfirm
+} from "./Steps/index"
+import { defineStore } from "pinia"
+import { useUrlSearchParams, useTimeoutFn } from "@vueuse/core"
+import AddressFormLayout from "./components/AddressFormLayout.vue"
+
+import { Request } from "@viur/vue-utils"
 
 export const useViurShopStore = defineStore("viurshopStore", () => {
-    const state = reactive({
-        //shop module name
-        showNodes:false,
-        language:"de",
-        moduleName:'shop',
-        hostUrl: computed(()=>(import.meta.env.VITE_API_URL ? import.meta.env.VITE_API_URL : window.location.origin)),
-        shopUrl:computed(()=>{
-            return `${state.hostUrl}/json/${state.moduleName}`
-        }),
-        shopApiUrl:computed(()=>{
-            return `${state.hostUrl}/json/${state.moduleName}/api`
-        }),
-        debug:false,
-        topActions:false,
-        //default Tabs
-        tabs:{
-            cart: {
-                component: shallowRef(ShopCart),
-                params:{},
-                displayName: "viur.shop.order_step_cart", //Warenkorb
-                icon: { name: "cart3" },
-                active:computed(()=>!state.order?.['is_checkout_in_progress'] && !state.order?.['is_ordered']),  //active if no orderkey or checkout not startet
-                validating:false,
-                valid:false
-            },
-            userdata: {
-                component: shallowRef(ShopUserDataGuest),
-                params:{},
-                displayName: "viur.shop.order_step_data", //Daten Eingeben
-                icon: { name: "card-list" },
-                active:computed(()=>state.order && !state.order?.['is_checkout_in_progress'] && !state.order?.['is_ordered'] && state.cartList.length>0), //active if checkout not startet and cart is not empty
-                validating:false,
-                valid:false
-            },
-            shippingmethod: {
-                component: shallowRef(ShopShippingMethod),
-                params:{},
-                displayName: "viur.shop.order_step_shipping", // Versandart
-                icon: { name: "truck" },
-                active:computed(()=>!state.order?.['is_checkout_in_progress'] && !state.order?.['is_ordered'] && state.cartRoot?.['shipping_address']), // we need a shipping country
-                validating:false,
-                valid:false
-            },
-            paymentprovider: {
-                component: shallowRef(ShopPaymentProvider),
-                params:{},
-                displayName: "viur.shop.order_step_payment", //Zahlungsart auswählen
-                icon: { name: "credit-card" },
-                active:computed(()=>!state.order?.['is_checkout_in_progress'] && state.order && state.cartRoot?.['shipping'] && state.cartRoot?.['shipping_address']), // we need a active order
-                validating:false,
-                valid:false
-            },
-            confirm: {
-                component: shallowRef(ShopOrderConfirm),
-                params:{},
-                displayName: "viur.shop.order_step_verify", //Bestellung prüfen
-                icon: { name: "clipboard-check" },
-                active:computed(()=>!state.order?.['is_paid'] && state.canCheckout?.['status']), // active if canCheckout and not already paid
-                validating:false,
-                valid:false
-            },
-            complete: {
-                component: shallowRef(ShopOrderComplete),
-                params:{},
-                displayName: "viur.shop.order_step_complete", //Bestellung Abgeschlossen
-                icon: { name: "bag-check" },
-                active:computed(()=>state.order?.['is_ordered'] && state.order?.['is_rts']), // active if ordered
-                validating:false,
-                valid:false
-            },
+  const state = reactive({
+    //shop module name
+    showNodes: false,
+    language: "de",
+    moduleName: "shop",
+    hostUrl: computed(() => (import.meta.env.VITE_API_URL ? import.meta.env.VITE_API_URL : window.location.origin)),
+    shopUrl: computed(() => {
+      return `${state.hostUrl}/json/${state.moduleName}`
+    }),
+    shopApiUrl: computed(() => {
+      return `${state.hostUrl}/json/${state.moduleName}/api`
+    }),
+    debug: false,
+    topActions: false,
+    //default Tabs
+    tabs: {
+      cart: {
+        component: shallowRef(ShopCart),
+        params: {},
+        displayName: "viur.shop.order_step_cart", //Warenkorb
+        icon: { name: "cart3" },
+        active: computed(() => !state.order?.["is_checkout_in_progress"] && !state.order?.["is_ordered"]), //active if no orderkey or checkout not startet
+        validating: false,
+        valid: false
+      },
+      userdata: {
+        component: shallowRef(ShopUserDataGuest),
+        params: {},
+        displayName: "viur.shop.order_step_data", //Daten Eingeben
+        icon: { name: "card-list" },
+        active: computed(
+          () =>
+            state.order &&
+            !state.order?.["is_checkout_in_progress"] &&
+            !state.order?.["is_ordered"] &&
+            state.cartList.length > 0
+        ), //active if checkout not startet and cart is not empty
+        validating: false,
+        valid: false
+      },
+      shippingmethod: {
+        component: shallowRef(ShopShippingMethod),
+        params: {},
+        displayName: "viur.shop.order_step_shipping", // Versandart
+        icon: { name: "truck" },
+        active: computed(
+          () =>
+            !state.order?.["is_checkout_in_progress"] &&
+            !state.order?.["is_ordered"] &&
+            state.cartRoot?.["shipping_address"]
+        ), // we need a shipping country
+        validating: false,
+        valid: false
+      },
+      paymentprovider: {
+        component: shallowRef(ShopPaymentProvider),
+        params: {},
+        displayName: "viur.shop.order_step_payment", //Zahlungsart auswählen
+        icon: { name: "credit-card" },
+        active: computed(
+          () =>
+            !state.order?.["is_checkout_in_progress"] &&
+            state.order &&
+            state.cartRoot?.["shipping"] &&
+            state.cartRoot?.["shipping_address"]
+        ), // we need a active order
+        validating: false,
+        valid: false
+      },
+      confirm: {
+        component: shallowRef(ShopOrderConfirm),
+        params: {},
+        displayName: "viur.shop.order_step_verify", //Bestellung prüfen
+        icon: { name: "clipboard-check" },
+        active: computed(() => !state.order?.["is_paid"] && state.canCheckout?.["status"]), // active if canCheckout and not already paid
+        validating: false,
+        valid: false
+      },
+      complete: {
+        component: shallowRef(ShopOrderComplete),
+        params: {},
+        displayName: "viur.shop.order_step_complete", //Bestellung Abgeschlossen
+        icon: { name: "bag-check" },
+        active: computed(() => state.order?.["is_ordered"] && state.order?.["is_rts"]), // active if ordered
+        validating: false,
+        valid: false
+      }
+    },
+    // active Tab
+    currentTab: "cart", // set cart as default to avoid console errors
+    // tabname to index mapping
+    tabIndexMap: computed(() => {
+      let map = {}
+      for (const [index, item] of Object.entries(Object.keys(state.tabs))) {
+        map[[item]] = parseInt(index)
+      }
+      return map
+    }),
+    // index to tabname mapping
+    indexTabMap: computed(() => {
+      let map = {}
+      for (const [index, item] of Object.entries(Object.keys(state.tabs))) {
+        map[[index]] = item
+      }
+      return map
+    }),
+    // length of stepper
+    stepperLength: computed(() => {
+      return Object.keys(state.tabs).length
+    }),
+
+    // SHOP DATA
+    cartList: [], //articles in cart
+    cartRoot: null, //actual cart rootnode entry ( used for shipping etc)
+    order: null, // actual order entry ( used for billing etc.)
+    orderKey: null, // key of the order, maybe injected from ?order param
+
+    //CART READY
+    cartReady: false,
+    orderReady: false,
+    canCheckout: null,
+    canOrder: null,
+
+    //Address Structure
+    addressStructure: null,
+    paymentMeta: null,
+
+    //checkout
+    paymentProviderData: null,
+    UserDataLayout: shallowRef(AddressFormLayout)
+  })
+
+  function addTab({ name, component, displayname, iconname, iconlibrary, active }) {
+    if (Object.keys(state.tabs).includes(name)) {
+      state.tabs[name] = {
+        component: component ? shallowRef(component) : state.tabs[name].component,
+        displayName: displayname ? displayname : state.tabs[name].displayName,
+        icon: {
+          name: iconname ? iconname : state.tabs[name].iconname,
+          library: iconlibrary ? iconlibrary : state.tabs[name].iconlibrary
         },
-        // active Tab
-        currentTab: "cart",  // set cart as default to avoid console errors
-        // tabname to index mapping
-        tabIndexMap: computed(()=>{
-            let map = {}
-            for (const [index, item] of Object.entries(Object.keys(state.tabs))){
-                map[[item]] = parseInt(index)
-            }
-            return map
-        }),
-        // index to tabname mapping
-        indexTabMap: computed(()=>{
-            let map = {}
-            for (const [index, item] of Object.entries(Object.keys(state.tabs))){
-                map[[index]] = item
-            }
-            return map
-        }),
-        // length of stepper
-        stepperLength:computed(()=>{
-            return Object.keys(state.tabs).length
-        }),
-
-        // SHOP DATA
-        cartList:[], //articles in cart
-        cartRoot:null, //actual cart rootnode entry ( used for shipping etc)
-        order:null, // actual order entry ( used for billing etc.)
-        orderKey:null, // key of the order, maybe injected from ?order param
-
-        //CART READY
-        cartReady:false,
-        orderReady:false,
-        canCheckout:null,
-        canOrder:null,
+        active: active ? active : state.tabs[name].active
+      }
+    } else {
+      state.tabs[name] = {
+        component: shallowRef(component),
+        displayName: displayname,
+        icon: { name: iconname, library: iconlibrary },
+        active: active
+      }
+    }
+  }
 
-        //Address Structure
-        addressStructure:null,
-        paymentMeta:null,
+  function removeTab(name) {
+    delete state.tabs[name]
+  }
 
+  function navigateToTab(name) {
+    // navigate to Tab
+    state.currentTab = name
 
-        //checkout
-        paymentProviderData:null,
-        UserDataLayout: shallowRef(AddressFormLayout)
+    const params = useUrlSearchParams("hash")
+    params["step"] = state.currentTab
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth"
     })
+  }
+
+  function navigateToNext() {
+    // shorthand for next Tab
+    if (state.tabIndexMap[state.currentTab] === state.stepperLength - 1) return false
+    navigateToTab(state.indexTabMap[state.tabIndexMap[state.currentTab] + 1])
+  }
+
+  function navigateToPrevious() {
+    // shorthand for previous Tab
+    if (state.tabIndexMap[state.currentTab] === 0) return false
+    navigateToTab(state.indexTabMap[state.tabIndexMap[state.currentTab] - 1])
+  }
+
+  function fetchAddressStructure() {
+    Request.get(`${state.shopUrl}/address/add`).then(async (resp) => {
+      let data = await resp.json()
+      state.addressStructure = data["structure"]
+    })
+  }
 
-    function addTab({name, component, displayname, iconname, iconlibrary,active})
-    {
-        if(Object.keys(state.tabs).includes(name)){
-            state.tabs[name] = {
-                component: component?shallowRef(component):state.tabs[name].component,
-                displayName: displayname?displayname:state.tabs[name].displayName,
-                icon: {
-                    name: iconname?iconname:state.tabs[name].iconname,
-                    library:iconlibrary?iconlibrary:state.tabs[name].iconlibrary
-                },
-                active:active?active:state.tabs[name].active
-            }
-        }else{
-            state.tabs[name] = {
-                component: shallowRef(component),
-                displayName: displayname,
-                icon: { name: iconname, library:iconlibrary},
-                active:active
-            }
+  function fetchPaymentMeta() {
+    Request.get(`${state.shopUrl}/order/payment_providers_list`).then(async (resp) => {
+      let data = await resp.json()
+      state.paymentMeta = data
+    })
+  }
+
+  function fetchMetaData() {
+    fetchAddressStructure()
+    fetchPaymentMeta()
+  }
+
+  function checkout() {
+    //request Payment
+    return new Promise((resolve, reject) => {
+      Request.post(`${state.shopUrl}/order/checkout_start`, {
+        dataObj: {
+          order_key: state.orderKey
         }
-
-
-    }
-
-    function removeTab(name){
-        delete state.tabs[name]
-    }
-
-
-
-    function navigateToTab(name){
-        // navigate to Tab
-        state.currentTab = name
-
-        const params = useUrlSearchParams('hash')
-        params['step'] = state.currentTab
-        window.scrollTo({
-          top: 0,
-          behavior: 'smooth'
-        });
-    }
-
-    function navigateToNext(){
-        // shorthand for next Tab
-        if (state.tabIndexMap[state.currentTab] === state.stepperLength-1) return false
-        navigateToTab(state.indexTabMap[state.tabIndexMap[state.currentTab]+1])
-    }
-
-    function navigateToPrevious(){
-        // shorthand for previous Tab
-        if (state.tabIndexMap[state.currentTab] === 0) return false
-        navigateToTab(state.indexTabMap[state.tabIndexMap[state.currentTab]-1])
-    }
-
-    function fetchAddressStructure(){
-        Request.get(`${state.shopUrl}/address/add`).then(async (resp)=>{
-            let data = await resp.json()
-            state.addressStructure = data['structure']
+      })
+        .then(async (resp) => {
+          let data = await resp.clone().json()
+          state.paymentProviderData = data["payment"]
+
+          if (!data["payment"]) {
+            try {
+              await checkoutOrder() // direct Checkout
+              resolve()
+            } catch (error) {
+              reject(error)
+            }
+          } else {
+            resolve()
+          }
+          return resp
         })
-    }
-
-    function fetchPaymentMeta(){
-        Request.get(`${state.shopUrl}/order/payment_providers_list`).then(async (resp)=>{
-            let data = await resp.json()
-            state.paymentMeta = data
+        .catch((error) => {
+          reject(error)
         })
-    }
-
-    function fetchMetaData(){
-        fetchAddressStructure()
-        fetchPaymentMeta()
-    }
-
-    function checkout(){
-        //request Payment
-        return new Promise((resolve,reject)=>{
-            Request.post(`${state.shopUrl}/order/checkout_start`,{dataObj:{
-                order_key:state.orderKey
-            }}).then(async (resp)=>{
-                let data = await resp.clone().json()
-                state.paymentProviderData = data['payment']
-
-                if (!data['payment']){
-                    try{
-                        await checkoutOrder() // direct Checkout
-                        resolve()
-                    } catch(error){
-                        reject(error)
-                    }
-                }else{
-                    resolve()
-                }
-                return resp
-            }).catch(error=>{
-                reject(error)
-            })
+    })
+  }
+
+  function checkoutOrder() {
+    //payment is finished
+    return new Promise((resolve, reject) => {
+      Request.post(`${state.shopUrl}/order/checkout_order`, {
+        dataObj: {
+          order_key: state.orderKey
+        }
+      })
+        .then(async (resp) => {
+          let data = await resp.clone().json()
+          if (!resp.ok) {
+            reject(data)
+          } else {
+            state.order = data["skel"]
+            state.paymentProviderData = data["payment"]
+
+            if (state.order?.["is_ordered"] && state.order?.["is_rts"]) {
+              // order is finished
+              useTimeoutFn(() => {
+                navigateToTab("complete")
+              }, 300)
+            }
+            resolve(data)
+          }
+          return resp
         })
-    }
-
-    function checkoutOrder(){
-        //payment is finished
-        return new Promise((resolve,reject)=>{
-            Request.post(`${state.shopUrl}/order/checkout_order`,{dataObj:{
-                order_key:state.orderKey
-            }}).then(async (resp)=>{
-                let data = await resp.clone().json()
-                if (!resp.ok){
-                    reject(data)
-                } else {
-                  state.order = data['skel']
-                  state.paymentProviderData = data['payment']
-
-                  if(state.order?.['is_ordered'] && state.order?.['is_rts']){
-                      // order is finished
-                      useTimeoutFn(() => {
-                        navigateToTab('complete')
-                      }, 300)
-
-                  }
-                  resolve(data)
-                }
-                return resp
-            }).catch(error=>{
-                reject(error)
-            })
+        .catch((error) => {
+          reject(error)
         })
-    }
-
-    function tabValidation(nextfunction, navigatefunction){
-      state.tabs[state.currentTab]['valid']=false
-      state.tabs[state.currentTab]['validating']=true
-
-      //validate step, like send forms or something like this
-      Promise.resolve(nextfunction()).then((resp)=>{
-
-        if (resp){
-          state.tabs[state.currentTab]['valid']=true
-          state.tabs[state.currentTab]['validating']=false
+    })
+  }
+
+  function tabValidation(nextfunction, navigatefunction) {
+    state.tabs[state.currentTab]["valid"] = false
+    state.tabs[state.currentTab]["validating"] = true
+
+    //validate step, like send forms or something like this
+    Promise.resolve(nextfunction())
+      .then((resp) => {
+        if (resp) {
+          state.tabs[state.currentTab]["valid"] = true
+          state.tabs[state.currentTab]["validating"] = false
           useTimeoutFn(() => {
             navigatefunction()
           }, 300)
-
-        }else{
-          state.tabs[state.currentTab]['valid']=false
-          state.tabs[state.currentTab]['validating']=false
+        } else {
+          state.tabs[state.currentTab]["valid"] = false
+          state.tabs[state.currentTab]["validating"] = false
         }
-      }).catch(error=>{
+      })
+      .catch((error) => {
         console.log(error)
-        state.tabs[state.currentTab]['valid']=false
-        state.tabs[state.currentTab]['validating']=false
+        state.tabs[state.currentTab]["valid"] = false
+        state.tabs[state.currentTab]["validating"] = false
       })
-    }
-
-
-    return {
-        state,
-        navigateToTab,
-        navigateToNext,
-        navigateToPrevious,
-        tabValidation,
-        fetchMetaData,
-        checkout,
-        checkoutOrder,
-        addTab,
-        removeTab
-    }
+  }
+
+  return {
+    state,
+    navigateToTab,
+    navigateToNext,
+    navigateToPrevious,
+    tabValidation,
+    fetchMetaData,
+    checkout,
+    checkoutOrder,
+    addTab,
+    removeTab
+  }
 })
diff --git a/src/translations/de.js b/src/translations/de.js
index 40acde9..83011e6 100644
--- a/src/translations/de.js
+++ b/src/translations/de.js
@@ -1,70 +1,71 @@
 export default {
   actions: {
-    add: 'Hinzufügen',
-    cancel: 'Abbrechen',
-    delete: 'Löschen',
+    add: "Hinzufügen",
+    cancel: "Abbrechen",
+    delete: "Löschen"
   },
   viur: {
     shop: {
-      'check_order': 'Prüfen und absenden',
-      'order_pay': 'Zahlungspflichtig bestellen',
-      'order_number': 'Ihre Vorgangsnummer',
-      'order_thanks': 'Vielen Dank für Ihre Bestellung',
-      'order_message': 'Wir haben Ihre Bestellung erhalten und werden diese schnellstmöglich bearbeiten.<br /> Sie erhalten in wenigen Minuten eine Bestätigung per E-Mail.',
-      'order_paid': 'Ihre Zahlung ist bei uns eingegangen.',
-      'order_ready_to_ship': 'Ihre Bestellung ist fertig für den Versand.',
-      'cart_empty': 'Es befinden sich noch keine Artikel im Warenkorb.',
-      'order_summary': 'Bestellzusammenfassung',
-      'deliverytime': 'Voraussichtliche Lieferzeit',
-      'day': 'Tag | Tage',
-      'availability': 'Verfügbarkeit',
-      'quantity': 'Anzahl',
-      'unit_price': 'Stückpreis',
-      'total_price': 'Gesamtpreis',
-      'article_number': 'Artikelnummer',
-      'payment': 'Zahlung',
-      'pay': 'Bezahlen',
-      'next': 'weiter',
-      'edit': 'bearbeiten',
-      'add_discount': 'Hinzufügen',
-      'add_discount_placeholder': 'Dein Rabattcode',
-      'use_shipping_as_billing_address': 'Lieferung zur Rechnungsadresse',
-      'no_valid_shipping_found': 'Keine passenden Versandarten gefunden.',
-      'error_message': 'Ein Fehler ist aufgetreten.',
-      'free_shipping': 'Versandkostenfrei',
-      'proceed-checkout': 'Zur Kasse gehen',
-      'summary_headline': 'Zusammenfassung',
-      'summary_subtotal': 'Zwischensumme',
-      'summary_shipping_total': 'Versand- und Bearbeitungspauschale',
-      'summary_delivery_time': 'Lieferzeit',
-      'summary_discount': 'Sie sparen bei Ihrem Einkauf im Aktionszeitraum',
-      'summary_checkout': 'Zur Kasse gehen',
-      'summary_total': 'Gesamtbetrag',
-      'summary_vat': 'inkl. {percentage} MwSt.',
-      'discount_not_found': 'Dieser Rabattcode existiert nicht.',
-      'discount_not_active': 'Dieser Rabattcode ist nicht aktiv.',
-      'discount_not_available': 'Dieser Rabattcode ist für dieses Land nicht verfügbar.',
-      'discount_already_used': 'Dieser Rabattcode wurde bereits benutzt.',
-      'discount_invalid_period': 'Der Rabattzeitraum hat noch nicht begonnen oder ist bereits vorbei.',
-      'discount_minimum_not_reached': 'Der Mindestbestellwert von {{minimum_order_value}} € wurde nicht erreicht.',
-      'discount_no_sale_article': 'Der Rabattcode ist nicht auf bereits rabattierte Artikel anwendbar.',
-      'discount_scope_not_satisfied': 'Der Rabattcode ist für diesen Warenkorb / diese Artikel nicht anwendbar.',
-      'order_step_cart': 'Warenkorb',
-      'order_step_data': 'Daten',
-      'order_step_shipping': 'Versandart',
-      'order_step_payment': 'Zahlungsart',
-      'order_step_verify': 'Bestellung prüfen',
-      'order_step_complete': 'Bestellung Abgeschlossen',
-      'paypal_client_popup_info':"Bitte prüfen Sie, ob Ihr Browser das PayPal-Popup zulässt."
-    },
+      check_order: "Prüfen und absenden",
+      order_pay: "Zahlungspflichtig bestellen",
+      order_number: "Ihre Vorgangsnummer",
+      order_thanks: "Vielen Dank für Ihre Bestellung",
+      order_message:
+        "Wir haben Ihre Bestellung erhalten und werden diese schnellstmöglich bearbeiten.<br /> Sie erhalten in wenigen Minuten eine Bestätigung per E-Mail.",
+      order_paid: "Ihre Zahlung ist bei uns eingegangen.",
+      order_ready_to_ship: "Ihre Bestellung ist fertig für den Versand.",
+      cart_empty: "Es befinden sich noch keine Artikel im Warenkorb.",
+      order_summary: "Bestellzusammenfassung",
+      deliverytime: "Voraussichtliche Lieferzeit",
+      day: "Tag | Tage",
+      availability: "Verfügbarkeit",
+      quantity: "Anzahl",
+      unit_price: "Stückpreis",
+      total_price: "Gesamtpreis",
+      article_number: "Artikelnummer",
+      payment: "Zahlung",
+      pay: "Bezahlen",
+      next: "weiter",
+      edit: "bearbeiten",
+      add_discount: "Hinzufügen",
+      add_discount_placeholder: "Dein Rabattcode",
+      use_shipping_as_billing_address: "Lieferung zur Rechnungsadresse",
+      no_valid_shipping_found: "Keine passenden Versandarten gefunden.",
+      error_message: "Ein Fehler ist aufgetreten.",
+      free_shipping: "Versandkostenfrei",
+      "proceed-checkout": "Zur Kasse gehen",
+      summary_headline: "Zusammenfassung",
+      summary_subtotal: "Zwischensumme",
+      summary_shipping_total: "Versand- und Bearbeitungspauschale",
+      summary_delivery_time: "Lieferzeit",
+      summary_discount: "Sie sparen bei Ihrem Einkauf im Aktionszeitraum",
+      summary_checkout: "Zur Kasse gehen",
+      summary_total: "Gesamtbetrag",
+      summary_vat: "inkl. {percentage} MwSt.",
+      discount_not_found: "Dieser Rabattcode existiert nicht.",
+      discount_not_active: "Dieser Rabattcode ist nicht aktiv.",
+      discount_not_available: "Dieser Rabattcode ist für dieses Land nicht verfügbar.",
+      discount_already_used: "Dieser Rabattcode wurde bereits benutzt.",
+      discount_invalid_period: "Der Rabattzeitraum hat noch nicht begonnen oder ist bereits vorbei.",
+      discount_minimum_not_reached: "Der Mindestbestellwert von {{minimum_order_value}} € wurde nicht erreicht.",
+      discount_no_sale_article: "Der Rabattcode ist nicht auf bereits rabattierte Artikel anwendbar.",
+      discount_scope_not_satisfied: "Der Rabattcode ist für diesen Warenkorb / diese Artikel nicht anwendbar.",
+      order_step_cart: "Warenkorb",
+      order_step_data: "Daten",
+      order_step_shipping: "Versandart",
+      order_step_payment: "Zahlungsart",
+      order_step_verify: "Bestellung prüfen",
+      order_step_complete: "Bestellung Abgeschlossen",
+      paypal_client_popup_info: "Bitte prüfen Sie, ob Ihr Browser das PayPal-Popup zulässt."
+    }
   },
   messages: {
-    loading: 'Daten werden abgefragt …',
-    updating: 'Daten werden aktualisiert …',
-    wait_for_payment: 'Warte auf Zahlung …',
-    remove_article_from_cart: 'Wollen sie den Artikel wirklich entfernen?',
-    order_check_later: 'Sie können Ihre Bestellung am Ende noch einmal überprüfen.',
-    email_equal_error: 'E-Mail-Adressen stimmen nicht überein.',
-    phone_equal_error: 'Telefonnummern stimmen nicht überein.',
-  },
-};
+    loading: "Daten werden abgefragt …",
+    updating: "Daten werden aktualisiert …",
+    wait_for_payment: "Warte auf Zahlung …",
+    remove_article_from_cart: "Wollen sie den Artikel wirklich entfernen?",
+    order_check_later: "Sie können Ihre Bestellung am Ende noch einmal überprüfen.",
+    email_equal_error: "E-Mail-Adressen stimmen nicht überein.",
+    phone_equal_error: "Telefonnummern stimmen nicht überein."
+  }
+}
diff --git a/src/translations/en.js b/src/translations/en.js
index 26b8407..442a11f 100644
--- a/src/translations/en.js
+++ b/src/translations/en.js
@@ -1,70 +1,71 @@
 export default {
   actions: {
-    add: 'Add',
-    cancel: 'Cancel',
-    delete: 'Delete',
+    add: "Add",
+    cancel: "Cancel",
+    delete: "Delete"
   },
   viur: {
     shop: {
-      'check_order': 'Review and submit',
-      'order_pay': 'Place binding order',
-      'order_number': 'Your order number',
-      'order_thanks': 'Thank you for your order',
-      'order_message': 'We have received your order and will process it as soon as possible.<br /> You will receive a confirmation email in a few minutes.',
-      'order_paid': 'Your payment has been received.',
-      'order_ready_to_ship': 'Your order is ready for shipping.',
-      'cart_empty': 'Your cart is currently empty.',
-      'order_summary': 'Order summary',
-      'deliverytime': 'Delivery time',
-      'day': 'Day | Days',
-      'availability': 'Availability',
-      'quantity': 'Quantity',
-      'unit_price': 'Unit price',
-      'total_price': 'Total price',
-      'article_number': 'Article number',
-      'payment': 'Payment',
-      'pay': 'Pay',
-      'next': 'next',
-      'edit': 'edit',
-      'add_discount': 'Add',
-      'add_discount_placeholder': 'Your discount code',
-      'use_shipping_as_billing_address': 'Use shipping address as billing address',
-      'no_valid_shipping_found': 'No valid shipping methods found.',
-      'error_message': 'An error has occurred.',
-      'free_shipping': 'Free shipping',
-      'proceed-checkout': 'Proceed to checkout',
-      'summary_headline': 'Summary',
-      'summary_subtotal': 'Subtotal',
-      'summary_shipping_total': 'Shipping and handling',
-      'summary_delivery_time': 'Delivery time',
-      'summary_discount': 'You save during the promotion period',
-      'summary_checkout': 'Proceed to checkout',
-      'summary_total': 'Total amount',
-      'summary_vat': 'incl. {percentage} VAT',
-      'discount_not_found': 'This discount code does not exist.',
-      'discount_not_active': 'This discount code is not active.',
-      'discount_not_available': 'This discount code is not available for this country.',
-      'discount_already_used': 'This discount code has already been used.',
-      'discount_invalid_period': 'The discount period has not yet started or has already ended.',
-      'discount_minimum_not_reached': 'The minimum order value of {{minimum_order_value}} € has not been reached.',
-      'discount_no_sale_article': 'The discount code cannot be applied to already discounted items.',
-      'discount_scope_not_satisfied': 'The discount code cannot be applied to this cart or these items.',
-      'order_step_cart': 'Cart',
-      'order_step_data': 'Details',
-      'order_step_shipping': 'Shipping method',
-      'order_step_payment': 'Payment method',
-      'order_step_verify': 'Review order',
-      'order_step_complete': 'Order complete',
-      'paypal_client_popup_info':"Please make sure your browser allows the PayPal popup."
-    },
+      check_order: "Review and submit",
+      order_pay: "Place binding order",
+      order_number: "Your order number",
+      order_thanks: "Thank you for your order",
+      order_message:
+        "We have received your order and will process it as soon as possible.<br /> You will receive a confirmation email in a few minutes.",
+      order_paid: "Your payment has been received.",
+      order_ready_to_ship: "Your order is ready for shipping.",
+      cart_empty: "Your cart is currently empty.",
+      order_summary: "Order summary",
+      deliverytime: "Delivery time",
+      day: "Day | Days",
+      availability: "Availability",
+      quantity: "Quantity",
+      unit_price: "Unit price",
+      total_price: "Total price",
+      article_number: "Article number",
+      payment: "Payment",
+      pay: "Pay",
+      next: "next",
+      edit: "edit",
+      add_discount: "Add",
+      add_discount_placeholder: "Your discount code",
+      use_shipping_as_billing_address: "Use shipping address as billing address",
+      no_valid_shipping_found: "No valid shipping methods found.",
+      error_message: "An error has occurred.",
+      free_shipping: "Free shipping",
+      "proceed-checkout": "Proceed to checkout",
+      summary_headline: "Summary",
+      summary_subtotal: "Subtotal",
+      summary_shipping_total: "Shipping and handling",
+      summary_delivery_time: "Delivery time",
+      summary_discount: "You save during the promotion period",
+      summary_checkout: "Proceed to checkout",
+      summary_total: "Total amount",
+      summary_vat: "incl. {percentage} VAT",
+      discount_not_found: "This discount code does not exist.",
+      discount_not_active: "This discount code is not active.",
+      discount_not_available: "This discount code is not available for this country.",
+      discount_already_used: "This discount code has already been used.",
+      discount_invalid_period: "The discount period has not yet started or has already ended.",
+      discount_minimum_not_reached: "The minimum order value of {{minimum_order_value}} € has not been reached.",
+      discount_no_sale_article: "The discount code cannot be applied to already discounted items.",
+      discount_scope_not_satisfied: "The discount code cannot be applied to this cart or these items.",
+      order_step_cart: "Cart",
+      order_step_data: "Details",
+      order_step_shipping: "Shipping method",
+      order_step_payment: "Payment method",
+      order_step_verify: "Review order",
+      order_step_complete: "Order complete",
+      paypal_client_popup_info: "Please make sure your browser allows the PayPal popup."
+    }
   },
   messages: {
-    loading: 'Fetching data …',
-    updating: 'Updating data …',
-    wait_for_payment: 'Waiting for payment …',
-    remove_article_from_cart: 'Do you really want to remove this item?',
-    order_check_later: 'You will be able to review your order at the end.',
-    email_equal_error: 'Email addresses do not match.',
-    phone_equal_error: 'Phone numbers do not match.',
-  },
-};
+    loading: "Fetching data …",
+    updating: "Updating data …",
+    wait_for_payment: "Waiting for payment …",
+    remove_article_from_cart: "Do you really want to remove this item?",
+    order_check_later: "You will be able to review your order at the end.",
+    email_equal_error: "Email addresses do not match.",
+    phone_equal_error: "Phone numbers do not match."
+  }
+}
diff --git a/src/translations/fr.js b/src/translations/fr.js
index 056cf6c..12929b1 100644
--- a/src/translations/fr.js
+++ b/src/translations/fr.js
@@ -1,70 +1,71 @@
 export default {
   actions: {
-    add: 'Ajouter',
-    cancel: 'Annuler',
-    delete: 'Supprimer',
+    add: "Ajouter",
+    cancel: "Annuler",
+    delete: "Supprimer"
   },
   viur: {
     shop: {
-      'check_order': 'Vérifier et envoyer',
-      'order_pay': 'Valider',
-      'order_number': 'N° de commande',
-      'order_thanks': 'Merci pour votre commande et l’intérêt porté à notre société.',
-      'order_message': 'Nous avons bien reçu votre commande et nous allons la traiter dans les plus brefs délais.<br /> Vous recevrez une confirmation par e-mail dans quelques minutes',
-      'order_paid': 'Nous avons bien reçu votre paiement',
-      'order_ready_to_ship': 'Votre commande est prête à être expédiée',
-      'cart_empty': 'Votre panier est vide.',
-      'order_summary': 'Envoyer la commande',
-      'deliverytime': 'Délai de livraison',
-      'day': 'jour | jours',
-      'availability': 'Disponibilité',
-      'quantity': 'Quantité',
-      'unit_price': 'Prix par pièce',
-      'total_price': 'Montant total',
-      'article_number': 'Numéro d\'article',
-      'payment': 'Paiement',
-      'pay': 'Payer',
-      'next': 'continuer',
-      'edit': 'Modifier',
-      'add_discount': 'Valider',
-      'add_discount_placeholder': 'Votre code promo',
-      'use_shipping_as_billing_address': 'Livraison à l\'adresse de facturation',
-      'no_valid_shipping_found': 'Aucun mode d\'expédition correspondant trouvé.',
-      'error_message': 'Une erreur s\'est produite.',
-      'free_shipping': 'Livraison gratuite',
-      'proceed-checkout': 'Acheter cet article',
-      'summary_headline': 'Résumé',
-      'summary_subtotal': 'Sous-total',
-      'summary_shipping_total': 'Emballage et envoi',
-      'summary_delivery_time': 'Délai de livraison estimé',
-      'summary_discount': 'Vous économisez sur votre achat',
-      'summary_checkout': 'Acheter cet article',
-      'summary_total': 'Montant total',
-      'summary_vat': 'TVA incluse ({percentage})',
-      'discount_not_found': 'Ce code promo n’existe pas.',
-      'discount_not_active': 'Ce code promo n’est pas actif.',
-      'discount_not_available': 'Ce code promo n’est pas valable pour ce pays.',
-      'discount_already_used': 'Ce code promo a déjà été utilisé.',
-      'discount_invalid_period': 'La période de ce code promo n’a encore débuté ou est déjà expirée.',
-      'discount_minimum_not_reached': 'Le montant minimum de commande de {{minimum_order_value}} € n’a pas été atteint.',
-      'discount_no_sale_article': 'Bon d’achat non cumulable avec d’autres promotions en cours.',
-      'discount_scope_not_satisfied': 'Le code promo n’est pas applicable pour ce panier / cet ou ces article(s).',
-      'order_step_cart': 'Panier',
-      'order_step_data': 'Données personnelles',
-      'order_step_shipping': 'Mode de livraison',
-      'order_step_payment': 'Mode de paiement',
-      'order_step_verify': 'Vérifier la commande',
-      'order_step_complete': 'Valider la commande',
-      'paypal_client_popup_info':"Assurez-vous que votre navigateur autorise la fenêtre contextuelle PayPal."
-    },
+      check_order: "Vérifier et envoyer",
+      order_pay: "Valider",
+      order_number: "N° de commande",
+      order_thanks: "Merci pour votre commande et l’intérêt porté à notre société.",
+      order_message:
+        "Nous avons bien reçu votre commande et nous allons la traiter dans les plus brefs délais.<br /> Vous recevrez une confirmation par e-mail dans quelques minutes",
+      order_paid: "Nous avons bien reçu votre paiement",
+      order_ready_to_ship: "Votre commande est prête à être expédiée",
+      cart_empty: "Votre panier est vide.",
+      order_summary: "Envoyer la commande",
+      deliverytime: "Délai de livraison",
+      day: "jour | jours",
+      availability: "Disponibilité",
+      quantity: "Quantité",
+      unit_price: "Prix par pièce",
+      total_price: "Montant total",
+      article_number: "Numéro d'article",
+      payment: "Paiement",
+      pay: "Payer",
+      next: "continuer",
+      edit: "Modifier",
+      add_discount: "Valider",
+      add_discount_placeholder: "Votre code promo",
+      use_shipping_as_billing_address: "Livraison à l'adresse de facturation",
+      no_valid_shipping_found: "Aucun mode d'expédition correspondant trouvé.",
+      error_message: "Une erreur s'est produite.",
+      free_shipping: "Livraison gratuite",
+      "proceed-checkout": "Acheter cet article",
+      summary_headline: "Résumé",
+      summary_subtotal: "Sous-total",
+      summary_shipping_total: "Emballage et envoi",
+      summary_delivery_time: "Délai de livraison estimé",
+      summary_discount: "Vous économisez sur votre achat",
+      summary_checkout: "Acheter cet article",
+      summary_total: "Montant total",
+      summary_vat: "TVA incluse ({percentage})",
+      discount_not_found: "Ce code promo n’existe pas.",
+      discount_not_active: "Ce code promo n’est pas actif.",
+      discount_not_available: "Ce code promo n’est pas valable pour ce pays.",
+      discount_already_used: "Ce code promo a déjà été utilisé.",
+      discount_invalid_period: "La période de ce code promo n’a encore débuté ou est déjà expirée.",
+      discount_minimum_not_reached: "Le montant minimum de commande de {{minimum_order_value}} € n’a pas été atteint.",
+      discount_no_sale_article: "Bon d’achat non cumulable avec d’autres promotions en cours.",
+      discount_scope_not_satisfied: "Le code promo n’est pas applicable pour ce panier / cet ou ces article(s).",
+      order_step_cart: "Panier",
+      order_step_data: "Données personnelles",
+      order_step_shipping: "Mode de livraison",
+      order_step_payment: "Mode de paiement",
+      order_step_verify: "Vérifier la commande",
+      order_step_complete: "Valider la commande",
+      paypal_client_popup_info: "Assurez-vous que votre navigateur autorise la fenêtre contextuelle PayPal."
+    }
   },
   messages: {
-    loading: 'Données en cours de consultation …',
-    updating: 'Données en cours de mise à jour …',
-    wait_for_payment: 'Attente de paiement …',
-    remove_article_from_cart: 'Désirez-vous vraiment supprimer cet article du panier?',
-    order_check_later: 'Vous pourrez revérifier vos données avant de valider votre commande.',
-    email_equal_error: 'Les adresses e-mail ne correspondent pas.',
-    phone_equal_error: 'Les numéros de téléphone ne correspondent pas.',
-  },
-};
+    loading: "Données en cours de consultation …",
+    updating: "Données en cours de mise à jour …",
+    wait_for_payment: "Attente de paiement …",
+    remove_article_from_cart: "Désirez-vous vraiment supprimer cet article du panier?",
+    order_check_later: "Vous pourrez revérifier vos données avant de valider votre commande.",
+    email_equal_error: "Les adresses e-mail ne correspondent pas.",
+    phone_equal_error: "Les numéros de téléphone ne correspondent pas."
+  }
+}
diff --git a/src/utils.js b/src/utils.js
index c7dd780..6dfb19a 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,60 +1,53 @@
-import {Request} from '@viur/vue-utils'
-import {useTranslations} from "@viur/vue-utils/utils/translations"
-import { de_translations, en_translations } from "@viur/vue-utils";
+import { Request } from "@viur/vue-utils"
+import { useTranslations } from "@viur/vue-utils/utils/translations"
+import { de_translations, en_translations } from "@viur/vue-utils"
 import en from "./translations/en"
 import de from "./translations/de"
 import fr from "./translations/fr"
 
 export function uuid() {
   return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, (c) =>
-    (
-      +c ^
-      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))
-    ).toString(16),
-  );
+    (+c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))).toString(16)
+  )
 }
 
 export function struct2dict(structure) {
   if (!Array.isArray(structure)) {
-    return structure;
+    return structure
   }
 
-  let result = {};
-  structure.forEach((bone) => (result[bone[0]] = bone[1]));
+  let result = {}
+  structure.forEach((bone) => (result[bone[0]] = bone[1]))
 
-  return result;
+  return result
 }
 
-export function getTranslations(languages="de", pattern=null){
-  if (!Array.isArray(languages)){
+export function getTranslations(languages = "de", pattern = null) {
+  if (!Array.isArray(languages)) {
     languages = [languages]
   }
 
-  const {fetchTranslations, updateLocaleMessages} = useTranslations()
-  let default_messages={
-    "de":{ ...de_translations, ...de },
-    "en":{ ...en_translations, ...en },
-    "fr":{ ...fr },
-
+  const { fetchTranslations, updateLocaleMessages } = useTranslations()
+  let default_messages = {
+    de: { ...de_translations, ...de },
+    en: { ...en_translations, ...en },
+    fr: { ...fr }
   }
 
-  for(const loc of languages){
-    if (default_messages?.[loc]){
+  for (const loc of languages) {
+    if (default_messages?.[loc]) {
       updateLocaleMessages(loc, default_messages[loc])
     }
   }
-  return fetchTranslations(languages,pattern)
+  return fetchTranslations(languages, pattern)
 }
 
 export function getImage(image) {
-  if (image !== undefined) return Request.downloadUrlFor(image);
+  if (image !== undefined) return Request.downloadUrlFor(image)
 
-  return 'PLACEHOLDER';
+  return "PLACEHOLDER"
 }
 
 export function removeUndefinedValues(obj) {
-  return Object.fromEntries(
-      Object.entries(obj)
-          .filter(([key, value]) => value !== undefined && value !== null),
-  );
-}
\ No newline at end of file
+  return Object.fromEntries(Object.entries(obj).filter(([key, value]) => value !== undefined && value !== null))
+}
diff --git a/vite.config.js b/vite.config.js
index 784b5b3..45be5a1 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,21 +1,21 @@
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
+import { defineConfig } from "vite"
+import vue from "@vitejs/plugin-vue"
 
 export default defineConfig({
   plugins: [
     vue({
       template: {
         compilerOptions: {
-          isCustomElement: (tag) => tag.startsWith("sl-"),
-        },
-      },
-    }),
+          isCustomElement: (tag) => tag.startsWith("sl-")
+        }
+      }
+    })
   ],
   build: {
     lib: {
       entry: "./src/main.js", // Adjust the entry point as needed
       name: "ViurShopComponents",
-      fileName: (format) => `viur-shop-components.${format}.js`,
+      fileName: (format) => `viur-shop-components.${format}.js`
     },
     cssCodeSplit: false,
     rollupOptions: {
@@ -28,11 +28,11 @@ export default defineConfig({
         "vue-router",
         "@ckeditor/ckeditor5-vue",
         "@ckeditor/ckeditor5-build-classic",
-        "@viur/ckeditor5-build-classic",
+        "@viur/ckeditor5-build-classic"
       ],
       output: {
         assetFileNames: (assetInfo) => {
-          return assetInfo.name;
+          return assetInfo.name
         },
         globals: {
           vue: "Vue",
@@ -43,9 +43,9 @@ export default defineConfig({
           "@ckeditor/ckeditor5-vue": "CKEditor5Vue",
           "@ckeditor/ckeditor5-build-classic": "ClassicEditor",
           "@viur/ckeditor5-build-classic": "ViurCkeditor",
-          "@viur/vue-utils": "ViurVueUtils",
-        },
-      },
-    },
-  },
-});
+          "@viur/vue-utils": "ViurVueUtils"
+        }
+      }
+    }
+  }
+})