# Developer examples

> Short Liquid examples that read the AndOr metafields, to start your own theme code from. Each one says which rules it skips.

Source: https://backtrackhq.com/docs/developers/examples/

These are short examples to start your own theme code from. Each one
reads the app's metafields and prints one thing. They are easy to read
and easy to restyle. The app shows the same examples in its theme code
library, under **Developer examples**. Pick one in **Which example?**

They are starting points, not finished widgets. Each one keeps the
rules that matter in the common case, like hiding a sale once it has
ended. It skips the rarer rules, and says which ones at the end. The
complete versions are the [one-line tags](https://backtrackhq.com/docs/developers/one-line-tags/)
and the [product card recipes](https://backtrackhq.com/docs/developers/product-card-recipes/).

Before you paste:

- Replace `<app-id>` with your app id. The app hands you each example
  with your own namespace already in it.
- The examples are written for a product page and read `product`. On a
  product card, change `product` to `card_product`.
- Each example reads the namespace once, as `andor_data`, and then
  reads each key from it.

## Sale price

The struck original price beside the sale price.

```liquid
{% comment %} AndOr Discount Display: sale price example. {% endcomment %}
{% assign andor_data = product.metafields.app--<app-id>--andor_display %}
{% assign percent_off = andor_data.best_percent.value | plus: 0 %}
{% assign ends_at = andor_data.best_ends_at.value | default: 9999999999 %}
{% assign now_seconds = 'now' | date: '%s' | plus: 0 %}
{% if percent_off > 0 and ends_at > now_seconds %}
  {% assign amount_off = product.price | times: percent_off %}
  {% assign amount_off = amount_off | divided_by: 100.0 | round %}
  <div class="andor-sale-price">
    <s style="opacity: 0.6;">{{ product.price | money }}</s>
    <strong style="color: #c0392b;">
      {{ product.price | minus: amount_off | money }}
    </strong>
  </div>
{% else %}
  <span class="andor-regular-price">{{ product.price | money }}</span>
{% endif %}
```

(Screenshot: The sale price developer example on a product page)

**Where it goes:** On a product page, in `sections/main-product.liquid`. On a product card, change `product` to `card_product`. It prints a price, so use it in place of your theme's price line.

Skips: storewide sales, amount-off deals, gift cards. For the full rules, use `<andor-price></andor-price>`.

## Savings badge

A "Save 20%" chip while a sale is on.

```liquid
{% comment %} AndOr Discount Display: savings badge example. {% endcomment %}
{% assign andor_data = product.metafields.app--<app-id>--andor_display %}
{% assign percent_off = andor_data.best_percent.value | plus: 0 %}
{% assign ends_at = andor_data.best_ends_at.value | default: 9999999999 %}
{% assign now_seconds = 'now' | date: '%s' | plus: 0 %}
{% if percent_off > 0 and ends_at > now_seconds %}
  <span class="andor-savings-badge"
    style="background: #c0392b; color: #fff; padding: 0.2em 0.6em;">
    Save {{ percent_off | floor }}%
  </span>
{% endif %}
```

(Screenshot: The savings badge developer example on a product page)

**Where it goes:** On a product page, in `sections/main-product.liquid`. On a product card, change `product` to `card_product`.

Skips: storewide sales, amount-off deals, tiered and code discounts, gift cards. For the full rules, use `<andor-badge></andor-badge>`.

## Volume table

One buy-more-save-more ladder: quantity, discount and price each.

```liquid
{% comment %} AndOr Discount Display: volume table example. {% endcomment %}
{% assign andor_data = product.metafields.app--<app-id>--andor_display %}
{% assign shop_data = shop.metafields.app--<app-id>--andor_display %}
{% assign no_rows = '' | split: '' %}
{% assign product_rows = andor_data.discounts.value | default: no_rows %}
{% assign shop_rows = shop_data.shop_discounts.value | default: no_rows %}
{% assign ladders = product_rows | concat: shop_rows %}
{% assign now_seconds = 'now' | date: '%s' | plus: 0 %}
{% for discount in ladders %}
  {% if discount.tier_basis != 'quantity' or discount.code != blank %}
    {% continue %}
  {% endif %}
  {% assign starts_at = discount.starts_at | date: '%s' | plus: 0 %}
  {% assign ends_at = discount.ends_at | default: '2099-01-01' %}
  {% assign ends_at = ends_at | date: '%s' | plus: 0 %}
  {% if starts_at > now_seconds or ends_at <= now_seconds %}
    {% continue %}
  {% endif %}
  <table class="andor-volume-table">
    <caption>{{ discount.title }}</caption>
    <tr><th>Quantity</th><th>Discount</th><th>Price each</th></tr>
    {% for tier in discount.tiers %}
      {% assign keep_percent = 100 | minus: tier.value %}
      {% assign price_each = product.price | times: keep_percent %}
      {% assign price_each = price_each | divided_by: 100.0 | round %}
      <tr><td>{{ tier.threshold }}+</td><td>{{ tier.value | floor }}% off</td>
        <td>{{ price_each | money }}</td></tr>
    {% endfor %}
  </table>
  {% break %}
{% endfor %}
```

(Screenshot: The volume table developer example on a product page)

**Where it goes:** On a product page, in `sections/main-product.liquid`. It reads the product's ladder or a storewide one, so keep it out of product cards.

Skips: sales that do or do not combine with the ladder, spend ladders, variant-only discounts, code discounts, gift cards. For the full rules, use `<andor-tiers></andor-tiers>`.

## Sale ends soon

"Sale ends in under 5 hours", worked out on the server.

```liquid
{% comment %} AndOr Discount Display: sale ends soon example. {% endcomment %}
{% assign andor_data = product.metafields.app--<app-id>--andor_display %}
{% assign ends_at = andor_data.best_ends_at.value | plus: 0 %}
{% assign now_seconds = 'now' | date: '%s' | plus: 0 %}
{% assign seconds_left = ends_at | minus: now_seconds %}
{% if seconds_left > 0 %}
  {% comment %} Round up and say "under", so it never reads 0. {% endcomment %}
  {% assign hours_left = seconds_left | divided_by: 3600 | plus: 1 %}
  {% assign days_left = hours_left | divided_by: 24 | plus: 1 %}
  <p class="andor-ends-soon" style="color: #c0392b;">
    {% if hours_left <= 48 %}
      Sale ends in under {{ hours_left }} hours
    {% else %}
      Sale ends in under {{ days_left }} days
    {% endif %}
  </p>
{% endif %}
```

(Screenshot: The sale ends soon developer example on a product page)

**Where it goes:** On a product page, in `sections/main-product.liquid`. On a product card, change `product` to `card_product`.

Skips: a ticking clock (the text is fixed when the page is built), storewide sales, gift cards. For the full rules, use the **AndOr Countdown** block.

## Offers list

Every live deal in the store, with its code if it has one.

```liquid
{% comment %} AndOr Discount Display: offers list example. {% endcomment %}
{% assign andor_data = shop.metafields.app--<app-id>--andor_display %}
{% assign now_seconds = 'now' | date: '%s' | plus: 0 %}
<ul class="andor-offers">
  {% for offer in andor_data.offers.value %}
    {% if offer.v > 2 %}{% continue %}{% endif %}
    {% assign starts_at = offer.starts_at | date: '%s' | plus: 0 %}
    {% assign ends_at = offer.ends_at | default: '2099-01-01' %}
    {% assign ends_at = ends_at | date: '%s' | plus: 0 %}
    {% if starts_at > now_seconds or ends_at <= now_seconds %}
      {% continue %}
    {% endif %}
    <li>
      <strong>{{ offer.title }}</strong>
      {% if offer.scope != 'all' %}on selected products{% endif %}
      {% if offer.code != blank %}with code {{ offer.code }}{% endif %}
      {% if offer.tier_basis == 'quantity' %}
        when you buy {{ offer.tiers.first.threshold }}+
      {% elsif offer.mode != 'price' and offer.no_minimum != true %}
        on qualifying orders
      {% endif %}
    </li>
  {% endfor %}
</ul>
```

(Screenshot: The offers list developer example on a product page)

**Where it goes:** Any page. Near the top of a section, or in `layout/theme.liquid` just after the opening `<body>` tag.

Skips: the value of each deal, collection names, the minimum spend. For the full rules, use the **AndOr Offers** block.