작동 방식

이 내용을 몰라도 앱을 사용하는 데는 문제가 없습니다. 앱 임베드를 켜는 것만으로 설정이 모두 끝납니다. 다만 카운트다운이 왜 그렇게 동작하는지 궁금하거나 문제의 원인을 파악해야 한다면, 내부에서 어떤 일이 일어나는지 이 페이지에서 확인할 수 있습니다.

앱 임베드는 모든 스토어프런트 페이지에서 실행됩니다

Countdown Timer Bar Samita는 Shopify 테마 앱 확장 임베드를 통해 스토어프런트에 연결되며, 테마 편집기에는 Samita Countdown Timer Bar라는 이름으로 표시됩니다. 테마에서 임베드를 켜면 구매자가 해당 테마의 어떤 페이지를 불러오든 앱의 작은 스크립트가 실행됩니다.

대부분의 페이지 조회에서는 할 일이 없습니다. 스크립트가 가장 먼저 하는 일은 설정해 둔 항목 중 현재 페이지에 적용되는 것이 있는지 확인하는 것입니다. 대부분의 스토어에서 대부분의 페이지는 해당되지 않으므로 스크립트는 바로 물러납니다.

카운트다운은 테마가 아니라 앱에 저장되므로, 변경 사항을 저장하면 테마를 다시 게시하지 않아도 스토어프런트에 바로 반영됩니다.

앱이 페이지에 대해 알고 있는 정보

임베드는 카운트다운 설정과 함께, Shopify가 렌더링한 페이지에서 다음 정보를 가져옵니다.

• 페이지 유형 — 제품 페이지, 컬렉션, 장바구니, 블로그 등입니다. Page 조건이 이 값과 비교됩니다.
• 구매자가 탐색 중인 스토어프런트 언어입니다. Language 조건과 번역된 텍스트에 모두 사용됩니다.
• 로그인한 고객이 있다면 해당 고객과 태그입니다. Customer 및 Customer tag 조건이 이 값을 읽습니다.
• 제품 페이지에서 보고 있는 제품입니다.

이 정보는 모두 구매자가 이미 불러온 페이지에서 가져오므로 고객 및 언어 조건은 즉시 판별됩니다.

렌더링할 위치 찾기

카운트다운이 페이지에서 자리를 잡는 방법은 두 가지입니다.

제품 페이지에서 자동 배치. Product page를 선택하면 스크립트가 테마의 장바구니에 담기 영역을 찾아 바로 아래에 카운트다운을 삽입합니다. 많은 테마에서 쓰는 패턴을 인식하지만, 많이 수정된 테마에서는 인식에 실패해 아무것도 표시되지 않을 수 있습니다. 자동 배치가 실패하는 가장 흔한 이유입니다.

숏코드 블록. Samita Countdown 앱 블록으로 추가한 <div class="samita-countdown" ...>는 이미 페이지에 있으므로 스크립트가 그 안을 채우기만 하면 됩니다. 테마와 관계없이 작동하므로 가장 확실한 대안입니다.

장바구니 카운트다운은 장바구니에 상품이 있을 때 장바구니 페이지와 장바구니 드로어에서 장바구니 양식 맨 위에 스스로 자리를 잡습니다. 판매 팝업은 페이지에 추가되어 설정한 위치에 떠 있습니다.

표시 여부 결정

적용될 수 있는 각 카운트다운에 대해 앱은 페이지, 제품, 구매자에 대해 알고 있는 정보와 조건을 비교합니다. 대부분의 조건은 즉시 판별됩니다.

다음 두 가지는 별도로 조회해야 합니다.

• Collections — 앱은 페이지만으로는 제품이 속한 컬렉션을 알 수 없으므로 Collection 조건 활성화에서 설명하는 템플릿 파일을 사용해 컬렉션을 가져옵니다. 이 파일이 없으면 조건을 판별할 수 없어 어떤 항목과도 일치하지 않습니다.
• Country — 계정에서 읽는 것이 아니라 구매자의 IP 주소를 조회해 판별합니다. VPN이나 프록시를 사용하면 결과가 달라집니다.

남은 시간 계산

남은 시간은 설정과 기기 시계를 비교해 구매자의 브라우저에서 계산됩니다. 서버가 시간을 세지는 않습니다.

덕분에 앱이 페이지에 주는 부담이 적으며, 이에 따라 알아 둘 점이 세 가지 있습니다.

• 기기 시계가 크게 틀린 구매자에게는 잘못된 타이머가 표시됩니다.
• Daily recurring timer의 시간대는 구매자의 현지 시계를 기준으로 평가되므로 “오전 9시~오전 11시”는 구매자가 있는 곳의 오전 9시를 의미합니다.
• Countdown to a date 타이머는 설정한 시점까지 카운트다운하며, 모든 구매자는 자신에게 맞는 정확한 남은 시간을 보게 됩니다.

Fixed minutes 타이머 기억하기

Fixed minutes 타이머는 페이지가 바뀌어도 유지되어야 하므로, 구매자가 처음 타이머를 보는 순간 앱이 개인별 종료 시간을 브라우저의 쿠키에 기록합니다. 이후 페이지를 볼 때는 이 쿠키를 읽어 이어서 진행합니다.

따라서 타이머는 브라우저와 기기별로 적용되고, 쿠키를 삭제하면 사라지며, 설정한 분 수를 변경하면 모든 구매자에게 초기화됩니다.

앱이 하지 않는 일

• 제품을 변경하지 않습니다. 가격, 재고, 판매 가능 여부를 건드리지 않습니다. 타이머가 0에 도달하면 타이머만 사라집니다.
• 재고를 예약하지 않습니다. 장바구니 카운트다운은 안내일 뿐 재고를 확보하는 기능이 아닙니다.
• 테마의 템플릿을 편집하지 않습니다. 임베드를 켜면 앱의 스크립트가 추가되며, 앱 블록은 다른 블록과 마찬가지로 테마 편집기에서 추가하고 제거합니다. 유일한 예외는 컬렉션 조건용 선택 템플릿 파일이며, 이 파일은 직접 추가합니다.

다음 단계

• 권한 및 데이터
• 카운트다운 작동 방식
• 카운트다운이 표시되지 않을 때
• 표시 개요