​
1. 설치 가이드

​
1-1. 사용 방법

글로벌 오더 링크 기능은 반드시 가맹점 웹사이트의 상품 페이지에 생성해야합니다.
각 컴포넌트는 두 가지 방식 중 하나를 선택하여 설치할 수 있습니다. 프로젝트의 구조나 선호도에 따라 적합한 방식을 선택하세요.
  • 인라인 스타일 버전: 별도의 CSS 파일 없이 HTML 파일 하나로 구성되어 있습니다.
  • HTML/CSS 분리 버전: HTML과 CSS를 분리하여 관리할 수 있습니다.

​
1-2. 맞춤 설정

  • 스타일 수정: 브랜드 아이덴티티에 맞게 CSS를 수정하여 버튼이나 배경색 등을 변경할 수 있습니다.
  • 해외 사용 설정 : 글로벌 오더를 해외 사용자인 경우에만 로드하는 경우, 해외 사용 설정하기 문서를 참고해주세요.

​
2. Top Bar (링크형) 컴포넌트

해당 컴포넌트는 이해를 돕기 위한 샘플입니다.링크와 함수가 가이드에 맞게 동일하게 동작한다면, 스타일은 자유롭게 수정하여 사용 가능합니다.

​
2-1. 기능

  • 상품 페이지 상단에 “Buy Now” 버튼과 “We now ship to worldwide” 메시지를 표시합니다.
  • “Buy Now” 버튼은 사용자를 딜리버드 코리아 구매대행 요청 URL로 이동시킵니다.

​
2-2. 코드 설명

  • Buy Now 링크: 현재 페이지의 URL을 encodeURIComponent()로 인코딩하여 딜리버드 코리아 구매대행 요청 URL에 포함시킵니다.

​
2-3. 컴포넌트 코드

글로벌 오더 링크 기능은 반드시 가맹점 웹사이트의 상품 페이지에 생성해야합니다.
<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>