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

이 페이지는 Apr 20, 2024에 인쇄되었습니다. 최신 버전은 https://help.shopify.com/ko/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-date-picker에서 확인하십시오.

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

배송 날짜 선택기

이 페이지의 정보

theme.liquid에 jQuery 포함

이 사용자 지정이 작동하려면 일부 테마에서는 jQuery용 스크립트 태그를 theme.liquid 레이아웃 파일에 추가해야 합니다. Boundless, Debut 버전 17.2.0 또는 최신, Express, Narrative 또는 Venture를 사용하는 경우 다음 단계를 따라야 할 수 있습니다.

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

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

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

배송 날짜 코드 조각 생성

  1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
  2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  3. 코드 조각 디렉토리에서 새 코드 조각 추가를 클릭합니다.

  4. 코드 조각 생성:

    1. 코드 조각 delivery-date의 이름을 지정합니다.
    2. 코드 조각 생성을 클릭합니다. 새 코드 조각 파일이 코드 편집기에서 열립니다.

  5. 새로운 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/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></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 week-end.</span>
  </p>
</div>

<script>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>
  1. 저장을 클릭합니다.
  1. Shopify 앱에서 … 버튼을 탭합니다.
  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
  3. 테마 관리를 탭합니다.
  4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  5. 코드 조각 디렉토리에서 새 코드 조각 추가를 클릭합니다.

  6. 코드 조각 생성:

    1. 코드 조각 delivery-date의 이름을 지정합니다.
    2. 코드 조각 생성을 클릭합니다. 새 코드 조각 파일이 코드 편집기에서 열립니다.

  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/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></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 week-end.</span>
  </p>
</div>

<script>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>
  1. 저장을 클릭합니다.
  1. Shopify 앱에서 … 버튼을 탭합니다.
  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.
  3. 테마 관리를 탭합니다.
  4. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
  5. 코드 조각 디렉토리에서 새 코드 조각 추가를 클릭합니다.

  6. 코드 조각 생성:

    1. 코드 조각 delivery-date의 이름을 지정합니다.
    2. 코드 조각 생성을 클릭합니다. 새 코드 조각 파일이 코드 편집기에서 열립니다.

  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/jqueryui/1.9.2/jquery-ui.min.js" defer="defer"></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 week-end.</span>
  </p>
</div>

<script>
  window.onload = function() {
      if (window.jQuery) {
        let $ = window.jQuery;

        $(function() {
          $("#date").datepicker({
          minDate: +1,
          maxDate: '+2M',
          beforeShowDay: $.datepicker.noWeekends
        });
      });
    }
  }
</script>
  1. 저장을 클릭합니다.

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

카트 페이지에 배송 날짜 코드 조각을 포함하려면 다음을 수행합니다.

  1. 섹션 디렉토리에서 cart-template.liquid을(를) 클릭합니다. 테마에서 이 파일을 찾을 수 없는 경우에는 템플릿 디렉토리의 cart.liquid을(를) 클릭합니다.

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

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

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

배송 날짜 선택기

이 사용자 지정에 사용된 날짜 선택기는 jQuery UI 라이브러리의 위젯입니다. 이 블로그 게시물에서는 날짜 선택기 달력에서 특정 날짜를 비활성화하는 방법에 대해 설명합니다.

Shopify와 함께 사업을 시작할 준비가 되셨습니까?

무료 체험