글로벌링크 사용하기 - 딜리버드 파트너스 개발자 센터

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>

/* 파일명을 gorder-style.css 로 생성하고 html의 head 내에 삽입된 경로를 파일의 위치로 수정해주세요 */

/* Global Order Header */
#gorder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, #ff9123 0%, #fc6e1d 100%);
  height: 40px;
  padding: 8px 12px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}
#gorder-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
#gorder-header-left p {
  color: #ffffff;
  font-size: 16px;
  margin: 0;
  font-family: 'Wanted Sans Variable', Helvetica, sans-serif;
}
#gorder-btn {
  display: inline-flex;
  align-items: center;
  background-color: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  padding: 2px 8px;
  text-decoration: none;
  cursor: pointer;
}
#gorder-btn div {
  color: #ffffff;
  font-weight: bold;
  font-size: 14px;
  font-family: 'Wanted Sans Variable', Helvetica, sans-serif;
}

/* Popup Modal */
#gorder-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999999;
}

/* Modal Container */
#gorder-modal {
  position: absolute;
  top: calc(50% - 285px);
  left: calc(50% - 272px);
  width: 544px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  z-index: 1;
}

/* art-img 영역 */
#gorder-art-img {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 36px;
  position: relative;
  z-index: 2;
}
/* Desktop Images */
#gorder-golink-pc-dk-icon,
#gorder-golink-pc-clip-icon {
  width: 164px;
  max-height: 100%;
  object-fit: cover;
}
#gorder-golink-pc-clip-icon {
  width: 150px;
}
/* Mobile Images: 기본적으로 숨김 */
#gorder-golink-mo-dk-icon,
#gorder-golink-mo-clip-icon {
  display: none;
  width: 130px;
  object-fit: cover;
}

/* bg-text 영역 */
#gorder-bg-text {
  width: 100%;
  height: 491px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 72px 52px;
  box-sizing: border-box;
  background-image: url('https://images.delivered.co.kr/global-order/link/golink-pc-bg.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  margin-top: -40px;
  position: relative;
  z-index: 0;
}

/* text-group 영역 */
#gorder-text-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  text-align: center;
  font-size: 24px;
  color: #030712;
  font-family: 'Wanted Sans Variable', Helvetica, sans-serif;
}

/* title-disc */
#gorder-title-disc {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

/* request-product-purchase-container */
#gorder-request-product-container {
  align-self: stretch;
  position: relative;
  line-height: 34.8px;
  font-weight: 600;
}
#gorder-request-product-container p {
  margin: 0;
}

/* delivered-korea-helps-container */
#gorder-delivered-korea-container {
  align-self: stretch;
  position: relative;
  font-size: 16px;
  line-height: 23.2px;
  color: #374151;
}
#gorder-delivered-korea-container p {
  margin: 0;
}
.gorder-delivered-koreas-purchasing {
  font-weight: 600;
  font-family: 'Wanted Sans Variable', Helvetica, sans-serif;
  color: #030712;
}
#gorder-delivered-korea-container span {
  font-family: 'Wanted Sans Variable', Helvetica, sans-serif;
  color: #374151;
}

/* btn-caption 영역 */
#gorder-btn-caption {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: left;
  font-size: 16px;
  color: #374151;
}
#gorder-btn-group {
  width: -webkit-fill-available;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
#gorder-cancel {
  width: 150px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  cursor: pointer;
}
#gorder-cancel1 {
  line-height: 23.2px;
  margin: 0;
}
#gorder-shop-now {
  width: -webkit-fill-available;
  border-radius: 8px;
  background-color: #ff9123;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  gap: 8px;
  color: #fff;
  cursor: pointer;
}
#gorder-shop-now1 {
  line-height: 23.2px;
  font-weight: 600;
  margin: 0;
}
#gorder-golink-icon-next {
  width: 24px;
  max-height: 100%;
  object-fit: cover;
}
#gorder-if-pop-ups-are {
  font-size: 14px;
  line-height: 20.3px;
  color: #ef4444;
  text-align: center;
}

/* Responsive Mobile Styles (max-width: 541px) */
@media (max-width: 541px) {
  #gorder-modal {
    width: 375px;
    top: calc(50% - 310px);
    left: calc(50% - 187.5px);
  }
  #gorder-art-img {
    gap: 0px;
  }
  /* art-img: Hide desktop images, show mobile images */
  #gorder-golink-pc-dk-icon,
  #gorder-golink-pc-clip-icon {
    display: none;
  }
  #gorder-golink-mo-dk-icon,
  #gorder-golink-mo-clip-icon {
    display: block;
  }
  /* bg-text: Mobile adjustments */
  #gorder-bg-text {
    background-image: url('https://images.delivered.co.kr/global-order/link/golink-mo-bg.png');
    padding: 60px 36px;
    margin-top: -30px;
    height: 555px;
  }
  /* text-group adjustments */
  #gorder-text-group {
    gap: 40px;
    align-items: center;
  }
  /* Cancel button width */
  #gorder-cancel {
    width: 100px;
  }
  /* Note text adjustments */
  #gorder-if-pop-ups-are {
    font-size: 12px;
    line-height: 17.4px;
  }
}

​1. 설치 가이드

​1-1. 사용 방법

​1-2. 맞춤 설정

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

​2-1. 기능

​2-2. 코드 설명

​2-3. 컴포넌트 코드

1. 설치 가이드

1-1. 사용 방법

1-2. 맞춤 설정

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

2-1. 기능

2-2. 코드 설명

2-3. 컴포넌트 코드