Converting Units based on User preference

[smyfdesign]

I am building a site where users compare physical products. I want to allow users to use metric or imperial units based on their preference. When the user makes the selection it would change all units in

What would be the best way to store/handle this in the database?

Should each product have a weight in ‘kg’ and also ‘lb’?

Note, each product is also submitted by Users, so I would prefer a way to all users to choose what units to use when they are adding a product, but if I had to default to one type (e.g. metric) that would also be acceptable, if not ideal.

[adamhholmes]

There are several ways to deal with conversions/units, depending on use cases and what/how your app works etc…

One option is to store the data in only 1 base unit in the database (e.g. Kg), and then convert it on the page.

Another option is to store all the different unit values as separate fields on the datatype in the database (ok if there’re just a few options e.g. kg or lbs) and then use conditionals on the page to decide which to display depending on what unit is chosen.

If there are a larger number of possible units (such as currencies) then it’s usually simpler to create a separate datatype, and store those separately, and just access the one you need based on the selected unit.

But if you’re just talking about metric or imperial units then either of the first 2 options will be fine.

The first option, storing in just one unit, is probably the simplest, as you won’t need to use lots of conditionals on the page.

It’s probably simplest to do the conversion only once on the page, and then display the converted value anywhere you need it, rather than convert it every time you want to display it. So you can use a custom state that can be set on pageload to store the converted value in whatever unit is selected (and change it whenever the unit is changed), then access that custom state’s value wherever you need to on the page.

[smyfdesign]

Hi Adam,

Thanks for the detailed response, it’s greatly appreciated.

In this site there are many different kinds of unit (weights kg/lb, weight tonnes, tons lengths m/ft’in", lengths mm/in). So for each piece of data there are only two states (US or metric) but there are many different units due to the different measurement types.

Do you think that using conditionals is the more effective for this application given the variety of measurement types?

Honestly I’m only beginning to get into Bubble so I haven’t used either custom states or conditionality, and really here I’m trying to figure out what’s the next rabbit hole to jump down to learn how to solve this problem.

[adamhholmes]

If each piece of data only has 2 possible units (e.g. US or metric) then to be honest using either option (storing both values as separate fields, or storing just one and converting it on the page) are both equally effective.

The best way to go about it depends on your use case - if you’ll only be displaying each value once on the page it really doesn’t matter whether you use a custom state or just use a conditional on the display element (you have to make the ‘decision’ of which version to display once regardless).

If you’ll be displaying the same data at multiple places on the same page (e.g. in the title, description, and elsewhere) then it’s more efficient to set the unit and value just once (i.e. in a custom state), then refer to that wherever you need to, rather than using a conditional (or doing a conversion) every time you want to display the value.

As with most things in Bubble there are always multiple ways to achieve the same (or similar) goal, but I’d recommend looking into using option sets for your different units, then setting some custom states on your page of those options sets, and the values for the relevant units for each item in your database/page.

Then you can simply reference the page states (including the symbol - Kg or lbs, and the values) any time you need to display them, and have a workflow to set the page custom states anytime the unit type is changed by the user.

[smyfdesign]

Thanks Adam, I kind of guessed that there would be more than one option on this. I’ll go with your recommendation to try using option states with custom states on the page.

I am going to have a button in the header of all pages which allows the users to select the units. My thought is to have this save a unit ‘preference’ to the user so once they choose the units, they don’t have to re-select it each time. E.g. "When User’s Preference is metric display mm/kg etc.)

I’m excited to build the rest of the site, but I think I’ll take some time getting this part figured out right now, as I think it will be easier to build now when there’s less on the site.

I really appreciate the help, thanks for taking the time to come back again!

[pachocastillosr]

Hi, I just wanted to know in the end which approach did you use and if you have any suggestions for someone trying to accomplish something similar to what you wanted

Thanks

[smyfdesign]

Hi,

In the end I saved two fields (metric & imperial) for each. When new items are saved, a conversion is done in the workflow to save both at the same time.

For users viewing the page, there are two equivalent pages each with their chosen type of units. It was some work to create the same page twice, so I made sure I had the page design finished before creating the second page. Which unit type is shown (US or metric) is determined by a field called “unit preference” which the user can amend in settings.

Hope that helps, if you have any more specific questions let me know.