Display compare at price on checkout page

Technical Q&A
1

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.

1 Like
2

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

Hey thanks for that Wildabeast, helped me out when I was in a jam.

4

Hey Wildabeast above code will add compare at price twice once shipping page is changed or discount code is added, Here’s updated version of code to avoid that:
5

Here’s the code to add compare at price at checkout:

<script>
    function injectCompareAtPrice(event) {
        const lineItems = [
          {% 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 %}
        ];
      
        lineItems.forEach(function(lineItem) {
          const el = document.querySelector(`[data-variant-id='${lineItem.variant_id}'] .product__price`);
          if (!el) {
            return;
          }
      
          // Check if element has already been modified
          if (el.classList.contains('compare-at-price-added')) {
            return;
          }
      
          try {
            const content = el.innerHTML;
            const amount = (parseFloat(lineItem.quantity) * parseFloat(lineItem.compare_at_price) / 100).toFixed(2);
      
            el.innerHTML = `${content} <span class='order-summary__small-text product__comparePrice'>$${amount}</span>`;
            el.classList.add('compare-at-price-added'); // Add class to indicate element has been modified
          } catch (error) {
            console.error('Error rendering compare_at_price', error);
          }
        });
      }
      
      document.addEventListener('page:load', injectCompareAtPrice);
      document.addEventListener('page:change', injectCompareAtPrice);
      document.addEventListener('rebuy.refresh', injectCompareAtPrice);
 </script>
1 Like
6

Just to add to the previous code. I have expanded on this so the code shows the percentage discount next to each item and it also shows total savings in the list of subtotals in the sidebar beneath the items
1 Like
7

Thank you for this. I’m unable to find ‘checkout.liquid’ in my theme code? Icon theme.

8

Ah! Yeah, you will need to be on Shopify Plus if you’re not already

9

Hi, how can i display the compare at price in cart page?

10

For refresh theme

11

Does that work on Dawn theme too and if yes, where do you add that code in the there? Cheers for your help

12

Does anyone know if there is a way to do this with Checkout Extensibility now that checkout.liquid is going away?

4 Likes
13

Hi, we’re on Shopify Plus but I’m looking to add this to my cart page it actually pulls through natively in the Checkout. Do you know which file I should be adding this to or is it theme specific?

14

Hi there! Very helpful! Did you know how to show the compare-at-price in the cart page as well? I would appreciate a lot if you can help me! I am using dawn theme

15

Hi there! Very helpful! Did you know how to show the compare-at-price in the cart page/cart drawer as well? I would appreciate a lot if you can help me! I am using dawn theme

16

Hey Epetroel,

Please see a blog post on a solution using functions here: https://10sq.dev/blog/compare-at-pricing