html 点击复制折扣代码是不工作的购物车抽屉Shopify

iqjalb3h  于 2022-12-16  发布在  其他
关注(0)|答案(1)|浏览(106)

我们想使用自来水复制代码在我们的网站内置在shopify。它的工作在产品详细信息页面完美,但在购物车抽屉的工作,但在页面加载后的第2次。

{% if cart.total_price > 0 %}
                 <div class="coupon_container">
                      <div class="left_text">
                          <strong>FLAT 50% OFF ON FIRST ORDER</strong>
                          <small>*Applicable on single units.</small>
                      </div>                     
                      <div class="coupon_tab">
                        <span class="copy_coupon"> 
                       <small class="tooltiptext">Copied</small>
                             <!--small>Tap Here to Copy</small-->
                              <small>Use Code</small><br>
                              <strong>FIRST50</strong>
                            </span>
                        </div>  
                    </div>
              <style>
                    .copy_coupon{position:relative;}
                            .tooltiptext{display: none;
                            position: absolute;
                            background: rgb(0 0 0 / 61%);
                            color: rgb(255, 255, 255);
                            top: -25px;
                            padding: 2px 12px;
                            border-radius: 5px}
                      </style>
                    <script>
                      $(document).ready(function(){
                      $(".copy_coupon").click(function() {
                              this.focus();
                              navigator.clipboard.writeText("FIRST50")
                                   .then(() => { console.log("Copy successful"); })
                                   .catch((error) => { alert(`Copy failed! ${error}`); });                          
                      
                      }); 
                       $(".copy_coupon").click(function() {
                      $(".tooltiptext").show();                    
                  });
                       $(".copy_coupon").mouseout(function() {
                       $(".tooltiptext").hide();
                  });
                    });
                      </script> 
    {% endif %}
7qhs6swi

7qhs6swi1#

我已经解决了这个问题使用java脚本.这里是代码:-

function myFunction() 
      {
        var copyText = document.getElementById("myInput");
        copyText.select();
        copyText.setSelectionRange(0, 99999);
        navigator.clipboard.writeText(copyText.value);
            $(".tooltiptext").show();  
             setTimeout(function() {
                    $('.tooltiptext').fadeOut('fast');
                }, 200);
      }
.copy_coupon{position:relative;}
                            .tooltiptext{display: none;
                            position: absolute;
                            background: rgb(0 0 0 / 61%);
                            color: rgb(255, 255, 255);
                            top: -25px;
                            padding: 2px 12px;
                            border-radius: 5px}
<div class="coupon_container">
       <div class="left_text">
            <strong>FLAT 50% OFF ON FIRST ORDER</strong>
            <small>*Applicable on single units.</small>
          </div>                     
          <button class="coupon_tab" onclick="myFunction()">
            <span class="copy_coupon" > 
                 <small class="tooltiptext">Copied</small>
                 <small>Tap Here to Copy</small>
                  <strong>FIRST50</strong>
            </span>
          </button>  
</div> 

<input type="text" value="FIRST50" id="myInput"  style="width:auto;" >

相关问题