【小白也会】shopify二次开发之自定义折扣优惠码

一步一步跟着来  即使你是小白也会！我们要实现的功能是下方的折扣码位置

1.先在你的相应的网页中按F12，然后找到相应的位置

找到你要插入的位置，然后去shopify后台找到相应的产品详情页，通过以上方法找到相应页面位置，然后复制粘贴以下代码

  {%- if section.settings.coupon.size >0 -%}

      <div class="coupon-box">

        <div class="coupon-title"><span style="color: #f00;">{{section.settings.coupon }}</span></div>

        <div class="coupon-box-item">

        <span class="coupon-condition">{{section.settings.couponbt1 }}</span> <span>Code:</span><strong><span class="coupon-code" style="margin-right: 0.5rem; color: #e42424;">{{section.settings.code1 }}</span></strong> <span data-code="{{section.settings.code1 }}" class="coupon-copy" onclick="copyCode(event);">copy</span>

        </div>

        <div class="coupon-box-item">

            <span class="coupon-condition">{{section.settings.couponbt2 }}</span> <span>Code:</span><strong><span class="coupon-code" style="margin-right: 0.5rem; color: #e42424;">{{section.settings.code2 }}</span></strong> <span data-code="{{section.settings.code2 }}" class="coupon-copy" onclick="copyCode(event);">copy</span>

            </div>

            <div class="coupon-box-item">

                <span class="coupon-condition">{{section.settings.couponbt3 }}</span> <span>Code:</span><strong><span class="coupon-code" style="margin-right: 0.5rem; color: #e42424;">{{section.settings.code3 }}</span></strong> <span data-code="{{section.settings.code3 }}" class="coupon-copy" onclick="copyCode(event);">copy</span>

                </div>

                <div class="coupon-box-item">

                    <span class="coupon-condition">{{section.settings.couponbt4 }}</span> <span>Code:</span><strong><span class="coupon-code" style="margin-right: 0.5rem; color: #e42424;">{{section.settings.code4 }}</span></strong> <span data-code="{{section.settings.code4 }}" class="coupon-copy" onclick="copyCode(event);">copy</span>

                    </div>

       

         

        </div>

        <style type="text/css"><!--

            .coupon-box { padding: .5rem; margin:.5rem 0; border: 1px dashed #fb2fac;  }

              .coupon-title { font-size: 18px; color: #333; }

              .coupon-box-item {margin: 0.3125rem 0 0; font-size: 14px;  padding-left: 24px; background-image: url(https://cdn.shopifycdn.net/s/files/1/0573/5779/5510/files/liw.png?v=1628502090); background-repeat: no-repeat; background-size: 20px 20px;}

              .coupon-condition { font-weight: bold; }

              .coupon-code { margin-left: .3rem; color: #333; }

              .coupon-copy { cursor: pointer; display: inline-block; line-height: 1; padding: .2rem .4rem; border-radius: .2rem; color: #fff1f1; background-color: #0d0d0d;}

            --></style>

            <script>

        function copyToClipboard(str) {

          var el = document.createElement('textarea');

          el.value = str;

          el.setAttribute('readonly', '');

          el.style.position = 'absolute';

          el.style.left = '-9999px';

          document.body.appendChild(el);

          var 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) {

          var $this = e.target;

          copyToClipboard($this.getAttribute('data-code'));

          $this.innerText = 'copied!';

          setTimeout(function() { $this.innerText = 'copy'; }, 1500);

        }

       

        </script>    

 {%- endif -%}

以上代码是放在相应位置的

还有下面的一串代码是放在底部     {% schema %}放在这里{% endschema %}

  {

        "type": "text",

        "id": "coupon",

        "label": "标题1"

        },

        {

        "type": "text",

        "id": "couponbt1",

        "label": "标题1"

        },

        {

        "type": "text",

        "id": "couponbt2",

        "label": "标题2"

        },

        {

        "type": "text",

        "id": "couponbt3",

        "label": "标题3"

        },

        {

        "type": "text",

        "id": "couponbt4",

        "label": "标题4"

        },

        {

        "type": "text",

        "id": "code1",

        "label": "折扣码1"

        },

        {

        "type": "text",

        "id": "code2",

        "label": "折扣码2"

        },

        {

        "type": "text",

        "id": "code3",

        "label": "折扣码3"

        },

        {

        "type": "text",

        "id": "code4",

        "label": "折扣码4"

        }

然后你就能使用了！！

我们来看看效果。以下是B站视频内容。