Incorrect URL redirection when using browser back button

nicohery commented 6 months ago

Describe the bug:

Navigating back using the browser's "Back" button after changing the product sort order on a product list page redirects the user to an incorrect URL: /[object%20History]. This issue disrupts the user's browsing experience by not correctly returning them to the previous state.

Expected behavior:

Users should be redirected to the previous page with the initial state or sort order intact when using the browser's "Back" button. This behavior is expected to work seamlessly, similar to how it functions with the default PrestaShop theme.

Steps to reproduce the issue:

Install the Hummingbird theme on PrestaShop.
Navigate to a product list page.
Change the sort order of the products (for example, from "Lowest Price" to "Highest Price").
Use the browser's "Back" button to attempt to return to the previous sort order or page.
Observe that the URL is redirected to an incorrect address (/[object%20History]), which results in a 404 page. Whatever the browser used.

PrestaShop version(s) where the bug happened:

8.1.5

PHP version(s) where the bug happened:

8.1

nico-leb commented 6 months ago

Hello everyone, same issue here with hummingbird, also with paginated parameters ( ?page=2) when using the Back button. User is redirected to the previous page then instantly on a 404 page : myshop.fr/[object History]

nicohery commented 6 months ago

I have identified the line of code that seems to cause the problem. File /src/js/modules/facetedsearch/update.ts line 98

if ($(Theme.selectors.listing.list).length) {
    window.addEventListener('popstate', (e) => {
      const {state} = e;
      window.location.href = state && state.current_url ? state.current_url : history;
    });
  }

chrisai-dev commented 5 months ago

I have identified the line of code that seems to cause the problem. File /src/js/modules/facetedsearch/update.ts line 98
if ($(Theme.selectors.listing.list).length) {
    window.addEventListener('popstate', (e) => {
      const {state} = e;
      window.location.href = state && state.current_url ? state.current_url : history;
    });
  }

Could you add this line after window.location.href to force a refresh, and test?

window.location.reload();

Edit: Without this popstate listener on back navigation the facet checkboxes selection state won't update based on the url change, that's why the window.location.href needs to be set, and force reloaded to avoid caching issues.

sharkooon commented 5 months ago

Type 'History' is not assignable to type 'string'. So it can't be set on window.location.href. Thats why we got [object%20History]

why not using:

      if (state && state.current_url) {
        window.location.href = state.current_url;
      } else {
        window.history.back();
      }

chrisai-dev commented 5 months ago

Type 'History' is not assignable to type 'string'. So it can't be set on window.location.href. Thats why we got [object%20History]

why not using:
      if (state && state.current_url) {
        window.location.href = state.current_url;
      } else {
        window.history.back();
      }

I've tested this with the following,

Homepage -> Category page -> Changed price filter -> Back button

This returned me back to the homepage.

PrestaShop / hummingbird