도움말
로그인

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

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

배송 날짜 선택기

이 페이지의 내용

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. 편집하려는 테마를 찾고 … 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

  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. 편집하려는 테마를 찾고 … 버튼을 탭하여 작업 메뉴를 연 다음 코드 편집을 탭합니다.

  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 라이브러리의 위젯입니다.