Website logo
Get started
Docs
Dev
Log
Navigate through spaces
⌘K
Developer documentation
Themes
Javascript SDK
Admin API
Docs powered by Archbee
Themes
Components

Credit cost

Show the credit cost on product cards on your collection pages.


Document image


Setup

Create a new snippet called credit-cost. Copy and paste in the code below. Reference the snippet from your product card liquid file. In Dawn this is snippets/card-product.liquid.

Liquid
{% comment %}
  Renders a list of product's credit cost

  Accepts:
  - product: {Object} Product Liquid object (optional)

  Usage:
  {% render 'credit-cost', product: product %}
{% endcomment %}

{% assign credit_costs = product.variants | map: 'metafields' | map: 'supercycle' | map: 'credit_cost' %}

{% assign min_credit_cost = credit_costs[0] %}
{% assign max_credit_cost = credit_costs[0] %}

{% for cost in credit_costs %}
  {% if cost < min_credit_cost %}
    {% assign min_credit_cost = cost %}
  {% elsif cost > max_credit_cost %}
    {% assign max_credit_cost = cost %}
  {% endif %}
{% endfor %}

{% if min_credit_cost == max_credit_cost %}
  {% capture credit_cost %}{{min_credit_cost}} {{min_credit_cost | pluralize: "credit", "credits"}}{% endcapture %}
{% else %}
  {% capture credit_cost %}{{'products.product.price.from_price_html' | t: price: min_credit_cost}} {{min_credit_cost | pluralize: "credit", "credits"}}{% endcapture %}
{% endif %}

{% if min_credit_cost > 0 %}
  <div class="price">
    <div class="price__container">
      <div class="price__regular">
        <span class="price-item price-item--regular">
          {{ credit_cost }}
        </span>
      </div>
    </div>
  </div>
{% endif %}



To reference the snippet use the code below:

Liquid
{% render 'credit-cost', product: card_product %}




Did this page help you?
PREVIOUS
Featured plans
NEXT
Useful snippets
Docs powered by Archbee
TABLE OF CONTENTS
Setup
Docs powered by Archbee
Legal | Supercycle, part of Made Super Ltd. 2023