Bigcommerce Stencil / Sticky добавить в корзину кнопка не регистрирует варианты продукта - PullRequest
Новая
       158

Bigcommerce Stencil / Sticky добавить в корзину кнопка не регистрирует варианты продукта

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

Я пытаюсь реализовать панель «Добавить в корзину», когда пользователи прокручивают страницу продукта.

Кажется, все работает нормально, кроме значения «по умолчанию» для продукта. Когда я выбираю, скажем, цвет Красный и размер Большой, и нажимаю наклейку «Добавить в корзину», я перенаправляюсь в корзину со значениями по умолчанию для этого продукта, поэтому средний - черный.

Я не могу обернуть голову, как решить this.

Вот мой код; 

<section class="productStickyAdd fading" id="stickyIckyStuff">
<div class="productStickyAdd-container">
    <div class="sticky-labeling">
        <span class="stickyTitle">
            {{product.title}}
        </span>
        <span class="stickyPrice">
            {{#or customer (if theme_settings.restrict_to_login '!==' true)}}
            {{> components/products/price price=product.price schema_org=schema}}
            {{else}}
            {{> components/common/login-for-pricing}}
            {{/or}}
        </span>
    </div>
    <form class="form" method="post" action="{{product.cart_url}}" enctype="multipart/form-data"
          data-cart-item-add>
        <input type="hidden" name="action" value="add">
        <input type="hidden" name="product_id" value="{{product.id}}"/>
        <div data-product-option-change style="display:none;">
            {{#each product.options}}
            {{{dynamicComponent 'components/products/options'}}}
            {{/each}}
        </div>
        {{#if product.can_purchase}}
            {{> components/products/add-to-cart}}
        {{/if}}
        {{#if product.out_of_stock}}
        {{#if product.out_of_stock_message}}
            {{> components/common/alert-error product.out_of_stock_message}}
        {{else}}
            {{> components/common/alert-error (lang 'products.sold_out')}}
        {{/if}}
        {{/if}}
    </form>
</div>

Я использую те же значения, что и в стандартном CTA: 

        <form class="form" method="post" action="{{product.cart_url}}" enctype="multipart/form-data"
          data-cart-item-add>
        <input type="hidden" name="action" value="add">
        <input type="hidden" name="product_id" value="{{product.id}}"/>
        <div data-product-option-change style="display:none;">
            {{#each product.options}}
            {{{dynamicComponent 'components/products/options'}}}
            {{/each}}
        </div>

Но я предполагаю, что мне нужно каким-то образом связать компоненты c dynamici с JS, что было выбрано в верхнем, исходном варианте продукта?

Потому что, когда я пытался удалить этот div: 

       <div data-product-option-change style="display:none;">
        {{#each product.options}}
        {{{dynamicComponent 'components/products/options'}}}
        {{/each}}
    </div>

Он даже не перенаправил меня в корзину, но когда div там, он перенаправил меня в корзину с настройками по умолчанию ,

Есть кто-нибудь с этим опытом, я был бы очень благодарен. Не совсем уверен, нужен ли JS здесь или я справлюсь без него.

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

1 Ответ

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

Решено, оставив форму на главном CTA и просто скопировав из нее значения. 

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

Кредит на помощь идет: https://arcticleaf.io/

...