Прокрутка страницы по событию клика - PullRequest
Новая
       86

Прокрутка страницы по событию клика

0 голосов
/ 13 апреля 2020

Я создаю прикрепленную форму добавления в корзину для страницы продукта.

По сути, имеется копия начального поля ввода продукта, поэтому образцы и селекторы размера.

Все работает нормально, ожидайте одну маленькую проблему, когда я нажимаю на липкий элемент также изменяет соответствующий элемент на первом, но он перенаправляет пользователя на верх страницы.

Я попробовал preventDefault(), stopPropagation(), and return false;, но это отменило всю функциональность липких кнопок, и я немного не понимаю, где искать ошибки.

Вот магазин пропуск: o1xezsotq3

Код HTML для формы: 

<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}}

Кнопка «Добавить в корзину» прекрасно работает с этим JS: 

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

И образцы, которые я пробовал на них JS: 

$('.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();
});

Я заметил, что форма автоматически обновляется без JS, когда идентификаторы совпадают, поэтому эта строка: 

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

Когда я настроил ее так: 

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

Функциональность перестала работать, но я просто не могу заставить ее работать с кодом JS, который я выложил для одновременного обновления двух форм - поэтому, когда одна изменяется, обновляется и другая - без повторного вызова на верх страницы к исходным образцам.

Может кто-нибудь, пожалуйста, помогите мне с этим? Я был бы очень благодарен.

Большое спасибо! Хорошего дня.

1 Ответ

1 голос
/ 20 апреля 2020

Исправлено с добавлением 

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