shopify产品详情页展示折扣券信息功能实现[附：源码]

1.背景

很多做shopify独立站运营的同学可能想在产品详情页展示自己的折扣券信息，并且让客户可以一键复制折扣码，但大部分模板并没有直接实现这个功能。今天我就带各位一起来手搓一个漂亮的折扣券展示功能。

2.效果图

3.注意事项

可以在theme.liquid中引入font-awesome字体图标
产品的折扣信息需要在shopify后台添加一个产品自定义字段
折扣码填写内容示例：折扣码说明1:折扣码1 折扣码说明2:折扣码2

4.自定义css

.jerry-coupon-box{width: 100%;display: block;margin-bottom: 0.5rem;}
.jerry-coupon-inner-box{width: 100%;list-style: none;display: flex;flex-direction: column;padding: 0 !important;margin: 0 !important;}
.jerry-coupon-inner-box li.coupon-item{margin-top: 0.5rem;display: flex;justify-content: space-between;align-items: center;background: rgba(54,172,169,0.5);padding: 1.2rem;border-radius: 0.3rem;}
.jerry-coupon-inner-box li.coupon-item .coupon-desc-box{color: #36aca9;display: flex;align-items: center;}
.jerry-coupon-inner-box li.coupon-item .coupon-desc-box .icon{font-size: 1.5rem;}
.jerry-coupon-inner-box li.coupon-item .coupon-desc-box .coupon-desc-text{margin-left: 0.5rem;}

.jerry-coupon-inner-box li.coupon-item .coupon-copy{cursor: pointer;display: flex;align-items: center;padding: 1rem;border-radius: 2rem;border: 2px solid #ddd;}
.jerry-coupon-inner-box li.coupon-item .coupon-copy:hover{border-color: #b3bac3;}
.jerry-coupon-inner-box li.coupon-item .coupon-copy .code{color: black;font-weight: bold;}
.jerry-coupon-inner-box li.coupon-item .coupon-copy .icon{margin: 0 1rem;font-size: 1.5rem;}
.jerry-coupon-inner-box li.coupon-item .coupon-copy .copy-tip{font-size: 0.8rem;color: gray;width: 75px;text-align: center;}

5.自定义js

$(function(){
  //显示折扣码到页面
  showCoupon()
})
//显示折扣码到页面
function showCoupon(){
  //这里的数据是从后端读取出来的，格式为【描述:折扣码】,多个折扣码用回车换行隔开
  //let couponStr=$('.jerry-coupon-box .discountInfoIpt').val()
  let couponStr=`$20 OFF Coupon Code:123456
  $30 OFF Coupon Code:654123`
  let couponArr=parseCouponStr(couponStr)
  if(!couponArr){
	  return
  }
  let couponHtml=createDomForCoupon(couponArr)
  $('.jerry-coupon-inner-box').html(couponHtml)
}
//通过折扣码信息生成html
function createDomForCoupon(couponArr){
  let dom=""
  couponArr.forEach((coupon, index) => {
	dom+='<li class="coupon-item">'+
			  '<div class="coupon-desc-box">'+
				  '<i class="icon fa fa-solid fa-tags"></i>'+
				  '<span class="coupon-desc-text">'+ coupon.desc +'</span>'+
			  '</div>'+
			  '<div class="coupon-copy" onclick="copyCode(event)">'+
				  '<span class="code">' + coupon.code + '</span>'+
				  '<i class="icon fa fa-solid fa-copy"></i>'+
				  '<span class="copy-tip" data-code="' + coupon.code + '">COPY CODE</span>'+
			  '</div>'+
		  '</li>\r\n'
  })
  return dom
}
//解析折扣码信息
function parseCouponStr(couponStr){
let couponArr=[]
// 根据换行或者回车进行识别
let couponLineList = couponStr.split(/[(\r\n)\r\n]+/)
couponLineList.forEach((couponLine, index) => {
	//解析单个折扣码
	if (couponLine) {
		let tmp=couponLine.split(":");
		if(tmp[0] && tmp[1] ){
			let coupon={"desc":tmp[0],"code":tmp[1]}
			couponArr.push(coupon)
		}
	}
})
return couponArr
}
//复制指定字符串到剪贴板
function copyToClipboard(str) {
  let el = document.createElement("textarea");
  el.value = str;
  el.setAttribute("readonly", "");
  el.style.position = "absolute";
  el.style.left = "-9999px";
  document.body.appendChild(el);
  let selected =
	document.getSelection().rangeCount > 0
	  ? document.getSelection().getRangeAt(0)
	  : false;
  el.select();
  document.execCommand("copy");
  document.body.removeChild(el);
  if (selected) {
	document.getSelection().removeAllRanges();
	document.getSelection().addRange(selected);
  }
}
//复制折扣码
function copyCode(e) {
	let clickedElement = e.currentTarget
	console.log(clickedElement)
	var copyTipDom = clickedElement.querySelector('.copy-tip')
	copyToClipboard(copyTipDom.getAttribute("data-code"));
	copyTipDom.innerHTML = 'COPIED'
	setTimeout(function () {
	copyTipDom.innerText = "COPY CODE";
	}, 1000);
}

6.luquid模板

注意：下面代码一般通过可视化编辑的方式增加在产品详情页右边区域

<div class="jerry-coupon-box">
	<input type="hidden" class="discountInfoIpt" value="{{ product.metafields.custom.discount_info }}"/>
	<ul class="jerry-coupon-inner-box">
	</ul>
</div>

7.完整代码

<!-- 注意如果没有引入jquery的话需要引入 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all">
<style>
  .jerry-coupon-box{width: 100%;display: block;margin-bottom: 0.5rem;}
  .jerry-coupon-inner-box{width: 100%;list-style: none;display: flex;flex-direction: column;padding: 0 !important;margin: 0 !important;}
  .jerry-coupon-inner-box li.coupon-item{margin-top: 0.5rem;display: flex;justify-content: space-between;align-items: center;background: rgba(54,172,169,0.5);padding: 1.2rem;border-radius: 0.3rem;}
  .jerry-coupon-inner-box li.coupon-item .coupon-desc-box{color: #36aca9;display: flex;align-items: center;}
  .jerry-coupon-inner-box li.coupon-item .coupon-desc-box .icon{font-size: 1.5rem;}
  .jerry-coupon-inner-box li.coupon-item .coupon-desc-box .coupon-desc-text{margin-left: 0.5rem;}

  .jerry-coupon-inner-box li.coupon-item .coupon-copy{cursor: pointer;display: flex;align-items: center;padding: 1rem;border-radius: 2rem;border: 2px solid #ddd;}
  .jerry-coupon-inner-box li.coupon-item .coupon-copy:hover{border-color: #b3bac3;}
  .jerry-coupon-inner-box li.coupon-item .coupon-copy .code{color: black;font-weight: bold;}
  .jerry-coupon-inner-box li.coupon-item .coupon-copy .icon{margin: 0 1rem;font-size: 1.5rem;}
  .jerry-coupon-inner-box li.coupon-item .coupon-copy .copy-tip{font-size: 0.8rem;color: gray;width: 75px;text-align: center;}
</style>
<div class="jerry-coupon-box">
	<input type="hidden" class="discountInfoIpt" value="{{ product.metafields.custom.discount_info }}"/>
	<ul class="jerry-coupon-inner-box">
	</ul>
</div>
<script>
  $(function(){
	  //显示折扣码到页面
	  showCoupon()
  })
  //显示折扣码到页面
  function showCoupon(){
	  //这里的数据是从后端读取出来的，格式为【描述:折扣码】,多个折扣码用回车换行隔开
	  let couponStr=$('.jerry-coupon-box .discountInfoIpt').val()
	  let couponArr=parseCouponStr(couponStr)
	  if(!couponArr){
		  return
	  }
	  let couponHtml=createDomForCoupon(couponArr)
	  $('.jerry-coupon-inner-box').html(couponHtml)
  }
  //通过折扣码信息生成html
  function createDomForCoupon(couponArr){
	  let dom=""
	  couponArr.forEach((coupon, index) => {
		dom+='<li class="coupon-item">'+
				  '<div class="coupon-desc-box">'+
					  '<i class="icon fa fa-solid fa-tags"></i>'+
					  '<span class="coupon-desc-text">'+ coupon.desc +'</span>'+
				  '</div>'+
				  '<div class="coupon-copy" onclick="copyCode(event)">'+
					  '<span class="code">' + coupon.code + '</span>'+
					  '<i class="icon fa fa-solid fa-copy"></i>'+
					  '<span class="copy-tip" data-code="' + coupon.code + '">COPY CODE</span>'+
				  '</div>'+
			  '</li>\r\n'
	  })
	  return dom
  }
  //解析折扣码信息
  function parseCouponStr(couponStr){
	let couponArr=[]
	// 根据换行或者回车进行识别
	let couponLineList = couponStr.split(/[(\r\n)\r\n]+/)
	couponLineList.forEach((couponLine, index) => {
		//解析单个折扣码
		if (couponLine) {
			let tmp=couponLine.split(":");
			if(tmp[0] && tmp[1] ){
				let coupon={"desc":tmp[0],"code":tmp[1]}
				couponArr.push(coupon)
			}
		}
	})
	return couponArr
  }
//复制指定字符串到剪贴板
function copyToClipboard(str) {
  let el = document.createElement("textarea");
  el.value = str;
  el.setAttribute("readonly", "");
  el.style.position = "absolute";
  el.style.left = "-9999px";
  document.body.appendChild(el);
  let selected =
	document.getSelection().rangeCount > 0
	  ? document.getSelection().getRangeAt(0)
	  : false;
  el.select();
  document.execCommand("copy");
  document.body.removeChild(el);
  if (selected) {
	document.getSelection().removeAllRanges();
	document.getSelection().addRange(selected);
  }
}
//复制折扣码
function copyCode(e) {
	let clickedElement = e.currentTarget
	console.log(clickedElement)
	var copyTipDom = clickedElement.querySelector('.copy-tip')
	copyToClipboard(copyTipDom.getAttribute("data-code"));
	copyTipDom.innerHTML = 'COPIED'
	setTimeout(function () {
	copyTipDom.innerText = "COPY CODE";
	}, 1000);
}
</script>

shopify产品详情页展示折扣券信息功能实现[附：源码]

1.背景

2.效果图

3.注意事项

4.自定义css

5.自定义js

6.luquid模板

7.完整代码

目录