Skifyカートに入れるプロセスと直接リダイレクトをCheckoutページに移動ProductifyページからShopifyでボタンをクリック

Question

私はクライアントのためにBrookify Themeを使ってShopifyでプロジェクトを開発しています。当社のクライアントは、各製品に4種類のバリエーションを使用して3つの製品のみを表示しています。要件に応じて、カートゥーンページにリダイレクトする必要はありません。バリエーションを追加した後、商品ページのボタンをクリックするとチェックアウトページにリダイレクトするだけです。

これについては、適切な解決策を見つけるために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') 
    }); 
}); 

そして、私がこれで満足していない作業をしているがにテンプレート

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

    }); 
</script> 

をcart.liquidそれはカートのページにリダイレクトされているので、私は強制的にカートに提出するフォームを追加してからCページをチェックアウトするヘックアウト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 

ただ、上記のように構成されたURLに顧客をリダイレクトあなたは終わります。