Reaction: Back button behaves strangely on PDP

Created on 10 Aug 2017 · 6Comments · Source: reactioncommerce/reaction

Expected behavior

Back button should take you to the previous "page"

Actual Behavior

If you have clicked on options, will take you through the history of options you clicked on

Steps to Reproduce the Behavior

Go to "Basic Reaction Product"
Click on Red and add to cart
Click on Green and add to cart
Click on Back Button in browser
Notice Red is now selected rather than being taken to the Product Grid.

Versions


Node: 7.10.0
NPM: 5.0.3
Meteor Node: 4.8.4
Meteor NPM: 4.6.1
Reaction CLI: 0.11.0
Reaction: 1.5.0
Reaction branch: marketplace
Docker: 17.06.0-ce

bug

Source

zenweasel

All 6 comments

Add this to any of you external javascript files inside document.ready function
if (window.history && window.history.pushState) { $(window).on('popstate', function() { event.preventDefault(); var hashLocation = location.hash; var hashSplit = hashLocation.split("#!/"); var hashName = hashSplit[1]; if(window.location.href.indexOf("/reaction/product/") >- 1){ if(document.getElementsByClassName('container container-main pdp-container').length > 0) window.location.href = "/"; } }); }

rnandhakumar1995 on 22 Aug 2017

Details

This issue remains. Adding more context.

Every time you click a variant, the URL is changed using a Router.go to change the URL.

https://github.com/reactioncommerce/reaction/blob/marketplace/imports/plugins/included/product-detail-simple/client/containers/variantList.js#L112

      Reaction.Router.go("product", {
        handle: this.productHandle,
        variantId: variant._id
      }, {
        as: Reaction.Router.getQueryParam("as")
      });

This will cause the history to be updated and then click the back button seemingly does nothing, though it is selecting the previously selected variant.

Possible solution:

Remove the Router.go calls from:

here
https://github.com/reactioncommerce/reaction/blob/marketplace/imports/plugins/included/product-detail-simple/client/containers/variantList.js#L111

and here
https://github.com/reactioncommerce/reaction/blob/marketplace/imports/plugins/included/product-detail-simple/client/containers/variantList.js#L128

And verify that the URL param variantId, is not used in the PDP nor in the variant form. Instead you can use ReactionProduct.selectedVariant() if needed.

However, if you come to the page and the URL has a varaintId, it should still work as is. That is, if you click on the product from the cart, it will be a product URL with a varaintId, and the variant will be selected on the page.

Important
Should do this after https://github.com/reactioncommerce/reaction/pull/2893 , is merged as it removed the last remaining blaze from variant edit form.