Related Items Repeater Difficulty

Ask the community
, ,
1

Hi
I have a working online store, and have been trying to add a related items section to my product page.
I’ve followed the tutorial on corvid exactly (I think) but although the product pages now display the related items section at the bottom of the page, it seems to be three fixed pictures that don’t change according to which product you click on, and also they don’t link to their own product pages.
When i preview the product page, at the bottom it displays the message:
"Loading the code for the site. To debug this code, open masterPage.js in Developer Tools
"Loading the code for the Product Page. To debug this code, open xuvoa.js in Developer Tools
(I don’t know what either of those mean)

I haven’t touched javascript until now, so I really don’t know if I’m doing something very basic and stupidly wrong, but hoping that someone will be able to help out :slight_smile:

Thanks
Gabriella

2

Post your code here

3

This is the whole code I’ve used

904×649 62.5 KB

706×343 28.3 KB

Here’s an example of how the product page looks currently: the three items under Related Products don’t change from product to product, and they don’t link to their own product page either.

1214×936 47.4 KB

This is what is displayed below the page when I am on preview mode

995×298 13.6 KB

4

Please post the code as text and not as an image. It’s hart to read.
Please put it in a code block (you paste the code, then highlight it and click the “code block” icon on the right).

5

@jonatandor35

Oh sorry

import wixData from 'wix-data';
import wixLocation from 'wix-location';

$w.onReady(function () {
    loadRelatedProducts();
});

async function loadRelatedProducts() {
 let product = await $w('#productPage').getProduct();
 let relatedProductResults = await Promise.all([
        relatedProductsByCollection(product),
        relatedProductsByPrice(product)
        ]);

 if (relatedProductResults[0].length > 0)
        showRelatedProducts(relatedProductResults[0]);
 else
        showRelatedProducts(relatedProductResults[1]);
}

async function relatedProductsByCollection(product) {
 // Get the current product's ID.
 let productId = product._id;

 let relatedByTable = await Promise.all([
        wixData.query('related-products')
        .eq('productA', productId)
        .include('productB')
        .find(),
        wixData.query('related-products')
        .eq('productB', productId)
        .include('productA')
        .find()
    ]);

 let relatedProducts = [
        ...relatedByTable[0].items.map(_ => _.productB),
        ...relatedByTable[1].items.map(_ => _.productA)
    ];

 return relatedProducts;
}

async function relatedProductsByPrice(product) {
 // Get the current product's ID.
 let productId = product._id;

 let relatedByPrice = await wixData.query('Stores/Products')
        .between('price', product.price * 0.8, product.price * 1.2)
        .ne('_id', productId)
        .find();
 return relatedByPrice.items;
}

function showRelatedProducts(relatedProducts){
 if(relatedProducts.length > 0){
        relatedProducts.splice(4, relatedProducts.length);
        $w('#relatedItemsRepeater').onItemReady(relatedItemReady);
        $w("#relatedItemsRepeater").data = relatedProducts;
        $w("#relatedItems").expand();
    }
 else {
        $w("#relatedItems").collapse();
    }
}

function relatedItemReady($w, product){
    $w("#productImage").src = product.mainMedia;
    $w("#productName").text = product.name;
    $w("#productPrice").text = product.formattedPrice;
    $w('#productImage').onClick(() => {
        wixLocation.to(product.productPageUrl);
    });
}

Thanks

6

@gabriellaorde I’ve never implemented it before and I can’t see a bug at a glance. Maybe someone else who already implemented such a solution will be able to help.

7

Hi,

The name of the related products collection does not match the one in your code

Either change the collection name to ’ related-products ’ or change the code to query ’ relatedProducts ’

8

Yay!
Wow thank you, feeling fairly stupid but on top of the world because it’s working

Thanks so much!

9

@gabriellaorde Hi Gabriella, I’m struggling also, even thou I see Ido’s response that solves your issue. I pasted that code on my product page and it froze up my site for half a day. Would you mind posting the actual code that worked for you, because I still don’t understand where to put the name of my collections in the code for each product page. I had to delete the entire code on the product page to keep it from freezing up. Here are a couple of my Collection names: Coaster Artemis Collection, Coaster Avonlea Collection. Thanks in advance.

10

Hi Ido, What do you mean by replacing ‘related-products’ with ‘relatedProducts’? I’ve tried different variations and I still don’t get it. Do I put my collection name in the place of every ‘related-products’ in the code or other?