diff --git a/README.md b/README.md index 506ad8f..aab8970 100644 --- a/README.md +++ b/README.md @@ -74,22 +74,23 @@ Thanks go to these wonderful people πŸ™Œ:
Heitor Ramon Ribeiro
πŸ’» 🚧 πŸ“– πŸ“†
Alef Barbeli
πŸ’» πŸ“– -
Dominik Deimel
πŸ’» πŸ“– -
Lior Lindvor
πŸ’»
Henrique Lopes
πŸ’» πŸ“– - -
ĐaΜ£i LoΜ£Μ‚c LeΜ‚ Quang
πŸ’»
Bogdan Podlesnii
πŸ’» -
Filip Rakowski
πŸ’¬ πŸ§‘β€πŸ« πŸ‘€ -
Filip Sobol
πŸ’¬ πŸ§‘β€πŸ« πŸ‘€ -
Patryk Andrzejewski
πŸ’¬ πŸ§‘β€πŸ« πŸ‘€ -
Renan Oliveira
πŸ”§ πŸ”Œ
Patrick Monteiro
πŸ’»
Kevin Gorjan
πŸ’»
Bartosz Herba
πŸ’» +
Marcin Kwiatkowski
πŸ’» πŸ“† +
Filip Rakowski
πŸ’¬ πŸ§‘β€πŸ« πŸ‘€ + + +
Filip Sobol
πŸ’¬ πŸ§‘β€πŸ« πŸ‘€ +
Patryk Andrzejewski
πŸ’¬ πŸ§‘β€πŸ« πŸ‘€ +
Renan Oliveira
πŸ”§ πŸ”Œ +
Dominik Deimel
πŸ’» πŸ“– +
Lior Lindvor
πŸ’» diff --git a/components/AppHeader.vue b/components/AppHeader.vue index 1579ff6..a920afb 100644 --- a/components/AppHeader.vue +++ b/components/AppHeader.vue @@ -30,30 +30,48 @@ - @@ -19,9 +21,11 @@ import { import { useContent } from '@vue-storefront/magento'; import { onSSR } from '@vue-storefront/core'; import { defineComponent, useContext, useRoute } from '@nuxtjs/composition-api'; +import HTMLContent from '~/components/HTMLContent'; export default defineComponent({ components: { + HTMLContent, SfLoader, SfHeading, }, diff --git a/pages/Product.vue b/pages/Product.vue index 73bb657..f72c982 100644 --- a/pages/Product.vue +++ b/pages/Product.vue @@ -73,9 +73,10 @@
-

@@ -152,9 +153,10 @@ @click:tab="changeTab" > -

@@ -169,7 +171,7 @@ v-if="property.name === 'Category'" #value > - + {{ property.value }} @@ -223,22 +225,14 @@
- + - + @@ -283,6 +277,7 @@ import { useContext, useRoute, useRouter, + defineComponent, } from '@nuxtjs/composition-api'; import { productData } from '~/helpers/product/productData'; import cacheControl from '~/helpers/cacheControl'; @@ -291,18 +286,21 @@ import GroupedProductSelector from '~/components/Products/GroupedProductSelector import InstagramFeed from '~/components/InstagramFeed.vue'; import MobileStoreBanner from '~/components/MobileStoreBanner.vue'; import ProductAddReviewForm from '~/components/ProductAddReviewForm.vue'; -import ProductsCarousel from '~/components/ProductsCarousel.vue'; +import UpsellProducts from '~/components/UpsellProducts'; +import RelatedProducts from '~/components/RelatedProducts'; +import HTMLContent from '~/components/HTMLContent'; -export default { +export default defineComponent({ name: 'ProductPage', components: { - GroupedProductSelector, BundleProductSelector, + GroupedProductSelector, + HTMLContent, InstagramFeed, LazyHydrate, MobileStoreBanner, ProductAddReviewForm, - ProductsCarousel, + RelatedProducts, SfAddToCart, SfBreadcrumbs, SfButton, @@ -316,6 +314,7 @@ export default { SfReview, SfSelect, SfTabs, + UpsellProducts, }, middleware: cacheControl({ 'max-age': 60, @@ -324,11 +323,20 @@ export default { transition: 'fade', setup() { const qty = ref(1); - const { product, id } = productData(); + const { + product, + id, + } = productData(); const route = useRoute(); const router = useRouter(); - const { search, loading: productLoading } = useProduct(`product-${id}`); - const { addItem, loading } = useCart(); + const { + search, + loading: productLoading, + } = useProduct(`product-${id}`); + const { + addItem, + loading, + } = useCart(); const { reviews: productReviews, search: searchReviews, @@ -336,7 +344,10 @@ export default { addReview, } = useReview(`productReviews-${id}`); const { isAuthenticated } = useUser(); - const { isInWishlist, addItem: addToWishlist } = useWishlist(); + const { + isInWishlist, + addItem: addToWishlist, + } = useWishlist('GlobalWishlist'); const { error: nuxtError } = useContext(); const basePrice = ref(0); const openTab = ref(1); @@ -353,8 +364,6 @@ export default { return inStock && stockLeft; }); const categories = computed(() => productGetters.getCategoryIds(product.value)); - const relatedProducts = computed(() => productGetters.getProductRelatedProduct(product.value)); - const upsellProducts = computed(() => productGetters.getProductUpsellProduct(product.value)); const baseReviews = computed(() => (Array.isArray(productReviews.value) ? [...productReviews.value].shift() : productReviews.value)); @@ -378,7 +387,7 @@ export default { }))); const configurableOptions = computed(() => product.value.configurable_options); - const productConfiguration = ref({}); + const productConfiguration = ref(Object.entries(route.value.query)); const productTypedPrice = computed(() => { // eslint-disable-next-line no-underscore-dangle switch (product.value.__typename) { @@ -406,7 +415,10 @@ export default { const changeTab = (tabNumber, callback) => { document .querySelector('#tabs') - .scrollIntoView({ behavior: 'smooth', block: 'end' }); + .scrollIntoView({ + behavior: 'smooth', + block: 'end', + }); openTab.value = tabNumber; if (callback && typeof callback === 'function') callback(); }; @@ -414,45 +426,33 @@ export default { changeTab(2, () => { setTimeout(() => document .querySelector('#addReview') - .scrollIntoView({ behavior: 'smooth', block: 'end' }), 500); + .scrollIntoView({ + behavior: 'smooth', + block: 'end', + }), 500); }); }; const successAddReview = async (reviewData) => { await addReview(reviewData); document .querySelector('#tabs') - .scrollIntoView({ behavior: 'smooth', block: 'end' }); + .scrollIntoView({ + behavior: 'smooth', + block: 'end', + }); }; const updateProductConfiguration = async (label, value) => { - productConfiguration.value[label] = value; - - const configurations = Object.entries(productConfiguration.value).map((config) => config[1]); - - await search({ - queryType: 'DETAIL', - filter: { - sku: { - eq: id, - }, - }, - configurations, - }); + productConfiguration.value.push([label, value]); await router.push({ path: route.value.fullPath, query: { - ...productConfiguration.value, + ...Object.fromEntries(productConfiguration.value), }, }); }; - const loadProductConfiguration = () => { - const { query } = route.value; - - productConfiguration.value = query; - }; - onSSR(async () => { const baseSearchQuery = { filter: { @@ -460,6 +460,9 @@ export default { eq: id, }, }, + ...(productConfiguration.value.length > 0 + ? { configurations: productConfiguration.value.map((config) => config[1]) } + : {}), }; await search({ @@ -467,11 +470,9 @@ export default { ...baseSearchQuery, }); - await searchReviews({ ...baseSearchQuery }); - - loadProductConfiguration(); - if (product?.value?.length === 0) nuxtError({ statusCode: 404 }); + + await searchReviews(baseSearchQuery); }); return { @@ -490,7 +491,7 @@ export default { loading, openTab, product, - productConfiguration, + productConfiguration: computed(() => Object.fromEntries(productConfiguration.value)), productDataIsLoading, productDescription, productGallery, @@ -501,17 +502,15 @@ export default { productShortDescription, productSpecialPrice, qty, - relatedProducts, reviewGetters, reviews, reviewsLoading, successAddReview, totalReviews, updateProductConfiguration, - upsellProducts, }; }, -}; +});