2

I have a problem brought about by a specific client requirement in nopCommerce.

I have a page - lets say page1 - which shows a block image which you then have to click through to get to the main part of the page (no matter how much I try to dissuade them from the extra click they are adamant - basically it's a 'glamour shot' before going to the main product grid/category page).

I have this JavaScript for the page load:

switch(window.location.pathname) {
    case "/store/page1":
        $(".category-page").hide();
        break;
etc. (there are other functions for other things)

Followed by:

    $(".landing_click").click(function () {
        $(".landing_page").hide();
        $(".category-page").show();        
    });

This all works great and displays the product grid (category page) as it should after clicking through the main image. However after viewing an individual product from the grid (going through to product details) clicking the back button on the browser takes you back to the first stage of the page1, so you have to click through the splash image/glamour shot again to get to the product grid.

To me this is logical and it is working as it should, but I need to find a way so that when the user is clicking the back button out of a product, it goes back to the product grid. Like this:

enter image description here

Is this possible with JavaScript? It needs to use the browser back button rather than a specific other button, although I could add one of those in addition as well.

If it were a straightforward website it would be relatively easy, but I am confined by the limitations of nopCommerce and the way the Category pages function, hence why I am looking for a JavaScript answer if possible so I can simply adapt what I already have.

Thanks

Lyall
  • 1,158
  • 3
  • 13
  • 34
  • can you make state a into an actual separate page maybe? – user3012759 Nov 04 '15 at 14:59
  • I did think about that - but it would require creating a separate view/page where there shouldn't be one (as far as nopCommerce is concerned). I may explore this option if there isn't a JavaScript solution. – Lyall Nov 04 '15 at 15:02
  • there may be js solution but not sure how reliable it will be since back button is browser specific and tends to use quite a bit of stuff from browser cache... – user3012759 Nov 04 '15 at 15:04
  • 2
    Use location.hash, check the answer here: http://stackoverflow.com/questions/1844491/intercepting-call-to-the-back-button-in-my-ajax-application-i-dont-want-it-to – aszahran Nov 04 '15 at 15:05
  • @aszahran That looks promising I'll have a look at that thanks - I've never used that before so I'll see if I can do it. – Lyall Nov 04 '15 at 15:13
  • @aszahran Forgive me but I've looked at the answers to that question, and to this similar question http://stackoverflow.com/questions/10688401/what-is-the-difference-between-window-location-href-and-window-location-hash (amongst others) and I can't see how to use it to return to the page in a state where landing_page is hidden and category-page is shown. I've searched the web for other references also - do you know of any other references I might have missed please that might help? Sorry for my weak JavaScript. Thanks :) – Lyall Nov 05 '15 at 09:27
  • I detailed an answer to show you, Did that work? – aszahran Nov 08 '15 at 17:52
  • @aszahran I haven't had a chance to try it yet as the project files are hosted on a secure server that I can't access outside the premises - I should be able to give it a go tomorrow though! Looks good though, I'll let you know. Cheers. – Lyall Nov 08 '15 at 19:33

1 Answers1

1

I would use location.hash to do it like this:

switch(window.location.pathname) {
    case "/store/page1":
        if(window.location.hash == "#landing") {
            $(".landing_page").show();
            $(".category-page").hide();
        }
        else {
            $(".landing_page").hide();
            $(".category-page").show();
        }
        break;
    //The rest here
}

Followed by:

$(".landing_click").click(function () {
    window.location.hash = "#category";
    $(".landing_page").hide();
    $(".category-page").show();        
});

Now when you are in the product details page, a click on the back button will move you to /store/page1#category loading the category page directly.

aszahran
  • 370
  • 2
  • 8