Top

Add Minimum and Maximum Value Limits to Buy the Measurement

Buy The Measurement is not able to set up minimum and maximum inputs out of the box. To create these limits to customer input for specific products, or groups of products; follow these steps: 

  1. From "Shopify Admin", select Online Store.

    select online store 

  2. Select Actions.

    Select Actions 

  3. Select Edit code.

    Select Edit code 

  4. Under "Assets", select Add a new asset.

    select add a new asset 

  5. Select Create a blank file.

    select create a blank file 

  6. In the "Create a blank file called" field, enter btm-enhanced.min

    enter btm-enhanced.min 

  7. Select .js.liquid in the drop-down box.

    select .js.liquid 

  8. Select Add asset.

    select add asset 

  9. Paste the btm-enhanced.min.js.liquid code into the file.

    paste the btm-enhanced.min.js.liquid code 

  10. Select Save.

    select save 

  11. Under "Layout", select theme.liquid.

    select theme.liquid 

  12. Paste this code right before the </head> tag:

    {{ 'btm-enhanced.min.js' | asset_url | script_tag }}

    paste this code right before the closing head tag 

  13. Select Save.

    select save 

  14. Under "Templates", select product.liquid.

    Note: If your theme contains sections, you will need to select product-template.liquid under "Sections" instead.

    select product.liquid 

  15. Paste this code right before the </form> tag.

    Note: You can replace e1 with any variable name. You can edit the field values as needed.

    <script>
     $(window).load(function(){
    
     //creates enhancements for BTM box with data-product-id 6670963649
     e1 = new BTME();//read more on this object in support article
     e1
     .changePricingUnit('Per Cubic Foot', 12, 'price-preview')//changes the price displayed from $X Per Cubic Inch to $X Per Cubic Foot
     .setGlobalMaximum(50)//applies a maximum to all fields
     .setGlobalMinimum(5)//applies a minimum to all fields
     .setFieldMaximum(2, 100, 'Please enter a value less than 100 inches.')//overrides global maximum for a specific field
     .setFieldMinimum(2, 20, 'Please enter a value of at least 20 inches.')//overrides global minimum for a specific field
     .commit();//performs all changes requested
    
     });
    </script>

    paste this code right before the closing form tag 

  16. Select Save.

    select save 

That's it!

Select each element for a detailed explanation of its use and how to customize it for your needs.

e1 = new BTME('6670963649');

You can add a Product ID to the "e1 = new BTME();" line. If you add a Product ID here, it specifies that the changes to the e1 object should only affect the product with this ID. If you leave it like this: "e1 = new BTME();" changes apply to all Buy the Measurement products.

To find the Product ID, follow these steps:

  1. From "Shopify Admin", select Products.

    select products 

  2. Right-click the product you want to apply Buy the Measurement.

    right click the product 

  3. Select Open link in new tab.

    select open link in a new tab 

  4. Copy the number at the end of the URL in the address bar.

    Note: The number at the end of the URL in the address bar is the Product ID.

    copy the number

  5. Paste the number in the "e1 = new BTME();" line between the ().

    paste the number 

  6. Select Save.

    select save 

That's it!

e1.changePricingUnit('Per Cubic Foot', 12, 'price-preview');

This line of code is useful when you need to price a product in lower units such as inches, but wish to display the price in feet. The first parameter is the text you want to display instead of the default BTM unit, and the second parameter is how much you need to multiply the displayed price by for it to show as intended. (ie.1 Inch x 12 = 1 Foot).

The last parameter is the id of the container element that holds the product price displayed to the customer. It is different in most themes. If there is no container or container id, you have to create one. Here are some examples of where you can find it:

Example 1

example 1 

Example 2

example 2 

Note: This only changes what the customer sees. It is used with the assumption that your actual product price is a smaller number you would rather be replaced with something of higher units. It is only tested to work with US, Canadian, and European store currencies.

e1.setGlobalMaximum(50);
e1.setGlobalMinimum(5);

These two lines of code do similar tasks. The first line sets a global maximum value for all input fields. The second line sets a global minimum value for all input fields. These can be overridden by field specific limitations such as only having a max and min on the second input field.

e1.setFieldMaximum(2, 100, 'Please enter a value less than 100 inches.');
e1.setFieldMinimum(2, 20, 'Please enter a value of at least 20 inches.');

These two lines of code apply maximum and minimum input values for BTM input fields. The first line sets a maximum value of 100 for the second (as marked by 2) input field. The second line of code sets a minimum value of 20 for the same input field. These limits will override any global limits that exist. The last parameter of each line is the error message you wish to show when a user enters a value that does not work.

e1.commit();

This line will "commit" the changes. No changes are made until this line is reached.

Next Steps