wixLocation.to does not refresh

Ask the community
, ,
1

I would be so grateful if someone can sort this out. Recently, I tried following the instructions for creating a Related Items section on my product page. The images load fine but when I click on the image of one of the related items, the link changes in the web address bar but the page does not refresh???

Even on the tutorial, I noticed it does not refresh there either. This seems to be a common problem with wixLocation.to(product.productPageUrl) and no one seems to have an answer?

Here’s my code -

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([
relatedProductsByTable(product),
relatedProductsByPrice(product)
]);

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

async function relatedProductsByTable(product) {
let productId = product._id;

// find related products by relation table
let relatedByTable = await Promise.all([
wixData.query(‘relatedProducts’)
.eq (‘productA’, productId)
.include(‘productB’)
.find(),
wixData.query(‘relatedProducts’)
.eq (‘productB’, productId)
.include(‘productA’)
.find(),
]);

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

async function relatedProductsByPrice(product) {
let productId = product._id;

// find related products by price
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( (event) => {
wixLocation.to(product.productPageUrl);
});
}

2

Are you following this tutorial:

Have you tried doing this to see if it works:

Note
You may need to save or publish the site and refresh your browser to view the Stores collections in the Database.

Publish the site and refresh your browser so the Stores collections appear in the Database.

Remember that when you save and publish your website, if you already have your website up in your internet browser then it won’t refresh itself automatically so that any updates are seen.

You will need to refresh your website yourself manually through your browser refresh or reload button or close and reopen your browser to see any changes that you have made to your website.

3

Hi @givemeawhisky

My site is already published and refreshed several times.
Here is the link: madebonline.com the password is - winner

It’s due to go live tomorrow and this feature is being such a pain to figure out. I just need it to refresh once the link loads…

4

You can try this:
Wix does not have an automatic refresh page feature. In the meantime, you can use the following workaround to refresh your page:

Add the HTML code element in your Editor.
Enter the code:

Note: 5000 refreshes the page every 5 seconds. You can change the number to the amount of time you want. Save and publish your site.

Note: Be aware that the script also asks if you want to refresh your Editor. Make sure you save before you refresh the Editor.

Important: This workaround only works if you have upgraded your site with a Premium Plan.

Or you can try doing this:
Disconnect the button from the dataset, add a onClick event and use the following code:

export function savebutton_click(event, $w) {
	$w("#dataset").save()
		 .then ( ( ) => {  
			$w("#dataset").refresh();
		})
		.catch((err) => {
			let errMsg = err;
		});
}
5

or you can simply refresh the dataset itself:

This just refreshes the same page:

wixLocation.to(wixLocation.url);  //This reloads the same page.
6

Also, note that on the Wix Editor example on that tutorial page, that they have coded it slightly differently to how the code is shown on the page.

They are using ByCollection in the Wix Editor example and not ByTable. Try just changing your ByTable to the same with ByCollection and see if that changes anything for you too.

 //-------------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('#productPage').getProduct();
 // 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('related-products')
        .eq('productA', productId)
        .include('productB')
        .find(),
        wixData.query('related-products')
        .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(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($w, product){
 // Populate the repeater elements from the item data.
    $w("#productImage").src = product.mainMedia;
    $w("#productName").text = product.name;
    $w("#productPrice").text = product.formattedPrice;
 // Set the action that occurs when the image is clicked.
    $w('#productImage').onClick(() => {
 // Navigate to the related product's product page.
        wixLocation.to(product.productPageUrl);
    });
}
7

Thanks so much. I’m a novice at coding but I’ll try out these options as soon as possible.

8

You have right. The WIXLOCATION-TO stopped working normally (does not refresh product while the url changes!) the last 5-6 days.

9

Is there a fix for this yet? It’s really annoying to have users manually reload their page to see the changes they make.
Why did they remove this functionality to begin with?

10

@dwyanekrzanowski try this

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

11

@wistercmartins You sir, are a God send! Thank you so much!