CODEWITHSUNDEEP
javascriptbigcommerce
Jaroslav Melich
Jaroslav Melich

Reputation: 107

Page scrolling on click event

I am creating a sticky add to cart form for a Product Page.

There is basically a copy of the initial input field of the product, so the swatches and size selectors.

Everything works fine expect one little issue, when I click something on the sticky element it changes the corresponding elemnt on the first one also, but it redirect the user to the top of the page.

I tried preventDefault(), stopPropagation(), and return false; but it canceled the whole funcionality of the sticky buttons and I am kind of clueless at this point where to look for errors.

Here is the store the pass is: o1xezsotq3

The HTML code for the form is: 

<div class="form-field-sticky" data-product-attribute="swatch-2">


{{#each this.values}}
    <input class="form-radio" type="radio" name="attribute[{{../id}}]" value="{{id}}" id="attribute_swatch_{{../id}}_{{id}}" {{#if selected}}checked data-default{{/if}} {{#if ../required}}required{{/if}}>
    <label class="form-option form-option-swatch" for="attribute_swatch_{{../id}}_{{id}}" data-product-attribute-value="{{id}}">
        {{#if image}}
            <span class='form-option-variant form-option-variant--pattern' title="{{this.label}}" style="background-image: url('{{getImage image "swatch_option_size"}}');"></span>
        {{/if}}
        {{#if data.[2]}}
            <span class='form-option-variant form-option-variant--color' title="{{this.label}}" style="background-color: #{{data.[0]}}"></span>
            <span class='form-option-variant form-option-variant--color' title="{{this.label}}" style="background-color: #{{data.[1]}}"></span>
            <span class='form-option-variant form-option-variant--color' title="{{this.label}}" style="background-color: #{{data.[2]}}"></span>
        {{else}}
            {{#if data.[1]}}
                <span class='form-option-variant form-option-variant--color' title="{{this.label}}" style="background-color: #{{data.[0]}}"></span>
                <span class='form-option-variant form-option-variant--color' title="{{this.label}}" style="background-color: #{{data.[1]}}"></span>
            {{else}}
                {{#if data.[0]}}
                    <span class='form-option-variant form-option-variant--color' title="{{this.label}}" style="background-color: #{{data.[0]}}"></span>
                {{/if}}
            {{/if}}
        {{/if}}
        {{#if pattern}}
            <span class="form-option-expanded">
                <span class="form-option-image" style="background-image: url('{{getImage image 'core-swatch'}}');"></span>
            </span>
        {{/if}}
    </label>
{{/each}}

The add to cart button works fine with this JS: 

$('$stickyBuy').on('click', () => {
$('[name="product_id"]').parents('form').submit();
});

And the swatches I was trying this kind of JS on them: 

$('.form-field-sticky').on('change', (event) => {
    const $changed = $(event.currentTarget);
    const toChange = $changed.attr('name');
    const changedVal = $changed.val();
    $('[name="product_id"]').parents('form').find(`[name="${toChange}"]`).val(changedVal).change();
});

The thing which I noticed, is that the form automatically updates itself without the JS, when the IDs are same so this line:

id="attribute_swatch_{{../id}}_{{id}}"

When I adjusted it like this:

id="attribute_swatch_{{../id}}_{{id}}_sticky"

The funcionality stopped working, but I just cannot get it working with the JS code I posted for updating the two forms simuntaniosly - so when one changes, also update the other one - without being redicted on the top of the page to the original swatches.

Could someone, please, help me with this? I would be really grateful.

Thank you very much! Have a nice day.

Upvotes: 0

Views: 200

Answers (1)

Jaroslav Melich
Jaroslav Melich

Reputation: 107

Fixed with adding 

            event.target.focus({preventScroll: true});

Upvotes: 1

Related Questions