Scripts용 Liquid 템플릿 업데이트

온라인 스토어에서 스크립트를 실행하는 경우 스토어프론트의 페이지에 미치는 영향을 확인해야 합니다. 대부분의 테마에는 스크립트를 지원하는 코드가 포함되어 있지만 일부 테마에는 포함되어 있지 않습니다. 테마에 코드가 없는 경우 직접 추가할 수 있습니다.

이 페이지의 내용

문제 해결

스크립트 및 테마와 관련된 대부분의 문제는 할인을 제공하는 품목 스크립트와 관련이 있습니다. 예를 들어, 주문의 총 가격은 정확하지만 품목 가격에 할인이 표시되지 않는 경우가 있습니다. 고객은 할인이 계산되는 방식을 이해해야 합니다. 고객은 원래 가격과 할인된 가격은 물론 할인에 대한 간략한 설명도 확인하기를 원합니다. 이러한 세부 정보가 카트에 누락된 경우 표시되도록 Liquid 코드를 추가해야 합니다.

스크립트가 스토어프론트에 미치는 영향을 확인하는 좋은 방법은 고객으로 방문하여 스크립트를 트리거하는 작업을 수행하는 것입니다.

Liquid 개체 특성

다음 목록에는 스토어의 카트에서 스크립트를 지원하는 데 일반적으로 필요한 Liquid 개체 특성이 포함되어 있습니다.

카트 개체 특성:

품목 특성:

스크립트 개체:

스크립트 개체를 사용하여 스토어의 활성 스크립트에 대한 정보를 반환할 수 있습니다. 이 개체는 스크립트를 디버깅할 때 유용할 수 있습니다.

예시

다음 예시에서는 품목 스크립트를 지원하기 위해 cart.liquid 템플릿을 변경하는 방법을 설명합니다.

카트 예시

예를 들어, 세 가지 품목이 있는 카트가 있는 경우:

축구공
- 수량: 1
- 단가: $15.00
테니스공
- 수량: 5
- 단가: $5.00
운동화
- 수량: 1
- 단가: $30.00

그리고 다음 할인을 적용하는 스크립트를 게시한 경우:

테니스공 2개 이상 구매 시 10% 할인
모든 신발 $5 할인

cart.liquid 템플릿은 품목과 총 금액 요약을 나열하는 간단한 표가 될 수 있습니다.

<table class="cart">
  <thead class="heading">
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>

  <tbody class="line-items">
    {% for item in cart.items %}
    <tr>
      <td>{{ item.product.title }}</td>
      <td>{{ item.quantity }}</td>
      <td>{{ item.line_price | money }}</td>
    </tr>
    {% endfor %}
  </tbody>

  <tfoot class="summary">
    <tr>
      <td colspan="2">Total</td>
      <td>{{ cart.total_price | money }}</td>
    </tr>
  </tfoot>
</table>

스크립트에서 적용된 할인으로 이 템플릿은 카트에 대한 다음 표를 생성합니다.

제품	수량	합계
축구공	1	$15.00
테니스공	5	$22.50
운동화	1	$25.00
합계		$62.50

품목 업데이트

스크립트에서 적용한 할인을 표시하려면 품목을 업데이트하여 세 가지 주요 정보를 표시해야 합니다.

할인 전 품목 가격
할인 후 품목 가격
적용된 할인을 설명하는 메시지

이를 수행하려면 다음 Liquid 개체 특성을 사용합니다.

line_item.total_discount는 품목에 적용된 할인 금액을 반환합니다.
line_item.original_line_price는 할인 전 품목 가격을 반환합니다.
line_item.message는 품목에 적용된 할인을 설명하는 메시지를 반환합니다.

취소선 효과를 사용하여 원래 품목 가격과 할인된 품목 가격을 구별하는 것이 도움이 될 수 있습니다.

<tbody class="line-items">
  {% for item in cart.items %}
  <tr>
    <td>{{ item.product.title }}</td>
    <td>{{ item.quantity }}</td>
    <td>
      {{ item.line_price }}
      {% if item.total_discount > 0 %}
        <s>{{ item.original_line_price }}</s>
        ( {{ item.message }} )
      {% endif %}
    </td>
  </tr>
  {% endfor %}
</tbody>

이제 카트가 다음과 같이 표시됩니다.

제품	수량	합계
축구공	1	$15.00
테니스공	5	$22.50 ~~$25.00~~ (테니스공 2개 이상 구매 시 10% 할인)
운동화	1	$25.00 ~~$30.00~~ (모든 신발 $5 할인)
합계		$62.50

카트 요약 업데이트

고객이 주문 가격을 계속 추적할 수 있도록 다음 정보도 표시해야 합니다.

고객이 할인 전후의 합계를 비교할 수 있도록 카트의 원래 소계
고객이 카트에서 받은 총 할인액

마찬가지로 이 정보를 추가하려면 다음 Liquid 개체 특성을 사용합니다.

cart.total_discount는 카트의 품목에 적용된 할인 금액을 반환합니다.
cart.original_total_price는 할인 전 카트의 소계를 반환합니다.

이 정보를 사용하면 업데이트된 .summary 블록이 다음과 같이 표시될 수 있습니다.

<tfoot class="summary">
  <tr>
    <td colspan="2">Subtotal</td>
    <td>{{ cart.original_total_price | money }}</td>
  </tr>
  <tr>
    <td colspan="2">Discount Savings</td>
    <td>{{ cart.total_discount | money }}</td>
  </tr>
  <tr>
    <td colspan="2">Total</td>
    <td>{{ cart.total_price | money }}</td>
  </tr>
</tfoot>

이제 카트 테이블이 다음과 같이 표시됩니다.

제품	수량	합계
축구공	1	$15.00
테니스공	5	$22.50 ~~$25.00~~ (테니스공 2개 이상 구매 시 10% 할인)
운동화	1	$25.00 ~~$30.00~~ (모든 신발 $5 할인)
소계		$70.00
할인액		$7.50
합계		$62.50

템플릿에 몇 가지 새로운 Liquid 개체를 추가하여 고객이 할인액 계산 방식을 쉽게 이해하도록 할 수 있습니다.

기타 예시

다음 Liquid 예시는 각 품목에 대한 할인을 보여줍니다.

{% if item.original_line_price != item.line_price %}
  <small class="original-price"><s>{{ item.original_line_price | money }}</s></small>
  {% endif %}
  {{ item.line_price | money }}
  {% for discount in item.discounts %}
  <small class="discount">{{ discount.title }}</small>
  {% endfor %}

Liquid 코드 변경 사항이 포함된 또 다른 할인 예시를 확인하세요.