Hi All, new to the forum, so apologies if this is an amateur question.
I am trying to utilize the addition of a related products area to my store product pages in an attempt to cross sell addition merch during my customer shopping experience.
https://support.wix.com/en/article/corvid-tutorial-adding-a-related-products-area-to-a-wix-store-product-page
The code does suggest items, however does not seem to take the hierarchy I was expecting.
I was anticipating my manual relationships to be primary items suggested, taking priority over the pricing relationship component. But this does not seem to be the case.
A couple of things I am trying to accomplish:
- can I remove the pricing relationship component? I have tried commenting out the respective rows with “//”, but that just seems to break the code.
- is there a way to run the Product A > Product B relationship in only a single direction? The query looks to run both Product A > Product B relationships and Product B > Product A relationships in the array.
Any help would be greatly appreciated!
Ben
Code below:
//-------------Imports-------------//
import wixData from ‘wix-data’;
import wixLocation from ‘wix-location’;
//-------------Page Setup-------------//
$w.onReady( async function () {
// Get the current product’s data.
let product = await $w(‘#productPage’).getProduct();
// Load the products that are related to the currently displayed product using the loadRelatedProducts() function.
loadRelatedProducts(product);
});
// Load the products that are related to the currently displayed product.
async function loadRelatedProducts(product) {
// Get the related product results using the relatedProductsByCollection() and relatedProductsByPrice() functions.
let relatedProductResults = await Promise.all([
relatedProductsByCollection(product),
relatedProductsByPrice(product)
]);
// If there are related products found in the “related-products” collection:
if (relatedProductResults[0].length > 0)
// Show the related products from the collection.
showRelatedProducts(relatedProductResults[0]);
// If there are no related products found in the “related-products” collection:
else
// Fallback to showing the related products by price.
showRelatedProducts(relatedProductResults[1]);
}
// Get related products based on the relations set in the “related-products” collection.
async function relatedProductsByCollection(product) {
// Get the current product’s ID.
let productId = product._id;
// Find related products in the relationship collection by querying for related products in both relation directions.
let relatedByTable = await Promise.all([
wixData.query(‘relatedProducts’)
.eq(‘productA’, productId)
.include(‘productB’)
.find(),
wixData.query(‘relatedProducts’)
.eq(‘productB’, productId)
.include(‘productA’)
.find()
]);
// Merge related products found from both sides of the relationship collection.
let relatedProducts = [
…relatedByTable[0].items.map(_ => .productB),
…relatedByTable[1].items.map( => _.productA)
];
//Return the related products found in the collection.
return relatedProducts;
}
// Get related products based on the the product prices.
async function relatedProductsByPrice(product) {
// Get the current product’s ID.
let productId = product._id;
// Query the “Products” collection for product’s whose price is within 20% of the current product’s price.
let relatedByPrice = await wixData.query(‘Stores/Products’)
.between(‘price’, product.price * 0.5, product.price * 1.2)
.ne(‘_id’, productId)
.find();
// Return the related items extracted from the query results.
return relatedByPrice.items;
}
// Show the related products on the page.
function showRelatedProducts(relatedProducts) {
// If there are any related products:
if (relatedProducts.length > 0) {
// Remove all but the first four related items.
relatedProducts.splice(4, relatedProducts.length);
// Set the function that runs when the related items repeater data is loaded to be relatedItemReady().
$w(‘#relatedItemsRepeater’).onItemReady(relatedItemReady);
// Set the related items repeater data to the first four related items.
$w(“#relatedItemsRepeater”).data = relatedProducts;
// Expand the related items repeater.
$w(“#relatedItems”).expand();
}
// If there are no related products:
else {
// Collapse the related items repeater.
$w(“#relatedItems”).collapse();
}
}
// Set up the related items repeater as its data is loaded.
function relatedItemReady($item, product) {
// Populate the repeater elements from the item data.
$item(“#productImage”).src = product.mainMedia;
$item(“#productName”).text = product.name;
$item(“#productPrice”).text = product.formattedPrice;
// Set the action that occurs when the image is clicked.
$item(‘#productImage’).onClick(() => {
// Navigate to the related product’s product page.
loadRelatedProducts(product);
wixLocation.to(product.productPageUrl);
});
}