Adding a custom product page to store page

Hi, I have created a custom product page where the user can choose various options and see the product change as they do so.

Largely following this tutorial with some tweaks

I now want to add this custom page to my store. If I include the product in the store via manage products it links back to the generic product page. How do I add the product with custom page to my store?

I have read suggestions to redirect the old page on load, but that is suboptimal and a bad user experience as you load a page and then another.

I have tried to access the child elements (products) of the store to change the URL via javascript, but unfortunately it sits in an Iframe and cannot be accessed.

Any suggestions welcome, thanks!

Based on previous posts this is the best solution I have come up with so far, but I’m not particularly happy with it. Essentially you can either check the product ID or page URL and redirect based on that. Unfortunately the wixLocation.to has a long delay before it runs which means the whole page loads and then it redirects. I am going to look at speeding this up by removing page transitions, but it still seems like a horrible work around for this problem.

I think the ideal solution is to change the product URL in the database. Unfortunately this is a read only field which we can’t change.

If anyone has any other ideas or suggestions I would really appreciate.

Find below the current redirect code sitting on the product page to redirect for one particular product. Change the content in {some text} for your context.


import wixLocation from ‘wix-location’ ;
let url = wixLocation . url ;

if ( url == ‘’{your url}/product-page/{your product}’ ){
console . log ( ‘redirecting based on url’ );
[wixLocation](wixLocation.to(“/{new) [.](wixLocation.to(”/{new) [to](wixLocation.to(“/{new) [(](wixLocation.to(”/{new) [“{](wixLocation.to(”/{new) url to redirect to}" );
}
$w . onReady ( function () {
$w ( ‘#productPage1’ ). getProduct ()
. then ( ( product ) => {
let productID = product . _id ;
if ( productID == ‘{your product id}’ ){
console . log ( ‘redirecting based on product ID’ )
wixLocation . to ( " [{](wixLocation.to(“/{new) url to redirect to}” );
}
})
. catch ( ( error ) => {
console . log ( error );
});
});