如何在 Bigcommerce 优化结帐中触发对无线电输入的反应

Question

我正在尝试 select Bigcommerce 优化结帐中的特定送货选项 jquery 仅针对一个客户组。这适用于旧式结帐。在优化的结帐中，脚本 select 是正确的单选按钮，但不会更新运费。

if ($('.shippingOptions-container .form-checklist-header--selected:contains("UK Standard")').length) {
  $('.shippingOptions-container li:first-child').css("display", "none");
    $('.shippingOptions-container li input').prop('checked', false);   
    $('.shippingOptions-container li:last-child input:radio').prop('checked', true); // Select last option
    
  //Need to trigger react here?
}

作为参考，这里是 HTML 结帐送货选项：

<div class="shippingOptions-container form-fieldset">
  <div class="loadingOverlay-container">
    <ul class="form-checklist optimizedCheckout-form-checklist">
      <li class="form-checklist-item optimizedCheckout-form-checklist-item">
        <div class="form-checklist-header">
          <div class="form-field">
            <input name="shippingOptionIds.614eb9138f512" class="form-checklist-checkbox optimizedCheckout-form-checklist-checkbox" id="shippingOptionRadio-614eb9138f512-0c4f74daf3665ba298ee29fce61d0e38" type="radio" value="0c4f74daf3665ba298ee29fce61d0e38" checked="">
            <label for="shippingOptionRadio-614eb9138f512-0c4f74daf3665ba298ee29fce61d0e38" class="form-label optimizedCheckout-form-label">               <div class="shippingOptionLabel">
                 <div class="shippingOption shippingOption--alt">
                    <span class="shippingOption-desc">UK Standard</span>
                    <span class="shippingOption-price">£5.00</span>
                 </div>
              </div>
            </label>
          </div>
        </div>
      </li>
      <li class="form-checklist-item optimizedCheckout-form-checklist-item form-checklist-item--selected optimizedCheckout-form-checklist-item--selected">
        <div class="form-checklist-header form-checklist-header--selected">
          <div class="form-field">
            <input name="shippingOptionIds.614eb9138f512" class="form-checklist-checkbox optimizedCheckout-form-checklist-checkbox" id="shippingOptionRadio-614eb9138f512-6c03494e9505e15542ccfada6b0ac866" type="radio" value="6c03494e9505e15542ccfada6b0ac866">
            <label for="shippingOptionRadio-614eb9138f512-6c03494e9505e15542ccfada6b0ac866" class="form-label optimizedCheckout-form-label">
              <div class="shippingOptionLabel">
                <div class="shippingOption shippingOption--alt">
                  <span class="shippingOption-desc">Express</span>
                  <span class="shippingOption-price">£20.00</span>
                </div>
              </div>
            </label>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

我无法更改任何 HTML，因为这是由 Bigcommerce 控制的结帐的一部分。

如何触发事件，使其更新与手动鼠标单击相同？

Answer 1

我已经非常广泛地研究了这件事，但没有找到关于如何在 BigCommerce 结帐应用程序中触发 React 状态更改的答案。

最后，我不得不采取的方法是使用 storefront checkout API 更新数据，然后触发页面刷新以确保 React 状态与结帐数据匹配。

Answer 2

而不是：

myElement.prop('checked', true);

尝试：

myElement.click();

前者设置了 HTML 输入的值，但是 React 在这个上下文中并不关心那个。使用 click() 模拟用户点击——它触发 onClick() 处理程序，这是 React 看到此更改所需的魔法。

如何在 Bigcommerce 优化结帐中触发对无线电输入的反应

How to trigger react for radio input in Bigcommerce optimized checkout

jquery

bigcommerce

reactjs