Skip to content

fix: product list page items on product page list page zero prices issues #1379

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 12, 2022
Merged

fix: product list page items on product page list page zero prices issues #1379

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 16 additions & 6 deletions packages/theme/modules/catalog/pages/category.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,13 +205,13 @@ export default defineComponent({
const { activeCategory, loadCategoryTree } = useTraverseCategory();
const activeCategoryName = computed(() => activeCategory.value?.name ?? '');

const categoryUid = routeData.uid;

const { fetch } = useFetch(async () => {
if (!activeCategory.value) {
await loadCategoryTree();
}

const categoryUid = routeData.uid;

const [content, categoryMetaData] = await Promise.all([
getContentData(categoryUid as string),
loadCategoryMeta({ category_uid: routeData.value?.uid }),
Expand All @@ -237,17 +237,27 @@ export default defineComponent({
});

const isPriceLoaded = ref(false);

onMounted(async () => {
loadWishlist();
const { getPricesBySku } = usePrice();
if (products.value.length > 0) {
const skus = products.value.map((item) => item.sku);
const priceData = await getPricesBySku(skus, pagination.value.itemsPerPage);
products.value = products.value.map((product) => ({
...product,
price_range: priceData.items.find((item) => item.sku === product.sku)?.price_range,
}));
products.value = products.value.map((product) => {
Copy link
Contributor

@jeffpdotone jeffpdotone Oct 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe mapping could be better if handled in the server-side instead of this kind.

But if it's really needed perhaps, we could extract them to a helper function or something similar.

Copy link
Collaborator Author

@bartoszherba bartoszherba Oct 12, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It can't be done on the server because it must bypass the cache including Redis or CDN, that is why it is executed in the onMounted hook otherwise, prices will be cached.

const priceRange = priceData.items.find((item) => item.sku === product.sku)?.price_range;

if (priceRange) {
return {
...product,
price_range: priceRange,
};
}

return { ...product };
});
}

isPriceLoaded.value = true;
});

Expand Down
2 changes: 1 addition & 1 deletion packages/theme/modules/catalog/product/getters/productGetters.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ export const getPrice = (product: ProductInterface): Price => {
export const getGallery = (product: Product, maxGallerySize = 4): MediaGalleryItem[] => {
const images = [];

if (!product?.media_gallery.length && !product?.configurable_product_options_selection?.media_gallery.length) {
if (!product?.media_gallery?.length && !product?.configurable_product_options_selection?.media_gallery?.length) {
return images;
}

Expand Down