jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Breaking out funnel into repeatable template

Browse source
This commit is contained in:
Max 2021-10-18 10:00:22 -04:00
parent ff5409dbf6
commit 1ff96792dc
9 changed files with 88 additions and 301 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/assets/scss/components/_SelectCar.scss
View file

@ -34,13 +34,25 @@
transform: translateX(30vw); transform: translateX(30vw);
} }
.slide-enter-active, .slide-leave-active { .slide-enter-active, .slide-leave-active {
transition: all .3s; transition: all .4s;
} }
.slide-leave-to { .slide-leave-to {
opacity: 0; opacity: 0;
transform: translateX(-30vw); transform: translateX(-30vw);
} }
.slide_reverse-enter-from {
opacity: 0;
transform: translateX(-30vw);
}
.slide_reverse-enter-active, .slide_reverse-leave-active {
transition: all .4s;
}
.slide_reverse-leave-to {
opacity: 0;
transform: translateX(30vw);
}
.fade-enter-from, .fade-leave-to { .fade-enter-from, .fade-leave-to {
opacity: 0; opacity: 0;
} }

21
src/layouts/SelectCar/SelectCarTemplate.vue → src/layouts/SelectCar/BaseTemplate.vue
View file

@ -7,24 +7,27 @@
</div> </div>
<div class="current_car_info mb-4"> <div class="current_car_info mb-4">
<transition appear name="fade"> <transition appear name="fade">
<div class="current_car_info-text" v-on:click="goBack()"> <div v-if="backFunction" class="current_car_info-text" v-on:click="backFunction()">
<p class="text-center text-secondary fs-5">{{ this.currentCarInfo }}</p>
</div>
<div v-else class="current_car_info-text">
<p class="text-center text-secondary fs-5">{{ this.currentCarInfo }}</p> <p class="text-center text-secondary fs-5">{{ this.currentCarInfo }}</p>
</div> </div>
</transition> </transition>
</div> </div>
<transition appear name="slide"> <transition appear :name="slideTransition">
<div class="needed_car_info d-flex overflow-hidden"> <div class="needed_car_info d-flex overflow-hidden">
<p class="text-center fs-6 fw-bold needed_car_info-text">{{ this.neededCarInfo }}</p> <p class="text-center fs-6 fw-bold needed_car_info-text">{{ this.neededCarInfo }}</p>
</div> </div>
</transition> </transition>
</div> </div>
<transition appear name="slide"> <transition appear :name="slideTransition">
<form class="list-view d-flex "> <form class="list-view d-flex ">
<div class="car_list car_models"> <div class="car_list car_models">
<div v-for="attritbute in attritbutes" :key="attritbute" class="mb-2"> <div v-for="attritbute in attritbutes" :key="attritbute" class="mb-2">
<Button <Button
:buttonText="attritbute" :buttonText="attritbute"
v-on:click="backFunction(attritbute)" v-on:click="selectAttribute(attritbute)"
buttonType="btn-funnel" buttonType="btn-funnel"
/> />
</div> </div>
@ -36,14 +39,20 @@
</template> </template>
<script> <script>
import Button from '@/sharedcomponents/Button';
export default { export default {
name: 'SelectCarTemplate', name: 'SCTemplate',
props: { props: {
currentCarInfo: String, currentCarInfo: String,
neededCarInfo: String, neededCarInfo: String,
attritbutes: Array, attritbutes: Array,
backFunction: Function backFunction: Function,
selectAttribute: Function,
slideTransition: String
},
components: {
Button
} }
} }
</script> </script>

140
src/layouts/SelectCar/SelectCar.vue
View file

@ -1,140 +0,0 @@
<template>
<div class="select-car sticky-lg-top py-4">
<div class="select-car-form overflow-hidden p-3 rounded">
<div class="car_info text-center">
<div class="car-image mb-3">
<img class="vehicle-image blur img-fluid" src="https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg" />
</div>
<div class="current_car_info mb-4">
<transition name="slide-fade">
<div class="current_car_info-text" v-if="translate === 0">
<p class="text-center text-secondary fs-5">Select a year to get started</p>
</div>
</transition>
<transition name="slide-fade">
<div v-on:click="translateView(false)" class="current_car_info-text pointer d-flex justify-content-center" v-if="translate === -100">
<p class="text-center text-secondary fs-5">{{ this.year }}</p>
</div>
</transition>
<transition name="slide-fade">
<div v-on:click="translateView(false)" class="current_car_info-text pointer d-flex justify-content-center" v-if="translate === -200">
<p class="text-center text-secondary fs-5">{{ this.year }} {{ this.make }}</p>
</div>
</transition>
<transition name="slide-fade">
<div v-on:click="translateView(false)" class="current_car_info-text pointer d-flex justify-content-center" v-if="translate === -300">
<p class="text-center text-secondary fs-5">{{ this.year }} {{ this.make }} {{ this.model }}</p>
</div>
</transition>
</div>
<div class="needed_car_info d-flex overflow-hidden">
<p class="text-center fs-6 fw-bold needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What year is your vehicle?</p>
<p class="text-center fs-6 fw-bold needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What make is your vehicle?</p>
<p class="text-center fs-6 fw-bold needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What is the model of your {{ this.make }}?</p>
<p class="text-center fs-6 fw-bold needed_car_info-text" v-bind:style="{transform: carViewTranslate}">What style is your {{ this.model }}?</p>
</div>
</div>
<form class="list-view d-flex ">
<div class="car_list car_years" v-bind:style="{transform: carViewTranslate}">
<div v-for="year in years" :key="year" class="mb-2">
<Button
:buttonText="year"
v-on:click="selectAttribute(year, 'year')"
buttonType="btn-funnel"
/>
</div>
</div>
<div class="car_list car_brands" v-bind:style="{transform: carViewTranslate}">
<div v-for="make in makes" :key="make" class="mb-2">
<Button
:buttonText="make"
v-on:click="selectAttribute(make, 'make')"
buttonType="btn-funnel"
/>
</div>
</div>
<div class="car_list car_models" v-bind:style="{transform: carViewTranslate}">
<div v-for="model in models" :key="model" class="mb-2">
<Button
:buttonText="model"
v-on:click="selectAttribute(model, 'model')"
buttonType="btn-funnel"
/>
</div>
</div>
<div class="car_list car_styles" v-bind:style="{transform: carViewTranslate}">
<div v-for="style in styles" :key="style" class="mb-2">
<Button
:buttonText="style"
buttonType="btn-funnel"
/>
</div>
</div>
</form>
</div>
</div>
</template>
<script>
import axios from 'axios';
import Button from '../../sharedcomponents/Button';
export default {
name: 'SelectCar',
data() {
return {
years: [],
makes: [],
models: [],
styles: [],
translate: 0,
carViewTranslate: 'translateX(0%)',
year: '',
make: '',
model: ''
}
},
mounted() {
axios.get("https://mockey.qa.sagaws.net/service/years").then((response) => {
this.years = response.data.Result;
console.log(this.years);
});
},
methods: {
translateView(forward=true) {
this.translate = forward ? this.translate - 100 : this.translate + 100;
this.carViewTranslate = `translateX(${this.translate}%)`;
},
selectAttribute(attribute, attributeType){
let link;
switch (attributeType) {
case 'year':
link = `https://mockey.qa.sagaws.net/service/makes/year=${attribute}`;
this.year = attribute;
axios.get(link).then((response) => {
this.makes = response.data.Result;
});
break;
case 'make':
link = `https://mockey.qa.sagaws.net/service/models/year=${this.year}/make=${attribute}`;
this.make = attribute;
axios.get(link).then((response) => {
this.models = response.data.Result;
});
break;
case 'model':
link = `https://mockey.qa.sagaws.net/service/styles/year=${this.year}/make=${this.make}/model=${attribute}`;
this.model = attribute;
axios.get(link).then((response) => {
this.styles = response.data.Result;
});
break;
}
this.translateView();
}
},
components: {
Button
}
}
</script>

49
src/layouts/SelectCar/SelectMake.vue
View file

@ -1,59 +1,36 @@
<template> <template>
<div class="select-car sticky-lg-top py-4"> <div>
<div class="select-car-form overflow-hidden p-3 rounded"> <baseTemplate
<div class="car_info text-center"> :currentCarInfo="year"
<div class="car-image mb-3"> neededCarInfo="What make is your vehicle?"
<img class="vehicle-image blur img-fluid" src="https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg" /> :attritbutes="makes"
</div> :backFunction="goBack"
<div class="current_car_info mb-4"> :selectAttribute="selectMake"
<transition appear name="fade"> :transition='slideTransition'
<div class="current_car_info-text" v-on:click="goBack()"> />
<p class="text-center text-secondary fs-5">{{ year }}</p>
</div>
</transition>
</div>
<transition appear name="slide">
<div class="needed_car_info d-flex overflow-hidden">
<p class="text-center fs-6 fw-bold needed_car_info-text">What make is your vehicle?</p>
</div>
</transition>
</div>
<transition appear name="slide">
<form class="list-view d-flex ">
<div class="car_list car_makes">
<div v-for="make in makes" :key="make" class="mb-2">
<Button
:buttonText="make"
v-on:click="selectMake(make)"
buttonType="btn-funnel"
/>
</div>
</div>
</form>
</transition>
</div>
</div> </div>
</template> </template>
<script> <script>
import Button from '@/sharedcomponents/Button'; import baseTemplate from './BaseTemplate';
import { mapState } from 'vuex'; import { mapState } from 'vuex';
export default { export default {
name: 'SelectCar', name: 'SelectCar',
computed: { computed: {
...mapState(['year', 'makes']) ...mapState(['year', 'makes', 'slideTransition'])
}, },
methods: { methods: {
selectMake(make){ selectMake(make){
this.$store.dispatch('selectMake', make); this.$store.dispatch('selectMake', make);
}, },
goBack(){ goBack(){
this.$store.state.slideTransition = 'slide_reverse'
this.$router.push('/select-year'); this.$router.push('/select-year');
} }
}, },
components: { components: {
Button baseTemplate
} }
} }
</script> </script>

50
src/layouts/SelectCar/SelectModel.vue
View file

@ -1,59 +1,35 @@
<template> <template>
<div class="select-car sticky-lg-top py-4"> <div>
<div class="select-car-form overflow-hidden p-3 rounded"> <baseTemplate
<div class="car_info text-center"> :currentCarInfo="year + ' ' + make"
<div class="car-image mb-3"> :neededCarInfo="'What is the model of your ' + make + '?'"
<img class="vehicle-image blur img-fluid" src="https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg" /> :attritbutes="models"
</div> :backFunction="goBack"
<div class="current_car_info mb-4"> :selectAttribute="selectModel"
<transition appear name="fade"> :transition='slideTransition'
<div class="current_car_info-text" v-on:click="goBack()"> />
<p class="text-center text-secondary fs-5">{{ year }} {{ make }}</p>
</div>
</transition>
</div>
<transition appear name="slide">
<div class="needed_car_info d-flex overflow-hidden">
<p class="text-center fs-6 fw-bold needed_car_info-text">What is the model of your {{ make }}?</p>
</div>
</transition>
</div>
<transition appear name="slide">
<form class="list-view d-flex ">
<div class="car_list car_models">
<div v-for="model in models" :key="model" class="mb-2">
<Button
:buttonText="model"
v-on:click="selectModel(model)"
buttonType="btn-funnel"
/>
</div>
</div>
</form>
</transition>
</div>
</div> </div>
</template> </template>
<script> <script>
import Button from '@/sharedcomponents/Button'; import baseTemplate from './BaseTemplate';
import { mapState } from 'vuex' import { mapState } from 'vuex'
export default { export default {
name: 'SelectCar', name: 'SelectCar',
computed: { computed: {
...mapState(['year', 'make', 'models']) ...mapState(['year', 'make', 'models', 'slideTransition'])
}, },
methods: { methods: {
selectModel(model){ selectModel(model){
this.$store.dispatch('selectModel', model); this.$store.dispatch('selectModel', model);
}, },
goBack(){ goBack(){
this.$router.push(`/select-make#year=${this.$store.state.year}`); this.$router.push(`/select-make?year=${this.$store.state.year}`);
} }
}, },
components: { components: {
Button baseTemplate
} }
} }
</script> </script>

48
src/layouts/SelectCar/SelectStyle.vue
View file

@ -1,55 +1,31 @@
<template> <template>
<div class="select-car sticky-lg-top py-4"> <div>
<div class="select-car-form overflow-hidden p-3 rounded"> <baseTemplate
<div class="car_info text-center"> :currentCarInfo="year + ' ' + make + ' ' + model"
<div class="car-image mb-3"> :neededCarInfo="'What style is your ' + model + '?'"
<img class="vehicle-image blur img-fluid" src="https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg" /> :attritbutes="styles"
</div> :backFunction="goBack"
<div class="current_car_info mb-4"> :transition='slideTransition'
<transition appear name="fade"> />
<div class="current_car_info-text" v-on:click="goBack()">
<p class="text-center text-secondary fs-5">{{ year }} {{ make }} {{ model }}</p>
</div>
</transition>
</div>
<transition appear name="slide">
<div class="needed_car_info d-flex overflow-hidden">
<p class="text-center fs-6 fw-bold needed_car_info-text">What style is your {{ model }}?</p>
</div>
</transition>
</div>
<transition appear name="slide">
<form class="list-view d-flex ">
<div class="car_list car_models">
<div v-for="style in styles" :key="style" class="mb-2">
<Button
:buttonText="style"
buttonType="btn-funnel"
/>
</div>
</div>
</form>
</transition>
</div>
</div> </div>
</template> </template>
<script> <script>
import Button from '@/sharedcomponents/Button'; import baseTemplate from './BaseTemplate';
import { mapState } from 'vuex' import { mapState } from 'vuex'
export default { export default {
name: 'SelectCar', name: 'SelectCar',
computed: { computed: {
...mapState(['year', 'make', 'model', 'styles']) ...mapState(['year', 'make', 'model', 'styles', 'slideTransition'])
}, },
methods: { methods: {
goBack(){ goBack(){
this.$router.push(`/select-model#year=${this.$store.state.year}/make=${this.$store.state.make}`); this.$router.push(`/select-model?year=${this.$store.state.year}&make=${this.$store.state.make}`);
} }
}, },
components: { components: {
Button baseTemplate
} }
} }
</script> </script>

49
src/layouts/SelectCar/SelectYear.vue
View file

@ -1,43 +1,19 @@
<template> <template>
<div class="select-car sticky-lg-top py-4"> <div>
<div class="select-car-form overflow-hidden p-3 rounded"> <baseTemplate
<div class="car_info text-center"> currentCarInfo="Select a year to get started"
<div class="car-image mb-3"> neededCarInfo="What year is your vehicle?"
<img class="vehicle-image blur img-fluid" src="https://s3.amazonaws.com/safelite-lab-vehicle-images/Evox/8963_cc0320_032_UG_white_2014_Ford_Focus_18029225538399034889.jpg" /> :attritbutes="years"
</div> :selectAttribute="selectYear"
<div class="current_car_info mb-4"> :transition='slideTransition'
<transition appear name="fade"> />
<div class="current_car_info-text">
<p class="text-center text-secondary fs-5">Select a year to get started</p>
</div>
</transition>
</div>
<transition appear name="slide">
<div class="needed_car_info d-flex overflow-hidden">
<p class="text-center fs-6 fw-bold needed_car_info-text">What year is your vehicle?</p>
</div>
</transition>
</div>
<transition appear name="slide">
<form class="list-view d-flex ">
<div class="car_list car_years">
<div v-for="year in years" :key="year" class="mb-2">
<Button
:buttonText="year"
v-on:click="selectYear(year)"
buttonType="btn-funnel"
/>
</div>
</div>
</form>
</transition>
</div>
</div> </div>
</template> </template>
<script> <script>
import baseTemplate from './BaseTemplate';
import { mapState } from 'vuex';
import axios from 'axios'; import axios from 'axios';
import Button from '@/sharedcomponents/Button';
export default { export default {
name: 'SelectCar', name: 'SelectCar',
@ -46,6 +22,9 @@ export default {
years: [] years: []
} }
}, },
computed: {
...mapState(['slideTransition'])
},
mounted() { mounted() {
axios.get("https://mockey.qa.sagaws.net/service/years").then((response) => { axios.get("https://mockey.qa.sagaws.net/service/years").then((response) => {
this.years = response.data.Result; this.years = response.data.Result;
@ -57,7 +36,7 @@ export default {
} }
}, },
components: { components: {
Button baseTemplate
} }
} }
</script> </script>

6
src/router/index.js
View file

@ -1,6 +1,5 @@
import { createWebHistory, createRouter } from "vue-router"; import { createWebHistory, createRouter } from "vue-router";
import Home from "@/layouts/ContentSite/Home.vue"; import Home from "@/layouts/ContentSite/Home.vue";
import SelectCar from "@/layouts/SelectCar/SelectCar.vue";
import SelectYear from "@/layouts/SelectCar/SelectYear.vue"; import SelectYear from "@/layouts/SelectCar/SelectYear.vue";
import SelectMake from "@/layouts/SelectCar/SelectMake.vue"; import SelectMake from "@/layouts/SelectCar/SelectMake.vue";
import SelectModel from "@/layouts/SelectCar/SelectModel.vue"; import SelectModel from "@/layouts/SelectCar/SelectModel.vue";
@ -12,11 +11,6 @@ const routes = [
name: "Home", name: "Home",
component: Home, component: Home,
}, },
{
path: "/select-car",
name: "SelectCar",
component: SelectCar,
},
{ {
path: "/select-year", path: "/select-year",
name: "SelectYear", name: "SelectYear",

12
src/store/index.js
View file

@ -13,37 +13,41 @@ export default createStore({
styles: [], styles: [],
year: '', year: '',
make: '', make: '',
model: '' model: '',
slideTransition: 'none'
}, },
mutations: { mutations: {
updateYear(state, data){ updateYear(state, data){
state.year = data.year; state.year = data.year;
state.makes = data.makes.data.Result; state.makes = data.makes.data.Result;
state.slideTransition = 'slide'
}, },
updateMake(state, data){ updateMake(state, data){
state.make = data.make; state.make = data.make;
state.models = data.models.data.Result; state.models = data.models.data.Result;
state.slideTransition = 'slide'
}, },
updateModel(state, data){ updateModel(state, data){
state.model = data.model; state.model = data.model;
state.styles = data.styles.data.Result; state.styles = data.styles.data.Result;
state.slideTransition = 'slide'
} }
}, },
actions: { actions: {
async selectYear(context, year){ async selectYear(context, year){
const makes = await axios.get(`https://mockey.qa.sagaws.net/service/makes/year=${year}`); const makes = await axios.get(`https://mockey.qa.sagaws.net/service/makes/year=${year}`);
context.commit('updateYear', {year, makes}); context.commit('updateYear', {year, makes});
router.push(`/select-make#year=${year}`); router.push(`/select-make?year=${year}`);
}, },
async selectMake({commit, state}, make){ async selectMake({commit, state}, make){
const models = await axios.get(`https://mockey.qa.sagaws.net/service/models/year=${state.year}/make=${make}`); const models = await axios.get(`https://mockey.qa.sagaws.net/service/models/year=${state.year}/make=${make}`);
commit('updateMake', {make, models}); commit('updateMake', {make, models});
router.push(`/select-model#year=${state.year}/make=${make}`); router.push(`/select-model?year=${state.year}&make=${make}`);
}, },
async selectModel({commit, state}, model){ async selectModel({commit, state}, model){
const styles = await axios.get(`https://mockey.qa.sagaws.net/service/styles/year=${state.year}/make=${state.make}/model=${model}`); const styles = await axios.get(`https://mockey.qa.sagaws.net/service/styles/year=${state.year}/make=${state.make}/model=${model}`);
commit('updateModel', {model, styles}); commit('updateModel', {model, styles});
router.push(`/select-style#year=${state.year}/make=${state.make}/model=${model}`); router.push(`/select-style?year=${state.year}&make=${state.make}&model=${model}`);
} }
} }