From 84e7f6e9f4e31d94c0b27ac396cc1e9c566919db Mon Sep 17 00:00:00 2001
From: Surya Paolo <paolo.arena77@gmail.com>
Date: Sun, 5 May 2024 19:09:08 +0200
Subject: [PATCH] catalogo, avanti, grafica

---
 .../CCatalogoCard/CCatalogoCard.scss          |   86 +-
 src/components/CCatalogoCard/CCatalogoCard.ts |   14 +-
 .../CCatalogoCard/CCatalogoCard.vue           | 1084 +++--------------
 src/router/routesECommerce.ts                 |   10 +
 src/statics/lang/it.js                        |    6 +-
 src/store/Modules/tools.ts                    |   56 +-
 .../ecommerce/catalogoInfo/catalogoInfo.scss  |    5 +
 .../ecommerce/catalogoInfo/catalogoInfo.ts    |   59 +
 .../ecommerce/catalogoInfo/catalogoInfo.vue   |   19 +
 src/views/ecommerce/catalogoInfo/index.ts     |    1 +
 10 files changed, 436 insertions(+), 904 deletions(-)
 create mode 100755 src/views/ecommerce/catalogoInfo/catalogoInfo.scss
 create mode 100755 src/views/ecommerce/catalogoInfo/catalogoInfo.ts
 create mode 100755 src/views/ecommerce/catalogoInfo/catalogoInfo.vue
 create mode 100755 src/views/ecommerce/catalogoInfo/index.ts

diff --git a/src/components/CCatalogoCard/CCatalogoCard.scss b/src/components/CCatalogoCard/CCatalogoCard.scss
index dbca8608..baab8c1b 100755
--- a/src/components/CCatalogoCard/CCatalogoCard.scss
+++ b/src/components/CCatalogoCard/CCatalogoCard.scss
@@ -12,6 +12,7 @@
 
 .prod_price {
   font-size: 1.1rem;
+  font-style: bold;
 
   @media (max-width: 718px) {
     font-size: 1rem;
@@ -19,7 +20,8 @@
 }
 
 .prod_sale_price {
-  font-size: 1.10rem;  
+  font-size: 1.10rem;
+  font-style: bold;
 
   @media (max-width: 718px) {
     font-size: 1.05rem;
@@ -146,6 +148,11 @@
   }
 }
 
+.book-image-fixed{
+  max-width: 300px;
+  max-height: 600px;
+}
+
 .img-pic {
   width: 100%;
   height: 100%;
@@ -165,6 +172,11 @@
   background-color: #f8f8f8;
 }
 
+.book-card {
+  width: 300px;
+  background-color: #f8f8f8;
+}
+
 .book-card-section {
   display: flex;
 }
@@ -174,7 +186,7 @@
 }
 
 .book-block {
-  display: flex;  
+  display: flex;
 }
 
 .book-image q-img {
@@ -182,7 +194,7 @@
 }
 
 .book-info {
-  flex: 2;
+
   padding: 20px;
 }
 
@@ -193,19 +205,18 @@
   line-height: 20px;
   font-weight: bold;
   color: #333;
-  display: flex;
+  display: block;
   text-align: center;
 }
 
 .book-author {
-  color: #263238;
-  display: flex;
-  font-family: Poppins, sans-serif;
-  font-size: 1em;
-  font-weight: 400;
-  line-height: 18px;
-  text-align: center;
-  font-style: italic;
+  font-size: 1.1em; /* Dimensione del font leggermente più grande per enfatizzare l'importanza del nome dell'autore */
+  color: darkblue; /* Colore scuro per garantire una buona leggibilità */
+  text-transform: capitalize; /* Capitalizzazione delle iniziali per ogni parola del nome */
+  background-color: #f9f9f9; /* Sfondo leggermente diverso per evidenziare il nome */
+  border-radius: 2px; /* Bordi arrotondati per un aspetto più soft-edged */
+  display: inline-block; /* Tratta il blocco come elementi inline-block per adattarlo al contenuto */
+  font-style: italic; /* Stile del testo in corsivo per evidenziare l'autore */
 }
 
 .book-description {
@@ -213,14 +224,59 @@
   color: #777;
 }
 
-.block-variazione{
+.block-variazione {
   border: 1px solid gray;
+  // effetto 3d
+  box-shadow: 0 0 5px gray;
   border-radius: 5px;
   padding: 2px;
   margin: 2px;
   cursor: pointer;
 }
 
-.block-variazione-selected{
-  border: 1px solid red !important;
+.block-variazione-selected {
+  border: 2px solid red !important;
+  font-weight: bold;
+}
+
+.book-isbn {
+  font-size: 0.85rem;
+  color: #A0A0A0;
+}
+
+/* Stilizzazione per descrizione breve del libro */
+.book-short-descr {
+  font-size: 1.1em; /* Leggermente più grande per enfatizzare l'importanza */
+  color: #666; /* Colore del testo in tono grigio scuro per un look sobrio */
+  padding: 8px; /* Padding per dare spazio intorno al testo */
+  border-left: 4px solid #007BFF; /* Linea verticale a sinistra come decorazione tradizionale delle citazioni */
+  margin: 10px 0; /* Margine sopra e sotto per distanziare dalla restante contenuto */
+  font-style: italic; /* Stile del font in corsivo per indicare che si tratta di un estratto o citazione */
+  background-color: #f4f4f4; /* Sfondo leggermente diverso per evidenziare la sezione */
+  display: block; /* Assicura che l'elemento sia trattato come blocco, occupando l'intera larghezza */
+  text-align: center; /* Giustifica il testo per una lettura più fluida */
+}
+
+/* Opzionale: Transizione per l'hover su descrizione */
+.book-short-descr:hover {
+  background-color: #e9e9e9; /* Cambio di sfondo al passaggio del mouse per un effetto interattivo */
+}
+
+.ingrandisci:hover {
+  // fai lo scale 
+  transform: scale(1.1);
+}
+
+.title-descr{
+  font-weight: bold;
+  font-size: 1.1rem;
+  text-align: center;
+}
+
+.scheda-book {
+  text-align: center;
+  margin-left: 20px;
+  @media (max-width: 718px) {
+    margin-left: 5px;
+  } 
 }
\ No newline at end of file
diff --git a/src/components/CCatalogoCard/CCatalogoCard.ts b/src/components/CCatalogoCard/CCatalogoCard.ts
index f1eea93e..820c9c83 100755
--- a/src/components/CCatalogoCard/CCatalogoCard.ts
+++ b/src/components/CCatalogoCard/CCatalogoCard.ts
@@ -238,6 +238,10 @@ export default defineComponent({
       return isOrdineChiuso()
     }
 
+    function checkifCartEnable() {
+      return false
+    }
+
     function getQtyWarn() {
       if (myorder.quantity > 0) {
         return t('ecomm.di_cui_x_in_carrello', { qty: myorder.quantity })
@@ -288,6 +292,10 @@ export default defineComponent({
     function mounted() {
       load()
 
+      if (props.complete && myproduct.value && myproduct.value.arrvariazioni) {
+        indvariazSel.value = 0
+      }
+
       // Start the timer when the component is mounted
       startTimer();
     }
@@ -426,7 +434,10 @@ export default defineComponent({
     }
 
     function setvariazioneSelected(indvariaz: number) {
-      indvariazSel.value = indvariaz
+      if (indvariazSel.value === indvariaz)
+        indvariazSel.value = -1
+      else
+        indvariazSel.value = indvariaz
     }
 
     onMounted(mounted)
@@ -481,6 +492,7 @@ export default defineComponent({
       apriSchedaPDF,
       setvariazioneSelected,
       indvariazSel,
+      checkifCartEnable,
     }
   }
 })
diff --git a/src/components/CCatalogoCard/CCatalogoCard.vue b/src/components/CCatalogoCard/CCatalogoCard.vue
index e70aaa9d..e345cf81 100755
--- a/src/components/CCatalogoCard/CCatalogoCard.vue
+++ b/src/components/CCatalogoCard/CCatalogoCard.vue
@@ -3,10 +3,22 @@
     <q-spinner v-if="!endload" color="primary" size="3em" :thickness="2" />
     <div
       v-if="!!myproduct && !!myproduct.productInfo"
-      class="book-card book-details"
+      :class="{
+        'my-card-big': complete,
+        'book-card book-details': !complete,
+      }"
     >
+      <q-toggle
+        v-if="tools.isManager()"
+        v-model="editOn"
+        class="absolute-top-right"
+        color="green"
+        icon="fas fa-pencil-alt"
+        dense
+      >
+      </q-toggle>
       <q-card-section>
-        <div class="flex">
+        <div class="flex" style="place-content: center">
           <q-img
             :src="
               myproduct.productInfo.img
@@ -14,14 +26,28 @@
                 : myproduct.productInfo.image_link
             "
             :alt="myproduct.productInfo.name"
-            class="cursor-pointer"
+            :class="{
+              'book-image-fixed': complete,
+              'cursor-pointer': !complete,
+            }"
             @click="
               complete
                 ? toggleFullScreen
-                : naviga(`/product/` + myproduct._id + '/' + cosa)
+                : naviga(`/catalogo/` + myproduct._id + '/' + cosa)
             "
-          ></q-img>
-          <div>
+          >
+          </q-img>
+          <q-btn
+            color="blue"
+            round
+            icon="search"
+            class="absolute semi-transparent ingrandisci"
+            size="md"
+            @click="toggleFullScreen"
+            style="left: 55%; top: 5px; transform: translateX(-50%)"
+          />
+
+          <div class="scheda-book">
             <q-card-title class="book-title"
               >{{ myproduct.productInfo.name }}
             </q-card-title>
@@ -36,13 +62,33 @@
                 {{ author.name }} {{ author.surname }}
               </span>
             </q-card-subtitle>
-            <q-card-main class="book-description">{{
-              myproduct.productInfo.short_descr
-            }}</q-card-main>
+            <q-card-main
+              v-if="myproduct.productInfo.short_descr"
+              class="book-short-descr"
+              >{{
+                tools.firstchars(myproduct.productInfo.short_descr, 200, true)
+              }}</q-card-main
+            >
+
+            <div v-if="myproduct.isbn" class="book-isbn">
+              ISBN: {{ myproduct.isbn }}
+            </div>
+            <div v-if="myproduct.productInfo.numpages" class="book-pages">
+              Pagine: {{ myproduct.productInfo.numpages }}
+            </div>
+            <div
+              v-if="myproduct.productInfo.date_publishing"
+              class="book-data-pub"
+            >
+              Data Pubblicazione:
+              {{ tools.getstrDate(myproduct.productInfo.date_publishing) }}
+            </div>
+
+            <q-separator class="q-my-sm"></q-separator>
 
             <div
               :class="
-                `row items-center q-mt-sm q-pa-nome block-variazione ` +
+                `row items-center q-pa-nome block-variazione ` +
                 (indvariazSel == index ? 'block-variazione-selected' : '')
               "
               v-for="(variazione, index) of myproduct.arrvariazioni"
@@ -111,281 +157,157 @@
                 </q-item-label>
               </q-item-section>
               <q-item-section side v-if="!!variazione.quantita">
-                <q-icon v-if="variazione.quantita > 10" color="green" name="fas fa-check" />
-                <q-icon v-else-if="variazione.quantita > 1 && variazione.quantita <= 10" color="orange" name="fas fa-check" />
-                <q-icon v-else-if="variazione.quantita > 0 && variazione.quantita <= 2" color="red" name="fas fa-check" />
-                <q-icon v-else-if="variazione.quantita === 0" color="gray" name="fas fa-times" />
-
-              </q-item-section>
-            </div>
-            <div v-if="indvariazSel >= 0" 
-              class="row justify-center q-mt-sm">
-              <q-btn
-                v-if="
-                  myproduct.arrvariazioni[indvariazSel].addtocart_link && true
-                "
-                :href="myproduct.arrvariazioni[indvariazSel].addtocart_link"
-                target="_blank"
-                color="primary"
-                icon="fas fa-cart-plus"
-                no-caps
-                :label="$t('products.addtocart_ext')"
-              ></q-btn>
-              <q-btn
-                v-if="myproduct.productInfo.checkout_link && true"
-                :href="myproduct.productInfo.checkout_link"
-                target="_blank"
-                color="white"
-                icon="fas fa-shopping-cart"
-                outline
-                text-color="black"
-                no-caps
-                :label="$t('ecomm.carrello')"
-              ></q-btn>
-            </div>
-          </div>
-        </div>
-      </q-card-section>
-    </div>
-    <div
-      v-if="false && !!myproduct && !!myproduct.productInfo"
-      class="book-details"
-    >
-      <q-card class="book-card">
-        <q-card-section class="book-card-section">
-          <div class="book-image">
-            <q-img
-              :src="
-                myproduct.productInfo.img
-                  ? `` + myproduct.productInfo.img
-                  : myproduct.productInfo.image_link
-              "
-              :alt="myproduct.productInfo.name"
-              class="cursor-pointer"
-              @click="
-                complete
-                  ? toggleFullScreen
-                  : naviga(`/product/` + myproduct._id + '/' + cosa)
-              "
-            ></q-img>
-          </div>
-          <div class="book-info">
-            <q-card-title class="book-title">{{
-              myproduct.productInfo.name
-            }}</q-card-title>
-            <q-card-subtitle class="book-author">{{
-              myproduct.productInfo.author
-            }}</q-card-subtitle>
-            <q-card-main class="book-description">
-              <p>{{ myproduct.productInfo.short_descr }}</p>
-              <p>ISBN: {{ myproduct.productInfo.code }}</p>
-              <p>Pages: {{ myproduct.productInfo.numpages }}</p>
-              <p>Published Date: {{ myproduct.productInfo.date_publishing }}</p>
-            </q-card-main>
-          </div>
-        </q-card-section>
-      </q-card>
-    </div>
-
-    <q-card
-      :class="{
-        'my-card-big': complete,
-        'my-card-prod': !complete,
-        'my-card-selected':
-          myorder && myorder.quantity + myorder.quantitypreordered > 0,
-      }"
-      v-if="false && !!myproduct && endload && !!myproduct.productInfo"
-      bordered
-    >
-      <q-toggle
-        v-if="tools.isManager()"
-        v-model="editOn"
-        class="absolute-top-right"
-        color="green"
-        icon="fas fa-pencil-alt"
-        dense
-      >
-      </q-toggle>
-      <div v-if="!myproduct.active">
-        <span class="text-bold text-white bg-red text-h6">{{
-          t('ecomm.not_active')
-        }}</span>
-      </div>
-      <q-card-section horizontal class="image-section">
-        <div class="image-container">
-          <q-img
-            :src="
-              myproduct.productInfo.img
-                ? `` + myproduct.productInfo.img
-                : myproduct.productInfo.image_link
-            "
-            :alt="myproduct.productInfo.name"
-            class="cursor-pointer img-pic"
-            @click="
-              complete
-                ? toggleFullScreen
-                : naviga(`/product/` + myproduct._id + '/' + cosa)
-            "
-          ></q-img>
-          <q-btn
-            color="primary"
-            round
-            icon="fas fa-eye"
-            class="absolute semi-transparent"
-            size="md"
-            @click="toggleFullScreen"
-            style="bottom: -10px; right: 0px; transform: translateY(-50%)"
-          />
-        </div>
-
-        <q-list>
-          <q-item>
-            <q-item-section avatar>
-              <q-icon
-                color="moneygreen"
-                name="fas fa-euro-sign"
-                class="icone_prod"
-              />
-            </q-item-section>
-          </q-item>
-          <q-item>
-            <q-item-section avatar v-if="myproduct.productInfo.weight">
-              <q-icon name="fas fa-balance-scale" class="icone_prod" />
-            </q-item-section>
-            <q-item-section v-if="myproduct.productInfo.weight">
-              <q-item-label>
-                <span
-                  class="text-black q-ml-xs text-h8"
-                  v-if="myproduct.productInfo.unit"
-                >
-                  {{
-                    tools.getWeightByUnit(
-                      myproduct.productInfo.unit,
-                      true,
-                      myproduct.productInfo.weight
-                    )
-                  }}
-                  {{
-                    tools.getUnitsMeasure(
-                      myproduct.productInfo.unit,
-                      true,
-                      myproduct.productInfo.weight
-                    )
-                  }}</span
-                >
-              </q-item-label>
-            </q-item-section>
-          </q-item>
-          <q-item
-            v-if="
-              (cosa === shared_consts.PROD.TUTTI && !isOrdGas()) ||
-              cosa === shared_consts.PROD.BOTTEGA ||
-              (cosa === shared_consts.PROD.GAS &&
-                products.getQtyAvailable(myproduct) > 0)
-            "
-            :clickable="tools.isManager()"
-            @click="
-              tools.isManager() &&
-              myproduct.QuantitaOrdinateInAttesa &&
-              myproduct.QuantitaOrdinateInAttesa > 0
-                ? visuListDisponibili()
-                : null
-            "
-          >
-            <q-item-section avatar>
-              <q-icon color="green" name="fas fa-store" class="icone_prod" />
-            </q-item-section>
-
-            <q-item-section>
-              <q-item-label class="subtit_prod">
-                {{ t('ecomm.available') }}
-              </q-item-label>
-              <q-item-label>
-                <span v-if="!editOn" class="prod_disp">
-                  {{ products.getQtyAvailable(myproduct) }}
-                </span>
-                <CMyValueDb
-                  v-if="editOn"
-                  :editOn="editOn"
-                  :title="t('products.stockQty')"
-                  table="products"
-                  :id="myproduct._id"
-                  :rec="myproduct"
-                  mykey="stockQty"
-                  debounce="1000"
-                  :save="updateproductmodif()"
-                  :type="costanti.FieldType.number"
-                >
-                </CMyValueDb>
-                <div class="prod_qtywarn">
-                  <div
-                    v-if="
-                      tools.isManager() && !!myproduct.QuantitaOrdinateInAttesa
-                    "
-                  >
-                    {{
-                      t('ecomm.qta_in_attesa', {
-                        qty: myproduct.QuantitaOrdinateInAttesa,
-                      })
-                    }}
-                  </div>
-                </div>
-              </q-item-label>
-            </q-item-section>
-            <q-item-section
-              v-if="
-                tools.isManager() &&
-                products.getQtyBloccataAvailable(myproduct) > 0
-              "
-            >
-              <q-item-section avatar>
                 <q-icon
-                  name="fas fa-store"
-                  style="padding-right: 16px !important"
+                  v-if="variazione.quantita > 10"
+                  :color="tools.colordisponib(variazione.quantita)"
+                  name="fas fa-check"
+                />
+                <q-icon
+                  v-else-if="
+                    variazione.quantita > 3 && variazione.quantita <= 10
+                  "
+                  :color="tools.colordisponib(variazione.quantita)"
+                  name="fas fa-exclamation"
+                />
+                <q-icon
+                  v-else-if="
+                    variazione.quantita > 0 && variazione.quantita <= 3
+                  "
+                  :color="tools.colordisponib(variazione.quantita)"
+                  name="fas fa-exclamation"
+                />
+                <q-icon
+                  v-else-if="variazione.quantita === 0"
+                  :color="tools.colordisponib(variazione.quantita)"
+                  name="fas fa-times"
                 />
               </q-item-section>
-              <q-item-section
-                v-if="
-                  tools.isManager() &&
-                  products.getQtyBloccataAvailable(myproduct) > 0
-                "
-              >
-                <q-item-label> {{ t('ecomm.bloccati') }}: </q-item-label>
-                <q-item-label>
-                  <span v-if="!editOn" class="text-black q-ml-xs text-h8">
-                    {{ myproduct.stockBloccatiQty }}</span
-                  >
-                </q-item-label>
-                <CMyValueDb
-                  v-if="editOn"
-                  :editOn="editOn"
-                  :title="t('products.stockBloccatiQty')"
-                  table="products"
-                  :id="myproduct._id"
-                  :rec="myproduct"
-                  mykey="stockBloccatiQty"
-                  debounce="1000"
-                  :save="updateproductmodif()"
-                  :type="costanti.FieldType.number"
+            </div>
+            <q-slide-transition>
+              <div v-if="indvariazSel >= 0">
+                <div
+                  v-if="
+                    indvariazSel >= 0 &&
+                    tools.disponibStr(
+                      myproduct.arrvariazioni[indvariazSel].quantita
+                    )
+                  "
+                  class="row justify-center q-mt-sm vertical-middle"
+                  style="align-items: center"
                 >
-                </CMyValueDb>
-              </q-item-section>
-            </q-item-section>
-          </q-item>
-        </q-list>
-      </q-card-section>
+                  <span class="q-mr-sm"
+                    >{{ $t('ecomm.disponibilita') }}:&nbsp;</span
+                  >
+                  <q-chip
+                    size="md"
+                    dense
+                    text-color="white"
+                    :color="
+                      tools.colordisponib(
+                        myproduct.arrvariazioni[indvariazSel].quantita
+                      )
+                    "
+                    >{{
+                      tools.disponibStr(
+                        myproduct.arrvariazioni[indvariazSel].quantita
+                      )
+                    }}</q-chip
+                  >
+                </div>
+                <div
+                  v-if="indvariazSel >= 0"
+                  class="row justify-center vertical-middle"
+                  style="align-items: center"
+                >
+                  <span class="q-mr-sm">{{ $t('products.price') }}:</span>
+                  <span
+                    class="prod_sale_price text-bold"
+                    v-if="!!myproduct.arrvariazioni[indvariazSel].sale_price"
+                    >{{
+                      myproduct.arrvariazioni[indvariazSel].sale_price
+                        ? myproduct.arrvariazioni[
+                            indvariazSel
+                          ].sale_price.toFixed(2)
+                        : 0
+                    }}
+                    €</span
+                  >
+                  <span
+                    :class="
+                      myproduct.arrvariazioni[indvariazSel].sale_price
+                        ? 'prod_off_price'
+                        : 'prod_price'
+                    "
+                    v-if="!!myproduct.arrvariazioni[indvariazSel].price"
+                    >{{
+                      myproduct.arrvariazioni[indvariazSel].price
+                        ? myproduct.arrvariazioni[indvariazSel].price.toFixed(2)
+                        : 0
+                    }}
+                    €
+                  </span>
+                  <span v-if="!!myproduct.after_price">{{
+                    myproduct.after_price
+                  }}</span>
+                </div>
+                <div
+                  v-if="
+                    indvariazSel >= 0 &&
+                    !!myproduct.arrvariazioni[indvariazSel].formato
+                  "
+                  class="row justify-center q-ma-sm vertical-middle"
+                  style="align-items: center"
+                >
+                  <span class="q-mr-sm">{{ $t('products.formato') }}:</span>
+                  <q-badge
+                    v-if="myproduct.arrvariazioni[indvariazSel].versione > 0"
+                    :color="
+                      shared_consts.VERSIONI_PRODOTTO[
+                        myproduct.arrvariazioni[indvariazSel].versione
+                      ].color
+                    "
+                    >{{
+                      myproduct.arrvariazioni[indvariazSel].formato
+                    }}</q-badge
+                  >
+                </div>
 
-      <q-card-section class="card_titolo_prod">
-        <div class="column items-center centeritems">
-          <div class="text-h7 boldhigh titolo_prod">
-            {{ myproduct.productInfo.name }}
-          </div>
-          <div class="product_code">
-            &nbsp; {{ t('ecomm.codice') }}: {{ myproduct.productInfo.code }}
+                <div
+                  v-if="indvariazSel >= 0"
+                  class="row justify-center q-mt-sm"
+                >
+                  <q-btn
+                    v-if="
+                      myproduct.arrvariazioni[indvariazSel].addtocart_link &&
+                      true
+                    "
+                    :href="myproduct.arrvariazioni[indvariazSel].addtocart_link"
+                    target="_blank"
+                    color="primary"
+                    icon="fas fa-cart-plus"
+                    no-caps
+                    :label="$t('products.addtocart_ext')"
+                  ></q-btn>
+                  <q-btn
+                    v-if="myproduct.productInfo.checkout_link && true"
+                    :href="myproduct.productInfo.checkout_link"
+                    target="_blank"
+                    color="white"
+                    icon="fas fa-shopping-cart"
+                    outline
+                    text-color="black"
+                    no-caps
+                    :label="$t('ecomm.carrello')"
+                  ></q-btn>
+                </div>
+              </div>
+            </q-slide-transition>
           </div>
         </div>
       </q-card-section>
+      <q-separator v-if="complete" class="q-my-sm"></q-separator>
       <q-card-section v-if="complete && myproduct.productInfo.description">
+        <div class="title-descr text-blue row">Descrizione:</div>
         <div class="row items-center">
           <div class="text-title text-grey-9">
             <span
@@ -395,615 +317,7 @@
           </div>
         </div>
       </q-card-section>
-      <q-card-section v-if="complete && myproduct.productInfo.ingredienti">
-        <div class="text-blue text-title row">
-          <q-icon size="sm" name="fas fa-list-ul" class="q-mr-sm" />
-          {{ t('products.ingredienti') }}
-        </div>
-        <div class="row items-center">
-          <div class="text-title text-grey-9">
-            <span
-              class="text-grey-7"
-              v-html="myproduct.productInfo.ingredienti"
-            ></span>
-          </div>
-        </div>
-      </q-card-section>
-      <q-card-section v-if="complete && myproduct.productInfo.link_scheda">
-        <div v-if="complete" class="text-blue text-title row">
-          <q-icon size="sm" name="fas fa-list-ul" class="q-mr-sm" />
-          {{ t('products.link_scheda') }}
-        </div>
-        <div class="row items-center">
-          <div class="text-title text-grey-9">
-            <a :href="myproduct.productInfo.link_scheda" target="_blank"
-              >Apri Scheda</a
-            >
-          </div>
-        </div>
-      </q-card-section>
-      <q-card-section
-        v-if="complete && myproduct.productInfo.valori_nutrizionali"
-      >
-        <div class="text-blue text-title row">
-          <q-icon size="sm" name="fas fa-info" class="q-mr-sm" />
-          {{ t('products.valori_nutrizionali') }}
-        </div>
-        <div class="row items-center">
-          <div class="text-title text-grey-9">
-            <span
-              class="text-grey-7"
-              v-html="myproduct.productInfo.valori_nutrizionali"
-            ></span>
-          </div>
-        </div>
-      </q-card-section>
-      <q-card-section v-if="complete || getnumstore() > 1">
-        <div class="text-blue text-title row items-center q-mr-md centeritems">
-          <q-icon size="sm" name="fas fa-people-carry" class="q-mr-sm" />
-          {{ t('products.ritiro_presso') }}:
-        </div>
-        <div
-          class="text-green-6 text-title row items-center q-my-sm centeritems"
-        >
-          <div v-if="getnumstore() > 1">
-            <q-select
-              :behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
-              outlined
-              v-model="storeSelected"
-              :options="getStorehouses()"
-              :label="t('products.magazzino') + `:`"
-              emit-value
-              map-options
-            >
-            </q-select>
-          </div>
-          <div v-else>
-            <span class="text-title text-center">{{
-              getSingleStorehouse()
-            }}</span>
-          </div>
-        </div>
-      </q-card-section>
-      <q-card-section v-if="complete && myproduct.producer">
-        <div v-if="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
-            >
-          </div>
-        </div>
-        <div
-          v-if="complete && myproduct.producer && myproduct.producer.name"
-          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
-          >
-        </div>
-      </q-card-section>
-
-      <q-card-section v-if="myproduct.productInfo.note" class="q-pa-none">
-        <q-item>
-          <q-item-section avatar>
-            <q-icon color="black" name="fas fa-book" />
-          </q-item-section>
-
-          <q-item-section>
-            <q-item-label class="">
-              <CMyValueDb
-                v-if="editOn"
-                title=""
-                :editOn="editOn"
-                table="productinfos"
-                :id="myproduct.productInfo._id"
-                :rec="myproduct.productInfo"
-                mykey="note"
-                debounce="1000"
-                :save="updateproductmodif()"
-                :type="costanti.FieldType.string"
-              >
-              </CMyValueDb>
-              <div v-if="!editOn" v-html="myproduct.productInfo.note"></div>
-            </q-item-label>
-          </q-item-section>
-        </q-item>
-      </q-card-section>
-      <q-card-section v-if="isOrdGas()">
-        <q-item
-          v-if="
-            (myproduct.bookableAvailableQty > 0 &&
-              myproduct.bookableAvailableQty < shared_consts.MAX_QTA_PREORD) ||
-            (myproduct.maxbookableGASQty > 0 &&
-              myproduct.maxbookableGASQty < shared_consts.MAX_QTA_PREORD) ||
-            editOn
-          "
-          :clickable="tools.isManager()"
-          @click="
-            tools.isManager() &&
-            myproduct.QuantitaPrenotateInAttesa &&
-            myproduct.QuantitaPrenotateInAttesa > 0
-              ? visuListBookable()
-              : null
-          "
-        >
-          <q-item-section avatar>
-            <q-icon color="blue" name="fas fa-edit" />
-          </q-item-section>
-
-          <q-item-section>
-            <q-item-label class="subtit_prod">
-              {{ t('ecomm.preorders') }}
-            </q-item-label>
-            <q-item-label>
-              <span v-if="!editOn" class="prod_preorder">
-                {{ myproduct.bookableAvailableQty }}
-              </span>
-              <CMyValueDb
-                v-if="editOn"
-                :editOn="editOn"
-                :title="t('products.bookableAvailableQty')"
-                table="products"
-                :id="myproduct._id"
-                :rec="myproduct"
-                mykey="bookableAvailableQty"
-                debounce="1000"
-                :save="updateproductmodif()"
-                :type="costanti.FieldType.number"
-              >
-              </CMyValueDb>
-              <CMyValueDb
-                v-if="editOn"
-                :editOn="editOn"
-                :title="t('products.maxbookableGASQty')"
-                table="products"
-                :id="myproduct._id"
-                :rec="myproduct"
-                mykey="maxbookableGASQty"
-                debounce="1000"
-                :save="updateproductmodif()"
-                :type="costanti.FieldType.number"
-              >
-              </CMyValueDb>
-              <div class="prod_qtywarn">
-                <div
-                  v-if="
-                    tools.isManager() && !!myproduct.QuantitaPrenotateInAttesa
-                  "
-                >
-                  {{
-                    t('ecomm.qta_prenotate_in_attesa', {
-                      qty: myproduct.QuantitaPrenotateInAttesa,
-                    })
-                  }}
-                </div>
-              </div>
-            </q-item-label>
-          </q-item-section>
-          <q-item-section
-            v-if="
-              tools.isManager() &&
-              products.getQtyBloccataBookableAvailable(myproduct) > 0
-            "
-          >
-            <q-item-section avatar>
-              <q-icon
-                name="fas fa-store"
-                style="padding-right: 16px !important"
-              />
-            </q-item-section>
-            <q-item-section>
-              <q-item-label class="subtit_prod">
-                {{ t('ecomm.bloccati') }}:
-              </q-item-label>
-              <q-item-label>
-                <span v-if="!editOn" class="text-black q-ml-xs text-h8">
-                  {{ myproduct.bookableGASBloccatiQty }}</span
-                >
-                <CMyValueDb
-                  v-if="editOn"
-                  :editOn="editOn"
-                  :title="t('products.bookableGASBloccatiQty')"
-                  table="products"
-                  :id="myproduct._id"
-                  :rec="myproduct"
-                  mykey="bookableGASBloccatiQty"
-                  debounce="1000"
-                  :save="updateproductmodif()"
-                  :type="costanti.FieldType.number"
-                >
-                </CMyValueDb>
-                <CMyValueDb
-                  :editOn="editOn"
-                  :title="t('products.bookedGASQtyConfirmed')"
-                  table="products"
-                  :id="myproduct._id"
-                  :rec="myproduct"
-                  mykey="bookedGASQtyConfirmed"
-                  debounce="1000"
-                  :save="updateproductmodif()"
-                  :type="costanti.FieldType.number"
-                >
-                </CMyValueDb>
-              </q-item-label>
-            </q-item-section>
-          </q-item-section>
-        </q-item>
-        <q-item
-          v-if="
-            myproduct.gasordine &&
-            myproduct.gasordine.active &&
-            myproduct.idGasordine
-          "
-        >
-          <q-item-section avatar>
-            <q-icon color="blue" name="fas fa-shipping-fast" />
-          </q-item-section>
-          <q-item-section>
-            <q-item-label class="subtit_prod">
-              {{ t('products.gasordine') }}
-            </q-item-label>
-            <q-item-label>
-              <span class="text-title text-center">{{
-                myproduct.gasordine.name
-              }}</span>
-            </q-item-label>
-          </q-item-section>
-        </q-item>
-
-        <q-item v-if="isOrdGas() && myproduct.qtyToReachForGas > 0">
-          <q-item-section avatar>
-            <q-icon
-              v-if="getpercqtaraggiunta() < 1"
-              color="orange"
-              name="fas fa-lightbulb"
-            />
-            <q-icon v-else color="green" name="fas fa-check" />
-          </q-item-section>
-
-          <q-item-section>
-            <q-item-label class="subtit_prod text-blue text-bold">
-              <span v-if="getpercqtaraggiunta() >= 1">{{
-                t('ecomm.offerta_gas_raggiunta', {
-                  qta:
-                    myproduct.qtyToReachForGas * myproduct.productInfo.weight,
-                  unit: tools.getUnitsMeasure(
-                    myproduct.productInfo.unit,
-                    true,
-                    myproduct.productInfo.weight
-                  ),
-                })
-              }}</span>
-              <span v-else>{{
-                t('ecomm.offerta_gas', {
-                  qta:
-                    myproduct.qtyToReachForGas * myproduct.productInfo.weight,
-                  unit: tools.getUnitsMeasure(
-                    myproduct.productInfo.unit,
-                    true,
-                    myproduct.productInfo.weight
-                  ),
-                })
-              }}</span>
-            </q-item-label>
-            <div class="row">
-              <CMyValueDb
-                v-if="editOn"
-                :editOn="editOn"
-                :title="t('ecomm.bookedGASQtyOrdered')"
-                table="products"
-                :id="myproduct._id"
-                :rec="myproduct"
-                mykey="bookedGASQtyOrdered"
-                debounce="1000"
-                :save="updateproductmodif()"
-                :type="costanti.FieldType.number"
-              >
-              </CMyValueDb>
-              <CMyValueDb
-                v-if="editOn"
-                :editOn="editOn"
-                :title="t('ecomm.qtyToReachForGas')"
-                table="products"
-                :id="myproduct._id"
-                :rec="myproduct"
-                mykey="qtyToReachForGas"
-                debounce="1000"
-                :save="updateproductmodif()"
-                :type="costanti.FieldType.number"
-              >
-              </CMyValueDb>
-            </div>
-            <q-item-label>
-              <span class="prod_disp">
-                {{
-                  t('ecomm.bookedGASQtyOrdered_str', {
-                    qta:
-                      (myproduct.bookableGASBloccatiQty +
-                        myproduct.QuantitaPrenotateInAttesa) *
-                      myproduct.productInfo.weight,
-                    qtatot:
-                      myproduct.qtyToReachForGas * myproduct.productInfo.weight,
-                  })
-                }}
-                <q-linear-progress size="10px" :value="getpercqtaraggiunta()" />
-              </span>
-              <div class="prod_qtywarn">
-                <div
-                  v-if="
-                    tools.isManager() && !!myproduct.QuantitaOrdinateInAttesa
-                  "
-                >
-                  {{
-                    t('ecomm.qta_in_attesa', {
-                      qty: myproduct.QuantitaOrdinateInAttesa,
-                    })
-                  }}
-                </div>
-              </div>
-            </q-item-label>
-          </q-item-section>
-          <q-item-section
-            v-if="
-              tools.isManager() &&
-              products.getQtyBloccataAvailable(myproduct) > 0
-            "
-          >
-            <q-item-section avatar>
-              <q-icon
-                name="fas fa-store"
-                style="padding-right: 16px !important"
-              />
-            </q-item-section>
-            <q-item-section
-              v-if="
-                tools.isManager() &&
-                products.getQtyBloccataAvailable(myproduct) > 0
-              "
-            >
-              <q-item-label> {{ t('ecomm.bloccati') }}: </q-item-label>
-              <q-item-label>
-                <span class="text-black q-ml-xs text-h8">
-                  {{ products.getQtyBloccataAvailable(myproduct) }}</span
-                >
-              </q-item-label>
-            </q-item-section>
-          </q-item-section>
-        </q-item>
-        <q-item
-          v-if="
-            myproduct.gasordine &&
-            myproduct.gasordine.active &&
-            (myproduct.gasordine.dataora_chiusura_ordini || editOn)
-          "
-        >
-          <q-item-section avatar>
-            <q-icon color="blue" name="fas fa-hourglass-half" />
-          </q-item-section>
-
-          <q-item-section>
-            <q-item-label class="countdown_scadenza">
-              <span v-if="timerLabelScadenza">{{ timerLabelScadenza }}</span>
-              <span v-else-if="isOrdineChiuso()">{{
-                t('ecomm.ordine_scaduto')
-              }}</span>
-              <CMyValueDb
-                :editOn="editOn"
-                :title="t('gas.dataora_chiusura_ordini')"
-                table="gasordines"
-                :id="myproduct.gasordine._id"
-                :rec="myproduct.gasordine"
-                mykey="dataora_chiusura_ordini"
-                debounce="1000"
-                :save="updateproductmodif()"
-                :type="costanti.FieldType.date"
-                :justifycenter="false"
-              >
-              </CMyValueDb>
-            </q-item-label>
-          </q-item-section>
-        </q-item>
-
-        <q-item
-          v-if="
-            myproduct.gasordine &&
-            myproduct.gasordine.active &&
-            (labelDataArrivoMerce || editOn)
-          "
-        >
-          <q-item-section avatar>
-            <q-icon color="red" name="fas fa-shipping-fast" />
-          </q-item-section>
-
-          <q-item-section class="subtit_prod">
-            <q-item-label class="countdown_scadenza">
-              <CMyValueDb
-                :editOn="editOn"
-                :title="t('gas.data_arrivo_merce')"
-                table="gasordines"
-                :id="myproduct.gasordine._id"
-                :rec="myproduct.gasordine"
-                mykey="data_arrivo_merce"
-                debounce="1000"
-                :save="updateproductmodif()"
-                :type="costanti.FieldType.date"
-                :justifycenter="false"
-              >
-              </CMyValueDb>
-            </q-item-label>
-          </q-item-section>
-        </q-item>
-        <q-item
-          v-if="
-            myproduct.gasordine &&
-            myproduct.gasordine.active &&
-            (labelDataRitiro || editOn)
-          "
-        >
-          <q-item-section avatar>
-            <q-icon color="green" name="fas fa-people-carry" />
-          </q-item-section>
-
-          <q-item-section>
-            <q-item-label class="countdown_scadenza">
-              <CMyValueDb
-                :editOn="editOn"
-                :title="t('gas.dataora_ritiro')"
-                table="gasordines"
-                :id="myproduct.gasordine._id"
-                :rec="myproduct.gasordine"
-                mykey="dataora_ritiro"
-                :justifycenter="false"
-                debounce="1000"
-                :save="updateproductmodif()"
-                :type="costanti.FieldType.onlydate"
-              >
-              </CMyValueDb>
-            </q-item-label>
-          </q-item-section>
-        </q-item>
-      </q-card-section>
-
-      <q-separator />
-
-      <q-card-section>
-        <div class="row justify-evenly">
-          <q-btn
-            icon="fas fa-cart-arrow-down"
-            :color="
-              checkifCartDisable() || !products.enableSubQty(myorder)
-                ? 'grey'
-                : 'negative'
-            "
-            :disable="checkifCartDisable() || !products.enableSubQty(myorder)"
-            rounded
-            size="md"
-            :label="
-              t('products.subcart', {
-                qta: products.qtaNextSub(myorder, myproduct),
-              })
-            "
-            @click="addtoCart(false)"
-          >
-          </q-btn>
-
-          <q-field outlined dense class="q-mx-xs">
-            <template v-slot:control>
-              <div class="no-outline label-qta text-center" tabindex="0">
-                {{ myorder.quantity + myorder.quantitypreordered }}
-              </div>
-            </template>
-          </q-field>
-
-          <q-btn
-            icon-right="fas fa-cart-plus"
-            :color="
-              checkifCartDisable() || !products.enableAddQty(myorder, myproduct)
-                ? 'grey'
-                : 'positive'
-            "
-            :disable="
-              checkifCartDisable() || !products.enableAddQty(myorder, myproduct)
-            "
-            rounded
-            size="md"
-            :label="
-              t('products.addcart', {
-                qta: products.qtaNextAdd(myorder, myproduct),
-              })
-            "
-            @click="addtoCart(true)"
-          >
-          </q-btn>
-          <q-btn
-            v-if="!complete && myproduct.productInfo.link_scheda"
-            rounded
-            color="primary"
-            icon="fas fa-file-alt"
-            label="Dettagli Scheda"
-            class="q-mb-xs q-mt-md"
-            @click="apriSchedaPDF = true"
-          />
-          <q-btn
-            v-else-if="!complete"
-            rounded
-            color="primary"
-            icon="fas fa-info"
-            label="Dettagli"
-            class="q-mb-xs q-mt-md"
-            :to="`/product/` + myproduct._id + '/' + cosa"
-          />
-
-          <q-btn
-            v-if="myorder.quantity + myorder.quantitypreordered > 0"
-            rounded
-            icon="fas fa-shopping-cart"
-            color="primary"
-            :label="t('ecomm.btn_cassa')"
-            class="q-mb-xs q-mt-md"
-            to="/checkout"
-          ></q-btn>
-        </div>
-      </q-card-section>
-      <div v-if="editOn">
-        <div v-if="!isOrdGas()" class="row">
-          <CMyValueDb
-            :editOn="editOn"
-            :title="t('products.bookedQtyOrdered')"
-            table="products"
-            :id="myproduct._id"
-            :rec="myproduct"
-            mykey="bookedQtyOrdered"
-            debounce="1000"
-            :save="updateproductmodif()"
-            :type="costanti.FieldType.number"
-          >
-          </CMyValueDb>
-          <CMyValueDb
-            :editOn="editOn"
-            :title="t('products.bookedQtyConfirmed')"
-            table="products"
-            :id="myproduct._id"
-            :rec="myproduct"
-            mykey="bookedQtyConfirmed"
-            debounce="1000"
-            :save="updateproductmodif()"
-            :type="costanti.FieldType.number"
-          >
-          </CMyValueDb>
-        </div>
-        <q-separator> </q-separator>
-        <div class="text-center">
-          <q-btn
-            rounded
-            icon="fas fa-sync-alt"
-            color="primary"
-            :label="t('ecomm.ricarica')"
-            @click="ricarica()"
-          ></q-btn>
-        </div>
-      </div>
-      <div v-if="editOn">{{ t('ecomm.active') }}:</div>
-      <CMyValueDb
-        title=""
-        v-if="editOn"
-        :editOn="editOn"
-        table="products"
-        :id="myproduct._id"
-        :rec="myproduct"
-        mykey="active"
-        debounce="1000"
-        :save="updateproductmodif()"
-        :type="costanti.FieldType.boolean"
-      >
-      </CMyValueDb>
-    </q-card>
+    </div>
 
     <q-dialog v-if="myproduct" v-model="openlistorders">
       <q-card class="dialog_card">
diff --git a/src/router/routesECommerce.ts b/src/router/routesECommerce.ts
index 5da36ab0..e78bf89e 100644
--- a/src/router/routesECommerce.ts
+++ b/src/router/routesECommerce.ts
@@ -281,6 +281,16 @@ function getRoutesEcomm(site: ISites) {
       inmenu: false,
       infooter: false
     },
+    {
+      active: true,
+      order: 1000,
+      path: '/catalogo/:idprod/:cosa',
+      materialIcon: 'event',
+      name: 'otherpages.catalogo',
+      component: () => import('@/views/ecommerce/catalogoInfo/catalogoInfo.vue'),
+      inmenu: false,
+      infooter: false
+    },
     {
       active: true,
       order: 1000,
diff --git a/src/statics/lang/it.js b/src/statics/lang/it.js
index 76650d33..c116d802 100755
--- a/src/statics/lang/it.js
+++ b/src/statics/lang/it.js
@@ -95,6 +95,7 @@ const msg_it = {
       productInfo: 'Info Prodotto',
       link_scheda: 'Link Scheda',
       addtocart_ext: 'Aggiungi',
+      formato: 'Formato',
     },
     storehouses: {
       name: 'Magazzino',
@@ -115,6 +116,7 @@ const msg_it = {
       myactivities: 'Attività',
       myactivities2: 'Mie Attività',
       product: 'Prodotto',
+      catalogo: 'Catalogo',
       orderscart: 'Ordini',
       sito_offline: 'Sito in Aggiornamento',
       modifprof: 'Modifica',
@@ -1738,6 +1740,7 @@ const msg_it = {
       tutti: 'Tutti',
       paga: 'Paga',
       consegna: 'Consegna',
+      disponibilita: 'Disponibilità',
     },
     gas: {
       name: 'Ordine Gas',
@@ -1787,7 +1790,8 @@ const msg_it = {
       mipiace: 'Mi piace',
       tipiace: 'Ti piace',
       condividi: 'Condividi',
-    }
+    },
+
   },
 };
 
diff --git a/src/store/Modules/tools.ts b/src/store/Modules/tools.ts
index 7f4c07d3..60afdcc7 100644
--- a/src/store/Modules/tools.ts
+++ b/src/store/Modules/tools.ts
@@ -3375,13 +3375,17 @@ export const tools = {
     return myval.charAt(0).toUpperCase() + myval.slice(1)
   },
 
-  firstchars(value: any, numchars = 200) {
+  firstchars(value: any, numchars = 200, capitalizeFirst = false) {
     if (!value) {
       return ''
     }
     try {
       let mycar = value.substring(0, numchars)
       if (value.length > numchars) mycar += '...'
+
+      if (capitalizeFirst) {
+        mycar = mycar.charAt(0).toUpperCase() + mycar.slice(1);
+      }
       return mycar
     } catch (e) {
       return value
@@ -3912,7 +3916,7 @@ export const tools = {
     // this.$q.lang.set(mylang)
 
   },
-  
+
   getIdApp() {
     return process.env.APP_ID
   },
@@ -8532,6 +8536,54 @@ export const tools = {
     window.location.reload();
   },
 
+  disponibStr(quantita: any) {
+    if (!quantita) {
+      // Disponibilità non pervenuta, non scrivere niente
+      return ''
+    }
+    quantita = parseInt(quantita)
+    let ris = ''
+    if (quantita < 0) {
+      ris = 'Disponibile per il Pre-Ordine'
+    } else if (quantita === 0) {
+      ris = 'Terminato!'
+    } else if ((quantita > 0) && (quantita <= 3)) {
+      if (quantita === 1)
+        ris = 'Ultimo pezzo !'
+      else
+        ris = 'Ultimi ' + quantita + ' pezzi'
+    } else if ((quantita > 3) && (quantita <= 10)) {
+      ris = 'Media'
+    } else {
+      ris = 'Alta'
+    }
+
+    return ris
+
+  },
+
+  colordisponib(quantita: any) {
+    if (!quantita) {
+      // Disponibilità non pervenuta, non scrivere niente
+      return 'gray'
+    }
+    quantita = parseInt(quantita)
+    let color = ''
+    if (quantita < 0) {
+      color = 'blue'
+    } else if (quantita === 0) {
+      color = 'gray'
+    } else if ((quantita > 0) && (quantita <= 3)) {
+      color = 'red'
+    } else if ((quantita > 3) && (quantita <= 10)) {
+      color = 'orange'
+    } else if (quantita > 10) {
+      color = 'green'
+    }
+
+    return color
+  }
+
 
   // FINE !
 
diff --git a/src/views/ecommerce/catalogoInfo/catalogoInfo.scss b/src/views/ecommerce/catalogoInfo/catalogoInfo.scss
new file mode 100755
index 00000000..9df13d3c
--- /dev/null
+++ b/src/views/ecommerce/catalogoInfo/catalogoInfo.scss
@@ -0,0 +1,5 @@
+$heightBtn: 100%;
+
+.card .product-image {
+  height: 300px;
+}
diff --git a/src/views/ecommerce/catalogoInfo/catalogoInfo.ts b/src/views/ecommerce/catalogoInfo/catalogoInfo.ts
new file mode 100755
index 00000000..f4c326cb
--- /dev/null
+++ b/src/views/ecommerce/catalogoInfo/catalogoInfo.ts
@@ -0,0 +1,59 @@
+import { defineComponent, onMounted, ref } from 'vue'
+import { tools } from '@store/Modules/tools'
+import { useUserStore } from '@store/UserStore'
+import { useRouter } from 'vue-router'
+import { useRoute } from 'vue-router'
+import { useGlobalStore } from '@store/globalStore'
+import { useProducts } from '@store/Products'
+import { useI18n } from '@/boot/i18n'
+import { toolsext } from '@store/Modules/toolsext'
+import { useQuasar } from 'quasar'
+import { costanti } from '@costanti'
+import { shared_consts } from '@src/common/shared_vuejs'
+// import MixinBase from '@src/mixins/mixin-base'
+import { CCatalogoCard } from '@src/components/CCatalogoCard'
+
+
+export default defineComponent({
+  name: 'catalogoInfo',
+  components: { CCatalogoCard },
+  props: {},
+  setup() {
+    const userStore = useUserStore()
+    const globalStore = useGlobalStore()
+    const productStore = useProducts()
+    const $router = useRouter()
+    const $route = useRoute()
+    const $q = useQuasar()
+    const { t } = useI18n();
+    const id = ref('')
+    const cosa = ref(0)
+
+    // const { setValDb, getValDb } = MixinBase()
+
+    function mounted() {
+      // Inizializza
+      console.log('created productInfo')
+      console.log($route)
+      if (!!$route.params.idprod) {
+        id.value = $route.params.idprod.toString()
+      }
+      if (!!$route.params.idprod) {
+        cosa.value = tools.strToVal($route.params.cosa.toString())
+      }
+  
+    }
+
+    onMounted(mounted)
+
+    return {
+      userStore,
+      costanti,
+      tools,
+      toolsext,
+      shared_consts,
+      id,
+      cosa,
+    }
+  }
+})
diff --git a/src/views/ecommerce/catalogoInfo/catalogoInfo.vue b/src/views/ecommerce/catalogoInfo/catalogoInfo.vue
new file mode 100755
index 00000000..43fac7ce
--- /dev/null
+++ b/src/views/ecommerce/catalogoInfo/catalogoInfo.vue
@@ -0,0 +1,19 @@
+<template>
+  <q-page class="q-pa-md">
+    <div class="panel">
+      <div class="container">
+        <div class="row justify-center">
+          <CCatalogoCard :id="id" :cosa="cosa" :complete="true"/>
+        </div>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script lang="ts" src="./catalogoInfo.ts">
+
+</script>
+
+<style lang="scss" scoped>
+@import './catalogoInfo';
+</style>
diff --git a/src/views/ecommerce/catalogoInfo/index.ts b/src/views/ecommerce/catalogoInfo/index.ts
new file mode 100755
index 00000000..d3cfdb14
--- /dev/null
+++ b/src/views/ecommerce/catalogoInfo/index.ts
@@ -0,0 +1 @@
+export {default as catalogoInfo} from './catalogoInfo.vue'