I’ve been searching everywhere and now pulling my hair out a bit on this one so any help massively appreciated!
I have setup a related items repeater following the instructions on these links:
https://support.wix.com/en/article/corvid-tutorial-adding-a-related-products-area-to-a-wix-store-product-page
https://www.wix.com/corvid/forum/community-discussion/related-items-repeater
Big thanks to Sapir! This got my related products displaying and working great and taught me something new! Happy days!
Now to the problem…
I want to apply pagination to the repeater, limiting 3 items to a row, and then a forward and back button to cycle through further items (all returned from the function above).
It seems quite simple to setup the pagination if the repeater is hooked up to a dataset (just set number of items to display in dataset settings and create a button connected to next item).
But, as the repeater is being filled with info from the function, I cannot connect it to a data set and thus can’t apply the limit for pagination.
I’m not using the standard built in Wix related products slider gallery under store elements. I would be very happy to, but it has arrows that don’t align correctly, aren’t editable and have a horrible shadow effect.
So i guess if anyone knows how to just fix that, this may be a simple solution, although when I try and edit the related products slider gallery, it displays in the developer page code as an Iframe, thus no controls over navigation as wth other elements.
Here’s the code for the related products repeater:
//-------------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('#pageApp1').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.8, 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(12, relatedProducts.length);
// Set the function that runs when the related items repeater data is loaded to be relatedItemReady().
$w('#repeater1').onItemReady(relatedItemReady);
// Set the related items repeater data to the first four related items.
$w("#repeater1").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('#button2').onClick(() => {
// Navigate to the related product's product page.
loadRelatedProducts(product);
wixLocation.to(product.productPageUrl);
});
}