Post Featured Image

Add Units of Measure to Products

This blog post requires mostly changes to your item data, and is therefore appropriate for all versions of SuiteCommerce, but it is written from the point of view of a site running Aconcagua or newer.

This week, we have another guest post from Mike Lynch, one of our solutions consultants for NetSuite Commerce, hailing from Sydney, Australia. He's going to talk about how you can add price-per-unit fields to your products. -Steve

I get asked quite often by SCA customers about being able to display units of measure against an item and the associated costs. Here in Australia, when selling things by volume like liquids or groceries the price is generally displayed as the package cost, as well as the price-per-unit-of-measure.

For example, in a supermarket when you buy three liters of milk for $4.50, the price would usually also tell you that the milk costs $1.50 per liter or $0.15 per 100ml. This works the same way for selling things by area like flooring or lawn in square meters (or feet).

So, how can we display this to the shopper in SuiteCommerce or SuiteCommerce Advanced? It's actually pretty simple using the power of Netsuite ERP and some very minor theme template changes.

For this example, let's use bottles of liquid that have varied sizes. I have one Bottle of Stuff which is 920ml, and another Bottle of Stuff which is 575ml. We want to show the price of the bottle on the PDP, along with the size of the bottle and the unit of liquid measure being used. Then we want to show the price per designated serving size - in this case the price per 100ml.

To do this we'll undertake the following steps:

  1. Create item fields in NetSuite for the bottle unit of measure, the bottle size, and the 'division' size (ie the X in "price per X") — I'll be calling this the bottle price divider
  2. Create a saved search that gives us the calculated value of the price per X for all items, then return that value to another custom item field
  3. Modify the theme template for the PDP to display our item fields for shoppers

Let's go!

Create a Custom List for Units of Measure

There are the standard units of measure built into NetSuite which you can read more about in the help center or SuiteAnswers, but for today's exercise we'll just create a new list for our units of measure, so we can populate a dropdown field on the item master.

  1. In NetSuite, go to Customization > Lists, Records & Fields > Lists > New
  2. Name your list and optionally setup the list ID — I've called mine Bottle UOM and used the list ID _bottle_uom (which will result in an ID of customlist_bottle_uom)
  3. Enter your units of measure — for my liquid units, I've entered ml, l, fl. oz., gal. and cc
  4. Save your list

It should look like this:

Next, we'll set up some custom item fields.

Create Custom Fields for Items

This requires a number of custom fields to work, and we're going to create most of them now — we'll need to create another one later. We need to create some custom fields, create a custom search, and then create one final field that returns the value of that search.

Go to Customization > Lists, Records & Fields > Item Fields > New and create new fields.

For the first field:

  • Label — Bottle UOM
  • ID — _bottle_UOM
  • Type — List/Record
  • List/Record — Bottle UOM
  • Applies To > Inventory Item — (checked)

For the second field:

  • Label — Bottle Price Divider
  • ID — _bottle_price_div
  • Type — Integer Number
  • Applies To > Inventory Item — (checked)

For the third field:

  • Label — Bottle Size
  • ID — _bottle_size
  • Type — Integer Number
  • Applies To > Inventory Item — (checked)

All other fields can be left to their defaults.

Custom Field for Bottles

As this tutorial is working on the assumption that you sell bottled liquids, you will also need some sort of field that can be used to identify them. For example, you could have a boolean field that stores true or false depending on whether it is a bottle. For the purposes of this tutorial, I'm going to assume it's called custitem_is_bottle.

Create a Saved Search to Calculate the Price Per X

This saved search is going to be used to give us a dynamic value that gets calculated by dividing the price by the bottle size, and then multiplying that value by the bottle price divider.

Go to Lists > Searches > Saved Searches > New > Item and create it as follows:

  • Search Title — Price per ml
  • Public — (checked)
  • Available as List View — (checked)
  • Criteria > Standard
    • Filter — Is Bottle (Custom)
    • Description — is true
  • Results > Columns — click Remove All and then add two lines:
    1. Line 1:
      • Field — Internal ID
    2. Line 2:
      • Field — Formula (Currency)
      • Summary Type — Sum
      • Formula — ({price}/{custitem_bottle_size})*{custitem_bottle_price_div}
  • Available Filters
    1. Line 1:
      • Filter — Internal ID
  • Click Save & Run

By adding the internal ID field and filter, we can contextually pull out the information we need based on the current item we're working on.

Check out this great GIF Steve made in case you get stuck:

Create a Custom Field for Price Per X

This custom field is going to be used to show the calculated price per unit of measure. It's going to use the saved search as the source for its value. Seeing as we've specified the internal ID, that is the context — it'll just run for the current item.

Go to Customization > Lists, Records & Fields > Item Fields > New and set it up as follows:

  • Label — Price per X
  • ID — _bottle_price_per
  • Type — Currency
  • Store Value — (unchecked)
  • Validation & Defaulting > Search — Price per ml

Leave all other fields to their defaults (make sure you've unchecked Store Value!) and then save the field.

Add the Custom Fields to the Details Field Set

The Details fieldset is our default field set for the product details page — if you use a different one, you'll need to add it to that.

  1. Go to Setup > SuiteCommerce Advanced > Set Up Website and edit your site
  2. In Field Sets, scroll down to Details and click on it
  3. In the pop-up, add your new custom item fields:
    • Price per X (Custom) (Formatted)
    • Price per X (Custom)
    • Bottle UOM (Custom)
    • Bottle Price Divider (Custom)
    • Bottle Size
    • (And make sure your identifier field, eg Is Bottle?, is included)
  4. Click OK to save your changes, and then Save

Create/Check Products

At this point, we're nearly ready to test, so you'll need to have some products that have units of measure. If you don't already have them, create them and update their fields. I'm going to create two: one that is 920ml and one that is 575ml.

Test the Item Search API

We can test that all our fields are working by using the item search API and querying using the details field set for the item ID of our new item. As my items have IDs of 5814 and 5815, I can view their results using a query like this:

  • <domain>/api/items?id=5814&fieldset=details

This produces the following results:

I can see the item's UOM, bottle size, price divider, etc, all being returned as properties in the item's JSON. From here, we just need to make some template changes.

Modify the PDP Template to Show the Custom Fields

This point of the tutorial is specific to Aconcagua and newer versions of SuiteCommerce as we're talking about themes, but you can make it work on older versions too. For versions older than Kilimanjaro, you may need to override templates, for example. See our documentation for more information.

So, we're going to edit product_details_full.tpl (the main product details template), which is in Modules > ProductDetails > Templates. Scroll down to where you want the information to be displayed; I'm going to put it above the price and below the SKU (around line 48).

Put the following code:

<!--Display the size of the bottle along with the unit of measure-->
{{#if model.item.custitem_bottle_size}}
<div class="product-line-sku-container">
    <span class="product-line-sku-label">
        {{translate 'Bottle Size:'}}
    </span>
    <span class="product-line-sku-value">
    {{model.item.custitem_bottle_size}}
    {{model.item.custitem_bottle_uom}}
    </span>
</div>
{{/if}}

Note that, since Elbrus, custom item fields are automatically exposed to templates through the use of {{model.item}} expression. Therefore, we don't need to modify the view to expose them.

Also note that we're using the CSS classes for the product's SKU — you can add your own classes if you want.

If you save your theme and then start up your local server, you should see something like this:

Now, we just do the same thing to get the formatted price per X field — we're going to do something similar by reusing some styling (this time, the styles we use for prices).

Below the child view placeholder for prices, put the following:

<div class="product-line-sku-container">
    <!--grab the price per X value formatted with the currency symbols-->
    <span class="middle-price">
    {{model.item.custitem_bottle_price_per_formatted}}
    </span>
    <!--then break that price down using the price divider field and the unit of measure-->
    <span>
        per {{model.item.custitem_bottle_price_div}}{{model.item.custitem_bottle_uom}}
    </span>
</div>

As with previous code, we only show the code if a particular field has a value. If it does, we show the formatted price (wrapped in a bit of styling) as the dividing word and the unit of measure.

After saving the template and refreshing the page, we get something like this:

Pretty snazzy!

If you like, you can also modify the quick view and checkout templates to show it in those places too.

Conclusion

A lot of the time when I'm working on SCA solutions I go pretty far down the rabbit hole of 'ecommerce specific' technicalities, where I essentially forget the fact that the whole platform I'm working on is an incredibly powerful and fully featured ERP, CRM, PIM and database that I can leverage pretty easily.

You can see in the above solution that this would be easily applied to showing pricing for other types of products, or extended to use the power of saved searches and formulas.

A very basic level of coding gets you a long way once you have the data in the right places!

No comments ()