Shopify Checkout – Omneo Help Center

A small package for checking and applying an Omneo reward balance to Shopify Checkout. This component uses Reactfor dom-manipulation and Unfetch to polyfill modern fetch functionality.

Shopify install

Installing this component includes a number of quick steps:

Add Loyalty Reward product

Add a new product to Shopify with the description of Loyalty Reward or equivalent and copy the variant ID. Finding your Variant ID

This is used by the checkout script and component to apply dynamic rewards to a transaction.

Create component snippet

Create a new snippet in your Shopify theme called omneo-checkout-rewards.liquid and copy the following code into the start of the file. Add your Omneo URL, token, profile id and the Shopify Variant ID of your Loyalty Reward product. Please ensure the rewardVariantId is an integer.

{% assign rewardVariantId = 0 %} 
{% assign ignoreGiftCards = true %} 
{% assign omneoTenant = "mjbale-staging" %} 
{% assign omneoToken = false %} 
{% assign title = "Loyalty rewards available:" %}
{% assign supportEmail = false %}
{% assign hideIfInactive = true %}
{% assign autoExpandSummary = true %}
{% assign loadingMessage = "Just a moment as we set up your account" %}
{% assign errorMessage = "There was an issue getting your rewards. Please try again or contact customer support." %}

Once the variables are added, add the following code to complete the snippet:

{% if customer != blank %}
    {% assign rewardApplied = false %}
    {% assign subtotalCalculated = checkout.subtotal_price %}
    {% assign subtotalFromAppliedReward = false %}

    {% for line_item in checkout.line_items %}
        {% if line_item.gift_card and ignoreGiftCards %}
            {% assign subtotalCalculated = subtotalCalculated | minus: line_item.original_price %}
        {% endif %}
        {% if line_item.variant_id == rewardVariantId %}
            {% for property in line_item.properties %}
                {% if property[0] == 'amount' %}
                    {% assign rewardApplied = property[1] %}
                {% endif %}
                {% if property[0] == 'subtotal' %}
                    {% assign subtotalFromAppliedReward = property[1] %}
                {% endif %}
            {% endfor %}
        {% endif %}
    {% endfor %}

    {% if subtotalFromAppliedReward %}
        {% assign subtotalCalculated = subtotalFromAppliedReward %}
    {% endif %}

    <script type="text/javascript" src="//cdn.omneo.io/shapes-shopify-checkout.js"></script>
    <script>
      ShapesShopifyCheckout.init({
          customerId: "{{ customer.id }}",
          customerSignature: "{{ customer.id | hmac_sha1: product.metafields.omneo.id_secret }}",
          idUrl: "https://api.{{omneoTenant}}.getomneo.com/id",
          pluginUrl: "https://api.{{omneoTenant}}.getomneo.com/shopify",
          token: "{{omneoToken}}", 
          rewardVariantId: {{rewardVariantId}},
          subTotal: {{subtotalCalculated}},
          rewardApplied: {{rewardApplied}},
          title: {{title}},
          loadingMessage: {{subtotalCalculated}},
          errorMessage: {{errorMessage}},
          supportEmail: {{supportEmail}},
          hideIfInactive: {{hideIfInactive}},
          autoExpandSummary: {{autoExpandSummary}}
      });
    </script>
{% endif %}
<style>
  .product[data-variant-id="{{rewardVariantId}}"]{display:none}
  .product[data-variant-id="{{rewardVariantId}}"]:first-child + tr .product__description{padding-top:0;}
  .product[data-variant-id="{{rewardVariantId}}"]:first-child + tr .product__image{padding-top:0;}
</style>

Update checkout.liquid

Include the following code immediately before the head closing tag </head> in checkout.liquid: this is the best

{% include 'omneo-checkout-rewards' %}

Add Omneo Token page template

Create a page template named page.omneoViewToken.liquid and add the following code:

<div style="display:none">
{% if customer.metafields.omneo != blank %}
	{% if customer.metafields.omneo.token != blank %}
  		<TOKEN>{{customer.metafields.omneo.token}}<TOKEN>
	{% endif %}
{% endif %}
</div>

Create the token page

Make a new page in Shopify with the url /pages/omneoviewtoken and publish this page. This page should not be indexed or linked to from any other area.

Add Shopify Script

If you haven't already installed the Shopify Scripts app, follow the instructions here: Script Editor

Navigate to the Shopify Scripts app and create a new Line Items script with a blank template. Copy the following script and ensure the reward variable id is updated to reflect your own Loyalty Reward product:

LOYALTY_ITEM_VARIATION_ID = 0
IGNORE_GIFT_CARDS = true

def get_valid_cart_amount(line_items)
  cart_amount = Integer(Input.cart.subtotal_price.cents.round.to_s)

  if line_items.kind_of?(Array)
    line_items.each do |line_item|
      if IGNORE_GIFT_CARDS and line_item.variant.product.gift_card?
        cart_amount = cart_amount - Integer(line_item.line_price.cents.round.to_s)
      end
    end
  end
  
  cart_amount
end

def get_applied_loyalty_rewards(line_items)
  reward_amount = 0;
  cart_amount = get_valid_cart_amount(line_items)

  if line_items.kind_of?(Array)
    line_items.each do |line_item|
      if line_item.variant.id == LOYALTY_ITEM_VARIATION_ID
        next unless line_item.properties['amount']
        reward_amount = Float(line_item.properties['amount']) * 100

        if reward_amount > cart_amount
          reward_amount = cart_amount
          line_item.change_properties({
            'amount' => cart_amount * 0.01,
            'subtotal' => cart_amount
          },{ message: 'Updated value' })  
        else
          line_item.change_properties({
            'amount' => reward_amount * 0.01,
            'subtotal' => cart_amount
          },{ message: 'Updated value' })  
        end
      end
    end
  end
  
  reward_amount
end

def apply_loyalty_rewards(line_items)
  reward_amount = get_applied_loyalty_rewards(line_items)
  return unless 0 < reward_amount

  reward_remainder = 0.0
  total_reward_elegible_price = get_valid_cart_amount(line_items)

  if line_items.kind_of?(Array)
    line_items.each do |line_item|
      next unless !IGNORE_GIFT_CARDS or !line_item.variant.product.gift_card?
      price = Integer(line_item.line_price.cents.round.to_s)
      if price > 0
        proportion =  price / total_reward_elegible_price
        discount_float = (reward_amount * proportion) + reward_remainder
        discount = discount_float.round
        reward_remainder =  discount_float - discount
        line_item.change_line_price(line_item.line_price - Money.new(cents: discount), message: 'Reward')
      end
    end
  end
end

apply_loyalty_rewards(Input.cart.line_items)

Output.cart = Input.cart

Hide the Loyalty Reward product from public and go live

You're (almost) all done! Loyalty rewards should now be active and ready for customers to checkout. Just ensure that the Loyalty Reward placeholder product is not visible in any collections or publicly facing product views.

{[{category.name}]}