동적 테이블 블록에서 줄을 건너뛰는 방법

학습 내용

동적 표 블록에서 행(예: 항목)을 건너뛰는 방법을 알아보세요. 이 기능의 가장 일반적인 사용 사례는 장바구니 이탈 이메일에서 배송 보험이나 무료 사은품 항목처럼 관련 없는 항목을 숨기는 것이에요. 하지만 동적 표 블록을 사용하는 모든 이메일에서 아래 단계를 따라 할 수 있어요.

시작하기 전에 알아야 할 것

이 문서에서는 기존 동적 표 블록에서 항목을 숨기는 방법을 안내해요. 아직 작동하는 동적 표 블록(예: 장바구니 이탈 또는 주문 확인 이메일의 제품)을 만들지 않았다면 처음부터 만들기를 참고하거나, 플로우 라이브러리에서 메시지로 시작해 보세요.

if 문을 작성해 주세요

템플릿을 변경하기 전에 텍스트 또는 코드 편집기에서 코드 조각 2개를 만드세요(나중에 해당 조각을 복사해 붙여넣을 수 있는 곳이면 돼요). 각 코드 조각은 다음 3가지 부분으로 구성돼요:

1. 여는 if 태그, {% if ... %}, 테이블 블록에 어떤 항목이 표시되어야 하는지 나타냅니다.
2. 콘텐츠(예: 이미지 태그 또는 제품에 대한 텍스트)입니다.
3. 닫는 태그, {% endif %}.

여는 if 태그를 만드세요.

다음은 여는 if 태그 예시예요:

if 문에 사용할 콘텐츠를 생성해 주세요

콘텐츠의 경우, 동적 테이블 블록에서 기존 콘텐츠를 사용하려면 다음 단계를 따르세요. 이 코드 조각을 코드 또는 텍스트 편집기에 작성해 두세요, 다음 섹션에서 템플릿에 추가할 거예요.

1. 테이블 블록 이미지의 Cell Content에서 바꾸기를 클릭해 이미지 플레이스홀더를 확인하세요.
   

2. 동적 변수 또는 동적 URL 필드에서 전체 코드를 복사하세요. 이는 단순한 동적 변수일 수도 있고 더 긴 코드 조각일 수도 있습니다. 길이와 관계없이 전체를 모두 복사하세요.
   

3. 이 코드 조각에서 자리표시자를 동적 변수 또는 동적 URL 필드에서 복사한 코드로 바꿔 주세요.
   

<img src="PLACEHOLDER" style="width: 200px; height: auto;" width="200">

기존 표 블록에 이미지에 대한 간단한 동적 변수가 있는 경우, 결과 콘텐츠는 대략 다음과 같이 표시돼요:

<img src="{{item.product.variant.images.0.src}}" style="width: 200px; height: auto;" width="200">  

기존 표 블록에 더 긴 코드 조각이 포함되어 있는 경우 결과 콘텐츠는 다음과 같이 표시될 수 있어요:

<img src="{% if item.product.variant.images.0.src %}{{item.product.variant.images.0.src}}{%else%}{{item.product.images.0.src|missing_product_image}}{%endif%}" style="width: 200px; height: auto;" width="200">

종료 태그를 추가해 주세요

그런 다음 모든 콘텐츠를 함께 구성하세요. 여는 if 문, 그다음 콘텐츠, 마지막으로 닫는 {% endif %} 태그 순서예요.

텍스트 콘텐츠에도 동일하게 반복해 주세요

그런 다음 표 블록의 오른쪽에 있는 콘텐츠(예: 텍스트 콘텐츠)를 사용해 이 과정을 반복하세요. </>를 클릭하여 코드 편집기를 열고 HTML 콘텐츠를 모두 복사한 다음, 이 콘텐츠를 이미지 콘텐츠에 사용한 것과 동일한 if 문(1단계 및 3단계)에 감싸세요.

모든 것을 함께 보면 이렇게 보여요:

그리고 해당 코드 조각은 다음과 같이 나뉘어요:

두 코드 조각을 모두 작성했으면, 아래 단계에 따라 템플릿 편집기에서 계속 진행해 주세요.

동적 테이블 블록에서 행을 건너뛰기

1. 이메일이 플로우의 일부라면, 플로우 메시지를 편집하는 동안 메시지가 전송되지 않도록 초안 또는 수동으로 설정해 주세요.
2. 새 테이블 블록의 두 열 모두에서 셀 콘텐츠가 텍스트로 설정되어 있는지 확인해 주세요.
   

3. 표 블록의 왼쪽에 있는 HTML 편집기를 열려면 </>를 클릭하세요.
4. 이전 섹션에서 만든 제품 이미지 코드 조각을 복사한 다음 HTML 필드에 붙여넣어 주세요.
   

5. 왼쪽 상단의 완료 를 클릭하세요.
6. 테이블 블록 오른쪽의 편집기로 이동해 주세요.
7. 표 블록 오른쪽의 HTML 편집기를 열려면 </>를 클릭해 주세요.
8. 이전 섹션에서 만든 제품 세부정보 코드 조각을 복사한 다음 HTML 필드에 붙여넣고, 이전의 모든 콘텐츠를 바꿔 주세요.
9. 완료를 클릭합니다.
10. 예상대로 표시되는지 확인하려면 이메일을 미리 보기로 확인해 주세요: 건너뛴 항목은 표시되지 않아야 하지만, 다른 모든 항목은 정상적으로 표시돼요. 숨기려는 항목이 포함된 이벤트로 미리 보기를 실행해, 실제로 숨겨졌는지 확인해 주세요.

조건문 및 인라인 텍스트 편집기

텍스트 블록에 특정 조건문을 추가하면 인라인 텍스트 편집기에서 해당 조건문이 사라질 수 있습니다. 코드는 여전히 존재하지만 단지 숨겨져 있을 뿐입니다. 조건문을 보고 편집하려면 Django 태그 빌더를 사용하거나, 코드를 직접 편집할 수 있도록 콘텐츠를 전용 HTML 블록으로 옮겨 주세요.

다음 태그는 인라인 텍스트 편집기에는 표시되지 않지만 텍스트 블록에는 남아 있어요:

• {% for ... %}
• {% endfor %}
• {% if ... %}
• {% elif ... %}
• {% else %}
• {% endif %}
• {% with ... %}
• {% endwith %}

문제 해결

미리보기에는 항목이 표시되지 않아요.

1. 사용한 데이터 소스와 일치하는 이벤트로 미리 보고 있는지 확인해 주세요(예: 장바구니 이탈 메시지에는 Started checkout).
2. Repeat for와 Row alias가 원래 블록의 Row collection 및 Row alias와 정확히 일치하는지 확인해 주세요.

건너뛰어야 하는 항목이 계속 표시되고 있어요

if 문의 철자와 대소문자를 확인해 주세요. 제품이 계속 표시된다면 if 문의 기준을 충족한다는 의미이므로 if 문이 올바르게 구성되지 않았어요. 템플릿의 조건부 논리에 대해 자세히 알아보세요.

결과

이 단계를 따르면 if 문에서 기준을 충족하지 않는 항목은 장바구니 이탈 또는 주문 확인 이메일 같은 메시지에 표시되지 않아요.