스크립트용 Liquid 템플릿 업데이트

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

이 페이지의 정보

문제 해결

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

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

Liquid 개체 특성

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

Cart 개체 특성

품목 특성

스크립트 개체:

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

예

다음 예는 품목 스크립트를 지원하기 위해 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 코드 변경 사항을 포함한 또 다른 할인 예시를 참조하십시오.