1

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

除了产品的“默认”值有效外，一切似乎都运行良好。当我选择让我们说颜色红色和尺寸大并单击粘性添加到购物车时，我将被重定向到具有该产品默认值的购物车，例如中黑色。

我无法解决如何解决这个问题。

所以这是我的代码；

<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，或者我可以在没有它的情况下处理它。

谢谢你。祝你今天过得愉快！

4

1 回答 1

1

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

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

感谢您的帮助：https ://arcticleaf.io/

于 2020-04-12T09:18:36.217 回答