@@ -60,6 +70,7 @@
{{ t('gas.tutti') }}
-
- {{
- t('gas.x_prodotti_gas', {
- qta:
- productStore.getNumQtaGas() +
- productStore.getNumQtaBottega(),
- })
- }}
@@ -36,10 +28,6 @@
{{ t('gas.ordina_sul_gas') }}
-
- {{
- t('gas.x_prodotti_gas', { qta: productStore.getNumQtaGas() })
- }}
@@ -49,12 +37,6 @@
{{ t('gas.bottega') }}
-
- {{
- t('gas.x_prodotti_bottega', {
- qta: productStore.getNumQtaBottega(),
- })
- }}
diff --git a/src/views/ecommerce/productsList/productsList.scss b/src/views/ecommerce/productsList/productsList.scss
index a5c7424d..c0e3c558 100755
--- a/src/views/ecommerce/productsList/productsList.scss
+++ b/src/views/ecommerce/productsList/productsList.scss
@@ -11,4 +11,15 @@ $heightBtn: 100%;
.prod_trov{
font-style: italic;
-}
\ No newline at end of file
+ color: blue;
+}
+
+.fixed-group {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ background-color: #ffffff; /* Customize the background color as needed */
+ z-index: 1000; /* Adjust the z-index to ensure it's above other elements */
+ transition: all 1s ease;
+}
diff --git a/src/views/ecommerce/productsList/productsList.ts b/src/views/ecommerce/productsList/productsList.ts
index 53611251..c4089b71 100755
--- a/src/views/ecommerce/productsList/productsList.ts
+++ b/src/views/ecommerce/productsList/productsList.ts
@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, ref, watch, computed } from 'vue'
+import { defineComponent, onMounted, ref, watch, computed, onBeforeUnmount } from 'vue'
import { tools } from '@store/Modules/tools'
import { useUserStore } from '@store/UserStore'
import { useRouter } from 'vue-router'
@@ -14,7 +14,6 @@ import { CProductCard } from '@src/components/CProductCard'
import { CSelectUserActive } from '@src/components/CSelectUserActive'
import { IProduct } from '@src/model'
-
export default defineComponent({
name: 'ProductsList',
components: { CProductCard, CSelectUserActive },
@@ -32,33 +31,70 @@ export default defineComponent({
const cosa = ref(0)
const cat = ref('')
const loadpage = ref(false)
+ const refreshpage = ref(false)
+
+ const arrProducts = ref
([])
+
+ // Create a ref for the component to fix
+ const componentToFixRef = ref(null);
+
+ const isFixed = ref(false);
+
+ // Register the scroll event on component mount
+ const handleScroll = () => {
+ const scrollTop = window.scrollY || document.documentElement.scrollTop;
+
+ // Set a threshold value based on how much scroll is needed to fix the components
+ const threshold = 300;
+
+ // Update the isFixed ref based on the scroll position
+ isFixed.value = scrollTop > threshold;
+ };
+
+ watch(() => cat.value, (newval, oldval) => {
+ calcArrProducts()
+ })
+ watch(() => search.value, (newval, oldval) => {
+ calcArrProducts()
+ if (tools.scrollTop() > 300) {
+ tools.scrollToTopValue(300)
+ }
+ })
watch(() => cosa.value, (newval, oldval) => {
tools.setCookie(tools.COOK_COSA_PRODOTTI, cosa.value.toString())
+ if (cosa.value !== shared_consts.PROD.TUTTI)
+ cat.value = ''
+ calcArrProducts()
})
- const getArrProducts = computed(() => {
+ function calcArrProducts() {
+ refreshpage.value = true
let arrprod = productStore.getProducts(cosa.value)
let catstr = cat.value;
let lowerSearchText = search.value.toLowerCase().trim();
if ((!lowerSearchText || (lowerSearchText && lowerSearchText.length < 2)) && !catstr) {
- return arrprod
+
+ } else {
+
+ arrprod = arrprod.filter((product: IProduct) => {
+ let lowerName = product.productInfo.name!.toLowerCase();
+ let hasCategoria = !catstr || (catstr && product.productInfo.idCatProds?.includes(catstr));
+
+ // Use a regular expression to match whole words
+ let codeMatch = new RegExp(`\\b${lowerSearchText}\\b`, 'i');
+ let nameMatch = new RegExp(`\\b${lowerSearchText}`, 'i');
+
+ // Check if any word in lowerName starts with lowerSearchText
+ let anyWordStartsWithSearch = lowerName.split(/\s+/).some(word => nameMatch.test(word));
+
+ return (codeMatch.test(product.productInfo.code!) || anyWordStartsWithSearch) && hasCategoria;
+ });
}
- return arrprod.filter((product: IProduct) => {
- let lowerName = product.productInfo.name!.toLowerCase();
- let hasCategoria = !catstr || (catstr && product.productInfo.idCatProds?.includes(catstr));
-
- // Use a regular expression to match whole words
- let codeMatch = new RegExp(`\\b${lowerSearchText}\\b`, 'i');
- let nameMatch = new RegExp(`\\b${lowerSearchText}`, 'i');
-
- // Check if any word in lowerName starts with lowerSearchText
- let anyWordStartsWithSearch = lowerName.split(/\s+/).some(word => nameMatch.test(word));
-
- return (codeMatch.test(product.productInfo.code!) || anyWordStartsWithSearch) && hasCategoria;
- });
- })
+ arrProducts.value = arrprod
+ refreshpage.value = false
+ }
/*function getProducts() {
let arrprod = productStore.getProducts(cosa.value)
@@ -79,13 +115,21 @@ export default defineComponent({
async function mounted() {
loadpage.value = false
await productStore.loadProducts()
- cosa.value = tools.getCookie(tools.COOK_COSA_PRODOTTI, shared_consts.PROD.BOTTEGA, true)
+ cosa.value = tools.getCookie(tools.COOK_COSA_PRODOTTI, shared_consts.PROD.TUTTI, true)
// Inizializza
loadpage.value = true
+ window.addEventListener('scroll', handleScroll);
+
+ calcArrProducts()
}
+ // Remove the event listener on component destroy
+ onBeforeUnmount(() => {
+ window.removeEventListener('scroll', handleScroll);
+ });
+
function getCatProds() {
- let arrcat = productStore.getCatProds()
+ let arrcat = productStore.getCatProds(cosa.value)
let riscat: any = [{ label: 'Tutti', value: '', icon: undefined, color: undefined }]
for (const rec of arrcat) {
riscat.push({ label: rec.name, value: rec._id, icon: rec.icon, color: rec.color })
@@ -94,7 +138,6 @@ export default defineComponent({
return riscat
}
-
onMounted(mounted)
return {
@@ -102,7 +145,6 @@ export default defineComponent({
costanti,
tools,
toolsext,
- getArrProducts,
search,
cosa,
shared_consts,
@@ -111,6 +153,10 @@ export default defineComponent({
productStore,
t,
loadpage,
+ refreshpage,
+ componentToFixRef,
+ isFixed,
+ arrProducts,
}
}
})
diff --git a/src/views/ecommerce/productsList/productsList.vue b/src/views/ecommerce/productsList/productsList.vue
index a6b844fe..5499a2f3 100755
--- a/src/views/ecommerce/productsList/productsList.vue
+++ b/src/views/ecommerce/productsList/productsList.vue
@@ -6,6 +6,7 @@
+
Filtra Prodotti per:
+
+
+
+ {{ t('ecomm.tutti') }}
+
+
+
+
+
{{ t('gas.ordina_sul_gas') }}
-
+
@@ -39,12 +49,12 @@
{{ t('gas.bottega') }}
-
+
@@ -52,25 +62,36 @@
+
-
-
+
-
-
-
-
-
+
+
+
+
+
+
+
+
+
- {{
+ {{
t('ecomm.prodotti_trovati', {
- qta: getArrProducts.length,
+ qta: arrProducts.length,
qtatot: productStore.getNumProdTot(),
})
- }}{{}}
+ }}
diff --git a/upload/GAS00001.jpg b/upload/GAS00001.jpg
deleted file mode 100644
index a2e34a2e..00000000
Binary files a/upload/GAS00001.jpg and /dev/null differ
diff --git a/upload/GAS00002.jpg b/upload/GAS00002.jpg
deleted file mode 100644
index 82a4a5e2..00000000
Binary files a/upload/GAS00002.jpg and /dev/null differ
diff --git a/upload/GAS00003.jpg b/upload/GAS00003.jpg
deleted file mode 100644
index 1f37b6a0..00000000
Binary files a/upload/GAS00003.jpg and /dev/null differ
diff --git a/upload/products/4251088900010.jpg b/upload/products/4251088900010.jpg
new file mode 100644
index 00000000..3e552c19
Binary files /dev/null and b/upload/products/4251088900010.jpg differ
diff --git a/upload/products/4251088900027.jpg b/upload/products/4251088900027.jpg
new file mode 100644
index 00000000..c25a4478
Binary files /dev/null and b/upload/products/4251088900027.jpg differ
diff --git a/upload/products/4251088900034.jpg b/upload/products/4251088900034.jpg
new file mode 100644
index 00000000..54fae181
Binary files /dev/null and b/upload/products/4251088900034.jpg differ
diff --git a/upload/products/4251088900041.jpg b/upload/products/4251088900041.jpg
new file mode 100644
index 00000000..0862ec2f
Binary files /dev/null and b/upload/products/4251088900041.jpg differ
diff --git a/upload/products/4251088900058.jpg b/upload/products/4251088900058.jpg
new file mode 100644
index 00000000..92b9e246
Binary files /dev/null and b/upload/products/4251088900058.jpg differ
diff --git a/upload/products/4251088900201.jpg b/upload/products/4251088900201.jpg
new file mode 100644
index 00000000..9774fd7f
Binary files /dev/null and b/upload/products/4251088900201.jpg differ
diff --git a/upload/products/4251088900218.jpg b/upload/products/4251088900218.jpg
new file mode 100644
index 00000000..db7fac3a
Binary files /dev/null and b/upload/products/4251088900218.jpg differ
diff --git a/upload/products/4251088900225.jpg b/upload/products/4251088900225.jpg
new file mode 100644
index 00000000..2449bebd
Binary files /dev/null and b/upload/products/4251088900225.jpg differ
diff --git a/upload/products/4251088900232.jpg b/upload/products/4251088900232.jpg
new file mode 100644
index 00000000..fbdf4bfe
Binary files /dev/null and b/upload/products/4251088900232.jpg differ
diff --git a/upload/products/4251088900683.jpg b/upload/products/4251088900683.jpg
new file mode 100644
index 00000000..e66dd6a7
Binary files /dev/null and b/upload/products/4251088900683.jpg differ
diff --git a/upload/products/4251088923811.jpg b/upload/products/4251088923811.jpg
new file mode 100644
index 00000000..818ff1a6
Binary files /dev/null and b/upload/products/4251088923811.jpg differ
diff --git a/upload/products/4251088980050.jpg b/upload/products/4251088980050.jpg
new file mode 100644
index 00000000..b5a97cde
Binary files /dev/null and b/upload/products/4251088980050.jpg differ
diff --git a/upload/products/4251088980104.jpg b/upload/products/4251088980104.jpg
new file mode 100644
index 00000000..a3492992
Binary files /dev/null and b/upload/products/4251088980104.jpg differ
diff --git a/upload/products/4251088980159.jpg b/upload/products/4251088980159.jpg
new file mode 100644
index 00000000..ec4998fa
Binary files /dev/null and b/upload/products/4251088980159.jpg differ