@viur/shop-components 0.1.10 → 0.1.12

package/README.md

@@ -1,5 +1,6 @@
 <div align="center">
-    <h1>ViUR Shop Components (WIP)</h1>
+    <img src="https://github.com/viur-framework/viur-artwork/raw/main/icons/icon-shop-components.svg" height="196" alt="A hexagonal logo of Shop Components" title="Shop Components logo"/>
+    <h1>ViUR Shop Components</h1>
     <a href="https://www.npmjs.com/package/@viur/shop-components">
         <img alt="Badge showing current NPM version" title="PyPI" src="https://img.shields.io/npm/v/@viur/shop-components">
     </a>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viur/shop-components",
-  "version": "0.1.10",
+  "version": "0.1.12",
   "description": "Frontend Vue components for the shop module of ViUR",
   "repository": {
     "type": "git",
@@ -23,23 +23,20 @@
     "watch": "vite build --watch"
   },
   "dependencies": {
-    "@tanstack/vue-table": "^8.20.5",
     "@viur/ignite": "^5.1.2",
-    "@viur/shoelace": "^1.0.8-v2.19.0",
-    "@viur/vue-utils": "^1.8.2",
-    "@vueuse/core": "^11.1.0",
-    "pinia": "^2.2.4",
-    "primevue": "^4.1.1",
-    "vue": "^3.5.12",
-    "vue-i18n": "^10.0.4",
-    "vue-router": "^4.4.5"
+    "@viur/shoelace": "^1.0.10-v2.20.0",
+    "@viur/vue-utils": "^2.2.5",
+    "@vueuse/core": "^13.0.0",
+    "pinia": "^3.0.1",
+    "vue": "^3.5.13",
+    "vue-i18n": "^11.1.2",
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@faker-js/faker": "^9.0.3",
-    "@vitejs/plugin-vue": "^5.1.4",
-    "postcss-custom-media": "^11.0.3",
-    "postcss-nesting": "^13.0.0",
-    "prettier": "^3.3.3",
-    "vite": "^5.4.9"
+    "@vitejs/plugin-vue": "^5.2.3",
+    "postcss-custom-media": "^11.0.5",
+    "postcss-nesting": "^13.0.1",
+    "prettier": "^3.5.3",
+    "vite": "^6.2.3"
   }
 }

package/src/Shop.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="bind viur-shop-wrap" v-bind="$attrs" v-if="shopStore.state.cartReady && shopStore.state.orderReady">
+    <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') }"
         >
@@ -61,13 +61,14 @@
 
 
 <script setup>
-import { onBeforeMount, watch } from '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'
 
 
 const shopStore = useViurShopStore()
@@ -87,13 +88,30 @@ const props = defineProps({
     modulename:{
       default:'shop'
     },
-    debug:false,
-    showCartNodes:false,
-    topActions:false
+    debug:{
+      default:false
+    },
+    showCartNodes:{
+      default:false
+    },
+    topActions:{
+      default:false
+    },
+    language:{
+      default:"de"
+    }
+})
+
+const state = reactive({
+  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

package/src/components/AddressFormLayout.vue

@@ -27,6 +27,11 @@
           label="placeholder">
     </slot>
 
+    <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'])"
@@ -94,6 +99,10 @@ const formUpdate = inject("formUpdate");
   grid-column: 4 / span 1;
 }
 
+:deep(.wrapper-bone-address_addition){
+  grid-column: 1 / span 4;
+}
+
 :deep(.wrapper-bone-zip_code){
   grid-column: 1 / span 2;
 }

package/src/components/CartItem.vue

@@ -15,7 +15,10 @@
     <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" :href="item.article.dest.view_url" v-if="item.article?.dest?.view_url">
+    <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)"
@@ -52,10 +55,10 @@
             </sl-bar>
           </template>
         </dialog-Button>
-        <sl-button slot="prefix" v-else @click="changeAmount(item.quantity-=1)">
+        <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" @click="changeAmount(item.quantity+=1)">
+        <sl-button slot="suffix" :disabled="!edit" @click="changeAmount(item.quantity+=1)">
           <sl-icon name="plus-lg"></sl-icon>
         </sl-button>
       </sl-input>

package/src/components/CartItemSmall.vue

@@ -37,10 +37,10 @@
           </sl-bar>
         </template>
       </dialog-Button>
-      <sl-button slot="prefix" v-else @click="changeAmount(item.quantity-=1)">
+      <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" @click="changeAmount(item.quantity+=1)">
+      <sl-button slot="suffix" :disabled="!edit" @click="changeAmount(item.quantity+=1)">
         <sl-icon name="plus-lg"></sl-icon>
       </sl-button>
     </sl-input>

package/src/main.js

@@ -1,8 +1,9 @@
 // imports
 import { createPinia } from "pinia";
 import { createI18n } from "vue-i18n";
-import { getTranslations } from "./utils";
 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"
@@ -11,7 +12,10 @@ export { default as ViurShop } from "./Shop.vue";
 
 const ViurShopComponents = {
   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'
@@ -21,12 +25,17 @@ const ViurShopComponents = {
     app.use(createPinia());
 
     let messages = {}
+    const i18n = createI18n({
+      locale: defaultLocale,
+      fallbackLocale: fallback,
+      messages: messages,
+    })
+    const {fetchTranslations, updateLocaleMessages} = useTranslations(i18n.global)
     // fetch translations from server
-    let data = await getTranslations(locale,options?.pattern)
+    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'){
@@ -36,15 +45,10 @@ const ViurShopComponents = {
       }else{
         messages[loc] = {...locAdditionals, ...data[loc]}
       }
+      updateLocaleMessages(loc, messages[loc])
     }
-
-    // server_translations will be overwritten by utils. Both are overwritten by local shop translations
     app.use(
-      createI18n({
-        locale: defaultLocale,
-        fallbackLocale: fallback,
-        messages: messages,
-      })
+      i18n
     );
   },
 };

package/src/translations/de.js

@@ -60,5 +60,7 @@ export default {
         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.",
-    }
+    },
+    "skeleton.address.address_type.billing":"Rechnungsadresse",
+    "skeleton.address.address_type.shipping":"Lieferadresse",
 }

package/src/utils.js

@@ -1,4 +1,9 @@
 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) =>
@@ -20,29 +25,25 @@ export function struct2dict(structure) {
   return result;
 }
 
-export async function getTranslations(languages=["de"],pattern=null){
-  // fetch translations from server
-  let retVal = languages.reduce((acc,item)=>{acc[item]={}; return acc;},{})
-  try {
-    let dataObj = {languages:languages}
-    if(pattern){
-      dataObj['pattern'] = pattern
-    }
+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 },
+
+  }
 
-    let translations = await Request.get("/json/_translation/get_public",{dataObj:dataObj})
-    const data = await translations.json()
-    for (let country in data) {
-      data[country] = Object.fromEntries(
-        Object.entries(data[country]).map(
-            ([key, value], idx) => [key, value.replaceAll('{{', '{').replaceAll('}}', '}').replace(/([@$|])/g, '{\'$1\'}')],
-        ),
-      )
+  for(const loc of languages){
+    if (default_messages?.[loc]){
+      updateLocaleMessages(loc, default_messages[loc])
     }
-    retVal = data
-  }catch(error){
-    console.log("No Translation from server", error)
   }
-  return retVal
+  return fetchTranslations(languages,pattern)
 }
 
 export function getImage(image) {