How to change the back path

Question

There's two pages
1.homepage 2.product page

There's two div element on product page, one of div element is hidden.

So when I click on a product, the class of hidden div toggles and it becomes visible. (It is a product detail page / click to purchase page)

The problem is when anyone clicks the back button on their phone, it sent them back to homepage.

What can I do so that user remain on "product page" even after clicking back on " product detail page"

I only use jQuery no backend language

Thankyou

Answer 1

If I understand correctly, you only have 2 pages. Homepage and product page. So, naturally, if one is on the product page and clicks back, they are returned to the previous page, the Homepage, correct?

This means that if you don't want them to click back, you need them to easily see and understand how to close the product details/purchase information. Then they can stay on the product page the whole time.
There are many different ways you could change your UI to improve the UX. One that comes to mind is that you could design the page so that when the user clicks for product details, the information appears to pop-out, blurring the background and contains a giant X to close that pop-out.
I'll leave that thought process for you to figure out with your style.

Answer 2

Looks like the thing you're looking for is History API https://developer.mozilla.org/en-US/docs/Web/API/History_API

Answer 3

Indeed, it is helpful. Many thanks to you ✨

Answer 4

I've already done that but you see, everyone has a habit of touching the back button of their phones.

So, this is a challenge for me right now 😅

Do you have any other suggestions?