shopify模板二次开发 增加购物车、立即购买功能

 
<div class="promotionDiscount" data-id="{{ section.settings.promotionDiscount_id }}">
    <div class="promotionDiscount_conter container">
      <div class="promotionDiscount_title">{{ section.settings.promotionDiscount_title }}</div>
      <div class="promotionProduct_box">
        {% for block in section.blocks %}
            <div class="promotionProduct_list" >
                <div class="promotion">{{ block.settings.promotion }}</div>
               {%- render 'product-item', product: block.settings.promotionProduct -%}
                <div class="promotionProduct_list_bottom">
                <div class="promotionProduct_list_num">
                 <button type="button" class="promotion_reduce promotion_icon" disabled >-</button>
                 <input id="promotion_num" class="promotion_num" name="quantity" type="text" value="1">
                 <button type="button" class="promotion_add promotion_icon">+</button>
               </div>
               {% if block.settings.promotionProduct.available == true %}
                 {% if block.settings.method == 'cart' %}
                 <div class="promotionButton promotionButton_cart" data-variants="{{ block.settings.promotionProduct.variants[0].id }}">
                    {{ block.settings.button }}
                    <svg t="1663833321925" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2890" width="27" height="27"> <path d="M853.333333 507.733333H128v42.666667h733.866667l-145.066667 145.066667 29.866667 29.866666 192-192L746.666667 341.333333l-29.866667 29.866667 136.533333 136.533333z" fill="#BE163D" p-id="2891"></path> </svg>
                 </div>
                 {% elsif block.settings.method == 'pay' %}
                  <div class="promotionButton promotionButton_pay" data-variants="{{ block.settings.promotionProduct.variants[0].id }}">
                    {{ block.settings.button1 }}
                    <svg t="1663833321925" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2890" width="27" height="27"> <path d="M853.333333 507.733333H128v42.666667h733.866667l-145.066667 145.066667 29.866667 29.866666 192-192L746.666667 341.333333l-29.866667 29.866667 136.533333 136.533333z" fill="#BE163D" p-id="2891"></path> </svg>
                  </div>
                 {% elsif block.settings.method == 'details' %}
                  <div class="promotionButton">
                   <a href="{{ block.settings.promotionProduct.url }}">
                     {{ block.settings.button1 }}
                    <svg t="1663833321925" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2890" width="27" height="27"> <path d="M853.333333 507.733333H128v42.666667h733.866667l-145.066667 145.066667 29.866667 29.866666 192-192L746.666667 341.333333l-29.866667 29.866667 136.533333 136.533333z" fill="#BE163D" p-id="2891"></path> </svg>
                   </a>
                  </div>
                 {% endif %}
               
               {% else %}
                <div class="promotionButton_soldOut">Sold out</div>
               {% endif %}
              
               
                </div>
            </div>
        {% endfor %}
      </div>
    </div>
</div>

2.利用js来调用购物车 API ，quantity是您要添加的变体数量，id是该变体的变体 ID。您可以通过在数组中附加更多对象来将多个变体添加到购物车items。

<script>
  // 点击添加购物车产品数量
$(".promotion_add").click(function() {
    var valNumber = Number($(this).siblings(".promotion_num").val());
    valNumber++;
    $(this).siblings(".promotion_num").val(valNumber)
    $(this).siblings(".promotion_reduce").removeAttr("disabled")
})
// 点击减少购物车产品数量
$(".promotion_reduce").click(function () {
    var valNumber = Number($(this).siblings(".promotion_num").val());
         if (valNumber <= 1) {
             $(this).attr("disabled","disabled");
         }else if(valNumber > 1){
            valNumber--;
            $(this).siblings(".promotion_num").val(valNumber)
         }
         
})
//input输入数量
$('#promotion_num').bind('input porpertychange' ,function(){
    var inputNum = Number($(this).val())
$(this).val(inputNum)
if(inputNum > 1) {
    $(this).siblings(".promotion_reduce").removeAttr("disabled")
}else {
    $(this).siblings(".promotion_reduce").attr("disabled","disabled");
}
})
//点击加入购物车
$('.promotionButton_cart').click(function(){
  var quantity = $(this).siblings('.promotionProduct_list_num').children(".promotion_num").val()
  var variants  = $(this).attr('data-variants')
  let formData = {
 'items': [{
  'id': variants,
  'quantity': quantity
  }]
};
 
fetch(window.Shopify.routes.root + 'cart/add.js', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(formData)
})
.then(response => {
  window.location.href='/cart'
  return response.json();
})
.catch((error) => {
  console.error('Error:', error);
});
})
//点击去支付页面
$('.promotionButton_pay').click(function(){
  var quantity = $(this).siblings('.promotionProduct_list_num').children(".promotion_num").val()
  var variants  = $(this).attr('data-variants')
  let formData = {
 'items': [{
  'id': variants,
  'quantity': quantity
  }]
};
 
fetch(window.Shopify.routes.root + 'cart/add.js', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(formData)
})
.then(response => {
 window.location.href='/checkout'
  return response.json();
})
.catch((error) => {
  console.error('Error:', error);
});
})
</script>

3.这个是Shopify的liquid语法 ，后台配置

{% schema %}
{
"name": "Promotional Discount",
"settings": [
    {
"type": "text",
"id": "promotionDiscount_title",
"label": "title"
},
{
"type": "text",
"id": "promotionDiscount_id",
"label": "Id"
},
    {
"type": "color",
"id": "button",
"label": "button Color",
"default": "#fff"
},
{
"type": "color",
"id": "borderColor",
"label": "button border Color",
"default": "#fff"
},
{
"type": "color",
"id": "textColor",
"label": "button text Color",
"default": "#fff"
}
],
"blocks" : [
{
"type": "promotionProduct",
"name": "promotion_product",
"settings":[
{
"type": "text",
"id": "promotion",
"label": "promotion text"
},
{
"type": "product",
"id": "promotionProduct",
"label": "product"
},
{
"type": "text",
"id": "button",
"label": "go to details button"
},
{
"type": "text",
"id": "button1",
"label": "go to cart button"
},
{
"type": "text",
"id": "button2",
"label": "go to pay button"
},
{
      "type": "select",
      "id": "method",
      "label": "Select button method",
      "options": [
        {
          "value": "details",
          "label": "go to details"
        },
        {
          "value": "cart",
          "label": "go to cart"
        },
        {
          "value": "pay",
          "label": "go to pay"
        }
      ],
      "default": "cart"
    }
]
}
],
"presets": [{
"name": "Promotional Discount"
}]
}
{% endschema %}