Question

如何在没有支付网关的情况下在 Shopify 中创建自定义立即购买按钮。它应该被重定向到结帐页面。

        {{ form | payment_button }}

上面是一个动态按钮。但不想重定向到支付网关。它应该重定向到结帐。

我尝试了下面的代码。这不好。它还会显示一个用于添加到购物车和重定向的弹出窗口。

  <form action="/cart/add" method="post" class="variants" id="product-actions-{{ product.id }}" enctype="multipart/form-data">
<input type="hidden" name="variantId" value="{{ product.variants[0].id }}" />
<button class="button buynow-btn" title="Buy" onClick="instantBuy()"><span>Buy now</span></button>
</form>

 function instantBuy(){
     var $ = jQuery;
   $(".engo-popup").hide();

   var formParams = $('form.cart').serialize();
     $.ajax({
      url: "/cart/add",
      type: "post",
      data: formParams,
      success: function(){
       window.location.href = "/checkout";
      },
      error: function(){
      }
     })
    }

Answer 1

<h2 id="create-a-buy-button-for-a-single-product">
<a class="anchor" aria-hidden="true" href="#create-a-buy-button-for-a-single-product"><svg viewbox="0 0 20 20" width="20" height="20" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M6.534 18a4.507 4.507 0 01-3.208-1.329 4.54 4.54 0 010-6.414l1.966-1.964a.999.999 0 111.414 1.414L4.74 11.671a2.54 2.54 0 000 3.586c.961.959 2.631.958 3.587 0l1.966-1.964a1 1 0 111.415 1.414l-1.966 1.964A4.503 4.503 0 016.534 18zm7.467-6a.999.999 0 01-.707-1.707l1.966-1.964a2.54 2.54 0 000-3.586c-.961-.959-2.631-.957-3.587 0L9.707 6.707a1 1 0 11-1.415-1.414l1.966-1.964A4.503 4.503 0 0113.466 2c1.211 0 2.351.472 3.208 1.329a4.541 4.541 0 010 6.414l-1.966 1.964a.997.997 0 01-.707.293zm-6.002 1a.999.999 0 01-.707-1.707l4.001-4a1 1 0 111.415 1.414l-4.001 4a1 1 0 01-.708.293z" fill="currentColor"></path></svg></a>Create a Buy Button for a single product</h2>
<p>You can create a Buy Button for a single product. The Buy Button can include one or all of the product's variants. When you create the Buy Button, you choose a layout style and customize the button's color, text, and appearance, as well as the action that happens when a customer clicks it. Learn more about <a href="#customizing-buy-buttons">customizing Buy Buttons</a>.</p><p>Before you create a Buy Button for a product, you must have <a href="/en/manual/products/add-update-products#add-a-new-product">added the product in your Shopify Admin</a> and <a href="/en/manual/products/add-update-products#make-products-available-on-your-sales-channels">made it available</a> to the Buy Button sales channel.</p>
<h4 id="steps">
<a class="anchor" aria-hidden="true" href="#steps"><svg viewbox="0 0 20 20" width="20" height="20" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M6.534 18a4.507 4.507 0 01-3.208-1.329 4.54 4.54 0 010-6.414l1.966-1.964a.999.999 0 111.414 1.414L4.74 11.671a2.54 2.54 0 000 3.586c.961.959 2.631.958 3.587 0l1.966-1.964a1 1 0 111.415 1.414l-1.966 1.964A4.503 4.503 0 016.534 18zm7.467-6a.999.999 0 01-.707-1.707l1.966-1.964a2.54 2.54 0 000-3.586c-.961-.959-2.631-.957-3.587 0L9.707 6.707a1 1 0 11-1.415-1.414l1.966-1.964A4.503 4.503 0 0113.466 2c1.211 0 2.351.472 3.208 1.329a4.541 4.541 0 010 6.414l-1.966 1.964a.997.997 0 01-.707.293zm-6.002 1a.999.999 0 01-.707-1.707l4.001-4a1 1 0 111.415 1.414l-4.001 4a1 1 0 01-.708.293z" fill="currentColor"></path></svg></a>Steps:</h4>

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal">
<li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">Desktop</a></li>
<li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li>
<li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li>
</ul></div>
<div class="desktop active changeable-content"><ol>
<li><p>From your Shopify admin, go to <a href="https://www.shopify.com/admin/apps/buy_button"><strong>Buy Button</strong></a>.</p></li>
<li><p>Click <strong>Create a Buy Button</strong>.</p></li>
<li><p>Click <strong>Product Buy Button</strong>.</p></li>
<li><p>Select the product from your catalog or use the search to find a product. Click <strong>Select</strong>.</p></li>
<li>
<p>Optional: customize the Buy Button.</p>
<ol>
<li> If your product has variants, then select <strong>All variants</strong> or select the variant that you want to include.
</li>
<li> Choose a <a href="#layout-style">layout style</a> and the <a href="#buy-button-action">action</a> that happens when a customer clicks the button. You can also <a href="#buy-button-appearance">customize the button's appearance</a>.
</li>
<li> By default the checkout behavior opens a new window but you can choose to open the checkout in the same browser tab as your website. Click <strong>Advanced settings</strong> &gt; <strong>Redirect in the same tab</strong>.
</li>
</ol>
</li>
<li><p>Click <strong>Next</strong>.</p></li>
<li><p>Click <strong>Copy code</strong>.</p></li>
<li><p>Open the HTML editor for the webpage where you want to display the Buy Button. Refer to <a href="/manual/sell-online/buy-button/add-embed-code"><em>Adding Buy Button code to HTML</em></a>.</p></li>
<li><p>Paste the code within the HTML where you want the Buy Button to appear, and then save your changes.</p></li>
</ol></div>
<div class="iphone changeable-content"><ol>
<li><p>From the <a href="https://www.shopify.com/install/detect">Shopify app</a>, tap <strong>Store</strong>.</p></li>
<li><p>In the <strong>Sales channel</strong> section, tap <strong>Buy Button</strong>.</p></li>
<li><p>Click <strong>Create a Buy Button</strong>.</p></li>
<li><p>Click <strong>Product Buy Button</strong>.</p></li>
<li><p>Select the product from your catalog or use the search to find a product. Click <strong>Select</strong>.</p></li>
<li>
<p>Optional: click <strong>Customize</strong>.</p>
<ol>
<li>If your product has multiple variants, then select <strong>All variants</strong> or select a variant from the drop-down list.
</li>
<li>Choose a <a href="#layout-style">layout style</a> and the <a href="#buy-button-action">action</a> that happens when a customer clicks the button. You can also <a href="#buy-button-appearance">customize the button's appearance</a>.
</li>
<li>By default the checkout behavior opens a new window but you can choose to open the checkout in the same browser tab as your website. Click <strong>Advanced settings</strong> &gt; <strong>Redirect in the same tab</strong>.
</li>
</ol>
<aside class="note tip">
  <h4>Tip</h4>
  <p>
At any time, to see what your button looks like, tap <strong>Preview</strong>.</p>
</aside>
</li>
<li><p>Click <strong>Done</strong>.</p></li>
<li><p>Click <strong>Copy code</strong>.</p></li>
<li><p>Open the HTML editor for the webpage where you want to display the Buy Button. Refer to <a href="/manual/sell-online/buy-button/add-embed-code"><em>Adding Buy Button code to HTML</em></a>.</p></li>
<li><p>Paste the code within the HTML where you want the Buy Button to appear, and then save your changes.</p></li>
</ol></div>
<div class="android changeable-content"><ol>
<li><p>From the <a href="https://www.shopify.com/install/detect">Shopify app</a>, tap <strong>Store</strong>.</p></li>
<li><p>In the <strong>Sales channel</strong> section, tap <strong>Buy Button</strong>.</p></li>
<li><p>Click <strong>Create a Buy Button</strong>.</p></li>
<li><p>Click <strong>Product Buy Button</strong>.</p></li>
<li><p>Select the product from your catalog or use the search to find a product. Click <strong>Select</strong>.</p></li>
<li>
<p>Optional: click <strong>Customize</strong>.</p>
<ol>
<li>If your product has multiple variants, then select <strong>All variants</strong> or select a variant from the drop-down list.
</li>
<li>Choose a <a href="#layout-style">layout style</a> and the <a href="#buy-button-action">action</a> that happens when a customer clicks the button. You can also <a href="#buy-button-appearance">customize the button's appearance</a>.
</li>
<li>By default the checkout behavior opens a new window but you can choose to open the checkout in the same browser tab as your website. Click <strong>Advanced settings</strong> &gt; <strong>Redirect in the same tab</strong>.
</li>
</ol>
<aside class="note tip">
  <h4>Tip</h4>
  <p>
At any time, to see what your button looks like, tap <strong>Preview</strong>.</p>
</aside>
</li>
<li><p>Click <strong>Done</strong>.</p></li>
<li><p>Click <strong>Copy code</strong>.</p></li>
<li><p>Open the HTML editor for the webpage where you want to display the Buy Button. Refer to <a href="/manual/sell-online/buy-button/add-embed-code"><em>Adding Buy Button code to HTML</em></a>.</p></li>
<li><p>Paste the code within the HTML where you want the Buy Button to appear, and then save your changes.</p></li>
</ol></div>
</div>

<h2 id="create-a-buy-button-for-a-collection">
<a class="anchor" aria-hidden="true" href="#create-a-buy-button-for-a-collection"><svg viewbox="0 0 20 20" width="20" height="20" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M6.534 18a4.507 4.507 0 01-3.208-1.329 4.54 4.54 0 010-6.414l1.966-1.964a.999.999 0 111.414 1.414L4.74 11.671a2.54 2.54 0 000 3.586c.961.959 2.631.958 3.587 0l1.966-1.964a1 1 0 111.415 1.414l-1.966 1.964A4.503 4.503 0 016.534 18zm7.467-6a.999.999 0 01-.707-1.707l1.966-1.964a2.54 2.54 0 000-3.586c-.961-.959-2.631-.957-3.587 0L9.707 6.707a1 1 0 11-1.415-1.414l1.966-1.964A4.503 4.503 0 0113.466 2c1.211 0 2.351.472 3.208 1.329a4.541 4.541 0 010 6.414l-1.966 1.964a.997.997 0 01-.707.293zm-6.002 1a.999.999 0 01-.707-1.707l4.001-4a1 1 0 111.415 1.414l-4.001 4a1 1 0 01-.708.293z" fill="currentColor"></path></svg></a>Create a Buy Button for a collection</h2>
<p>When you create a Buy Button for a collection, you are actually creating a button for each product in the collection.</p><p>When you create the Buy Button, you choose a layout style and customize the button's color, text, and appearance, as well as the action that happens when a customer clicks it. Learn more about <a href="#customizing-buy-buttons">customizing Buy Buttons</a>.</p><p>Before you create a Buy Button for a collection, you must have:</p>
<ul>
<li>
<a href="/en/manual/products/add-update-products#add-a-new-product">Added the products in your Shopify Admin</a>,
</li>
<li>
<a href="/en/manual/products/add-update-products#make-products-available-on-your-sales-channels">Made the products available to the Buy Button sales channel</a>
</li>
<li>
<a href="/en/manual/products/collections">Created the collection</a>.
</li>
</ul>

<h4 id="steps">
<a class="anchor" aria-hidden="true" href="#steps"><svg viewbox="0 0 20 20" width="20" height="20" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M6.534 18a4.507 4.507 0 01-3.208-1.329 4.54 4.54 0 010-6.414l1.966-1.964a.999.999 0 111.414 1.414L4.74 11.671a2.54 2.54 0 000 3.586c.961.959 2.631.958 3.587 0l1.966-1.964a1 1 0 111.415 1.414l-1.966 1.964A4.503 4.503 0 016.534 18zm7.467-6a.999.999 0 01-.707-1.707l1.966-1.964a2.54 2.54 0 000-3.586c-.961-.959-2.631-.957-3.587 0L9.707 6.707a1 1 0 11-1.415-1.414l1.966-1.964A4.503 4.503 0 0113.466 2c1.211 0 2.351.472 3.208 1.329a4.541 4.541 0 010 6.414l-1.966 1.964a.997.997 0 01-.707.293zm-6.002 1a.999.999 0 01-.707-1.707l4.001-4a1 1 0 111.415 1.414l-4.001 4a1 1 0 01-.708.293z" fill="currentColor"></path></svg></a>Steps:</h4>

<div class="section-tag-block">
  <div class="sections-menu"><ul class="in-page-menu in-page-menu--horizontal">
<li class="js-is-active"><a href="#" class="desktop marketing-button marketing-button--small">Desktop</a></li>
<li class=""><a href="#" class="iphone marketing-button marketing-button--small">iPhone</a></li>
<li class=""><a href="#" class="android marketing-button marketing-button--small">Android</a></li>
</ul></div>
<div class="desktop active changeable-content"><ol>
<li><p>From your Shopify admin, go to <a href="https://www.shopify.com/admin/apps/buy_button"><strong>Buy Button</strong></a>.</p></li>
<li><p>Click <strong>Create a Buy Button</strong>.</p></li>
<li><p>Click <strong>Collection Buy Button</strong>.</p></li>
<li><p>Select the collection or, use the search to find the collection. Click <strong>Select</strong>.</p></li>
<li>
<p>Optional: customize the Buy Button.</p>
<ol>
<li>Choose the <a href="#buy-button-action">action</a> that happens when a customer clicks the button. You can also <a href="#buy-button-appearance">customize the button's appearance</a>.
</li>
<li>By default the checkout behavior opens a new window but you can choose to open the checkout in the same browser tab as your website. Click <strong>Advanced settings</strong> &gt; <strong>Redirect in the same tab</strong>.
</li>
</ol>
</li>
<li><p>Click <strong>Next</strong>.</p></li>
<li><p>Click <strong>Copy code</strong>.</p></li>
<li><p>Open the HTML editor for the webpage where you want to display the Buy Button. Refer to <a href="/manual/sell-online/buy-button/add-embed-code"><em>Adding Buy Button code to HTML</em></a>.</p></li>
<li><p>Paste the code within the HTML where you want the Buy Button to appear, and then save your changes.</p></li>
</ol></div>
<div class="iphone changeable-content"><ol>
<li><p>From the <a href="https://www.shopify.com/install/detect">Shopify app</a>, tap <strong>Store</strong>.</p></li>
<li><p>In the <strong>Sales channel</strong> section, tap <strong>Buy Button</strong>.</p></li>
<li><p>Click <strong>Create a Buy Button</strong>.</p></li>
<li><p>Click <strong>Collection Buy Button</strong>.</p></li>
<li><p>Select the collection or, use the search to find the collection. Click <strong>Select</strong>.</p></li>
<li>
<p>Optional: click <strong>Customize</strong>.</p>
<ol>
<li>Choose the <a href="#buy-button-action">action</a> that happens when a customer clicks the button. You can also <a href="#buy-button-appearance">customize the button's appearance</a>.
</li>
<li>By default the checkout behavior opens a new window but you can choose to open the checkout in the same browser tab as your website. Click <strong>Advanced settings</strong> &gt; <strong>Redirect in the same tab</strong>.
</li>
</ol>
<aside class="note tip">
  <h4>Tip</h4>
  <p>
At any time, to see what your button looks like, tap <strong>Preview</strong>.</p>
</aside>
</li>
<li><p>Click <strong>Done</strong>.</p></li>
<li><p>Click <strong>Copy code</strong>.</p></li>
<li><p>Open the HTML editor for the webpage where you want to display the Buy Button. Refer to <a href="/manual/sell-online/buy-button/add-embed-code"><em>Adding Buy Button code to HTML</em></a>.</p></li>
<li><p>Paste the code within the HTML where you want the Buy Button to appear, and then save your changes.</p></li>
</ol></div>
<div class="android changeable-content"><ol>
<li><p>From the <a href="https://www.shopify.com/install/detect">Shopify app</a>, tap <strong>Store</strong>.</p></li>
<li><p>In the <strong>Sales channel</strong> section, tap <strong>Buy Button</strong>.</p></li>
<li><p>Click <strong>Create a Buy Button</strong>.</p></li>
<li><p>Click <strong>Collection Buy Button</strong>.</p></li>
<li><p>Select the collection or, use the search to find the collection. Click <strong>Select</strong>.</p></li>
<li>
<p>Optional: click <strong>Customize</strong>.</p>
<ol>
<li>Choose the <a href="#buy-button-action">action</a> that happens when a customer clicks the button. You can also <a href="#buy-button-appearance">customize the button's appearance</a>.
</li>
<li>By default the checkout behavior opens a new window but you can choose to open the checkout in the same browser tab as your website. Click <strong>Advanced settings</strong> &gt; <strong>Redirect in the same tab</strong>.
</li>
</ol>
<aside class="note tip">
  <h4>Tip</h4>
  <p>
At any time, to see what your button looks like, tap <strong>Preview</strong>.</p>
</aside>
</li>
<li><p>Click <strong>Done</strong>.</p></li>
<li><p>Click <strong>Copy code</strong>.</p></li>
<li><p>Open the HTML editor for the webpage where you want to display the Buy Button. Refer to <a href="/manual/sell-online/buy-button/add-embed-code"><em>Adding Buy Button code to HTML</em></a>.</p></li>
<li><p>Paste the code within the HTML where you want the Buy Button to appear, and then save your changes.</p></li>
</ol></div>
</div>

Answer 2

它在表单内。这就是它显示弹出窗口的原因

  
 function instantBuy(){
     var $ = jQuery;

   var formParams = $('form.cart').serialize();
     $.ajax({
      url: "/cart/add",
      type: "post",
      data: formParams,
      success: function(){ 
       window.location.href = "/checkout";
      },
      error: function(){
      }
     })
 }

 {% endform %}
<form action="/cart/add" method="post" class="variants" id="product-actions-{{ product.id }}" enctype="multipart/form-data">
<input type="hidden" name="variantId" value="{{ product.variants[0].id }}" />
<button class="button buynow-btn" title="Buy" onClick="instantBuy()"><span>Buy now</span></button>
</form>

shopify 中的自定义立即购买按钮

2 个答案: