WeBlocks - JavaScript

Design help Custom code
1

Hi All

I have been using WeBlocks to try and create some JavaScript for a range slider but came up against an issue. I have the range slider working in the most part but I am having an issue with the decimal points to show money values. I have attached the links below. I have reached out to WeBlocks but not heard anything back for a while and need to get this project completed. Within the link below if you move the slider to 7 Candidates the numbers go really long and I need to limit it.

Can anyone help please.

Thanks in advance.

Jason

Here is my site Read-Only:
([how to share your site Read-Only link][2])

https://jasons-spectacular-site-940625.webflow.io/

2

Hey Jason!

I have an easy solution for you - set a max width and overflow none on your numbers, so that only the first 4 (?) decimal places are visible.

In this example I just tested, the actual number written is 100.0000000000, but since I did this, you can only see 100.0

Screenshot 2023-09-11 at 13.08.07
Screenshot 2023-09-11 at 13.08.071666Ă—1016 92.3 KB

3

Hi @jasonjkd here is another solution that display currency with decimals dynamically mean no need to manually set static width :roll_eyes: :exploding_head:

You can use simple function that will convert number to currency you need. It will sets currency symbol and number of decimals. :person_shrugging:

HTML

<p data-price class="cost_per_head">100</p>
<p data-price class="cost_per_head">4520.50</p>

JS

const price = document.querySelectorAll(".cost_per_head");
// const price = document.querySelectorAll("[data-price]");

price.forEach((item) => {

  item.textContent = new Intl.NumberFormat("en-EN", { style: "currency", currency: "GBP" }).format(item.textContent);
  // returns a string with the currency symbol and the price with decimal places =>  ÂŁ1,000.00 or ÂŁ100.00

 
 // item.textContent = new Intl.NumberFormat("en-EN", { style: "currency", currency: "GBP", maximumFractionDigits: 0 }).format(item.textContent);
 // returns a string with the currency symbol and the price without decimal places =>  ÂŁ1,000 or ÂŁ100
});

result : ÂŁ100.00 or ÂŁ4,520.50

4

@Stan Thanks for the help, unfortunately that hasn’t worked. Here is a updated share link with the code.

https://preview.webflow.com/preview/jasons-spectacular-site-940625?utm_medium=preview_link&utm_source=designer&utm_content=jasons-spectacular-site-940625&preview=6572a173d797fcd072b7ec2ddebee21c&workflow=preview

5

If you do want to use additional JS, you can just make a script that will truncate all items with the .total_cost class. My previous recommendation was just a simple solution for people who don’t want to mess with code. If you do want to, try this out :slight_smile:

<script>
function truncate(element) {
    let number = parseFloat(element.innerText);
    if (!isNaN(number)) { // only run if the text is a number
        element.innerText = Math.trunc(number).toString(); // truncate the number
    }
}

// function to run truncate on all elements with class 'total_cost'
function truncateAll() {
    let elements = document.getElementsByClassName('total_cost');
    for (let element of elements) {
        truncate(element);
    }
}

// Setup MutationObserver to keep watching for changes and truncate as necessary
let observer = new MutationObserver(truncateAll);

let config = { childList: true, subtree: true };
observer.observe(document.body, config);

// Call truncateAll immediately to truncate any numbers already on the page when the script runs.
truncateAll();
</script>
6

Thanks all for you help.

The solution was to add

  $('.cost_per_head').text((Math.round(cost_per_head*100))/100);
  $('.total_savings').text((Math.round(total_savings*100))/100);

to the function section.

7

hi @jasonjkd glad to help. I have suggested that returned value will be in cents like values from Stripe (eg. $1 == 100) but I didn’t check it and forget to mentioned it. I see you have figure it out. :wink:

8

Sorry, but cutting number by width of element was a one of worst recommendations I have seen for long time.

9

No need to be rude :slight_smile: There is no “right” answer to anything, and setting a max width would achieve the desired effect without decreasing performance and in a way where no additional code needs to be messed with.

Don’t forget, you’re in a no-code community right now where people greatly appreciate simple solutions which don’t require code.

1 Like
10

Sorry I didn’t meant to be rude as I use to be honest and saying truth. PEACE
I Agree with statement that there is 100 solutions for identical result, but this solution would not recommend even junior developer.

Arguing that this is a “no-code” is not reason giving such solution. BTW without custom code is WF toothless toy.

11

hi @jasonjkd you can give each item (text block) an attribute (as in previous example) to grab all text fields (cost_per_head , total_savings ) and do division directly to keep it one-liner.

<p data-price class="cost_per_head">10000</p>
<p data-price class="total_savings">600</p>

HTML


const price = document.querySelectorAll("[data-price]");

price.forEach((item) => {
  item.textContent = new Intl.NumberFormat("en-EN", { style: "currency", currency: "GBP" }).format(item.textContent / 100);
});

or similar way as I didn’t check what value you are dealing with.

12

@Stan everyones approach to solving problems are welcome, regardless of your personal opinion. Consistently being rude and dismissive (which you have a track record of) does not create an inclusive environment for those who are volunteering their valuable time to help others.

@Julian_Galluzzo I’m sorry you’re on the receiving end of this. Your contributions are appreciated.

2 Likes
13

Thank you Chris, as are yours! :pray:

1 Like