HeaderScroll addon - need help with default setting

[Demitry]

hi,

I need some help to solve an interesting code logic puzzle with an addon for header scrolling on the product_info.php page. This one:

https://apps.oscommerce.com/eZbEr&headerscroll-for-oscv2-3-4-bs-edge

This is a module for the product_info.php page where a customer can check the HeaderScroll checkbox and each time they load a product page, that page will load scrolled past the header. This spotlights the product offering with each product view and the customer has full control to enable or disable this feature for their session.

~~~~

What I have not been able to solve is how to set the HeaderScroll checkbox to be enabled (checked) by default when the customer’s session starts. The user’s checkbox input is stored in sessionStorage.

I tried the most obvious… setting the checkbox $checked value to true,.. and I tried the same using jQuery on document ready, but with both of these tactics the checkbox only flashes checked for a split second and then applies the unchecked status from sessionStorage.

The challenge is to possibly set sessionStorage to have the checkbox enabled, but only on the very first instance (product page visit). Otherwise it will always revert to being checked on each new product page load regardless of the customer’s preferred selection.

Here is the jQuery for the sessionStorage part of this feature:

 

// HeadScroll save checkbox state to session
$(function(){
    $('#scroll').each(function() {
        var $el = $(this);
        $el.prop('checked', sessionStorage[$el.prop('id')] === 'true');
    });

    $('#scroll').on('change', function() {
        var $el = $(this);
        sessionStorage[$el.prop('id')] = $el.is(':checked');
    });
});

Any help would be greatly appreciated.

 

PS: Please note that this is not a support thread for this addon. I’m just trying to get some assistance to improve it for the osC community.

[♥ecartz]

According to Mozilla at https://developer.mozilla.org/en-US/docs/Web/API/Storage/getItem

You can say instead: 

// HeadScroll save checkbox state to session
$(function(){
    $('#scroll').each(function() {
        var $el = $(this);
        var $checked = sessionStorage.getItem($el.prop('id'));
        if ($checked === null) {
            sessionStorage.setItem($el.prop('id'), 'true');
        }
        $el.prop('checked', sessionStorage[$el.prop('id')] === 'true');
    });

    $('#scroll').on('change', function() {
        var $el = $(this);
        sessionStorage[$el.prop('id')] = $el.is(':checked');
    });
});

I haven't tried this.  This is just from looking at docs. 

[Demitry]

@ecartz

Matt,

I apologize, I just saw your reply now. I have added myself as a follower of this post, but never got a notification of your reply, and I only noticed today that the heading title for this thread was in bold in my profile.

Anyway, thank you so much for your rely and your solution. I tested it just now and it works Perfectly!!!  That's exactly what I was looking for.

Demitry