I am currently customizing my product pages below the Wix store sections for each product. I have input Velo code to make sure that the proper sections populate for their product when the proper product page is loaded. However, when clicking on the next or previous button to go to another product page, the same sections populate when going to the new product page leaving me with the wrong sections. I am new to this coding world and I am at a loss for what to search for a solution.
I am assuming there has got to be code to reload the page each time the next/previous button is clicked on, I am just not sure what it is called. I am deeply grateful for this community and The Wix Wiz himself. I have been learning quite a bit.
Here is a screen recording of the issue and the code I am currently using. $w.onReady(()=>{ console.log("
$w.onReady(function () {
const PRODUCT_eraonew_ID = '38209965-8ad6-e966-e3b2-9a6c29afc7e4'
async function getProduct(params) {
const product = await $w("#productPage1").getProduct();
if(product._id === PRODUCT_eraonew_ID){
$w('#introeraoneSection').expand();
$w('#eraonedesignSection1').expand();
$w('#erafamfeaturestriotitle1').expand();
$w('#erafamfeaturestrioinfo1').expand();
}
console.log(product);
}
getProduct();
})
$w.onReady(function () {
const PRODUCT_erabarten_ID = '8c5fb5c7-d569-0225-eed1-639c334dbaf7'
async function getProduct(params) {
const product = await $w("#productPage1").getProduct();
if(product._id === PRODUCT_erabarten_ID){
$w('#introerabartenSection').expand();
$w('#erabartendesignSection1').expand();
$w('#erafamfeaturestriotitle1').expand();
$w('#erafamfeaturestrioinfo1').expand();
}
console.log(product);
}
getProduct();
})
$w.onReady(function () {
const PRODUCT_erabarfour_ID = 'e6849acc-8a53-62e6-3e71-82ea9c436f5e'
async function getProduct(params) {
const product = await $w("#productPage1").getProduct();
if(product._id === PRODUCT_erabarfour_ID){
$w('#introerabarfourSection').expand();
$w('#erabarfourdesignSection1').expand();
$w('#erafamfeaturestriotitle1').expand();
$w('#erafamfeaturestrioinfo1').expand();
}
console.log(product);
}
getProduct();
})
$w.onReady(function () {
const PRODUCT_clnone_ID = 'f425161d-07d2-5d1b-8091-70254b9faa23'
async function getProduct(params) {
const product = await $w("#productPage1").getProduct();
if(product._id === PRODUCT_clnone_ID){
$w('#introclnoneSection').expand();
$w('#clnonedesignSection1').expand();
}
console.log(product);
}
getProduct();
})
");})
Hi Tommy, Welcome to the community! Great question! Product pages in Wix can be tricky since they act as a template page in an app and their behavior doesn't always match that of a typical webpage. In the WixLocationFrontend API there is an event called onChange() which triggers when the url of the page changes but no navigation occurs (i.e your situation). https://dev.wix.com/docs/velo/api-reference/wix-location-frontend/on-change If you run your expand/collapse logic within the callback function of that event it should have the desired result. For example:
import wixLocationFrontend from "wix-location-frontend"; wixLocationFrontend.onChange(() => { //run your logic conditionallyCollapseProductSection(); });
FYI - the Wix team recommends having only one onReady function per page. Hope that helps Best,
Eitan