직접 구축한 스택에 맞는 선물 기능, 스택은 그대로
직접 만든 장바구니 서랍에도 선물 옵션은 필요합니다. 원하는 요소에 클래스 이름을 지정하면 Gift Block이 그 안에 표시되고, 나머지는 그대로 둡니다.
테마는 출시한 그대로 유지됩니다
처음부터 직접 만들었거나 알아볼 수 없을 만큼 고쳤나요? Gift Blocks는 앱 임베드와 함께 로드되는 테마 앱 블록이라, 테마 코드에 직접 관리할 부분 없이 선물 기능이 추가됩니다.
- 관리할 스니펫이 없습니다. 테마 파일은 출시한 그대로 둘 수 있습니다. 마음껏 리팩터링하세요. 얽혀 있는 선물 기능 스니펫이 없습니다.
- 테마 업데이트는 원하는 일정에 맞춰. Gift Blocks는 테마 업데이트 후 다시 연결되므로, 다음 릴리스에 선물 기능 체크리스트가 필요 없습니다. 필요하다면 금요일에 배포해도 됩니다.
- 섹션이 받는 곳에 앱 블록을. 상품 페이지와 장바구니 페이지에서 Gift Blocks는 다른 앱 블록처럼 추가됩니다. 앱 블록을 받지 않는 섹션에는 Wrapped가 블록을 직접 배치합니다.
직접 만든 장바구니 서랍에 Gift Block을
서랍을 직접 만들었나요? 스토어의 모든 Gift Block에는 바로 그런 경우를 위한 안정적인 연결 지점이 세 가지 있습니다. 대부분의 스토어는 필요 없습니다. 없으면 Wrapped가 각 블록을 직접 배치합니다.
- 직접 정하는 클래스 이름. Gift Block은 그 클래스가 있는 요소 안에 표시됩니다. 각 품목 아래, 결제 버튼 위 등 디자인이 원하는 곳 어디든 됩니다. 모바일과 데스크톱 마크업 모두에 지정할 수 있습니다.
- 직접 이름 붙이는 JavaScript 이벤트. 고객이 선물 옵션을 저장하거나 제거하면
document와document.documentElement에서 발생합니다. 장바구니 데이터는 함께 전달되지 않으므로, 리스너가 장바구니를 가져와 원하는 방식으로 서랍을 다시 그립니다. - CSS를 위한 UUID. 각 블록의
uuid속성에 들어 있어, 서랍의 Gift Block은 작게, 장바구니 페이지의 블록은 넉넉하게 둘 수 있습니다.
Gift Blocks 지원 위치
- 테마 기본 서랍. 자동으로 배치됩니다.
- Shopify에서 가장 인기 있는 장바구니 서랍 앱. 서랍이 늦게 로드되면 다시 만들어집니다.
- 직접 만든 서랍. 직접 정한 클래스 이름으로 배치됩니다.
장바구니와 결제에 쓰이는 Shopify 자체 구성 요소
Shopify를 안다면 선물 기능이 어떻게 작동하는지 이미 알고 있습니다. 각 선물 옵션은 자체 가격, 재고, 이미지를 가진 실제 Shopify 제품이며, 장바구니와 결제는 Shopify 자체 확장 지점에서 실행됩니다.
- 묶음을 위한 카트 변환. 묶음 방식에서는 Shopify 카트 변환 함수를 통해 선물이 해당 제품의 품목 안에 포함됩니다. 개별 항목 방식에서는 별도의 품목이 됩니다. 어느 쪽이든 주문에 피킹할 모든 품목이 표시됩니다.
- 선물 할인을 위한 할인 함수. 선물 제품 할인은 자동으로 적용되고, 다른 할인과 함께 Shopify 할인에 표시되며, 제품, 주문, 배송 할인과 함께 적용됩니다. 할인 코드를 입력할 필요가 없습니다.
- Shopify Plus의 결제 단계. 결제 Gift Block은 결제 UI 확장 프로그램으로, Shopify 결제 편집기에서 배치되고 결제 브랜딩에 따라 스타일이 적용됩니다. 결제 스타일을 바꾸면 블록도 따라 바뀝니다.
파이프라인이 이미 보는 곳에 선물 데이터를
ERP 동기화와 3PL 가져오기는 이미 Shopify 주문을 읽습니다. 선물 정보도 같은 곳에 들어가므로 새로 연결할 피드가 없고, 선물 메시지를 창고 시스템에 다시 입력할 사람도 없습니다.
- 품목 속성과 주문 속성. 선물 옵션, 받는 분, 보내는 분, 메시지가 제품 기프팅에서는 선물 품목에, 주문 기프팅에서는 주문에 저장됩니다.
- 매핑에 맞는 키. 속성 이름을 가져오기 형식에 맞출 수 있으며, 이름 앞에 밑줄을 붙이면 주문에는 남기고 고객에게는 숨길 수 있습니다.
- 파서가 찾을 수 있는 요약. 선물 요약이 Liquid 템플릿으로 만들어져 주문 메모의 두 — Wrapped Gifting Attributes — 줄 사이에 들어갑니다. 메모의 나머지 내용은 유지됩니다.
- 다른 태그와 잘 어울리는 태그. 태그는 🎁 Wrapped 또는 직접 정한 태그이며, 주문에 이미 있는 태그와 합쳐집니다.
설명할 것 없이 클라이언트 스토어를 넘겨주세요
다음 개발자는 Wrapped의 선물 코드가 전혀 없는 테마를 넘겨받고, 클라이언트 팀은 설정해 둔 디자인 그대로 Shopify 관리자에서 선물 기능을 운영합니다.
- 스테이징 테마에서 준비 완료. 스테이징 테마에서 선물 기능을 설정하면 그 테마가 공개되는 날 바로 준비됩니다.
- 클라이언트 팀이 운영합니다. 블록의 모양과 문구는 선물 편집기에서 관리되므로, “선물로 보내기”를 “연휴 선물로 포장하기”로 바꾸는 일은 개발 티켓이 아니라 클라이언트가 결정합니다.
- 포스트잇 한 장 크기의 인수인계 메모. 클래스 이름으로 블록을 배치했다면 그 요소를 알려 주세요. 해당 마크업은 직접 만든 것이니까요. 나머지는 모두 Shopify 관리자에 있습니다.
개발자가 먼저 묻는 질문
다음 테마 업데이트로 선물 기능이 깨지나요?
아니요. Gift Blocks는 앱 임베드와 함께 로드되는 테마 앱 블록이라 테마 파일은 출시한 그대로 둘 수 있고, 블록은 테마 업데이트 후 다시 연결됩니다. 옮겨야 할 것은 직접 추가한 마크업 하나뿐입니다. 클래스 이름이 가리키는 요소는 새 버전에도 있어야 합니다.
직접 만든 장바구니 서랍에 Gift Block을 넣을 수 있나요?
네. 서랍 안의 요소에 원하는 클래스 이름을 지정하면 그 안에 Gift Block이 표시됩니다. 제품 기프팅에서는 각 상품마다 블록이 생기도록 요소를 품목 루프 안에 두세요. 모바일과 데스크톱 마크업이 따로 있어도 둘 다 클래스 이름을 지정할 수 있습니다.
JavaScript 이벤트에 장바구니 데이터가 포함되나요?
아니요. 고객이 선물 옵션을 저장하거나 제거하면 Wrapped는 지정한 이름의 이벤트를 document와 document.documentElement에서 발생시키며, 그것이 전부입니다. 리스너가 장바구니를 가져와 직접 작성한 코드를 실행합니다. 예를 들어 페이지를 새로 고치지 않고 커스텀 서랍을 다시 그릴 수 있습니다.
코드에서 Gift Block의 어떤 부분을 믿고 쓸 수 있나요?
세 가지입니다. 직접 정한 클래스 이름, 직접 이름 붙인 이벤트, 블록의 uuid 속성에 있는 UUID입니다. Gift Block 내부 마크업은 여기에 포함되지 않으니, 이 세 가지를 기반으로 구축하고 모양은 선물 편집기에 맡기세요.
ERP나 3PL 가져오기는 선물 주문에서 무엇을 받나요?
일반 Shopify 주문 데이터입니다. 선물 옵션, 받는 분, 보내는 분, 메시지는 제품 기프팅에서는 품목 속성, 주문 기프팅에서는 주문 속성이며, 이름을 가져오기 형식에 맞출 수 있습니다. 선물 요약은 Liquid 템플릿으로 만들어져 주문 메모의 두 — Wrapped Gifting Attributes — 줄 사이에 들어가고, 🎁 Wrapped 태그 또는 직접 정한 태그가 주문 태그와 합쳐집니다. 속성은 주문이 생성되는 즉시 들어갑니다. 메모 요약과 태그는 한두 분 안에 추가됩니다.
결제 Gift Block의 스타일을 지정할 수 있나요?
결제 브랜딩으로 지정합니다. Shopify Plus에서 결제 Gift Block은 결제 UI 확장 프로그램으로, Shopify 결제 편집기에서 각 상품 아래 또는 주문당 한 번 배치되고, 이미 설정한 결제 브랜딩에 따라 스타일이 적용됩니다.
… Before we had even paid a cent for Wrapped, Adam answered questions, got into the nitty-gritty of coding and integration with our web developer. …