Bigcommerce模具/粘性添加到购物车按钮未注册产品选项

Question

[当用户向下滚动产品页面时，我正在尝试实现添加到购物车的粘性栏。

除了产品的'default'值正常外，其他所有东西都工作正常。当我选择说红色和大号并单击粘性的“添加到购物车”时，我将使用该产品的默认值重定向到购物车，即“中黑”。

我无法解决这个问题。

这是我的代码；

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

但是我想我必须以某种方式将动态组件与JS链接起来，在上层原始产品选项中选择了什么？

因为我尝试删除此div：

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

它甚至都没有将我重定向到购物车，但是当div存在时，它会将我重定向到具有“默认”设置的购物车。

有任何对此的经验，我将非常感激。不确定是否需要这里的JS，或者没有它我也可以处理。

谢谢。祝你今天愉快！

Answer 1

解决了将表格保留在主CTA上并仅从中复制值的问题。

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

帮助的信用转到：https://arcticleaf.io/