跳過添加到購物車處理並直接跳轉到結賬頁面從產品詳細信息頁面單擊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點擊購物車液體頁面上的點擊事件。

在購物車頁面我可能有其他預加載器來隱藏內容。所有這些都是令人討厭的過程。任何人都可以請指導我的任何更簡單和清潔的過程。

在此先感謝。

來源

2017-07-13 Amitabha Ghosh

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

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的產品和成功，我們觸發結帳按鈕點擊。所有這些都是在產品頁面上完成的。

這就是你所需要的，沒有重定向或複雜的邏輯。

來源

2017-07-13 12:10:40 drip

謝謝@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

只要你的客戶重定向到上述結構的網址你就完成了。

來源

2017-07-14 11:59:30 HymnZ

跳過添加到購物車處理並直接跳轉到結賬頁面從產品詳細信息頁面單擊Shopify

回答

相關問題