Help with wixLocation.onChange on #productPage1

Ask the community
, ,
1

I am feeling so good that I have finally made a little progress on hacking the Wix Stores product page.
I have been able to querry the currently selected Wix Stores product - and display the product name using product.name to a text box element.

My issue is that when I use prev/next or click on the related products slider- it doesn’t refresh.
I tried using the tutorial code and it seems to void the previous code.
Any help on how to make this work correctly? I have '//" the wixLocation lines so you know what I was trying that broke my work thusfar. This code below will work if I jump to my shop and select any product (as long as I don’t use Prev/Next or click on the Related Products repeater).
My website where I have saved my test is www.rockymountainsounds.com - click on Shop then check out the product page and my text box to the top right

//-------------Imports-------------//

import wixData from ‘wix-data’ ;
import wixWindow from ‘wix-window’ ;
import wixLocation from ‘wix-location’ ;

//-------------Global Variables-------------//

// Current product.
let product ;

$w . onReady ( async function () {
product = await $w ( ‘#productPage1’ ). getProduct ();

// wixLocation.onChange(async (location) => {
// product = await $w(‘#productPage1’).getProduct();

$w ( ‘#productTitle’ ). text = product . name

console . log ( product . name )
console . log ( product . mediaItems )

})
//})

I am using this tutorial to try to get this to function

My goal is to be able to rebuild my dynamic product page to only use the most basic wix product details (cover and description), and then add my own designed data-linked elements that pull the Wix Stores product fields - AND - a second filtered dataset with Youtube/Soundcloud, and hopefully a user guide PDF.

2

So it appears this is sort of working.
If I use this active code I can get the proper response after I click on to next or previous or related product. But the initial view shows no title (just the stock GHOST TITLE as part of the element default). Is there an additional set of instructions I need to ensure that it pulls the original product loaded?

//-------------Imports-------------//

import wixData from ‘wix-data’ ;
import wixWindow from ‘wix-window’ ;
import wixLocation from ‘wix-location’ ;

//-------------Global Variables-------------//

// Current product.
let product ;

$w . onReady ( async function () {
product = await $w ( ‘#productPage1’ ). getProduct ();

wixLocation . onChange ( async ( location ) => {
product = await $w ( ‘#productPage1’ ). getProduct ();

$w ( ‘#productTitle’ ). text = product . name

console . log ( product . name )
console . log ( product . mediaItems )

})
})

3

I am trying to display custom notification (where it shows name of product too which is added to cart) so any ideas anyone how to do it as i-frame doesnt allow getting product information if so any help will be appreciated.
In simple language :- when i clink on add to cart
notification box is shown saying _item 1 product has been added to cart