Breadcrumb to dynamic page

Ask the community
, ,
1

Hi, I am creating a dynamic collection page for my store - in the collection page I am showing the main image and all the products within the collection. So far so good… On clicking any of the products, if I launch the product-url, the breadcrumb in the product page doesn’t show the collection name, so navigation back to the collection is lost. Please could anyone advice on how this can be done?
Cheers,
Debashis.

2

Experieincing similar issue. Is there any work around to this?

3

you can achieve a similar effect of “following” the last user page using a combination of Wix Velo code and session storage:

1. Store the Previous Page URL in Session Storage:

  • On your collection page , write Wix Velo code to capture the current page URL when a user clicks on a product. Here’s an example:

export function button1_click(event) {
  // Get the current collection page URL
  const currentPageUrl = wixLocation.href;

  // Store the URL in session storage
  wixSession.setItem("previousPage", currentPageUrl);
}
  • This code snippet assumes you have a button element with an “onClick” event linked to the button1_click function. Replace “button1” with the actual ID of your button element.
  • Wix Velo provides wixSession.setItem to store data in the user’s session storage, accessible throughout their browsing session.

2. Retrieve the Previous Page URL on the Product Page:

  • On your product page , write Wix Velo code to retrieve the previously stored URL from session storage:
export function pageReady() {
  // Get the previously stored URL from session storage
  const previousPageUrl = wixSession.getItem("previousPage");

  // Now you can use this URL for various purposes, like:
  // - Displaying it as a breadcrumb element
  // - Creating a "Back to Collection" button linked to the URL
}
  • This code retrieves the stored URL using wixSession.getItem within the pageReady function, which gets triggered when the product page loads.

3. Display or Use the Previous Page URL:

  • Now that you have the previous page URL in your product page code, you can utilize it in several ways:
    • Display as Breadcrumb: Create a Text element and dynamically populate it with the retrieved URL using Wix Data Binding.
    • “Back to Collection” Button: Create a button element with a link set to the retrieved URL, allowing users to easily navigate back to the collection page.

Benefits:

  • This approach leverages Wix Velo’s capabilities to store and retrieve data within the user’s session.
  • It provides a dynamic solution for following the user’s last visited page on your Wix site.

Limitations:

  • Session storage data gets cleared when the user closes their browser or tabs.
  • This method won’t work if the user reaches the product page from a source other than your collection pages.

By implementing this solution with Wix Velo and session storage, you can create a user experience that “follows” the last visited page within your Wix store, even though you can’t access the complete browsing history.