kit-eco.social/consumocuidado
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix search and filtering for /busqueda

Browse Source
This commit is contained in:
Diego Calvo
2025-10-10 15:00:36 +02:00
parent 987c388bff
commit 894546a901
2 changed files with 77 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
components/ProductFilter.vue
View File

@@ -38,9 +38,9 @@
<ClientOnly>
<v-range-slider
v-model="priceRange"
:min="0"
:max="500"
step="10"
:min="minPrice"
:max="maxPrice"
step="5"
thumb-label="always"
color="#143E8C"
track-color="#d6d5d5"
@@ -120,15 +120,17 @@
</template>
<script>
export default {
props: {
filters: {
type: Object,
default: () => ({}),
maxPrice: {
type: Number,
default: 500,
},
prices: {
type: Object,
default: () => ({}),
minPrice: {
type: Number,
default: 0,
},
currentFilters: {
type: Object,
@@ -144,16 +146,12 @@ export default {
data() {
return {
// filterForm: {
// shipping_cost: false,
// discount: false,
// },
screenSize: null,
visible: true,
checkedCategories: [],
categories: [
"Alimentación",
"Agricultura ",
"Agricultura",
"Energía",
"Hogar y jardín",
"Moda y Textil",
@@ -167,7 +165,7 @@ export default {
"Finanzas Éticas y Seguros",
"Servicios Profesionales",
],
priceRange: [0, 500],
priceRange: [this.minPrice, this.maxPrice],
priceRangeFilter: {},
place: null,
coordinates: null,
@@ -188,24 +186,25 @@ export default {
} else {
this.checkedCategories = [];
}
// if (Object.keys(newCurrentFilters).includes("shipping_cost")) {
// this.filterForm.shipping_cost = true;
// } else {
// this.filterForm.shipping_cost = false;
// }
if (newCurrentFilters["price_min"] && newCurrentFilters["price_max"]) {
this.priceRange = [newCurrentFilters["price_min"], newCurrentFilters["price_max"]];
}
else if (newCurrentFilters["price_min"] && !newCurrentFilters["price_max"]) {
this.priceRange = [newCurrentFilters["price_min"], this.maxPrice];
}
else if (!newCurrentFilters["price_min"] && newCurrentFilters["price_max"]) {
this.priceRange = [this.minPrice, newCurrentFilters["price_max"]];
}
else {
this.priceRange = [this.minPrice, this.maxPrice];
}
//this.filterForm.discount = this.$route.query.hasOwnProperty("discount");
},
prices(newPrices) {
if (newPrices.min && newPrices.max) {
this.priceRange = [newPrices.min, newPrices.max];
}
},
},
mounted() {
if (this.prices.min && this.prices.max) {
this.priceRange = [this.prices.min, this.prices.max];
if (this.currentFilters?.price_min && this.currentFilters?.price_max) {
this.priceRange = [this.currentFilters.price_min, this.currentFilters.prices_max];
}
this.screenSize = window.innerWidth;
window.addEventListener("resize", () => {
@@ -224,17 +223,7 @@ export default {
},
applyFilters() {
const filters = {};
filters.price_min = this.priceRange[0];
filters.price_max = this.priceRange[1];
//if (this.filterForm.shipping_cost) filters.shipping_cost = false;
//if (this.filterForm.discount) filters.discount = true;
filters.category = this.checkedCategories;
if (this.place) {
filters.latitude = this.place.geo.latitude;
filters.longitude = this.place.geo.longitude;
}
this.$emit("applyFilters", filters);
this.$emit("applyFilters", { category: [...this.checkedCategories], price_min: this.priceRange[0], price_max: this.priceRange[1] });
},
},
};
@@ -361,7 +350,6 @@ export default {
gap: 1rem;
}
.form-check-input {
&:checked {
background-color: $color-button;
}

189
pages/busqueda.vue
View File

@@ -17,14 +17,14 @@
type="text"
autocomplete="off"
placeholder="Encuentra productos o servicios"
/>
>
<div class="search-link">
<img
class="search-icon"
src="@/assets/img/latienda-search.svg"
alt="consumo-cuidado-search"
@click="search"
/>
>
</div>
</form>
</div>
@@ -34,9 +34,9 @@
<div class="c-container">
<div class="col-md-3">
<ProductFilter
:filters="filters"
:current-filters="currentFilters"
:prices="prices"
:max_price="MAX_PRICE"
:min_price="MIN_PRICE"
:geo="coordinates"
@apply-filters="updateData"
/>
@@ -62,7 +62,7 @@
<div v-if="count > 0" class="carousel">
<div class="title-container">
<h5 class="items-title">Últimos productos y servicios</h5>
<div class="title-lines"></div>
<div class="title-lines"/>
</div>
<ItemsRow class="items" :type="`product`" :items="carouselProducts.results" :items-to-show="3" />
</div>
@@ -104,7 +104,7 @@
<div class="results">
<div class="title-container">
<h5 class="items-title">Catálogo</h5>
<div class="title-lines"></div>
<div class="title-lines"/>
</div>
<p class="count">Resultados de búsqueda: {{ count }} resultados</p>
<div v-if="products.length !== 0">
@@ -128,23 +128,11 @@
Prueba un término más general, revisa la ortografía o
<span class="link" @click="clearFilters">limpia los filtros</span>.
</p>
<!-- <div v-for="product in defaultProducts" :key="product.id">
<ProductCard :key="product.key" :product="product" />
</div> -->
</div>
</div>
</div>
</div>
</div>
<!-- appliedFilters: {{appliedFilters}} <br>
filters: {{filters}} <br>
prices: {{prices}} <br>
coordinates: {{coordinates}} <br>
products: {{products}} <br>
defaultProducts: {{defaultProducts}} <br>
carouselProducts: {{carouselProducts}} <br>
count: {{count}} -->
</template>
<script>
@@ -174,46 +162,35 @@ export default {
previousParams: null,
currentFilters: null,
mountedProducts: [],
appliedFilters: {},
filters: {},
prices: { min: null, max: null },
MAX_PRICE: 500,
MIN_PRICE: 0,
coordinates: null,
products: [],
defaultProducts: [],
carouselProducts: [],
count: 0,
loadingProducts: true,
}
},
computed: {
hasFilterTags() {
if (!this.appliedFilters) return false
return (
Object.keys(this.appliedFilters).includes('shipping_cost') ||
Object.keys(this.appliedFilters).includes('discount') ||
(Array.isArray(this.appliedFilters.category) &&
this.appliedFilters.category.length > 0)
)
}
},
watch: {
'$route.query'(newValue) {
console.log('New Value:', newValue)
//console.log('Route changed:', this.$route.fullPath)
//console.log('Current params:', this.$route.query)
this.queryText = newValue.q
console.log('Updated queryText:', this.queryText)
this.updateData(newValue)
//Object.assign(this.$data, this.$options.data())
}
},
// watch: {
// '$route.query'(newValue) {
// console.log('New Value:', newValue)
// //console.log('Route changed:', this.$route.fullPath)
// //console.log('Current params:', this.$route.query)
// this.queryText = newValue.q
// console.log('Updated queryText:', this.queryText)
// this.updateData(newValue)
// //Object.assign(this.$data, this.$options.data())
// }
// },
async beforeCreate() {
const config = useRuntimeConfig()
const params = import.meta.client ? clientSearch(this.$route.query) : serverSearch(this.$route.query)
console.log('Initial params:', params);
const data = await $fetch(`/search_products/?`, {
baseURL: config.public.baseURL,
method: 'GET',
@@ -222,28 +199,9 @@ export default {
Authorization: '/',
},
})
//console.log('data', data)
const products = data.products
//console.log('products', products)
let defaultProducts = []
if (products.length === 0) {
//console.log('no products, fetching default')
const data = await $fetch(`/search_products/?q=${params.q}`, {
baseURL: config.public.baseURL,
method: 'GET',
params: {
order: 'newest',
limit: 10,
offset: 0
},
headers: {
Authorization: '/',
},
})
defaultProducts = data.products
}
// Productos para el carrusel
const carouselProducts = await $fetch(`/products/`, {
baseURL: config.public.baseURL,
method: 'GET',
@@ -255,8 +213,8 @@ export default {
Authorization: '/',
},
})
//console.log('carouselProducts', carouselProducts)
// Pasar filtros aplicados a las variables de estado que usan los componentes de filtros
let coordinates
if (params.latitude && params.longitude) {
coordinates = {
@@ -264,33 +222,25 @@ export default {
lng: Number(params.longitude),
}
}
let prices
if (params.price_min || params.price_max) {
prices = { max: params.price_max, min: params.price_min }
} else if (data.prices.min || data.prices.max) {
prices = data.prices
} else {
prices = { max: null, min: null }
}
this.appliedFilters = params.q
console.log('Initial appliedFilters:', this.appliedFilters)
// let prices
// if (params.price_min || params.price_max) {
// prices = { max: params.price_max, min: params.price_min }
// } else if (data.prices.min || data.prices.max) {
// prices = data.prices
// } else {
// prices = { max: null, min: null }
// }
this.searchText = params.q
this.currentFilters = { category: params.category, q: params.q, price_min: params.price_min, price_max: params.price_max }
this.filters = data.filters
this.prices = prices
this.coordinates = coordinates
this.products = products
this.defaultProducts = defaultProducts
this.carouselProducts = carouselProducts
this.count = data.count
this.loadingProducts = false
},
mounted() {
this.currentFilters = this.appliedFilters
},
methods: {
async handlePageChange(value) {
const offset = (value - 1) * this.perPage
@@ -303,7 +253,7 @@ export default {
baseURL: config.public.baseURL,
method: 'GET',
params: {
...this.appliedFilters,
...this.currentFilters,
limit: 10,
offset: offset
},
@@ -315,11 +265,16 @@ export default {
},
async updateData(value) {
//console.log('updateData called with:', value)
const filters = { q: this.appliedFilters.q }
const query = Object.keys(value).length === 0 ? { ...filters } : { ...value, ...filters }
this.loadingProducts = true
// Actualizar filtros aplicados
const query = {};
if (this.searchText) query['q'] = this.searchText;
if (value.q) query['q'] = value.q;
if (value.category) query['category'] = value.category;
if (value.price_min > this.MIN_PRICE) query['price_min'] = value.price_min;
if (value.price_max < this.MAX_PRICE) query['price_max'] = value.price_max;
//console.log('Navigating to busqueda with query:', query)
this.$router.push({ name: 'busqueda', query })
const config = useRuntimeConfig()
@@ -334,65 +289,19 @@ export default {
this.loadingProducts = false
},
removeCategory(cat) {
this.currentFilters = this.appliedFilters
const categoryArray = this.currentFilters.category
const newCats = []
categoryArray.forEach((element) => {
if (element !== cat) {
newCats.push(element)
}
})
this.currentFilters.category = newCats
const noCategory = {}
Object.entries(this.currentFilters).forEach(([key, value]) => {
if (key !== 'category') {
noCategory[key] = value
}
})
if (newCats.length === 0) {
return this.$router.push({
path: this.$route.path,
query: { ...noCategory },
})
} else {
return this.$router.push({
path: this.$route.path,
query: { category: newCats, ...noCategory },
})
}
},
removeFilter(filter) {
this.currentFilters = { ...this.appliedFilters }
this.currentFilters = Object.fromEntries(
Object.entries(this.currentFilters).filter(([key]) => key !== filter)
)
return this.$router.push({
name: 'busqueda',
query: { ...this.currentFilters },
})
},
async search() {
this.currentFilters = { ...this.appliedFilters }
console.log('Searching for:', this.searchText)
if (this.searchText) {
this.appliedFilters = this.searchText
this.products = await this.updateData({ q: this.searchText })
}
this.currentFilters = {}
await this.updateData({ q: this.searchText })
},
clearFilters() {
this.currentFilters = null
this.appliedFilters = null
this.currentFilters = {}
this.searchText = ''
this.queryText = ''
this.$router.push({
name: 'busqueda'
name: 'busqueda', query: {}
})
this.updateData({})
},
},
}