shopify 二次开发 添加优惠弹框（折扣码弹框）
摘要
本文主要教shopify商家如何给自己的商店添加优惠弹框，所以本文我直接提供代码，不讲解代码上的知识点（有些主题是带有优惠弹框的，你可以先检查一下自己的主题是否带有优惠弹框功能，如果没有再通过本文添加）。如果你需要一些 特别的功能或者修改样式等 你也可以与我联系
优惠弹框弹框
效果图
可编辑功能
添加代码
步骤一：打开编辑代码
步骤二：在 sections 目录下新建 coupon-dialog.liquid 文件
步骤三：写入 coupon-dialog.liquid 文件的代码
coupon-dialog.liquid 代码
{% if section.settings.masklayer_swtach %}
<!-- 优惠弹框 -->
<div class="coupon-dialog" id="couponDialog">
<div class="coupon-dialog__flex">
<div class="coupon-dialog__box">
<div class="coupon-dialog__wraper">
<div class="coupon-dialog__inner-box">
{% if section.settings.masklayer_info %}
<h3 class="coupon-dialog__title">
{{ section.settings.masklayer_info }}
</h3>
{% endif %}
{% if section.settings.masklayer_image %}
<div class="zq-masklayer_image-wrap" style="margin: 10px 0;">
<img src="{{ section.settings.masklayer_image | img_url: '600x' }}" style="max-width: 100%;">
</div>
{% endif %}
{% if section.settings.masklayer_code != '' %}
<h4 class="coupon-dialog__subtitle">
{{ section.settings.masklayer_code }}
</h4>
{% endif %}
{% if section.settings.masklayer_btn != '' %}
<div class="coupon-dialog__code">
{{ section.settings.masklayer_btn }}
</div>
{% endif %}
</div>
</div>
<span class="coupon-dialog__btn-close">
<svg t="1607667093846" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4228" width="30" height="30"><path d="M512 0a512 512 0 0 0-512 512 512 512 0 0 0 512 512 512 512 0 0 0 512-512 512 512 0 0 0-512-512z" fill="#000000" p-id="4229"></path><path d="M717.165714 306.176a35.986286 35.986286 0 0 0-50.834285 0.146286L512 461.019429 357.668571 306.322286a35.986286 35.986286 0 0 0-50.980571 50.761143L461.165714 512 306.688 666.916571a35.986286 35.986286 0 0 0 50.980571 50.761143L512 562.980571l154.331429 154.843429a35.693714 35.693714 0 0 0 50.834285 0.073143 35.986286 35.986286 0 0 0 0.146286-50.907429L562.834286 512l154.331428-154.916571a35.913143 35.913143 0 0 0 0-50.907429z" fill="#FFFFFF" p-id="4230"></path></svg>
</span>
</div>
</div>
</div>
<style>
.coupon-dialog{
display: none;
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 1000;
background-color: rgba(0,0,0,0.5);
}
.coupon-dialog__flex {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
.coupon-dialog__box {
width: 500px;
align-self: center;
background: {{ section.settings.mask_background_color }};
position: relative;
padding: 12px;
max-width: 90%;
}
.coupon-dialog__wraper{
height: 100%;
border: 2px dashed {{ section.settings.border_color }};
}
.coupon-dialog__inner-box{
width: 90%;
text-align: center;
margin: 15px auto;
}
.coupon-dialog__title{
font-size: 26px;
font-weight: bold;
line-height: 1.25em;
margin: 0;
color: {{ section.settings.mask_txt_color }};
border: none;
}
.coupon-dialog__subtitle{
font-size: 18px;
font-weight: normal;
line-height: 18px;
margin-bottom: 12px;
color: {{ section.settings.mask_txt_color }};
border: none;
}
.coupon-dialog__code{
font-family: Arial, Helvetica, sans-serif;
border: 1px solid;
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
padding: 8px 16px;
color: {{ section.settings.mask_txt_color }};
border-color: {{ section.settings.mask_txt_color }};
background-color: {{ section.settings.button_background_color }};
margin: 0 10px;
}
.coupon-dialog__btn-close{
position: absolute;
top: -18px;
right: -18px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 118040;
background-position: 0 0;
font-size: 0;
background-color: transparent;
background-size: 44px 152px;
}
</style>
<script>
(function(){
var close = document.getElementsByClassName('coupon-dialog__btn-close')[0];
function setCookie(name, value, expires) {
var _expires = "";
expires && (_expires = new Date, _expires.setTime(_expires.getTime() + 864E5 * expires), _expires = "; expires\x3d" + _expires.toUTCString());
document.cookie = name + "\x3d" + value + _expires + "; path\x3d/"
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
};
if (getCookie("coupondialog")) {
couponDialog.style.display = "none";
} else {
document.documentElement.style.overflowY = 'hidden';
couponDialog.style.display = "block";
close.onclick = function () {
couponDialog.style.display = "none";
setCookie("coupondialog", "coupon", 1);
document.documentElement.style.overflowY = 'scroll';
}
}
})();
</script>
{% endif %}
{% schema %} {
"name": "优惠弹框",
"settings": [
{
"type": "paragraph",
"content": "您可以编辑促销的详细信息"
},
{
"type": "checkbox",
"id": "masklayer_swtach",
"label": "启用优惠弹框",
"default": false
},
{
"type": "text",
"id": "masklayer_info",
"label": "标题",
"default": "Get $5 off your first order"
},
{
"type": "text",
"id": "masklayer_code",
"label": "字幕",
"default": "Coupon Code"
},
{
"type": "image_picker",
"id": "masklayer_image",
"label": "图片"
},
{
"type": "text",
"id": "masklayer_btn",
"label": "优惠码",
"default": "XXXX"
},
{
"type": "color",
"id": "mask_txt_color",
"label": "文本颜色",
"default": "#000000"
},
{
"type": "color",
"id": "mask_background_color",
"label": "背景颜色",
"default": "#F6B1C3"
},
{
"type": "color",
"id": "border_color",
"label": "单色边框颜色",
"default": "#A20D1E"
},
{
"type": "color",
"id": "button_background_color",
"label": "按钮背景色",
"default": "#ffffff"
}
]
}
{% endschema %} 将上方代码复制到 coupon-dialog.liquid 里面，并保存
步骤三：在 theme.liquid 的 </body> 上方引入 coupon-dialog
打开 theme.liquid 并在底部找的 </body>
在 </body> 上方添加 {% section 'coupon-dialog' %} 并保存
{% section 'coupon-dialog' %} 
至此 代码就已经添加完成了，接下来就是如何使用了
使用优惠弹框
使用也比较简单，大家多做测试即可
结语
感谢你查阅本文，希望本文能够为你提供帮助，如果你有需要可以与我联系，谢谢
（来源：baymax）
