跳过添加到购物车处理并直接跳转到结账页面从产品详细信息页面单击Shopify

问题描述：

中的某个按钮我正在为Shopify开发一个以Brooklyn Theme为客户的Shopify项目。我们的客户只有三种产品可以展示每种产品4种变体。根据要求，我们不必在购物车页面上重定向，只需在添加变体后点击产品页面上的按钮即可重定向到结账页面。跳过添加到购物车处理并直接跳转到结账页面从产品详细信息页面单击Shopify

为此，我已经使用Google搜索来找到正确的解决方案，但无法为此提供正确的解决方案。所以我用jquery编写了这个过程，它正在工作。但是我所做的过程是一种讨厌的方式，我想要一些清洁的过程。我知道有一个应用程序，但我的客户不打算购买任何应用程序。

我的脚本是什么：

在产品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>

虽然它的工作我不开心与此因为它正在重定向到购物车页面，然后是结账页面，因为我已经强制购物车添加表单并提交C heckout点击购物车液体页面上的点击事件。

在购物车页面我可能有其他预加载器来隐藏内容。所有这些都是令人讨厌的过程。任何人都可以请指导我的任何更简单和清洁的过程。

在此先感谢。

答

是的，它可以做得更容易。

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的产品和成功，我们触发结帐按钮点击。所有这些都是在产品页面上完成的。

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

谢谢@drip。我认为它会起作用。我很快就会写在这里。 –

我试过你的代码。这是重定向，但我看到，我有三个变种。第一个变体工作正常，但每个选择后两个变体后，购物车不会更新当前的变体ID。我不知道，但值是{{product.selected_or_first_available_variant.id}}。它仍然采用以前的变体ID。您可以查看https://slime-box-subscription.myshopify.com/products/monthly-plan。前端密码是：tricla。提前致谢。 –

您必须更新多个变体的逻辑并使用具有所有不同选项的选择。提供的HTML仅仅是您可以在上面构建的单个变体的基本示例，因为如果您无法使用所有变体编写select，那么这不再帮助有需要的编码人员，而是为客户提供免费服务，这是不正确的。 – drip

答

如果你能够确定所选择的版本的网址，你可以跳过所有其他功能和使用以下URL结构结帐页面上直接登陆 -

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

只要你的客户重定向到上述结构的网址你就完成了。

跳过添加到购物车处理并直接跳转到结账页面从产品详细信息页面单击Shopify

相关推荐