도움말
로그인

카트에 배송 날짜 선택기 추가

카트 페이지에 고객이 주문에 대한 배송 날짜를 지정할 수 있는 달력을 포함할 수 있습니다.

배송 날짜 선택기

이 페이지의 내용

theme.liquid에 jQuery 포함

이 맞춤 설정이 작동하려면 일부 테마의 theme.liquid 레이아웃 파일에 jQuery 스크립트 태그를 추가해야 합니다. Shopify 무료 테마를 사용하는 경우 다음 단계를 수행해야 할 수 있습니다.

  1. 레이아웃 디렉토리에서 theme.liquid를 클릭합니다.

  2. 코드에서 닫는 </head> 태그를 찾습니다. 닫는 </head> 태그 위 새 줄에 다음 코드를 붙여넣습니다.

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}
  1. 저장을 클릭합니다.

배송 날짜 코드 조각 생성

배송 날짜 선택기용 코드 조각을 생성하려면:

데스크톱

  1. Shopify 관리자에서 온라인 스토어(으)로 이동합니다.

  2. 편집할 테마를 찾고 Horizontal menu 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

  3. Snippets 디렉토리에서 새 코드 조각 추가를 클릭합니다.

  4. 코드 조각을 생성합니다.

  5. 코드 조각의 이름을 delivery-date로 지정합니다.

  6. 코드 조각 생성을 클릭합니다. 새 코드 조각 파일이 코드 편집기에서 열립니다.

  7. 새 delivery-date.liquid 코드 조각에 다음 코드를 붙여넣습니다.

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>


<div style="width:300px; clear:both;">
  <p>
    <label for="date">Pick a delivery date:</label>
    <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
    <span style="display:block" class="instructions"> We do not deliver during the weekend.</span>
  </p>
</div>


<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.jQuery) {
      $(function() {
        $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  });
</script>
  1. 저장을 클릭합니다.
모바일

  1. Shopify app에서 Menu 아이콘을 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 모든 테마 관리를 탭하십시오.

  4. 편집할 테마를 찾고 Horizontal menu 버튼을 탭하여 작업 메뉴를 연 다음 코드 편집을 탭합니다.

  5. Snippets 디렉토리에서 새 코드 조각 추가를 탭합니다.

  6. 코드 조각을 생성합니다.

  7. 코드 조각의 이름을 delivery-date로 지정합니다.

  8. 코드 조각 생성을 탭합니다. 새 코드 조각 파일이 코드 편집기에서 열립니다.

  9. 새 delivery-date.liquid 코드 조각에 다음 코드를 붙여넣습니다.

{{ '//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css' | stylesheet_tag }}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>


<div style="width:300px; clear:both;">
  <p>
    <label for="date">Pick a delivery date:</label>
    <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" />
    <span style="display:block" class="instructions"> We do not deliver during the weekend.</span>
  </p>
</div>


<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.jQuery) {
      $(function() {
        $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  });
</script>
  1. 저장을 탭합니다.

카트 페이지에 코드 조각 포함

카트 페이지에 배송 날짜 코드 조각을 포함하려면:

  1. 섹션 디렉토리에서 main-cart-items.liquid를 클릭합니다.

  2. 코드에서 닫는 </form> 태그를 찾으십시오. 해당 태그 위의 새 줄에 다음 코드를 붙여넣으십시오.

{% render 'delivery-date' %}
  1. 저장을 클릭합니다.

이제 카트 페이지에 배송 날짜 입력 필드가 표시됩니다. 텍스트 필드 안을 클릭하면 달력이 나타납니다.

배송 날짜 선택기

이 맞춤 설정에 사용된 데이트피커는 jQuery UI 라이브러리의 위젯입니다.