wip busqueda page
This commit is contained in:
María
60
components/FacebookSignIn.vue
Normal file
60
components/FacebookSignIn.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div>
|
||||
<button class="button f-signin-btn" @click="logInWithFacebook">
|
||||
Login with Facebook
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
head() {
|
||||
return {
|
||||
script: [
|
||||
{
|
||||
src: 'https://connect.facebook.net/es_ES/sdk.js',
|
||||
defer: true,
|
||||
async: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
window.fbAsyncInit = async function () {
|
||||
await window.FB.init({
|
||||
appId: process.env.facebookId,
|
||||
cookie: true,
|
||||
version: 'v13.0',
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
async logInWithFacebook() {
|
||||
await window.FB.login(function (response) {
|
||||
if (response.authResponse) {
|
||||
console.log(response)
|
||||
alert('You are logged in & cookie set!')
|
||||
// Now you can redirect the user or do an AJAX request to
|
||||
// a PHP script that grabs the signed request from the cookie.
|
||||
} else {
|
||||
alert('User cancelled login or did not fully authorize.')
|
||||
}
|
||||
})
|
||||
return false
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scooped>
|
||||
.f-signin-btn {
|
||||
align-self: center;
|
||||
background-color: $color-facebook;
|
||||
color: $color-light;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
text-transform: uppercase;
|
||||
padding: 15px 20px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
</style>
|
||||
92
components/GoogleSignIn.vue
Normal file
92
components/GoogleSignIn.vue
Normal file
@@ -0,0 +1,92 @@
|
||||
<template>
|
||||
<button class="g-signin-btn" id="googleSignIn" type="button">
|
||||
Login with Google
|
||||
</button>
|
||||
<!-- id="google-signin-button"
|
||||
class="g-signin2"
|
||||
data-onsuccess="onGoogleSignIn" -->
|
||||
</template>
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
// function onGoogleSignIn(googleUser) {
|
||||
// // Useful data for your client-side scripts:
|
||||
// var profile = googleUser.getBasicProfile()
|
||||
// console.log('ID: ' + profile.getId()) // Don't send this directly to your server!
|
||||
// console.log('Full Name: ' + profile.getName())
|
||||
// console.log('Given Name: ' + profile.getGivenName())
|
||||
// console.log('Family Name: ' + profile.getFamilyName())
|
||||
// console.log('Image URL: ' + profile.getImageUrl())
|
||||
// console.log('Email: ' + profile.getEmail())
|
||||
|
||||
// // The ID token you need to pass to your backend:
|
||||
// var id_token = googleUser.getAuthResponse().id_token
|
||||
// console.log('ID Token: ' + id_token)
|
||||
// }
|
||||
|
||||
function onLoadGoogleCallback() {
|
||||
gapi.load('auth2', function () {
|
||||
const auth2 = gapi.auth2.init({
|
||||
client_id: process.env.googleId,
|
||||
cookiepolicy: 'single_host_origin',
|
||||
scope: 'profile',
|
||||
})
|
||||
|
||||
const element = document.getElementById('googleSignIn')
|
||||
auth2.attachClickHandler(
|
||||
element,
|
||||
{},
|
||||
function (googleUser) {
|
||||
console.log('Signed in: ' + googleUser.getBasicProfile().getName())
|
||||
},
|
||||
function (error) {
|
||||
console.log('Sign-in error', error)
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
head() {
|
||||
return {
|
||||
meta: [
|
||||
{
|
||||
name: 'google-signin-scope',
|
||||
content: 'profile email',
|
||||
},
|
||||
{
|
||||
name: 'google-signin-client_id',
|
||||
content: process.env.googleId,
|
||||
},
|
||||
],
|
||||
script: [
|
||||
{
|
||||
src: 'https://apis.google.com/js/platform.js',
|
||||
defer: true,
|
||||
async: true,
|
||||
},
|
||||
// {
|
||||
// src: 'https://apis.google.com/js/api:client.js',
|
||||
// },
|
||||
],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.onload = onLoadGoogleCallback
|
||||
},
|
||||
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.g-signin-btn {
|
||||
align-self: center;
|
||||
background-color: $color-google;
|
||||
color: $color-light;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
text-transform: uppercase;
|
||||
padding: 15px 20px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
</style>
|
||||
338
components/ProductFilter.vue
Normal file
338
components/ProductFilter.vue
Normal file
@@ -0,0 +1,338 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div v-b-toggle.collapse-all class="filters-header">
|
||||
<img
|
||||
class="image"
|
||||
src="@/assets/img/product-filter-filtrar.svg"
|
||||
alt=""
|
||||
/>
|
||||
<h2 class="text">FILTRAR POR</h2>
|
||||
</div>
|
||||
<BCollapse id="collapse-all" visible>
|
||||
<!-- Location -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="location">
|
||||
<div class="googleaddress-container">
|
||||
<!-- TODO: Revisar componente -->
|
||||
<!-- <GoogleAddress
|
||||
@addedData="getPlace"
|
||||
:geo="geo"
|
||||
:label="'Cercanía'"
|
||||
/> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="collapsible collapsible-range">
|
||||
<hr />
|
||||
<div v-b-toggle.collapse-price class="m-1 filter-header">
|
||||
<h2 class="title">Precio</h2>
|
||||
<img
|
||||
src="../assets/img/latienda-arrow-down.svg"
|
||||
alt=""
|
||||
class="arrow"
|
||||
/>
|
||||
</div>
|
||||
<BCollapse id="collapse-price" visible>
|
||||
<!-- Price -->
|
||||
<div class="filter-range-container">
|
||||
<ClientOnly>
|
||||
<v-range-slider
|
||||
v-model="priceRange"
|
||||
:min="0"
|
||||
:max="500"
|
||||
step="10"
|
||||
thumb-label="always"
|
||||
color="#8cead8"
|
||||
track-color="#d6d5d5"
|
||||
>
|
||||
<template #prepend>
|
||||
<span>{{ priceRange[0] }} €</span>
|
||||
</template>
|
||||
<template #append>
|
||||
<span>{{ priceRange[1] }} €</span>
|
||||
</template>
|
||||
</v-range-slider>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
<hr class="dotted-hr" />
|
||||
<div class="form-check">
|
||||
<input
|
||||
id="checkbox-shipped"
|
||||
v-model="filterForm.shipping_cost"
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
/>
|
||||
<label class="form-check-label" for="checkbox-shipped">
|
||||
Sin gastos de envío
|
||||
</label>
|
||||
</div>
|
||||
<hr class="dotted-hr" />
|
||||
<div class="form-check">
|
||||
<input
|
||||
id="checkbox-discount"
|
||||
v-model="filterForm.discount"
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
value=""
|
||||
/>
|
||||
<label class="form-check-label" for="checkbox-discount">
|
||||
Descuentos
|
||||
</label>
|
||||
</div>
|
||||
</BCollapse>
|
||||
</div>
|
||||
<div class="collapsible collapsible-checkboxes">
|
||||
<hr />
|
||||
<div v-b-toggle.collapse-categories class="m-1 filter-header">
|
||||
<h2 class="title">Categorías</h2>
|
||||
<img
|
||||
src="../assets/img/latienda-arrow-down.svg"
|
||||
alt=""
|
||||
class="arrow"
|
||||
/>
|
||||
</div>
|
||||
<BCollapse id="collapse-categories" visible>
|
||||
<div class="checkboxes">
|
||||
<div
|
||||
v-for="(n, index) in categories"
|
||||
:key="index"
|
||||
class="form-check"
|
||||
>
|
||||
<input
|
||||
:id="'checkbox-' + index"
|
||||
v-model="checkedCategories"
|
||||
class="form-check-input"
|
||||
type="checkbox"
|
||||
:value="n"
|
||||
/>
|
||||
<label class="form-check-label" :for="'checkbox-' + index">
|
||||
{{ n }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="filter-button" @click="applyFilters">
|
||||
Aplicar
|
||||
</button>
|
||||
</div>
|
||||
</BCollapse>
|
||||
</div>
|
||||
</BCollapse>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
filters: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
prices: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
currentFilters: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
geo: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
},
|
||||
|
||||
emits: ['applyFilters'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
filterForm: {
|
||||
shipping_cost: false,
|
||||
discount: false,
|
||||
},
|
||||
visible: true,
|
||||
checkedCategories: [],
|
||||
categories: [
|
||||
'Alimentación, bebida y tabaco',
|
||||
'Arte y ocio',
|
||||
'Bebés y niños pequeños',
|
||||
'Bricolaje',
|
||||
'Cámaras y ópticas',
|
||||
'Casa y jardín',
|
||||
'Economía e industria',
|
||||
'Electrónica',
|
||||
'Elementos religiosos y ceremoniales',
|
||||
'Equipamiento deportivo',
|
||||
'Juegos y juguetes',
|
||||
'Maletas y bolsos de viaje',
|
||||
'Material de oficina',
|
||||
'Mobiliario',
|
||||
'Multimedia',
|
||||
'Productos para adultos',
|
||||
'Productos para mascotas y animales',
|
||||
'Ropa y accesorios',
|
||||
'Salud y belleza',
|
||||
'Software',
|
||||
'Vehículos y recambios',
|
||||
],
|
||||
priceRange: [0, 500],
|
||||
priceRangeFilter: {},
|
||||
place: null,
|
||||
coordinates: null,
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
currentFilters(newCurrentFilters) {
|
||||
if (newCurrentFilters) {
|
||||
if (newCurrentFilters['category']) {
|
||||
this.checkedCategories = newCurrentFilters['category']
|
||||
} else {
|
||||
this.checkedCategories = []
|
||||
}
|
||||
if (Object.keys(newCurrentFilters).includes('shipping_cost')) {
|
||||
this.filterForm.shipping_cost = true
|
||||
} else {
|
||||
this.filterForm.shipping_cost = false
|
||||
}
|
||||
}
|
||||
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]
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getPlace(value) {
|
||||
this.place = value
|
||||
},
|
||||
|
||||
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)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.filter-button {
|
||||
margin-top: 30px;
|
||||
background-color: $color-navy;
|
||||
color: $color-light;
|
||||
font-size: $xs;
|
||||
padding: 0.5em 0.8em;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.filter-range-container {
|
||||
margin-top: 60px;
|
||||
}
|
||||
.filters-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 20px;
|
||||
outline: none;
|
||||
@include mobile {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.text {
|
||||
font-size: $s;
|
||||
margin: 0;
|
||||
margin-left: 10px;
|
||||
color: $color-navy;
|
||||
font-weight: $bold;
|
||||
}
|
||||
.image {
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.location {
|
||||
label {
|
||||
font-size: $s;
|
||||
color: $color-navy;
|
||||
font-weight: $bold;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
label:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 20px;
|
||||
background: url('../assets/img/product-filter-ubicacion.svg') center /
|
||||
contain no-repeat;
|
||||
}
|
||||
|
||||
.location-input {
|
||||
background-color: $color-grey-nav;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsible {
|
||||
.filter-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
outline: none;
|
||||
|
||||
h2 {
|
||||
font-size: $s;
|
||||
color: $color-navy;
|
||||
font-weight: $bold;
|
||||
}
|
||||
img {
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
label {
|
||||
display: inline-block;
|
||||
font-family: Noto Sans Regular, sans-serif;
|
||||
font-size: $s;
|
||||
color: $color-greytext;
|
||||
}
|
||||
}
|
||||
|
||||
.checkboxes {
|
||||
height: 6rem;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.dotted-hr {
|
||||
border-top: 2px dotted $color-greylighter;
|
||||
margin: 8px 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="container wrapper">
|
||||
<form @submit.prevent="search" class="search-container">
|
||||
<form class="search-container" @submit.prevent="search" >
|
||||
<div class="categorias-wrapper">
|
||||
<select v-model="selectedCategory" class="categorias">
|
||||
<option selected value="">Todas las categorías</option>
|
||||
@@ -15,13 +15,13 @@
|
||||
</div>
|
||||
<input
|
||||
id="searchbox"
|
||||
@focus="focused"
|
||||
@blur="focusedOut"
|
||||
v-model="searchText"
|
||||
class="search-text"
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
placeholder=""
|
||||
@focus="focused"
|
||||
@blur="focusedOut"
|
||||
/>
|
||||
<div class="search-link">
|
||||
<img
|
||||
@@ -76,7 +76,7 @@ export default {
|
||||
this.startTyping()
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
beforeUnmount() {
|
||||
this.stopTyping()
|
||||
},
|
||||
|
||||
@@ -96,8 +96,8 @@ export default {
|
||||
let i = 0
|
||||
let word = 0
|
||||
let step = 0
|
||||
let input = document.querySelector('#searchbox')
|
||||
let placeholderTexts = [
|
||||
const input = document.querySelector('#searchbox')
|
||||
const placeholderTexts = [
|
||||
'Jabón sólido',
|
||||
'Huertos de libertad',
|
||||
'Hierbabuena',
|
||||
|
||||
Reference in New Issue
Block a user