Skip to content

Commit

Permalink
Merge pull request #2 from vuestorefront-community/dev
Browse files Browse the repository at this point in the history 
Release v1.2.6
  • Loading branch information
@odranoelBR
odranoelBR authored Mar 24, 2022
2 parents f18ad8a + 3c045ce commit 291120f
Show file tree
Hide file tree
Showing 11 changed files with 748 additions and 521 deletions.
18 changes: 9 additions & 9 deletions components/CartSidebar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
data-cy="collected-product-cart-sidebar"
v-for="product in products"
:key="cartGetters.getItemSku(product)"
:image="cartGetters.getItemImage(product)"
:image="$image(cartGetters.getItemImage(product))"
:title="cartGetters.getItemName(product)"
:regular-price="
$n(cartGetters.getItemPrice(product).regular, 'currency')
Expand Down Expand Up @@ -92,15 +92,15 @@
class="sf-button--full-width color-secondary"
@click="toggleCartSidebar"
>
{{ $t("Go to checkout") }}
{{ $t('Go to checkout') }}
</SfButton>
</nuxt-link>
</div>
<div v-else>
<SfButton
class="sf-button--full-width color-primary"
@click="toggleCartSidebar"
>{{ $t("Go back shopping") }}</SfButton
>{{ $t('Go back shopping') }}</SfButton
>
</div>
</transition>
Expand All @@ -118,14 +118,14 @@ import {
SfPrice,
SfCollectedProduct,
SfImage
} from "@storefront-ui/vue";
import { computed } from "@nuxtjs/composition-api";
import { useCart, useUser, cartGetters } from "@vue-storefront/odoo";
import { useUiState } from "~/composables";
import { onSSR } from "@vue-storefront/core";
} from '@storefront-ui/vue';
import { computed } from '@nuxtjs/composition-api';
import { useCart, useUser, cartGetters } from '@vue-storefront/odoo';
import { useUiState } from '~/composables';
import { onSSR } from '@vue-storefront/core';
export default {
name: "Cart",
name: 'Cart',
components: {
SfSidebar,
SfButton,
Expand Down
336 changes: 336 additions & 0 deletions components/Category/FilterSideBar.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,336 @@
<template>
<SfSidebar
:visible="isFilterSidebarOpen"
title="Filters"
class="sidebar-filters"
@close="toggleFilterSidebar"
>
<div class="filters desktop-only">
<div v-for="(facet, i) in facets" :key="i">
<template v-if="isFacetPrice(facet)">
<SfHeading
:level="4"
:title="facet.label"
class="filters__title sf-heading--left"
/>

<SfRange
:value="[20, 600]"
:disabled="false"
:config="config"
v-model="price"
@change="selectPrice"
/>
</template>

<template v-if="facetHasMoreThanOneOption(facet)">
<SfHeading
:level="4"
:title="facet.label"
class="filters__title sf-heading--left"
:key="`filter-title-${facet.value}`"
/>
<div
v-if="isFacetColor(facet, facet.options)"
class="filters__colors"
:key="`${facet.value}-colors`"
>
<SfColor
v-for="option in facet.options"
:key="`${facet.id}-${option.value}`"
:data-cy="`category-filter_color_${option.value}`"
:color="option.htmlColor"
:selected="isFilterSelected(facet, option)"
class="filters__color tw-mr-3"
@click="() => selectFilter(facet, option)"
/>
</div>
<div v-else>
<SfFilter
v-for="option in facet.options"
:key="`${facet.id}-${option.value}`"
:data-cy="`category-filter_${facet.id}_${option.value}`"
:label="
option.label + `${option.count ? ` (${option.count})` : ''}`
"
:selected="isFilterSelected(facet, option)"
class="filters__item"
@change="() => selectFilter(facet, option)"
/>
</div>
</template>
</div>
</div>
<SfAccordion class="filters smartphone-only">
<div v-for="(facet, i) in facets" :key="i">
<SfAccordionItem
:key="`filter-title-${facet.id}`"
:header="facet.label"
class="filters__accordion-item"
>
<SfFilter
v-for="option in facet.options"
:key="`${facet.id}-${option.id}`"
:label="option.label"
:selected="isFilterSelected(facet, option)"
class="filters__item"
@change="() => selectFilter(facet, option)"
/>
</SfAccordionItem>
</div>
</SfAccordion>

<template #content-bottom>
<div class="filters__buttons">
<SfButton class="sf-button--full-width" @click="applyFilters">{{
$t('Done')
}}</SfButton>
<SfButton
class="sf-button--full-width filters__button-clear"
@click="clearFilters"
>{{ $t('Clear all') }}</SfButton
>
</div>
</template>
</SfSidebar>
</template>
<script >
import {
SfSidebar,
SfHeading,
SfFilter,
SfSelect,
SfCheckbox,
SfLoader,
SfColor,
SfButton,
SfProperty,
SfImage,
SfRange,
SfAccordion
} from '@storefront-ui/vue';
import { facetGetters } from '@vue-storefront/odoo';
import {
defineComponent,
ref,
onMounted,
reactive,
computed
} from '@nuxtjs/composition-api';
import { useUiState, useUiHelpers } from '~/composables';
export default defineComponent({
components: {
SfSidebar,
SfHeading,
SfFilter,
SfSelect,
SfCheckbox,
SfButton,
SfLoader,
SfColor,
SfProperty,
SfAccordion,
SfImage,
SfRange
},
props: {
facetsList: {
type: Object,
default: () => []
}
},
setup(props) {
const selectedFilters = ref([]);
const price = ref([]);
const config = reactive({
start: [40, 700],
range: { min: 20, max: 2000 },
step: 10,
connect: true,
direction: 'ltr',
orientation: 'horizontal',
behaviour: 'tap-drag',
tooltips: true,
keyboardSupport: true
});
const { changeFilters, isFacetColor, isFacetPrice, facetsFromUrlToFilter } =
useUiHelpers();
const { toggleFilterSidebar, isFilterSidebarOpen } = useUiState();
const clearFilters = () => {
toggleFilterSidebar();
selectedFilters.value = [];
changeFilters(selectedFilters.value);
};
const applyFilters = () => {
toggleFilterSidebar();
changeFilters(selectedFilters.value);
};
const isFilterSelected = (facet, option) => {
return selectedFilters.value.some(
(filter) => String(filter.id) === String(option.value)
);
};
const facetHasMoreThanOneOption = (facet) =>
facet?.options?.length > 1 || false;
const selectPrice = (values) => {
const newValue = `${values[0]}-${values[1]}`;
price.value = values;
const selectedValue = selectedFilters.value.find(
(item) => item?.filterName === 'price'
);
if (selectedValue) {
selectedValue.id = newValue;
return;
}
selectedFilters.value.push({
label: 'Price',
filterName: 'price',
id: newValue
});
};
const selectFilter = (facet, option) => {
const alreadySelectedIndex = selectedFilters.value.findIndex(
(filter) => String(filter.id) === String(option.value)
);
if (alreadySelectedIndex === -1) {
selectedFilters.value.push({
filterName: facet.label,
label: option.label,
id: option.value
});
return;
}
selectedFilters.value.splice(alreadySelectedIndex, 1);
};
const facets = computed(() => [
{
id: null,
label: 'Price',
type: 'price'
},
...facetGetters.getGrouped(props.facetsList, ['color', 'size'])
]);
const setPrice = () => {
const selectedValue = selectedFilters.value.find(
(item) => item?.filterName === 'price'
);
if (selectedValue) {
const splitedPriceFromUrl = selectedValue?.id?.split('-');
price.value = [splitedPriceFromUrl];
config.start = splitedPriceFromUrl.map((item) => parseInt(item));
}
};
onMounted(() => {
selectedFilters.value = facetsFromUrlToFilter();
setPrice();
});
return {
price,
selectPrice,
facetHasMoreThanOneOption,
isFilterSidebarOpen,
facets,
config,
toggleFilterSidebar,
isFacetColor,
selectedFilters,
isFacetPrice,
selectFilter,
isFilterSelected,
clearFilters,
applyFilters
};
}
});
</script>
<style scoped lang="scss">
.sidebar-filters {
--sidebar-title-display: none;
--sidebar-top-padding: 0;
@include for-desktop {
--sidebar-content-padding: 0 var(--spacer-xl);
--sidebar-bottom-padding: 0 var(--spacer-xl);
}
}
.sf-range {
width: 80%;
}
.filters {
&__title {
--heading-title-font-size: var(--font-size--xl);
margin: var(--spacer-xl) 0 var(--spacer-base) 0;
&:first-child {
margin: calc(var(--spacer-xl) + var(--spacer-base)) 0 var(--spacer-xs) 0;
}
}
&__colors {
display: flex;
}
&__color {
margin: var(--spacer-xs) var(--spacer-xs) var(--spacer-xs) 0;
}
&__chosen {
color: var(--c-text-muted);
font-weight: var(--font-weight--normal);
font-family: var(--font-family--secondary);
position: absolute;
right: var(--spacer-xl);
}
&__item {
--radio-container-padding: 0 var(--spacer-sm) 0 var(--spacer-xl);
--radio-background: transparent;
--filter-label-color: var(--c-secondary-variant);
--filter-count-color: var(--c-secondary-variant);
--checkbox-padding: 0 var(--spacer-sm) 0 var(--spacer-xl);
padding: var(--spacer-sm) 0;
border-bottom: 1px solid var(--c-light);
&:last-child {
border-bottom: 0;
}
@include for-desktop {
--checkbox-padding: 0;
margin: var(--spacer-sm) 0;
border: 0;
padding: 0;
}
}
&__accordion-item {
--accordion-item-content-padding: 0;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
width: 100vw;
}
&__buttons {
margin: var(--spacer-sm) 0;
}
&__button-clear {
--button-background: var(--c-light);
--button-color: var(--c-dark-variant);
margin: var(--spacer-xs) 0 0 0;
}
}
</style>
Loading

0 comments on commit 291120f

Please sign in to comment.