文章
文章用户商铺文档快讯圈子网址导航问答

shopify商品详情页复制优惠券功能

释放双眼，带上耳机，听听看~！

方法一：使用clipboard.js，兼容性好

shopify商品详情页复制优惠券功能

在theme.liquid文件头部内插入下面的js代码

{%if template.name == "product"%}
<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
<style type="text/css">
  /*Coupon*/
    .ProductCoupon_couponInfo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .25rem;
      background-color: #fbe6da;
      border-radius: .25rem;
    }
    .ProductCoupon_couponInfo .ProductCoupon_priceBox {
      flex: 1 1;
      text-align: center;
      font-weight: 700;
      color: #ed844a;
      border-right: 1px dashed #e3b79d;
    }

    .ProductCoupon_couponInfo .ProductCoupon_copy {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 70%;
      padding: 13px 10px 11px;
    }

    .ProductCoupon_couponInfo .ProductCoupon_price {
      font-size: 28px;
    }

    .ProductCoupon_couponInfo .ProductCoupon_off {
      margin-left: .5rem;
      font-size: 16px;
    }

    .ProductCoupon_couponInfo .ProductCoupon_code {
      margin-right: 1.875rem;
      font-size: .75rem;
      line-height: 1rem;
      font-weight: 400;
      color: #666;

    }
    .ProductCoupon_couponInfo .ProductCoupon_code input {
      color: #666;
      border:0;
      background: transparent;
    }
    .ProductCoupon_copyBtn,
    .ProductCoupon_copyBtn:focus {
      --tw-shadow: 0 0 #0000;
      --tw-shadow-colored: 0 0 #0000;
      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }
    .ProductCoupon_copyBtn {
      display: flex;
      height: 2rem;
      line-height: 2rem;
      width: 9.375rem;
      align-items: center;
      justify-content: center;
      padding: 0 !important;
      font-weight: 700;
      --tw-text-opacity: 1;
      color: rgb(255 255 255/var(--tw-text-opacity));
      background-color: #ed844a !important;
      border: 1px solid #ed844a !important;
      border-radius: 97px;
    }
    .ProductCoupon_couponInfo .ProductCoupon_copyActive {
    --tw-bg-opacity: 1!important;
    background-color: rgb(255 255 255/var(--tw-bg-opacity))!important;
    color: #ed844a;
    }
    /*Coupon*/
</style>
{% endif %}

在主题-自定义-产品模板内插入以下代码

<div class="ProductCoupon_couponInfo">
    <div class="ProductCoupon_priceBox">
      <span class="ProductCoupon_price">$200</span><span class="ProductCoupon_off">OFF</span>
    </div>
    <div class="ProductCoupon_copy">
      <span class="ProductCoupon_code">Code:<input  id="copy_text" value="WSCPREWSEI"/></span>
      <input class="ProductCoupon_copyBtn btn_copy" id="btn_copy" onmouseout="outFunc()" data-clipboard-target="#copy_text" type="button" value="Copy">
    </div>
</div>
<script>
        var clipboard = new ClipboardJS('.btn_copy');
        clipboard.on('success', function (e) {
            console.info('Action:', e.action);
            console.info('Text:', e.text);
            console.info('Trigger:', e.trigger);
            e.clearSelection();
            document.getElementById("btn_copy").value="Copied";
            document.getElementById("btn_copy").style="background-color: rgb(255 255 255)!important; color:#ed844a !important;";
        });
        clipboard.on('error', function (e) {
            console.error('Action:', e.action);
            console.error('Trigger:', e.trigger);
            document.getElementById("btn_copy").value="Copy failed";
        });
        function outFunc() {
           document.getElementById("btn_copy").value="Copy";
           document.getElementById("btn_copy").style="background-color: #ed844a !important; color:#ffffff !important;";
        }
</script>

 

方法二：使用原生js

在theme.liquid文件头部内插入下面的js代码

{%if template.name == "product"%} 
<style type="text/css">
  /*Coupon*/
    .ProductCoupon_couponInfo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: .25rem;
      background-color: #fbe6da;
      border-radius: .25rem;
    }
    .ProductCoupon_couponInfo .ProductCoupon_priceBox {
      flex: 1 1;
      text-align: center;
      font-weight: 700;
      color: #ed844a;
      border-right: 1px dashed #e3b79d;
    }

    .ProductCoupon_couponInfo .ProductCoupon_copy {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 70%;
      padding: 13px 10px 11px;
    }

    .ProductCoupon_couponInfo .ProductCoupon_price {
      font-size: 28px;
    }

    .ProductCoupon_couponInfo .ProductCoupon_off {
      margin-left: .5rem;
      font-size: 16px;
    }

    .ProductCoupon_couponInfo .ProductCoupon_code {
      margin-right: .75rem;
      font-size: .75rem;
      line-height: 1rem;
      font-weight: 400;
      color: #666;

    }
    .ProductCoupon_couponInfo .ProductCoupon_input  {
      color: #666;
      border:0;
      padding:0;
      background: transparent;
    }
    .ProductCoupon_copyBtn,
    .ProductCoupon_copyBtn:focus {
      --tw-shadow: 0 0 #0000;
      --tw-shadow-colored: 0 0 #0000;
      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }
    .ProductCoupon_copyBtn {
      display: flex;
      height: 2rem;
      width: 9.375rem;
      align-items: center;
      justify-content: center;
      padding: 0;
      font-weight: 700;
      --tw-text-opacity: 1;
      color: rgb(255 255 255/var(--tw-text-opacity));
      background-color: #ed844a !important;
      border: 1px solid #ed844a !important;
      border-radius: 97px;
    }
    .ProductCoupon_couponInfo .ProductCoupon_copyActive {
    --tw-bg-opacity: 1!important;
    background-color: rgb(255 255 255/var(--tw-bg-opacity))!important;
    color: #ed844a;
    }
    .tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
@media (max-width: 767px) {
.ProductCoupon_copyBtn {
width: 4rem;
}
.ProductCoupon_couponInfo .ProductCoupon_code {
margin-right: 0;
}
.ProductCoupon_couponInfo .ProductCoupon_input {
font-size: 14px;
width: 8rem;
}
.ProductCoupon_couponInfo .ProductCoupon_off {
margin-left: 0;
font-size: 13px;
}
.ProductCoupon_couponInfo .ProductCoupon_price {
font-size: 22px;
}
} 
    /*Coupon*/
</style>
{% endif %}

在主题-自定义-产品模板内插入以下代码

<div class="ProductCoupon_couponInfo">
    <div class="ProductCoupon_priceBox">
      <span class="ProductCoupon_price">$200</span><span class="ProductCoupon_off">OFF</span>
    </div>
    <div class="ProductCoupon_copy">
      <span class="ProductCoupon_code">Code:</span>
      <input type="text" class="ProductCoupon_input" value="RUNOOB123" id="myInput">
      <div class="tooltip">
      <button class="ProductCoupon_copyBtn btn_copy" onclick="myFunction()" onmouseout="outFunc()">
        <span class="tooltiptext" id="myTooltip">Copy code</span>
        Copy
      </button>
      </div>
    </div>
</div>
<script>
function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  navigator.clipboard.writeText(copyText.value);
  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copy: " + copyText.value;
}
function outFunc() {
  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copy";
}
</script>

 

 

打赏微海报分享
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

给TA打赏
共{{data.count}}人
人已打赏
Shopify功能开发

shopify 产品列表页显示-优惠价格，节省金额和优惠百分比

2022-12-18 14:53:00

Shopify功能开发

Shopify输出元字段Metafields的方法

2023-1-17 16:09:54

0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯

解锁会员权限

开通会员

解锁海量优质VIP资源

立刻开通
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
客服

  • 扫码打开当前页

  • 微信

返回顶部