동적 페이지 및 상품 옵션 변경#

SDK는 페이지 로드 후 삽입되는 대상 요소를 감지합니다. 선택한 상품은 여전히 스토어에서 관리해야 하며, 대상 요소의 속성을 해당 선택과 동기화해야 합니다.

한 번 불러온 뒤 대상 요소 갱신#

애플리케이션 또는 테마 수준에서 SDK 로더를 하나만 유지하세요. 경로가 전환될 때마다 새 스크립트를 추가하지 마세요. 현재 상품이 표시되는 위치에 대상 요소를 렌더링하고, 빠른 보기, 상품 옵션 선택기 또는 클라이언트 측 경로가 상품을 바꾸면 갱신하세요.

자동으로 생성되는 버튼은 대상 컨테이너에 현재 상품 코드를 지정하세요. 직접 작성한 버튼은 자체 구축 스토어 튜토리얼에 나온 대로 이전 SDK 상태도 초기화하세요.

직접 작성한 버튼 초기화#

다음 코드는 기존 자체 구축 스토어의 연동 규약을 따릅니다. 선택한 상품 코드를 확인한 후 자체 선택 처리 함수에서 호출하세요.

function setSelectedProduct(button, productCode) {
  button.dataset.active = 'false';
  button.style.visibility = 'hidden';
  delete button.dataset.rvProductCode;
  delete button.dataset.rvProductType;
  delete button.dataset.rvProductId;
  delete button.dataset.rvProductIds;
  const code = typeof productCode === 'string' ? productCode.trim() : '';
  if (code) button.dataset.productCode = code;
  else delete button.dataset.productCode;
  button.disabled = !code;
}

실제 플랫폼 생명주기에 연결#

모든 전자상거래 플랫폼에 공통으로 적용되는 상품 옵션 변경 이벤트는 없습니다. Shopify 가이드에서는 테마가 직접 발생시켜야 할 이벤트를 정의합니다. 해당 리스너만 추가한다고 테마가 연결되지는 않습니다. 실제 테마나 애플리케이션 문서에 명시된 콜백을 사용하세요.

React / Next.js와 Vue / Nuxt는 프레임워크 가이드의 클라이언트 측 생명주기 및 정리 지침을 따르세요.

이전 선택이 남아 있는지 확인#

사용 가능한 상품, 다른 사용 가능한 상품, 매핑이 없는 상품 사이를 전환하세요. 선택이 변경된 후 Viewer가 이전 상품을 다시 열어서는 안 됩니다. 빠른 보기와 브라우저 뒤로 가기에서도 반복하세요.