How to change customized product page scroll

[DroidXX]

The customized product page is scrolling up after saving, but too high. I need to scroll to the cart button after clicking the save button. How can I change that? 

Because of this system, we are losing many customers because they don't understand. Could we possibly add a pop-up window here to put the product into the cart?

 

Thank you in advance!

[endriu107]

Could you share link to prouct that we can check?

[Zohaib-fk]

We can move the pointer to the location of the page using # tag HTML in the browser in the product page query string. This implementation will need some customization work.

In the URL, you can focus on a particular element by appending a '#' and its id. For example:

http://example.com?#footer

The code above will auto-focus you to the element with the id "footer".

[endriu107]

Ok I now get what are you try to achieve. It is not that what you write in post, page is not scroll to top but page is refreshed and it is jump to start position after site reload.

I'm not sure there is easy way to do that, you can use js to put content in previous position but if you want it only after save customization you need also store data that user clicked on this button and then use this code.

It could look something like this:

if (prestashop.page.page_name == 'product') {

    const button = //Here you must get customization button like document.querySelector('.class-name')

    button.addEventListener('click', () => {
        //Here you must create for example cookies and use it in code below
    })

    //Here you set cookies to variable:
    const cookieCu = getCookie(cookieCu.value);
   
    //Here you check if cookie exist and set scrolling to last positon
    if (cookieCu) {
        document.addEventListener("DOMContentLoaded", function (event) {
            var scrollpos = localStorage.getItem("scrollpos");
            if (scrollpos) window.scrollTo(0, scrollpos);
        });
        
        window.onscroll = function (e) {
            localStorage.setItem("scrollpos", window.scrollY);
        };
    }
} else {

    //Here removing cookie after leave product page to prevent scrolling on other products
    document.cookie = cookieCu + '=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}

Code above is not finished and for sure not working, you must edit it by adding own code and probably fixing some bugs.

 

Second way much easier is buy some module that save customization on clicking add to cart button.

[DroidXX]

18 minutes ago, endriu107 said:

Ok I now get what are you try to achieve. It is not that what you write in post, page is not scroll to top but page is refreshed and it is jump to start position after site reload.

I'm not sure there is easy way to do that, you can use js to put content in previous position but if you want it only after save customization you need also store data that user clicked on this button and then use this code.

It could look something like this:

if (prestashop.page.page_name == 'product') {

    const button = //Here you must get customization button like document.querySelector('.class-name')

    button.addEventListener('click', () => {
        //Here you must create for example cookies and use it in code below
    })

    //Here you set cookies to variable:
    const cookieCu = getCookie(cookieCu.value);
   
    //Here you check if cookie exist and set scrolling to last positon
    if (cookieCu) {
        document.addEventListener("DOMContentLoaded", function (event) {
            var scrollpos = localStorage.getItem("scrollpos");
            if (scrollpos) window.scrollTo(0, scrollpos);
        });
        
        window.onscroll = function (e) {
            localStorage.setItem("scrollpos", window.scrollY);
        };
    }
} else {

    //Here removing cookie after leave product page to prevent scrolling on other products
    document.cookie = cookieCu + '=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}

Code above is not finished and for sure not working, you must edit it by adding own code and probably fixing some bugs.

 

Second way much easier is buy some module that save customization on clicking add to cart button.

Thank you for your help. 

I already bougth this module, but I dont understand the "selector options" therefore not working.  

https://store.webkul.com/Prestashop-Add-product-with-customisation-directly-into-cart.html

[endriu107]

try this:

  button[name="submitCustomizedData"]

  .btn.btn-default.btn-large.add-to-cart.btn-full-width btn-spin

  .product-customization.mb-3

  .product-message

  .file-input.js-file-input

  #main

 

or contact with module developer.

[DroidXX]

 Now the cart button and save button also disappeared. Yep, you are right, I have to contact the developer.

Edited October 10, 2023 by DroidXX (see edit history)