HTML, CSS, JavaScript를 사용하여 카트 드로어에 커스텀 기능과 스타일링을 구축하는 방법을 알아보세요.
⚠️ 중요 안내이 문서의 예시 커스터마이징은 Upcart 카트 모듈 V1.0에서만 작동해요. 최근에 카트를 Version 2로 업그레이드했다면 이 커스터마이징 코드는 작동하지 않아요. 마이그레이션 가이드에서 제공하는 Version 2용 새 선택자를 사용해야 해요.V2.0 솔루션은 다른 커스터마이징 문서를 참고하세요.
Upcart는 커스텀 HTML, 커스텀 CSS, JavaScript를 사용하여 카트의 외관과 동작을 수정할 수 있는 완전한 제어권을 제공해요. 이 도구들을 사용하면 새 기능을 추가하고, 브랜드에 맞게 카트를 스타일링하고, 카트 작동 방식을 개선하는 로직을 도입할 수 있어요.이 가이드는 각각의 기본을 다루고 시작하는 방법을 보여줘요. 각 섹션에는 변경 사항이 실제로 어떻게 보이는지 이해하는 데 도움이 되는 간단한 시각적 예시가 포함되어 있어요.시작하기 전에 팀에서 지원하는 것과 지원하지 않는 것을 알 수 있도록 Upcart 커스터마이징 정책을 꼭 검토하세요.
JavaScript는 카트 동작과 로직을 제어해요. 요소를 표시하거나 숨기고, 조건부로 스타일링을 적용하거나, 카트 변경에 실시간으로 반응하는 데 사용할 수 있어요.코드를 <script> 태그로 감싸고 실행 시점에 따라 Custom HTML > Scripts (Before Load) 또는 Above Announcements에 배치하세요.예시: 카트를 한 번에 하나의 업셀로 제한하기:
<script> // Show upsells again when upsells are removed window.upcartSubscribeItemRemoved((event) => { if (event.item?.properties?.__upcartUpsell) { const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module"); if (upsells) upsells.style.display = "block"; } }); // Hide upsells once one is added window.upcartSubscribeUpsellsAddedToCart(() => { const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module"); if (upsells) upsells.style.display = "none"; }); // Check for upsell in cart when it loads window.upcartSubscribeCartLoaded((event) => { const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module"); const items = event.cart.items || []; const hasUpsell = items.some(item => item?.properties?.__upcartUpsell); if (upsells && hasUpsell) { upsells.style.display = "none"; } }); </script>
레거시 참고:window.upcartOnItemRemoved, window.upcartOnAddUpsell, window.upcartOnCartLoaded 콜백은 여전히 작동하지만 지원 중단(deprecated)되었으며 콘솔 경고를 기록해요. 새 스크립트에는 모두 upcartSubscribeItemRemoved, upcartSubscribeUpsellsAddedToCart, upcartSubscribeCartLoaded를 사용하세요.
🔧 개발자 참고:
Upcart는 고급 커스터마이징에 사용할 수 있는 모든 함수, 변수, 모범 사례 패턴을 나열한 전체 Public API 문서를 제공해요. 더 복잡한 스크립트나 연동을 구축할 때 이를 검토하는 것을 권장해요.
