글로벌 오더 링크형 기능을 웹사이트에서 제공하기 위해 컴포넌트를 추가하는 샘플 코드를 제공합니다.
encodeURIComponent()
<html> <!-- head 태그 내에 있는 코드를 웹사이트의 head 내에 삽입해주세요 --> <head> <!-- External Fonts and Icons --> <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin="anonymous"> <link rel="preload" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/complete/WantedSansVariable.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/wanteddev/wanted-sans@v1.0.3/packages/wanted-sans/fonts/webfonts/variable/complete/WantedSansVariable.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css"> <link rel="stylesheet" href="gorder-style.css"> </head> <!-- body 태그 내에 있는 코드를 웹사이트의 body 내에 삽입해주세요 --> <body> <!-- Global Order Header --> <div id="gorder-header"> <div id="gorder-header-left"> <i class="ri-earth-line ri-2x" style="color: #ffffff;"></i> <p>We now ship to worldwide</p> </div> <a id="gorder-btn" href="#"> <div>Buy Now</div> </a> </div> <!-- Popup Modal --> <div id="gorder-popup-overlay"> <div id="gorder-modal"> <div id="gorder-art-img"> <!-- Desktop Images --> <img id="gorder-golink-pc-dk-icon" src="https://images.delivered.co.kr/global-order/link/golink-pc-dk.png" alt="Desktop DK"> <img id="gorder-golink-pc-clip-icon" src="https://images.delivered.co.kr/global-order/link/golink-pc-clip.png" alt="Desktop Clip"> <!-- Mobile Images --> <img id="gorder-golink-mo-dk-icon" src="https://images.delivered.co.kr/global-order/link/golink-mo-dk.png" alt="Mobile DK"> <img id="gorder-golink-mo-clip-icon" src="https://images.delivered.co.kr/global-order/link/golink-mo-clip.png" alt="Mobile Clip"> </div> <div id="gorder-bg-text"> <div id="gorder-text-group"> <div id="gorder-title-disc"> <div id="gorder-request-product-container"> <p>Request Product Purchase</p> <p>on Delivered Korea</p> </div> <div id="gorder-delivered-korea-container"> <p>Delivered Korea helps you purchase products from Korean stores.</p> <p> <span>Please review your desired product options on this site and fill out </span> <span class="gorder-delivered-koreas-purchasing">Delivered Korea’s purchasing form accurately</span> <span> for a faster and more precise quote.</span> </p> </div> </div> <div id="gorder-btn-caption"> <div id="gorder-btn-group"> <div id="gorder-cancel"> <div id="gorder-cancel1">Cancel</div> </div> <div id="gorder-shop-now"> <div id="gorder-shop-now1">Shop Now</div> <img id="gorder-golink-icon-next" src="https://images.delivered.co.kr/global-order/link/golink-icon-next.png" alt="Next Icon"> </div> </div> <div id="gorder-if-pop-ups-are">*If pop-ups are blocked, please disable your pop-up blocker.</div> </div> </div> </div> </div> </div> <!-- JavaScript --> <script> (function(){ // URL modification logic var origUrl = window.location.href; var modUrl = origUrl.indexOf('?') > -1 ? origUrl + '&requestFrom=globalOrder' : origUrl + '?requestFrom=globalOrder'; var pageLink = encodeURIComponent(modUrl); var pageHost = encodeURIComponent(window.location.host); var pageName = encodeURIComponent(document.title); var deliveredUrl = "https://www.delivered.co.kr/en/webuy/requestletter/other?url=" + pageLink + "&utm_source=" + pageHost + "&Description=" + pageName + "&utm_medium=globalOrderLinkService"; // Button events var headerBtn = document.getElementById("gorder-btn"); var popupOverlay = document.getElementById("gorder-popup-overlay"); var cancelDiv = document.getElementById("gorder-cancel"); var shopNowDiv = document.getElementById("gorder-shop-now"); headerBtn.addEventListener("click", function(e){ e.preventDefault(); popupOverlay.style.display = "flex"; }); cancelDiv.addEventListener("click", function(){ popupOverlay.style.display = "none"; }); shopNowDiv.addEventListener("click", function(){ window.open(deliveredUrl, "_blank"); }); })(); </script> </body> </html>