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

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,32 +222,24 @@ 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) {
@@ -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({})
},
},
}