Deep Dive into Shopify’s Global Objects in Liquid

개요

Shopify의 Liquid 템플릿 언어에서 글로벌 객체는 설정이나 import 없이 모든 템플릿 파일에서 자동으로 사용 가능한 사전 정의된 변수로, 스토어, 고객, 제품, 카트 등 다양한 데이터를 포함하고 있습니다.

주요 내용

* 글로벌 객체의 이해: 글로벌 객체는 Shopify 스토어의 현재 상태에 대한 구조화된 데이터를 제공하며, shop, customer, product, collection, cart, checkout, blog, routes 등 다양한 범주로 나뉩니다.
* 콘텍스트의 중요성: 일부 글로벌 객체는 특정 템플릿 컨텍스트에서만 의미 있는 데이터를 가지며, 잘못된 컨텍스트에서 접근 시 오류 없이 빈 값을 반환하여 디버깅을 어렵게 합니다. 예를 들어 product 객체는 제품 페이지에서만 사용 가능합니다.
* 주요 글로벌 객체 카테고리:
* 스토어 정보 (shop, settings): 상점 이름, 도메인, 통화, 이메일, 위치 및 테마 사용자 정의 설정과 같은 스토어 수준 메타데이터를 제공합니다.
* 고객 및 사용자 데이터 (customer): 로그인한 고객의 이름, 이메일, 주문 내역, 주소, 태그 등의 정보를 담고 있습니다. customer.orders는 고객 계정 템플릿에서만 접근 가능합니다.
* 제품 및 컬렉션 데이터 (product, collection): product는 개별 제품의 제목, 설명, 가격, 이미지, 옵션, 메타필드 등의 정보를, collection은 컬렉션의 제목, 설명, 포함된 제품 목록 등의 정보를 제공합니다. collection.products는 기본적으로 최대 50개의 제품만 반환하므로 pagination 처리가 중요합니다.
* 쇼핑 카트 및 체크아웃 데이터 (cart, checkout): cart는 현재 장바구니의 상품 목록, 총 가격, 할인 코드 등을, checkout은 체크아웃 과정의 주문 정보, 고객 정보, 배송지 정보 등을 제공합니다. cart는 거의 모든 페이지에서 접근 가능하여 헤더에 장바구니 항목 수를 표시하는 데 유용합니다.
* 블로그 및 게시물 데이터 (blog): 스토어 내의 블로그와 해당 블로그의 게시물 목록 정보를 제공합니다.
* 라우트 (routes): 카트, 계정 로그인 페이지 등 표준 스토어 페이지에 대한 동적인 URL을 생성하여 하드코딩으로 인한 링크 오류를 방지합니다.
* 고급 활용 사례:
* 메타필드 활용: product.metafields 등을 통해 기본 스키마에 없는 사용자 정의 데이터를 제품, 컬렉션, 고객 등에 추가하여 템플릿에서 사용할 수 있습니다.
* 개인화: customer와 cart 객체를 결합하여 고객 이름을 표시하거나, 로그인 상태에 따라 다른 메시지를 보여주는 등 개인화된 경험을 제공할 수 있습니다.
* 사용자 정의 정렬 및 필터링: Liquid의 sort 필터를 사용하여 제품 목록을 특정 기준(예: 가격)으로 정렬할 수 있으나, 이는 현재 페이지에 로드된 제품에만 적용되므로 전체 컬렉션에 대한 필터링은 JavaScript와 Storefront API를 사용해야 합니다.
* 글로벌 객체 작업 팁: Shopify Liquid 참조 문서를 항상 열어두고, 객체 조합을 통해 유용한 패턴을 만들며, Theme Editor에서 실제 스토어 데이터로 테스트하고, 복잡한 로직은 JavaScript로 이동시키는 것을 권장합니다.
* 일반적인 함정: 객체를 잘못된 컨텍스트에서 접근하거나, Liquid에 과도한 로직을 넣거나, 필터 체인을 테스트하지 않거나, 빈 상태(empty states) 처리를 잊는 경우 문제가 발생할 수 있습니다.

시사점

Shopify 글로벌 객체의 구조와 콘텍스트별 사용법을 깊이 이해하는 것은 Liquid 테마 개발의 효율성과 완성도를 높이는 데 핵심적이며, 이를 통해 유지보수가 용이하고 사용자에게 깊은 인상을 주는 테마를 구축할 수 있습니다.