aa1

src/components/CProductCard/CProductCard.scss

@@ -10,3 +10,16 @@
   place-content: center;
 }
 
+.prod_price{
+  font-size: 1.25rem;
+}
+
+.prod_disp{
+  font-size: 1.2rem;
+}
+
+.prod_qtywarn{
+  padding-left: 10px;
+  font-size: 1rem;
+  color: grey;
+}

src/components/CProductCard/CProductCard.ts

@@ -115,11 +115,15 @@ export default defineComponent({
     }
 
     function getSingleStorehouse() {
-      const mystore = myproduct.value.storehouses[0]
+      try {
-      if (mystore)
+        const mystore = myproduct.value.storehouses[0]
-        return mystore.name + ' (' + mystore.city + ')'
+        if (mystore)
-      else
+          return mystore.name + ' (' + mystore.city + ')'
+        else
+          return ''
+      } catch (e) {
         return ''
+      }
     }
 
     function getStorehouses() {
@@ -145,6 +149,23 @@ export default defineComponent({
       return !myorder.value.idStorehouse
     }
 
+    function updateQtyAvailable() {
+      myproduct.value.quantityAvailable = myproduct.value.stockQty - myorder.value.quantity
+    }
+
+    function getQtyAvailable() {
+      updateQtyAvailable()
+      let qty = myproduct.value.quantityAvailable
+      return qty
+    }
+
+    function getQtyWarn() {
+      if (myorder.value.quantity > 0){
+        return t('ecomm.di_cui_x_in_carrello', {qty: myorder.value.quantity})
+      }
+      return ''
+    }
+
     watch(() => props.code, (newval, oldval) => {
       console.log('change code')
       load()
@@ -179,7 +200,7 @@ export default defineComponent({
     }
 
     function getmycardcl() {
-      return (props.complete) ? 'my-card-big' : 'my-card'
+      return (props.complete) ? 'my-card-big' : 'my-card-prod'
     }
 
     function getclimg() {
@@ -190,6 +211,10 @@ export default defineComponent({
       return myorder.value ? myorder.value.quantity > 0 : true
     }
 
+    function enableAddQty() {
+      return getQtyAvailable() > 0
+    }
+
     onMounted(load)
 
     return {
@@ -209,6 +234,9 @@ export default defineComponent({
       t,
       storeSelected,
       enableSubQty,
+      enableAddQty,
+      getQtyAvailable,
+      getQtyWarn,
     }
   }
 })

src/components/CProductCard/CProductCard.vue

@@ -1,79 +1,100 @@
 <template>
-  <q-card :class="getmycardcl()" v-if="!!myproduct">
+  <div class="q-pa-md row items-start q-gutter-md">
-    <q-img
+    <q-card :class="getmycardcl()" v-if="!!myproduct" bordered>
-      :src="`` + myproduct.img"
+      <!--<q-img :src="`` + myproduct.img" :alt="myproduct.name" :class="getclimg()"></q-img>-->
-      :alt="myproduct.name"
+      <img src="https://cdn.quasar.dev/img/parallax2.jpg">
-      :class="getclimg()"
-    ></q-img>
 
-    <q-card-section>
+      <q-list>
-      <q-btn
+        <q-item>
-        v-if="!complete"
+          <q-btn v-if="!complete" fab color="primary" icon="fas fa-info" class="absolute"
-        fab
+            style="top: 0; right: 12px; transform: translateY(-50%)" :to="`/product/` + myproduct.code" />
-        color="primary"
-        icon="fas fa-info"
-        class="absolute"
-        style="top: 0; right: 12px; transform: translateY(-50%)"
-        :to="`/product/` + myproduct.code"
-      />
 
-      <div class="row items-center centeritems">
+          <div class="row items-center centeritems">
-        <div class="text-h7 boldhigh">
+            <div class="text-h7 boldhigh">
-          {{ myproduct.name }}
+              {{ myproduct.name }}
-        </div>
+            </div>
-      </div>
+          </div>
-      <div v-if="complete" class="row items-center">
+        </q-item>
-        <div class="text-title text-grey-9">
+        <q-item>
-          <span class="text-grey-7" v-html="myproduct.description"></span>
+          <div v-if="complete" class="row items-center">
-        </div>
+            <div class="text-title text-grey-9">
-      </div>
+              <span class="text-grey-7" v-html="myproduct.description"></span>
+            </div>
+          </div>
+        </q-item>
+        <q-item clickable>
+          <q-item-section avatar>
+            <q-icon color="moneygreen" name="fas fa-euro-sign" />
+          </q-item-section>
+
+          <q-item-section>
+            <q-item-label>
+              {{ t('products.price') }}
+            </q-item-label>
+            <q-item-label>
+              <span class="prod_price" v-if="!!myproduct.price">{{ myproduct.price ? myproduct.price.toFixed(2) : 0
+              }}</span>
+              <span v-if="!!myproduct.after_price">{{
+                myproduct.after_price
+              }}</span>
+
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
       <div>
-        <div v-if="complete && myproduct.producer.city">
+        <div v-if="complete && myproduct.producer && myproduct.producer.city">
           <div class="text-grey text-title row items-center q-mt-sm">
             <q-icon name="map" class="q-mr-xs" />
             {{ t('products.origine') }}:
             <span class="text-blue q-ml-xs text-h8">
               {{ myproduct.producer.city }} ({{
                 myproduct.producer.region
-              }})</span
+              }})</span>
-            >
           </div>
         </div>
-        <div
+        <div v-if="complete && myproduct.producer && myproduct.producer.name"
-          v-if="complete && myproduct.producer.name"
+          class="text-grey text-title row items-center">
-          class="text-grey text-title row items-center"
-        >
           <q-icon name="place" class="q-mr-xs" />
           {{ t('products.producer') }}:
           <span class="text-black q-ml-xs text-h8">
-            {{ myproduct.producer.name }}</span
+            {{ myproduct.producer.name }}</span>
-          >
         </div>
-        <div
+        <div v-if="complete && myproduct.weight" class="text-grey text-title row items-center">
-          v-if="complete && myproduct.weight"
-          class="text-grey text-title row items-center"
-        >
           <q-icon name="fas fa-balance-scale" class="q-mr-xs" />
           {{ t('products.weight') }}:
           <span class="text-black q-ml-xs text-h8">
             {{ myproduct.weight }}
-            {{ tools.getUnitsMeasure(myproduct.unit, true) }}</span
+            {{ tools.getUnitsMeasure(myproduct.unit, true) }}</span>
-          >
         </div>
       </div>
 
       <!--<q-rating v-model="myproduct.stars" :max="5" size="32px" readonly/>-->
 
-      <div class="row q-mb-sm no-wrap items-center centeritems">
+      <q-list>
-        <div class="text-price no-wrap">
+        <q-item>
-          <span v-if="!!myproduct.price"
+          <q-item-section avatar>
-            >€ {{ myproduct.price ? myproduct.price.toFixed(2) : 0 }}</span
+            <q-icon color="green" name="fas fa-store" />
-          >
+          </q-item-section>
-          <span v-if="!!myproduct.after_price">{{
+
-            myproduct.after_price
+          <q-item-section>
-          }}</span>
+            <q-item-label>
-        </div>
+              {{ t('ecomm.available') }}
-      </div>
+            </q-item-label>
+            <q-item-label>
+              <span class="prod_disp">
+                {{ getQtyAvailable() }}
+              </span>
+              <span class="prod_qtywarn">
+                {{ getQtyWarn() }}
+              </span>
+            </q-item-label>
+            <q-item-label>
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+
+      </q-list>
       <div class="row q-mb-sm no-wrap items-center centeritems">
         <!--<q-btn
           round
@@ -83,23 +104,12 @@
           @click="decqty()"
         ></q-btn>-->
 
-        <q-btn
+        <q-btn icon="fas fa-cart-arrow-down" :color="enableSubQty() ? 'negative' : 'grey'"
-          icon="fas fa-cart-arrow-down"
+          :disable="checkifCartDisable() || !enableSubQty()" rounded size="md" :label="t('products.subcart', { qta: 1 })"
-          :color="enableSubQty() ? 'negative' : 'grey'"
+          @click="addtoCart(false)">
-          :disable="checkifCartDisable() || !enableSubQty()"
-          rounded
-          size="md"
-          :label="t('products.subcart', { qta: 1 })"
-          @click="addtoCart(false)"
-        >
         </q-btn>
 
-        <q-field
+        <q-field outlined dense style="width: 40px; height: 30px" class="q-mx-xs">
-          outlined
-          dense
-          style="width: 40px; height: 30px"
-          class="q-mx-xs"
-        >
           <template v-slot:control>
             <div class="self-center no-outline" tabindex="0">
               {{ myorder.quantity }}
@@ -108,15 +118,8 @@
         </q-field>
 
         <!--<q-btn round size="xs" text-color="grey" icon="fas fa-plus" @click="addqty()"></q-btn>-->
-        <q-btn
+        <q-btn icon-right="fas fa-cart-plus" color="positive" :disable="checkifCartDisable() || !enableAddQty()" rounded
-          icon-right="fas fa-cart-plus"
+          size="md" :label="t('products.addcart', { qta: 1 })" @click="addtoCart(true)">
-          color="positive"
-          :disable="checkifCartDisable()"
-          rounded
-          size="md"
-          :label="t('products.addcart', { qta: 1 })"
-          @click="addtoCart(true)"
-        >
         </q-btn>
       </div>
       <div v-if="complete || getnumstore() > 1">
@@ -124,19 +127,10 @@
           <q-icon size="sm" name="fas fa-shipping-fast" class="q-mr-sm" />
           {{ t('products.ritiro_presso') }}:
         </div>
-        <div
+        <div class="text-green-6 text-title row items-center q-my-sm centeritems">
-          class="text-green-6 text-title row items-center q-my-sm centeritems"
-        >
           <div v-if="getnumstore() > 1">
-            <q-select
+            <q-select :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'" outlined v-model="storeSelected"
-              :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
+              :options="getStorehouses()" :label="t('products.magazzino') + `:`" emit-value map-options>
-              outlined
-              v-model="storeSelected"
-              :options="getStorehouses()"
-              :label="t('products.magazzino') + `:`"
-              emit-value
-              map-options
-            >
             </q-select>
           </div>
           <div v-else>
@@ -146,26 +140,17 @@
           </div>
         </div>
       </div>
-    </q-card-section>
 
-    <q-separator />
+      <q-card-actions vertical align="center">
-
+        <q-btn v-if="myorder.quantity > 0" rounded icon="fas fa-shopping-cart" color="primary"
-    <q-card-actions vertical align="center">
+          :label="$t('ecomm.btn_cassa')" class="q-mb-sm" to="/checkout"></q-btn>
-      <q-btn
+        <!--
-        v-if="myorder.quantity > 0"
-        rounded
-        icon="fas fa-shopping-cart"
-        color="green"
-        :label="$t('ecomm.btn_cassa')"
-        class="q-mb-sm"
-        to="/checkout"
-      ></q-btn>
-      <!--
       <q-btn :icon="iconWhishlist(myproduct)" flat color="primary" rounded label="Lista Desideri">
       </q-btn>
       -->
-    </q-card-actions>
+      </q-card-actions>
-  </q-card>
+    </q-card>
+  </div>
 </template>
 
 <script lang="ts" src="./CProductCard.ts">

src/css/app.scss

@@ -361,6 +361,21 @@ h3 {
   }
 }
 
+.my-card-prod {
+  width: 100%;
+  max-width: 300px;
+  padding: 1rem 1rem;
+
+  box-shadow: none;
+
+  @media (max-width: 718px) {
+    // PER VERSIONE MOBILE
+    max-width: 400px;
+    padding: 1rem 1rem;
+
+  }
+}
+
 .text-trans {
   opacity: 0.9;
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";

src/layouts/menuone/menuOne.scss

@@ -109,7 +109,7 @@
   min-width: 30px;
 }
 
-.q-item__section--side{
+.OLD_q-item__section--side{
   padding-right: 8px;
 }
 

src/model/Products.ts

@@ -14,8 +14,8 @@ export interface IProduct {
   after_price?: string,
   color?: string,
   size?: string,
-  quantityAvailable?: number,
+  quantityAvailable: number,
-  stockQty?: number,
+  stockQty: number,
   canBeShipped?: boolean,
   canBeBuyOnline?: boolean,
   weight?: number,

src/statics/lang/it.js

@@ -1620,6 +1620,8 @@ const msg_it = {
       order: 'Ordine',
       ord_confirmed: 'Ordine Confermato',
       btn_cassa: 'Vai alla Cassa',
+      available: 'Disponibili',
+      di_cui_x_in_carrello: '({qty} nel tuo carrello)',
 
     },
     install: {