點擊復制折扣代碼在購物車抽屜中不起作用 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;" >