From 7a5bd2658fd04130499617e4ce2337de54acf947 Mon Sep 17 00:00:00 2001 From: Leonardo Muniz Date: Fri, 25 Mar 2022 13:13:18 -0300 Subject: [PATCH] [IMP] update to vsf odoo 1.3.0 --- assets/css/category.scss | 156 +++++++++++++++++++++++++ assets/css/mobileMenuSideBar.scss | 24 ++++ components/AppHeader.vue | 59 +++++----- components/MobileMenuSidebar.vue | 161 ++++++++++++++++++++++++++ components/SearchResults.vue | 36 +++--- composables/useUiHelpers/index.ts | 2 +- layouts/default.vue | 35 ++++-- package.json | 4 +- pages/Category.vue | 181 ++---------------------------- yarn.lock | 18 +-- 10 files changed, 438 insertions(+), 238 deletions(-) create mode 100644 assets/css/category.scss create mode 100644 assets/css/mobileMenuSideBar.scss create mode 100644 components/MobileMenuSidebar.vue diff --git a/assets/css/category.scss b/assets/css/category.scss new file mode 100644 index 00000000..3e6e60fe --- /dev/null +++ b/assets/css/category.scss @@ -0,0 +1,156 @@ +#category { + box-sizing: border-box; + @include for-desktop { + max-width: 1240px; + margin: 0 auto; + } + } + .main { + &.section { + padding: var(--spacer-xs); + @include for-desktop { + padding: 0; + } + } + } + .breadcrumbs { + margin: var(--spacer-base) auto var(--spacer-lg); + text-transform: capitalize; + } + + .sort-by { + flex: unset; + width: 11.875rem; + } + .main { + display: flex; + } + + .sidebar { + flex: 0 0 15%; + padding: var(--spacer-sm); + border: 1px solid var(--c-light); + border-width: 0 1px 0 0; + } + .list { + --menu-item-font-size: var(--font-size--sm); + &__item { + &:not(:last-of-type) { + --list-item-margin: 0 0 var(--spacer-sm) 0; + } + + .nuxt-link-exact-active { + text-decoration: underline; + } + } + } + .products { + box-sizing: border-box; + flex: 1; + margin: 0; + &__grid { + justify-content: space-between; + @include for-desktop { + justify-content: flex-start; + } + } + &__grid, + &__list { + display: flex; + flex-wrap: wrap; + } + &__product-card { + --product-card-title-margin: var(--spacer-base) 0 0 0; + --product-card-title-font-weight: var(--font-weight--medium); + --product-card-title-margin: var(--spacer-xs) 0 0 0; + flex: 1 1 50%; + @include for-desktop { + --product-card-title-font-weight: var(--font-weight--normal); + --product-card-add-button-bottom: var(--spacer-base); + --product-card-title-margin: var(--spacer-sm) 0 0 0; + } + } + &__product-card-horizontal { + flex: 0 0 100%; + } + &__slide-enter { + opacity: 0; + transform: scale(0.5); + } + &__slide-enter-active { + transition: all 0.2s ease; + transition-delay: calc(0.1s * var(--index)); + } + @include for-desktop { + &__grid { + margin: var(--spacer-sm) 0 0 var(--spacer-sm); + } + &__pagination { + display: flex; + justify-content: flex-start; + margin: var(--spacer-xl) 0 0 0; + } + &__product-card-horizontal { + margin: var(--spacer-lg) 0; + } + &__product-card { + flex: 1 1 25%; + } + &__list { + margin: 0 0 0 var(--spacer-sm); + } + } + &__show-on-page { + display: flex; + justify-content: flex-end; + align-items: baseline; + &__label { + font-family: var(--font-family--secondary); + font-size: var(--font-size--sm); + } + } + } + .loading { + margin: var(--spacer-3xl) auto; + @include for-desktop { + margin-top: 6.25rem; + } + } + ::v-deep .sf-sidebar__aside { + --sidebar-z-index: 3; + } + + .before-results { + box-sizing: border-box; + padding: var(--spacer-lg) var(--spacer-sm) var(--spacer-2xl); + width: 100%; + text-align: center; + @include for-desktop { + padding: 0; + } + &__picture { + --image-width: 230px; + margin-top: var(--spacer-2xl); + @include for-desktop { + --image-width: 18.75rem; + margin-top: var(--spacer-base); + } + } + &__paragraph { + font-family: var(--font-family--primary); + font-weight: var(--font-weight--normal); + font-size: var(--font-size--base); + color: var(--c-text-muted); + margin: 0; + @include for-desktop { + font-size: var(--font-size--lg); + } + &:first-of-type { + margin: var(--spacer-xl) auto var(--spacer-xs); + } + } + &__button { + margin: var(--spacer-xl) auto; + width: 100%; + } + } \ No newline at end of file diff --git a/assets/css/mobileMenuSideBar.scss b/assets/css/mobileMenuSideBar.scss new file mode 100644 index 00000000..4825266a --- /dev/null +++ b/assets/css/mobileMenuSideBar.scss @@ -0,0 +1,24 @@ +.mobileMenu { + --sidebar-z-index: 3; + --overlay-z-index: 3; + --sidebar-top-padding: var(--spacer-lg) var(--spacer-base) 0 + var(--spacer-base); + --sidebar-content-padding: var(--spacer-lg) var(--spacer-base); + } + + .heading { + &__wrapper { + --heading-title-color: var(--c-link); + --heading-title-font-weight: var(--font-weight--semibold); + display: flex; + justify-content: space-between; + } + } + + .sidebar-bottom { + margin: auto 0 0 0; + } + +::v-deep .sf-list .sf-list__item { + padding: 10px 0; +} diff --git a/components/AppHeader.vue b/components/AppHeader.vue index 9bf0c00d..9b2afbda 100644 --- a/components/AppHeader.vue +++ b/components/AppHeader.vue @@ -120,8 +120,8 @@ import { SfOverlay, SfBadge, SfHeader -} from "@storefront-ui/vue"; -import { useUiState } from "~/composables"; +} from '@storefront-ui/vue'; +import { useUiState } from '~/composables'; import { useCart, useWishlist, @@ -130,16 +130,16 @@ import { categoryGetters, useCategory, useFacet -} from "@vue-storefront/odoo"; -import { clickOutside } from "@storefront-ui/vue/src/utilities/directives/click-outside/click-outside-directive.js"; -import { computed, ref, watch } from "@nuxtjs/composition-api"; -import { onSSR } from "@vue-storefront/core"; -import { useUiHelpers } from "~/composables"; -import LocaleSelector from "./LocaleSelector"; -import SearchResults from "~/components/SearchResults"; +} from '@vue-storefront/odoo'; +import { clickOutside } from '@storefront-ui/vue/src/utilities/directives/click-outside/click-outside-directive.js'; +import { computed, ref, watch } from '@nuxtjs/composition-api'; +import { onSSR } from '@vue-storefront/core'; +import { useUiHelpers } from '~/composables'; +import LocaleSelector from './LocaleSelector'; +import SearchResults from '~/components/SearchResults'; -import debounce from "lodash.debounce"; -import { mapMobileObserver } from "@storefront-ui/vue/src/utilities/mobile-observer.js"; +import debounce from 'lodash.debounce'; +import { mapMobileObserver } from '@storefront-ui/vue/src/utilities/mobile-observer.js'; export default { components: { SfHeader, @@ -160,20 +160,15 @@ export default { const isSearchOpen = ref(false); const { changeSearchTerm } = useUiHelpers(); - const { - toggleCartSidebar, - toggleWishlistSidebar, - toggleLoginModal - } = useUiState(); + const { toggleCartSidebar, toggleWishlistSidebar, toggleLoginModal } = + useUiState(); const { load: loadUser, isAuthenticated } = useUser(); const { load: loadCart, cart } = useCart(); const { load: loadWishlist, wishlist } = useWishlist(); - const { search: searchProductApi, result } = useFacet("AppHeader:Search"); - const { - categories: topCategories, - search: searchTopCategoryApi - } = useCategory("AppHeader:TopCategories"); + const { search: searchProductApi, result } = useFacet('AppHeader:Search'); + const { categories: topCategories, search: searchTopCategoryApi } = + useCategory('AppHeader:TopCategories'); const isMobile = computed(() => mapMobileObserver().isMobile.get()); @@ -182,7 +177,7 @@ export default { return count ? count.toString() : null; }); const accountIcon = computed(() => - isAuthenticated.value ? "profile_fill" : "profile" + isAuthenticated.value ? 'profile_fill' : 'profile' ); const removeSearchResults = () => { @@ -191,11 +186,11 @@ export default { const closeSearch = () => { if (!isSearchOpen.value) return; - term.value = ""; + term.value = ''; isSearchOpen.value = false; }; - const handleSearch = debounce(async paramValue => { + const handleSearch = debounce(async (paramValue) => { if (!paramValue.target) { term.value = paramValue; } else { @@ -203,26 +198,30 @@ export default { } if (term.value.length < 2) return; - await searchProductApi({ search: term.value, pageSize: 12 }); + await searchProductApi({ + search: term.value, + pageSize: 12, + fetchCategory: true + }); formatedResult.value = { products: result?.value?.data?.products, categories: result?.value?.data?.categories - .filter(category => category.childs === null) - .map(category => categoryGetters.getTree(category)) + .filter((category) => category.childs === null) + .map((category) => categoryGetters.getTree(category)) }; }, 100); const closeOrFocusSearchBar = () => { if (isMobile.value) { return closeSearch(); } - term.value = ""; + term.value = ''; return searchBarRef.value.$el.children[0].focus(); }; // TODO: https://github.com/DivanteLtd/vue-storefront/issues/4927 const handleAccountClick = async () => { if (isAuthenticated.value) { - return root.$router.push("/my-account"); + return root.$router.push('/my-account'); } toggleLoginModal(); @@ -230,7 +229,7 @@ export default { const filteredTopCategories = computed(() => topCategories.value.filter( - cat => cat.name === "WOMEN" || cat.name === "MEN" + (cat) => cat.name === 'WOMEN' || cat.name === 'MEN' ) ); diff --git a/components/MobileMenuSidebar.vue b/components/MobileMenuSidebar.vue new file mode 100644 index 00000000..d3c7baf5 --- /dev/null +++ b/components/MobileMenuSidebar.vue @@ -0,0 +1,161 @@ + + + + diff --git a/components/SearchResults.vue b/components/SearchResults.vue index 2c8768d0..9d04f844 100644 --- a/components/SearchResults.vue +++ b/components/SearchResults.vue @@ -65,7 +65,7 @@ image-tag="nuxt-img" :score-rating="productGetters.getAverageRating(product)" :reviews-count="7" - :image="productGetters.getCoverImage(product)" + :image="$image(productGetters.getCoverImage(product))" :alt="productGetters.getName(product)" :title="productGetters.getName(product)" :link="localePath(goToProduct(product))" @@ -88,7 +88,7 @@ " :score-rating="productGetters.getAverageRating(product)" :reviews-count="7" - :image="productGetters.getCoverImage(product)" + :image="$image(productGetters.getCoverImage(product))" :alt="productGetters.getName(product)" :title="productGetters.getName(product)" :link="localePath(goToProduct(product))" @@ -101,7 +101,7 @@ class="action-buttons__button color-light" @click="$emit('close')" > - {{ $t("Cancel") }} + {{ $t('Cancel') }} @@ -115,16 +115,16 @@ loading="lazy" />

- {{ $t("You haven’t searched for items yet") }} + {{ $t('You haven’t searched for items yet') }}

- {{ $t("Let’s start now – we’ll help you") }} + {{ $t('Let’s start now – we’ll help you') }}

- {{ $t("Go back") }} + {{ $t('Go back') }} @@ -141,17 +141,17 @@ import { SfMenuItem, SfButton, SfImage -} from "@storefront-ui/vue"; -import { ref, watch, computed } from "@nuxtjs/composition-api"; +} from '@storefront-ui/vue'; +import { ref, watch, computed } from '@nuxtjs/composition-api'; import { productGetters, categoryGetters, useWishlist -} from "@vue-storefront/odoo"; -import { useUiHelpers } from "~/composables"; +} from '@vue-storefront/odoo'; +import { useUiHelpers } from '~/composables'; export default { - name: "SearchResults", + name: 'SearchResults', components: { SfMegaMenu, SfList, @@ -173,8 +173,8 @@ export default { }, watch: { $route() { - this.$emit("close"); - this.$emit("removeSearchResults"); + this.$emit('close'); + this.$emit('removeSearchResults'); } }, setup(props, { emit }) { @@ -184,20 +184,20 @@ export default { const categories = computed(() => props.result?.categories); const { addItem: addItemToWishlist } = useWishlist(); - const goToProduct = product => { + const goToProduct = (product) => { return `/p/${productGetters.getId(product)}/${productGetters.getSlug( product )}`; }; watch( () => props.visible, - newVal => { + (newVal) => { isSearchOpen.value = newVal; if (isSearchOpen.value) { - document.body.classList.add("no-scroll"); + document.body.classList.add('no-scroll'); } else { - document.body.classList.remove("no-scroll"); - emit("removeSearchResults"); + document.body.classList.remove('no-scroll'); + emit('removeSearchResults'); } } ); diff --git a/composables/useUiHelpers/index.ts b/composables/useUiHelpers/index.ts index 72f3bf87..061e031a 100644 --- a/composables/useUiHelpers/index.ts +++ b/composables/useUiHelpers/index.ts @@ -28,7 +28,7 @@ const useUiHelpers = (): any => { const price = query?.price?.split('-'); - const pageSize = 10; + const pageSize = 12; query.itemsPerPage ? parseInt(query.itemsPerPage) : 10; const sort = '1' as any; query?.sort?.split(',') || []; diff --git a/layouts/default.vue b/layouts/default.vue index 43583c0a..20506232 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -3,16 +3,13 @@ - - - + +
- + - - - + @@ -34,6 +31,9 @@ import WishlistSidebar from '~/components/WishlistSidebar.vue'; import LoginModal from '~/components/LoginModal.vue'; import LazyHydrate from 'vue-lazy-hydration'; import Notification from '~/components/Notification'; +import { onSSR } from '@vue-storefront/core'; +import { useRoute } from '@nuxtjs/composition-api'; +import { useCart, useStore, useUser, useWishlist } from '@vue-storefront/odoo'; export default { name: 'DefaultLayout', @@ -48,6 +48,27 @@ export default { WishlistSidebar, LoginModal, Notification + }, + + setup() { + const route = useRoute(); + const { load: loadStores } = useStore(); + const { load: loadUser } = useUser(); + const { load: loadCart } = useCart(); + const { load: loadWishlist } = useWishlist(); + + onSSR(async () => { + await Promise.all([ + loadStores(), + loadUser(), + loadCart(), + loadWishlist() + ]); + }); + + return { + route + }; } }; diff --git a/package.json b/package.json index 61aa7477..799be694 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@vue-storefront/odoo-theme", - "version": "1.2.6", + "version": "1.3.0", "private": true, "scripts": { "build": "nuxt build -m --dotenv .env", @@ -28,7 +28,7 @@ "@vue-storefront/middleware": "2.5.4", "@vue-storefront/nuxt": "2.5.4", "@vue-storefront/nuxt-theme": "2.5.4", - "@vue-storefront/odoo": "1.2.6", + "@vue-storefront/odoo": "1.3.0", "cookie-universal-nuxt": "^2.1.3", "core-js": "^2.6.5", "nuxt": "2.15.6", diff --git a/pages/Category.vue b/pages/Category.vue index 92ce0182..1611973b 100644 --- a/pages/Category.vue +++ b/pages/Category.vue @@ -48,17 +48,6 @@ - - - - - - -
@@ -239,7 +228,7 @@ - diff --git a/yarn.lock b/yarn.lock index 5bcfeb0e..59143b8e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2174,10 +2174,10 @@ lodash "^4.17.15" nuxt-purgecss "^1.0.0" -"@vue-storefront/odoo-api@1.2.6": - version "1.2.6" - resolved "https://registry.yarnpkg.com/@vue-storefront/odoo-api/-/odoo-api-1.2.6.tgz#61a8799aa62da1c1cd9d0c31937319c2d29a80c5" - integrity sha512-a8byvPHPtjxai97w98xsPrmSb1zrCg4PiDjoZbe9ZouGvKhS350+dgY4D9lHcG/0/RpVafP7o1cJ4rvkG+ga0A== +"@vue-storefront/odoo-api@1.3.0": + version "1.3.0" + resolved "https://registry.yarnpkg.com/@vue-storefront/odoo-api/-/odoo-api-1.3.0.tgz#ff71acaec56f8dc09cc11082f53fe8929f0c0098" + integrity sha512-QMEQab6JpTjnLEYWeCtF6jRj8+2xBqj6wSMmBi9BahxhlXcYzVh/RHByrzNsho1YXoP9x3hoAABzxVBGFRX+zw== dependencies: "@vue-storefront/core" "2.5.4" apollo-cache-inmemory "^1.6.6" @@ -2189,14 +2189,14 @@ graphql-tag "^2.12.4" isomorphic-fetch "^3.0.0" -"@vue-storefront/odoo@1.2.6": - version "1.2.6" - resolved "https://registry.yarnpkg.com/@vue-storefront/odoo/-/odoo-1.2.6.tgz#1796dd7cf8cc6187a48eef26bcd15aad3fdc807e" - integrity sha512-nBXaibFDt7H5sEQaVh6tvNFesKrvsJ/3HCYrcYIY7KR8EAyIFKLmrN7Ssy58TZVjweb/RMfmj3bbrIpaB3Wnaw== +"@vue-storefront/odoo@1.3.0": + version "1.3.0" + resolved "https://registry.yarnpkg.com/@vue-storefront/odoo/-/odoo-1.3.0.tgz#d188648278cc5fcb1907ff7ee4f0737f1ffbe882" + integrity sha512-sbkfGLuUgKwCWBm/0UekE5Lz1CqtPHsdY7Fx1+dXKiiaEjL4FnjuS3FK0gxUr1DBS5N7lQfEVx7m9LRRBV9+MA== dependencies: "@nuxtjs/composition-api" "0.31.0" "@vue-storefront/core" "2.5.4" - "@vue-storefront/odoo-api" "1.2.6" + "@vue-storefront/odoo-api" "1.3.0" "@vue/babel-helper-vue-jsx-merge-props@^1.2.1": version "1.2.1"