跳过添加到购物车流程并从产品详细信息页面直接重定向到结帐页面，点击 Shopify 中的按钮

Question

我正在 Shopify 中为客户开发一个带有布鲁克林主题的项目。我们的客户只有三种产品要展示，每种产品有 4 个变体。根据要求，我们不必在购物车页面上重定向，只需在添加变体后单击产品页面上的按钮即可重定向到结帐页面。

为此，我用谷歌搜索找到正确的解决方案，但找不到正确的解决方案。所以我在jquery中编写了这个过程并且它正在工作。但是我所做的过程是一种讨厌的方式，我想要一些干净的过程。我知道有一个应用程序，但我的客户不打算为它购买任何应用程序。

我的脚本是：

在 product-template.liquid 文件中，我已经注释掉了“添加到购物车”按钮，而是添加了一个按钮。

<button  name="checkoutty" class="btn to">Checkout</button>

以及该液体模板中的脚本：

$(function() {
$(window).on('load',function(){
  $.ajax({
      type: "POST",
      url: '/cart/clear.js',
      success: function(){
        //alert('I cleared the cart!');
       },
      dataType: 'json'
    });

  })
});

 $(document).ready(function(){
$('.single-option-selector__radio').click(function(){
    if($(this).is(':checked')){
        $('.product-single__add-to-cart button[type="submit"]').removeClass('disabled').attr('disabled','');
           $('button[type="submit"]').attr('disabled','');

         }
               });
    $('.to').click(function(){
         $('[action="/cart/add"]').trigger('submit')
    });
 });

在 cart.liquid 模板中

<script>
  $(window).load(function(){
 $('.cart__checkout').trigger('click');

  });
</script>

虽然它正在工作，但我对此并不满意，因为它重定向到购物车页面，然后到结帐页面，因为我已强制提交购物车添加表单，然后在购物车流动页面上结帐 btn 点击事件。

在购物车页面上，我可能有额外的预加载器来隐藏内容。所以所有这些都是令人讨厌的过程。任何人都可以指导我进行更简单和干净的过程。

提前致谢。

Answer 1

是的，它可以更容易地完成。

HTML：

<form action="/cart" method="post" id="addToCart">
    <input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" />
    <input type="submit" value="GO" name="checkout" style="display: none;"  />
    <a href="#" class="add-btn">Add Product</a>
</form>

jQuery:

<script type="text/javascript">
    $('.add-btn').on('click', function(e) {
        var form = $('#addToCart');
        e.preventDefault()

        $.ajax({
            type: 'POST',                             
            url: '/cart/add.js',
            dataType: 'json',                               
            data: form.serialize(),
            success: function(data) {
                form.find('input[name="checkout"]').trigger('click');
            }
        });
    })
</script>

我们使用 AJAX 添加产品，并在成功时触发对结帐按钮的点击。所有这些都在产品页面上完成。

这就是你所需要的，没有重定向或复杂的逻辑。

Answer 2

如果您能够识别所选的变体 URL，则可以跳过所有其他功能并使用以下 URL 结构直接登陆结帐页面 -

https://<your_shop_link>/cart/<variant_id>:<variant_quantity>?checkout

只需将您的客户重定向到上述结构化网址即可。

Answer 3

您还可以在将变体添加到购物车后将客户重定向到/cart/checkout。

例子：

$('.add-btn').on('click', function(e) {
    var form = $('#addToCart');
    e.preventDefault()

    $.ajax({
        type: 'POST',                             
        url: '/cart/add.js',
        dataType: 'json',                               
        data: form.serialize(),
        contentType: false,
        processData: false,
        success: function(data) {
            document.location.href = '/cart/checkout';
        }
    });
})

有了这个，您不需要更改 html 或添加隐藏的输入元素。

点击隐藏的输入元素可能不适用于所有移动设备/浏览器。