点击复制折扣代码在购物车抽屉中不起作用 Shopify

Question

我们想使用 tap 来复制我们在 shopify 中构建的网站中的代码。 它在产品详细信息页面中完美运行，但在购物车抽屉中正常运行，但在第二次加载页面后。

  {% 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 %}

Answer 1

我已经使用 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;" >