How to display price alongside ATC text in Dawn theme?

[xnyjyh]

I have trie a few codes to display the price beside the ATC text in the button. None seemed to work nice. 

Anyone have a good code to display the price inline with the ACt text?

Thanks

[diego_ezfy · Accepted solution]

@xnyjyh 

1. From the Shopify admin, find the theme you want to edit, click on the 3 dots > edit code
2. Find the file named "buy-buttons.liquid". If you don't have a file named "buy-buttons.liquid", you're using an older version of the Dawn/free theme. Search for "main-product.liquid" instead.
3. Inside this file, press CTRL + F to trigger the search box. Search for:

loading-spinner

4. Paste the following code above the line you found.

<span class="buttonPrice">- {{ product.selected_or_first_available_variant.price | money }}</span>

5. Now, below the "snippets" folder, click on "add a new snippet" and name it "price-button".

7. Paste the following code inside it:

{% if request.page_type == 'product' %}


  
<script>

window.buttonPriceHandlerVariants = [
  
{% for variant in product.variants %}
  {
  id: parseInt(`{{ variant.id }}`),
  price: `{{ variant.price | money }}`
        },
  {% endfor %}

]

window.buttonPriceHandler = window.buttonPriceHandler || {};

buttonPriceHandler = (function () {

    const LOADING_DELAY = 50;
  
    function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

  function getVariantID() {
    const $id = document.querySelector(`[id*='product-form'] > input:nth-child(3)`);

    if (!$id) {
      return null;
    }

    const _id = $id.getAttribute("value");

    if (!_id) {
      return;
    }

    const id = parseInt(_id);

    if (!/\d\d\d/.test(id)) {
      return null;
    }

    return id;
  }
  
  function handleDropdownChange() {
    const $dropdowns = document.querySelectorAll(` [class*='product__info'] variant-selects select`);

    if (!$dropdowns){
      return
    }

   
        for (var each of $dropdowns){
          each.addEventListener("change", async function(e){
          	
   await sleep(LOADING_DELAY);
        
      updatePrice();
          
          });
        }
    
  }

  function handleSwatchChange(){
    

    const $radios = document.querySelectorAll(`[class*='product-form'] [type='radio']`)

    if (!$radios) {
      return;
    }

    for (var $radio of $radios) {
      $radio.addEventListener("click", async function() {

        await sleep(LOADING_DELAY);
        
      updatePrice();
      });
    }

  }

  async function updatePrice(){
    const id = getVariantID();
    const found = buttonPriceHandlerVariants.find(e => e.id === id);
  

      const $button = document.querySelector(`.buttonPrice`);

    if (!$button){
      return;
    }

    $button.textContent = ` - ${found.price}`

  }

  

  

  return {
    init: function () {
      
      document.addEventListener("DOMContentLoaded", function () {
        handleSwatchChange();
        handleDropdownChange();
      });

      window.addEventListener("resize", function () {});

      window.addEventListener("load", function () {});

      window.addEventListener("scroll", function () {});
    },
  };
})();

buttonPriceHandler.init();
</script>
  {% endif %}

8. Find the file named exactly:

theme.liquid

9. Inside this file, search for:

</body

note: If you can't find a </body inside your theme.liquid file you accidentally deleted it at some point - it's a crucial part of every theme. In this case you can paste the code at the very bottom of the file, but I'd recommend reverting back to an unmodified version of your theme.

10. Paste the following code above this line:

{% render 'price-button' %}

This will ensure that whenever a variant changes the price inside the button is updated.

If it helps you please click on the "like" button and mark this answer as a solution!

Thank you.

Kind regards,
Diego

[xnyjyh]

Excellent! Thank you so much! works the best out of all the codes I've tried. 🙂