Hi forum people,
I’m trying to use this to add a repeater that displays a series of images and text fields, but I can’t have the repeater’s info be products that appear with their own product page. Essentially, the products are institutions and the repeater displays each institution’s community programs and services.
I’ve tried to adapt the code, but to be frank, I really don’t know anything about javascript so as far as I can tell the code simply won’t do what I want it to do. I’m not sure why exactly it isn’t working for me, but it might be for multiple reasons.
Here’s my current version of the code (further down).
Instead of having the repeater’s info pull from my product database, I’m attempting to have it pull from a collection called ProgramsServicesDatabase. The collection that relates certain products to the repeater info in ProgramsServicesDatabase is called ProgramsServices.
I can’t find any similar posts… has anyone seen a solution posted for the same request?
Thanks for any guidance!
//-------------Imports-------------//
import wixData from ‘wix-data’;
import wixLocation from ‘wix-location’;
//-------------Page Setup-------------//
$w.onReady(function () {
// Load the products that are related to the currently displayed product using the loadRelatedProducts() function.
loadRelatedProducts();
});
// Load the products that are related to the currently displayed product.
async function loadRelatedProducts() {
// Get the current product’s data.
let product = await $w(‘#productPage1’).getProduct();
// Get the related product results using the relatedProductsByCollection() and relatedProductsByPrice() functions.
let relatedProductResults = await Promise.all([
relatedProductsByCollection(product),
]);
}
// 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('ProgramsServices')
.eq('title', productId)
.include('programOrService')
.find(),
]);
//Return the related products found in the collection.
return relatedProducts;
}
// 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(20, 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 twenty related items.
$w(“#repeater1”).data = relatedProducts;
// Expand the related items repeater.
$w(“#repeater1”).expand();
}
// If there are no related products:
else {
// Collapse the related items repeater.
$w(“#repeater1”).collapse();
}
}
// Set up the related items repeater as its data is loaded.
function relatedItemReady($w, product){
// Populate the repeater elements from the item data.
$w(“#image7”).src = product.mainMedia;
$w(“#text32”).text = product.name;
$w(“#text31”).text = product.charity;
$w(“#text30”).text = product.description;
}