shopify wishlist

Shopify 위시리스트

Shopify 스토어에서 간단한 고객 위시리스트를 구현하는 데 사용되는 파일 세트입니다.

버전: 2.3.0 - 온라인 스토어 2.0과 호환 가능

이전 버전:

• v2.1.0 (온라인 스토어 1.0)
• v2.0.0
• v1.0.0

설치

Shopify 위시리스트 사용을 시작하려면 이 리포지토리의 일부 파일을 Shopify 테마 코드에 복사해야 합니다.

참고 : 이 설정에서는 제품 카드를 표시하기 위한 스니펫이 있다고 가정합니다.

복사할 파일:

레포 파일	Shopify 테마 위치
button-wishlist.liquid	snippets/
icon-heart.liquid	snippets/
wishlist-template.liquid	sections/
product-card-template.liquid	sections/
page.wishlist.json	templates/
product.card.json	templates/
Wishlist.js	assets/

1. button-wishlist.liquid 스니펫을 기존 제품 카드 스니펫 내부 또는 product.liquid 템플릿에 배치하세요.
   • {%- render 'button-wishlist', product: product -%}
   • 이를 통해 고객은 위시리스트에 항목을 추가/삭제할 수 있습니다.
2. product-card-template.liquid 섹션의 스니펫을 기존 제품 카드 스니펫으로 교체하세요.
   • 1단계와 동일한 스니펫
   • 제품 카드 스니펫에서 다른 제품 변수 이름을 사용할 수 있습니다. 다시 확인해 보세요.
3. Wishlist.js 의 selectors 개체에 제품 카드 요소 클래스 이름을 추가하세요.
   • 예: 제품 카드 클래스 이름이 .product-item 인 경우 selectors 변수는 다음과 같습니다.

      const selectors = {
       button: '[button-wishlist]',
       grid: '[grid-wishlist]',
       productCard: '.product-item', // your classname here
     };
     

4. Shopify 관리자에서 새 페이지를 생성합니다.
   • 관리 > 온라인 스토어 > 페이지 > 페이지 추가
   • 새 페이지의 template page.wishlist 로 설정하세요.
   • 이 페이지에는 고객이 저장한 위시리스트 항목이 표시됩니다.
5. theme.liquid 의 닫는 </head> 태그 앞에 스크립트를 배치하세요.
   • <script src="{{ 'Wishlist.js' | asset_url }}" defer="defer"></script>

그게 다야! Shopify 스토어를 보면 제품 카드 내부(예: 컬렉션 페이지) 또는 제품 템플릿에 위시리스트 버튼이 표시됩니다. 위시리스트 버튼을 클릭하면 고객의 위시리스트에 항목이 추가/제거되고 버튼에 활성 스타일이 적용됩니다. 위시리스트 항목을 추가한 후 3단계에서 생성한 페이지로 이동하여 위시리스트를 확인할 수 있습니다.

데모 Shopify 스토어

메모

• 이 위시리스트는 Javascript와 localStorage를 사용하여 고객의 위시리스트를 브라우저에 저장합니다. 사용자가 브라우저 저장소를 지우거나 시크릿 모드로 탐색하는 경우 localStorage는 유지되지 않습니다.
• 고객이 제품을 탐색하고 위시리스트에 추가할 때 해당 제품이 이미 위시리스트에 포함되어 있는 경우 스크립트는 자동으로 위시리스트 버튼을 활성 상태로 설정합니다.
• 이러한 파일에는 스타일이나 구조가 없으므로 필요에 따라 사용자 정의할 수 있습니다. 이는 아무런 장식 없이 위시리스트의 기본 기능을 제공하기 위한 것입니다.
• 게시되지 않은 테마로 작업하는 경우 게시된 테마에도 새 템플릿을 만들어야 합니다. Shopify 관리자는 게시된 테마에 템플릿이 있는 경우에만 템플릿에 페이지를 할당하도록 허용합니다.
• Online Store 2.0 버전으로 업그레이드하는 경우 이전 .liquid 위시리스트 및 제품 카드 템플릿을 삭제해야 합니다.