FROM CACHE - en_header

Display compare at price on checkout page

16 0 7

We'd like to display the compare_at_price in our checkout summary next to the current price of a product. Currently the checkout summary is rendered using a built-in liquid method:

{{ content_for_order_summary }}


In order to do this, it seems like we'd need to completely rewrite the logic provided by the content_for_order_summary method. This includes the form for dicount codes, displaying the shipping summary, etc. We have capable shopify developers on hand so are able to write code, but I just don't see how we can realistically rewrite and customize an internal shopify function and all of its edge cases etc.

We have shopify plus.

Reply 1 (1)
16 0 7

Think I managed to pull this off with some Javascript in my checkout.liquid:

   * This script runs on the checkout page. 
   * It adds strikethrough compare_at_price to the order summary items.
   * Does so by looking for data-variant-ids, and injecting the compare_at_price for that line item.
  function injectCompareAtPrice(event) {
    var line_items = [
      {% for line in checkout.line_items %}
        {% if line.variant.compare_at_price > 0 %}
            'variant_id':'{{ line.variant_id }}',
            'compare_at_price':'{{ line.variant.compare_at_price }}',
            'quantity': {{ line.quantity }},
        {% endif %}
      {% endfor %}

    line_items.forEach(function(item) {
      try {
        var el = document.querySelector(`[data-variant-id='${item.variant_id}'] .product__price`);
        if (!el) {
        var content = el.innerHTML;
        var amount = (parseFloat(item.quantity)*parseFloat(item.compare_at_price)/100).toFixed(2);
        el.innerHTML = `<del class='order-summary__small-text'>$${amount}</del><br>${content}`;
      } catch (ex) {
        console.error('Error rendering compare_at_price', ex);

  document.addEventListener('page:load', injectCompareAtPrice);
  document.addEventListener('page:change', injectCompareAtPrice);
  document.addEventListener('rebuy.refresh', injectCompareAtPrice);