Solved

dawn theme - ATC button price display

xnyjyh
Explorer
200 0 9

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

Accepted Solution (1)

diego_ezfy
Shopify Partner
2958 568 890

This is an 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

diego_ezfy_0-1710791616011.png


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

 

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

 

diego_ezfy_3-1710792175281.png


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

diego_ezfy_2-1710791910651.png


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' %}

diego_ezfy_4-1710794041548.png


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

 

◦ Follow my blog & youtube for coding tutorials.
◦ Replace apps with copy/paste code snippets and save money.

View solution in original post

Replies 2 (2)

diego_ezfy
Shopify Partner
2958 568 890

This is an 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

diego_ezfy_0-1710791616011.png


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

 

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

 

diego_ezfy_3-1710792175281.png


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

diego_ezfy_2-1710791910651.png


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' %}

diego_ezfy_4-1710794041548.png


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

 

◦ Follow my blog & youtube for coding tutorials.
◦ Replace apps with copy/paste code snippets and save money.
xnyjyh
Explorer
200 0 9

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