使用 shopfiy 模板語言，建立產品模板以搭配購物車實現一鍵購買

shopfiy 的 product 在添加產品時，若是要將產品詳情頁面與購物車關聯，就是在詳情頁裏面直接下單，而不是從詳情頁經過點擊購買按鈕，跳到 shopfy stroe ，再從這個位置再跳轉到下單頁。爲了改變這種不停的跳轉，且若是網絡很差的狀況下，很容易流失客戶。

操做方法能夠簡單描述成這樣：先在 Product 中添加一個產品模板，在當前產品模板中，關聯 Product template 中的 自定義模板，這個自定義模板來自 Online Store 的 Templates：

創建自義定義模板：product.customize.liquid

//這個自定義模板包含通用的產品模板頁中的內容，主要是通用的css / js / 佈局以及購物車相關的代碼塊

<link rel="prefetch prerender stylesheet" type="text/css" href="{{ 'swiper.css' | asset_url }}"/>
<link rel="prefetch prerender stylesheet" type="text/css" href="{{ 'bolt.css' | asset_url "}}" />
<link rel="prefetch prerender stylesheet" type="text/css" href="{{ 'ulbolt-font.css' | asset_url }}"/>
<!--ubolt-pro-animation-->
<link rel="prefetch prerender stylesheet" type="text/css" href="{{ 'ubolt-pro-animation.css' | asset_url }}"/>
<link rel="prefetch prerender stylesheet" type="text/css" href="{{ 'bolt.css' | asset_url "}}" />
<script>
  $(function() {
    $(".opendivbtn").click(function() {
      $(".opendiv.video iframe").attr("src", $(this).attr("href"));
      $(".opendiv.video,.opendivmask").addClass("active");
      return false;
    });
    $(".opendivmask").click(function() {
      $(".opendiv.video iframe").attr("src", "");
      $(".opendiv.video,.opendivmask").removeClass("active");
    });
    $(".ul3_feature_new_1").hover(function() {
      $(this)
      .children(".compare.compareshow")
      .toggleClass("hover");
    });
    $(".compareshow").click(function() {
      $(".opendiv.comparedivwrap,.opendivmask").addClass("active");
      $("html,body").css("overflow", "hidden");
    });
    $(".opendivmask").click(function() {
      $(".opendiv,.opendivmask").removeClass("active");
      $("html,body").css("overflow", "auto");
    });
    $(".opendiv .closediv").click(function() {
      $(".opendivmask").trigger("click");
    });
  });
</script>

<!-- 經過 assign 定義的這個變量是獲取當前產品已經選中的默認屬性值，好比購物車中默認選中的第一個屬性：顏色，大小，材質等 -->
{% assign selectedVariant = product.selected_or_first_available_variant | default: product %}
//通用的 video 彈層
<div class="opendiv video">
  <div class="fluid-width-video-wrapper">
    <iframe src="" frameborder="0" allowfullscreen=""></iframe>
  </div>
</div>
<div class="opendivmask"></div>
//這是通用描述插入方法
{% if product.description.size > 0 %}
<div class="product-description rte" itemprop="description">
  {{ product.description }}
</div>
{% endif %}
//通用的 產品價格插入，這樣寫的目的是若是 shopfiy 的後臺將該產品改掉後，詳情頁也會一塊兒改掉
//product.compare_at_price 原價
//product.price 售價
//須要瞭解 shopfiy 模板語言的使用方法 {{ 變量名稱 ｜ 變量單位 }}

<script>
  jQuery(function(){
    jQuery('.insertPrice .sellingPrice').text("{{ product.price | money }}");
    {% if product.compare_at_price > product.price %}
          jQuery('.insertPrice .remove-line').removeClass("remove-line");
            jQuery('.insertPrice .originalPrice').text("{{ product.compare_at_price | money }}");
    {% endif %}
  });
</script>

//產品購物車內容是以 json 格式存在的，不一樣產品，json 內容不一樣，而購物車的json是根據 id="product-json" 進行關聯的，而 購物車的 json 名稱定義爲 buyingOptions，爲數組
<script>
  window.productJSON = {{ product | json }};
</script>
<script type="application/json" id="product-json">
    
</script>

//下面這個方法，是調取不一樣產品詳情頁定義的關於購物車的 json
<script>
  var productCart = {
    title: {{ product.title | json }},
    buyingOptions: []
  };
  
  if (productOption) {    
    jQuery.each(productOption, function(i, row){
          if(row.colorOptions){
          var colorOptions = [];
          jQuery.each(row.colorOptions, function(j, col){
            var _option = {
              colorOptionName: col.colorOptionName,
              color: col.color,
              imageUrl: col.imageUrl,
              variant: window.productJSON.variants[col.id]
            };
             colorOptions.push(_option);
          });
          }
                      
        var buyingOptions = {
            buyingOptionName: row.buyingOptionName,
           colorOptions: colorOptions         
        };
                 
        productCart.buyingOptions.push(buyingOptions)
    });        
  }
  //購物車內容關聯的 id 爲 product-json，這個很重要 var productElement = document.getElementById("product-json");
  productElement.innerHTML = JSON.stringify({product:productCart});
</script>

 

關聯自義定義模板：product.customize.liquid

在 product 中新建一個產品，在它的 Description 的 代碼塊中添加 productOption 相關內容以及產品頁面佈局

//這個代碼塊中的 productOption 的內容都是寫死的，是根據銷售本身定義的不一樣名稱（buyingOptionName），可是 colorOptions 的內容是根據 Variants 中設置的顏色來定義的：
//經過查看 Variants 中設置好的顏色 4個， 能夠自定義 名稱爲 BBkey 能夠關聯前兩種顏色，而名稱爲 BBkey + wifi 能夠關聯後兩種顏色

//每種顏色能夠定義它的 id / colorOptionName / color / imageUrl
<script>// <![CDATA[
var productOption = [
      {
          "buyingOptionName": "BBkey",  
          "colorOptions":
          [
              {
                  "id":0,
                  "colorOptionName": "White",
                  "color": "#b5b6b5",
                  "imageUrl": "https://cdn.shopify.com/s/files/1/0795/7689/products/2_grande.jpg?v=1552017922"
              },
              {
                  "id":1,
                  "colorOptionName": "Black",
                  "color": "#000000",
                  "imageUrl": "https://cdn.shopify.com/s/files/1/0795/7689/products/2_grande.jpg?v=1552017922"
              }
          ]
      },
      {
          "buyingOptionName": "BBkey + wifi",
          "colorOptions":
          [
              {
                  "id":2,
                  "colorOptionName": "White",
                  "color": "#b5b6b5",
                  "imageUrl": "https://cdn.shopify.com/s/files/1/0795/7689/products/2_grande.jpg?v=1552017922"
              },
              {
                  "id":3,
                  "colorOptionName": "Black",
                  "color": "#000000",
                  "imageUrl": "https://cdn.shopify.com/s/files/1/0795/7689/products/2_grande.jpg?v=1552017922"
              }
          ]
      }
  ]
// ]]></script>

Variants設置產品屬性及不一樣價格

 

經過以上的關聯與操做，就能夠在當前產品的詳情頁中點擊購買按鈕，會有一個下面這樣的彈層出現，能夠直接添加購物車進行購買。

附shopfiy 相關教程供參考：

Liquid 文檔： https://liquid.bootcss.com/

shopfiy 中文文檔： https://help.shopify.com/zh-CN

shopfiy api :    https://help.shopify.com/en/themes/development/getting-started/using-ajax-api#change-cart

價格腳本api： https://help.shopify.com/zh-CN/manual/apps/apps-by-shopify/script-editor/update-liquid-templates-for-scripts

自定義 css  :    https://help.shopify.com/zh-CN/manual/apps/apps-by-shopify/product-reviews/advanced-customization

自定義 模板： https://help.shopify.com/en/themes/customization

Shopify 腳本 API ： https://help.shopify.com/zh-CN/manual/apps/apps-by-shopify/script-editor/shopify-scripts

 

{% assign product = all_products['bbk'] %}

{% assign selectedVariant = product.selected_or_first_available_variant | default: product %}

//selectedVariant 默認選中的第一個產品屬性，好比默認選擇爲 黑色 //從 all_products 中獲取 combo 的名稱並賦值給變量 product，每一個產品都必須獲取對應的產品名稱，用這個產品名稱來獲取如下幾種數據：
1.  不一樣產品對應的售價與原價
2. 不一樣產品對應的 selectedVariant ，選擇到購物車的產品屬性列表

相關屬性爲： "title": {{ product.title | json }}，
"price": {{ product.price | money }},
"compare_at_price":  {{product.compare_at_price | money}}

獲取Liquid對象的屬性

{{ pages.about-us.content }}
{{ pages["about-us"].title }}

標記符

{% ... %}
{% for i in (1..5) %}
    {% if i == 4 %}
      {% break %}
    {% else %}
      {{ i }}
    {% endif %}
{% endfor %}

用於插入某片斷，使用with賦值，使用 include

例若有一片斷 color.liquid
color: '{{ color }}' shape: '{{ shape }}'

將 color.liquid 插入到 theme.liquid 中
{% include 'color' %}
{% include 'color' with 'red' %}
{% include 'color' with 'blue' %}

Cart 對象屬性：
* cart.total_discount
* cart.original_total_price
 訂單商品屬性： * line_item.discounts
* line_item.message
* line_item.original_price
* line_item.original_line_price
* line_item.total_discount

* line_item.total_discount 返回已應用於訂單商品的折扣金額 * line_item.original_line_price 返回應用折扣前的訂單項目價格 * line_item.message 返回用於描述應用於訂單項目的折扣的消息。

 

 

shopfiy Ajax Api

全部請求網址都是以 js 結尾

• GET /products/<product-handle>.js  獲取產品 json
• POST /cart/add.js
• GET /cart.js
• POST /cart/update.js
• POST /cart/change.js
• POST /cart/clear.js
• GET /cart/shipping_rates.json
• GET /recommendations/products.json?product_id=<product-id>