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

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

경고: 이 사용자 지정은 서랍 또는 팝업 카트 스타일에는 적용되지 않으며 카트 페이지(URL: your-store.com/cart)에만 적용됩니다. 카트 서랍 또는 팝업을 사용하는 경우 테마 편집기에서 카트 스타일을 페이지로 변경해야 합니다. 테마 미리 보기에서 카트에 제품을 추가한 다음 테마 편집기에서 카트 페이지 탭을 클릭하여 카트 설정을 봅니다.

이 페이지의 정보

theme.liquid에 jQuery 포함

이 사용자 지정이 작동하려면 일부 테마에서는 jQuery용 스크립트 태그를 theme.liquid 레이아웃 파일에 추가해야 합니다. 무료 Shopify Online Store 2.0 테마를 사용하는 판매자는 다음 단계를 따라야 할 수 있습니다.

레이아웃 디렉터리에서 theme.liquid을(를) 클릭합니다.
코드에서 닫는 </head> 태그를 찾습니다. 닫는 </head> 태그 위쪽 새 행에 다음 코드를 붙여넣습니다.

{{ '//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js' | script_tag }}

저장을 클릭합니다.

배송 날짜 코드 조각 생성

배송 날짜 선택기에 대한 코드 조각을 생성하려면 다음을 수행합니다.

데스크톱

Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
코드 조각 디렉토리에서 새 코드 조각 추가를 클릭합니다.
코드 조각 생성:
1. 코드 조각 delivery-date의 이름을 지정합니다.
2. 코드 조각 생성을 클릭합니다. 새 코드 조각 파일이 코드 편집기에서 열립니다.
새로운 delivery-date.liquid 코드 조각에 다음 코드를 붙여 넣습니다.

1. 저장을 클릭합니다.

iPhone

Shopify 앱에서 … 버튼을 탭합니다.
판매 채널 섹션에서 온라인 스토어를 탭합니다.
테마 관리를 탭합니다.
편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
코드 조각 디렉토리에서 새 코드 조각 추가를 클릭합니다.
코드 조각 생성:
1. 코드 조각 delivery-date의 이름을 지정합니다.
2. 코드 조각 생성을 클릭합니다. 새 코드 조각 파일이 코드 편집기에서 열립니다.
새로운 delivery-date.liquid 코드 조각에 다음 코드를 붙여 넣습니다.

1. 저장을 클릭합니다.

Android

Shopify 앱에서 … 버튼을 탭합니다.
판매 채널 섹션에서 온라인 스토어를 탭합니다.
테마 관리를 탭합니다.
편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
코드 조각 디렉토리에서 새 코드 조각 추가를 클릭합니다.
코드 조각 생성:
1. 코드 조각 delivery-date의 이름을 지정합니다.
2. 코드 조각 생성을 클릭합니다. 새 코드 조각 파일이 코드 편집기에서 열립니다.
새로운 delivery-date.liquid 코드 조각에 다음 코드를 붙여 넣습니다.

1. 저장을 클릭합니다.

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

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

섹션 디렉토리에서 main-cart-items.liquid을(를) 클릭합니다.
코드에서 닫는 </form> 태그를 찾습니다. 닫는 </form> 태그 위쪽 새 행에 다음 코드를 붙여넣습니다.

{% render 'delivery-date' %}

저장을 클릭합니다.

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

이 사용자 지정에 사용된 날짜 선택기는 jQuery UI 라이브러리의 위젯입니다.