我正在为客户在 Shopify 中开发一个带有布鲁克林主题的项目。我们的客户仅展示三种产品,每种产品有 4 个变体。根据要求,我们不必在购物车页面上重定向,只需在添加变体后单击产品页面上的按钮即可重定向到结账页面。
为此,我用谷歌搜索找到正确的解决方案,但找不到正确的解决方案。所以我用 jquery 编写了这个过程,它正在工作。但我所做的过程是一种令人讨厌的方式,我想要一些干净的过程。我知道有一个应用程序,但我的客户不打算为其购买任何应用程序。
我编写的脚本是:
在product-template.liquid文件中,我注释掉了“添加到购物车”按钮,而是添加了一个按钮。
<button name="checkoutty" class="btn to">Checkout</button>
Run Code Online (Sandbox Code Playgroud)
以及该液体模板中的脚本:
$(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')
});
});
Run Code Online (Sandbox Code Playgroud)
并在cart.liquid模板中
<script>
$(window).load(function(){
$('.cart__checkout').trigger('click');
});
</script>
Run Code Online (Sandbox Code Playgroud)
虽然它正在工作,但我对此并不满意,因为它重定向到购物车页面,然后重定向到结帐页面,因为我强制提交购物车添加表单,然后在购物车液体页面上结帐 btn 单击事件。
在购物车页面上,我可能有额外的预加载器来隐藏内容。所以这一切都是令人讨厌的过程。任何人都可以指导我进行任何更简单和干净的过程吗?
提前致谢。