DavidAJohn / FotoStorio

Blazor WebAssembly application for a fictional photography store, with Stripe Elements payment integration and styling with Tailwind CSS.
MIT License
5 stars 1 forks source link

Product Details back button #3

Closed DavidAJohn closed 3 years ago

DavidAJohn commented 3 years ago

On the product details page, the back button just returns to the "/products" url at the moment, forgetting the details that were being displayed on the main products page.

Ideally, this would return the user back to the products they were viewing, with any filters in place.

There are several possible ways to do this:

DavidAJohn commented 3 years ago

Or, on the products page, write the productParams to session storage (using Blazored.SessionStorage) each time they change and then check for their existence whenever the products page is initialised.

That would mean the product details page wouldn't need to do anything more than send the user back to the products page, as it does now.

Perhaps it should only check for the values in session storage if the requested url is "/products" so as to avoid any problems with links that change the url directly (i.e. from the navmenu).

DavidAJohn commented 3 years ago

I prefer the session storage method, and let me explain why:

Adding another cascading parameter felt like overkill just to allow interaction between two pages. I'm not sure how much the application's speed is affected by adding each cascading parameter, but keeping them to a minimum can't be a bad thing. It also means there's no need to create any additional classes (as with the basket state).

The idea of using a render fragment was a misunderstanding. I forgot that I was changing the page location, not passing parameters to a child component. That was a non-starter.

Using JS Interop with a window.back() method would have worked, but I could only use the browser URL as a reference point. So filtering by category or by brand would work fine, but any search term entered would have been lost. Not the end of the world, but there is a better way....

Saving the productParams into session storage gives us what I feel is the right combination of simplicity and functionality. The productParams are already being used to determine exactly which products should be displayed on screen, so saving them to session storage then retrieving them in the OnParametersSetAsync event on the main products page allows us to replicate exactly what the user was seeing before they clicked away (usually to the product details page). This includes not only the category or brand, but also any search term included, plus the pagination information, allowing us to return the user to the exact page they were on as well. Pretty cool - even better than a back button!