New Example: Wix Stores Related Products


Resources for this example

8 Likes

I take it that these features will eventually rolled out to Wix Store natively without the need of Wix Code? Thanks

I hope so!

Many thanks for the example, I was looking for a way to create related products and when entering the wix facebook group and I saw the presentation of your example. Thank you again.

I’m still a programming language student and I still need exmple to develop my code.

With related products would it be possible to also create products RECENTLY VIEWED? If yes, can you create some examples?

I found an example of recipe reviews in the wix code examples. Do you have some other example that works best with wix store?

I saw that you used async / await to improve the page load, could it be used in other elements on the home page to improve loading too?

Not working on view the example !

Hi Pasymart,
The products seem to be missing in the example. The code works though. I have however been recommended to use dataset instead with the following logic,

$w.onReady(function () {
$w(" #productPage1 “).getProduct().then(x => console.log(x.slug)).catch(console.log)
// # productImage is inside a repeater
$w(” # productImage").onClick((event, $w) => {
console.log($w(" #dataset1 ").getCurrentItem().slug);
})
});

I had this problem, have you tried using?

location.reload ();

Actually, if you change the example code for function relatedItemReady to the following, it might just work.

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);
setTimeout(() => {
wixLocation.to(wixLocation.url);
}, 200)
})
}

Can’t see related items box using google chrome - only white space.

Have you tried updating your browser? I use Chrome and it works.

Hi Allan,
I worked the code this way and I believe it got faster.

function relatedItemReady($w, product){
$w(“#productImage”).src = product.mainMedia;
$w(“#productName”).text = product.name;
$w(“#productPrice”).text = product.formattedPrice;
$w(‘#productImage’).onClick(() => {
wixLocation.to(“https://yoursiteurl/product-page/” + product.slug);

}); 

}

Thanks Raphaela, it worked perfectly!

I used this code a few weeks ago to do related products and other things on my site and it worked fine.

Today I noticed that the code has stopped working for older products on my site, but ones I added in the last week the code still works fine.

For the older products it cannot load the product from the product using the line:

let product = await $w(‘#productPage’).getProduct()

But for newer products this line executes as expected.

Has something changed in wix?

Hello,

This line let product = await $ w (‘# productPage’). GetProduct () says:

take the product that is currently being displayed on the product page and name the variable product

and then lookup the code in the related product table that you created, if you have any related product that needs to be added manually

if there is no related product in the table the code goes to the Store / Products collection where all your products are and search for products 20% cheaper and 20% more expensive

as you add products may happen the older ones not being in the criterion of 20% more expensive or cheaper

in this case you need to ensure that older products are in the collection of related products to all the products that you display them, only this way you will ensure that everything works correctly

@raphaela katz,

I am kind of new to wix code, and it seems like i cant get the code to work… when i write in the get product line it tells shows error!

when i write loadrelatedproducts, it shows error that its not defined, even though i added the collection page related products in the database

Hi Ahmed Bakr

The error in $w(‘# productPage’). getproduct does not prevent the code from working, in the API reference has this function. Now for the loadRelatedProduct I would need to see your code to understand where the error is. Contact me through my email so I can help you better raphakatz1985@gmail.com

I have a question. If you’re using the <prev | next > on the product page - how when you select the ‘next’ or ‘previous’ page do you get the related item to follow? Or have I set something up wrong?

I’m having trouble with getting related products to change when I select one. Say I select Product 1 in the store, and Products 2-4 have been related. If i click Product 2, it takes me to that page and then I get Products 2-4 as related again. I have tried playing around with the database with no change.

I’m having the same problem as Andrew. Does anyone know what we might be doing wrong?