{"_id":"57d8ac923916800e003dde4c","parentDoc":null,"__v":1,"category":{"_id":"581061b898aea40f00afa3be","__v":0,"project":"55a6e72e8cc73e0d00096635","version":"55a6e72f8cc73e0d00096638","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-10-26T07:56:40.278Z","from_sync":false,"order":12,"slug":"conditional-logic-examples","title":"Conditional-Logic Examples"},"user":"55a6caa022cfa321008e01d6","version":{"_id":"55a6e72f8cc73e0d00096638","project":"55a6e72e8cc73e0d00096635","hasReference":false,"__v":29,"hasDoc":true,"createdAt":"2015-07-15T23:05:19.125Z","releaseDate":"2015-07-15T23:05:19.125Z","categories":["55a6e7308cc73e0d00096639","55b7ed07aea7c8190058badb","5604567c0c78b00d0039b191","5605e6f23a93940d002b3e4a","5605f2bba4574a0d00811365","5605f309a4574a0d00811366","5608e3b98aedf50d0004cf8f","5608e4318aedf50d0004cf90","5608e6b5a7cc2f0d00d9754d","5608e6d331beb60d001b6560","5608f879a7cc2f0d00d97580","560b097887b71d0d000d3bd9","560b13cbafa0990d00979545","560b5cbec341310d00de2a01","560b5cd0c341310d00de2a02","566a35b81e08750d00a0c49b","566a3e8503b4b20d00d02a4a","567889d307bf6a0d0083edc8","569c8b7c15bb390d00db6f9d","56b254dc65ddf50d0076ba8f","57a8ebc4cdeea20e001d2a63","57e48a4000c8680e00fae6e7","5808216773557d0f00a1e428","58105ad54a8aa50f00aa4cba","58105bf298aea40f00afa3ba","58105f548a4aed0f00d67536","581061b898aea40f00afa3be","584b3de7e5f3a42300df6ef7","596839a75965d400155bb750"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"project":"55a6e72e8cc73e0d00096635","updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-09-14T01:49:06.951Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"This page provides details on properties of the Stencil common [catalog price object](/docs/catalog-price-common-object), in the following sections:\n\n* [About Price Properties](#about)\n* [Cost Price (Hidden)](#costprice)\n* [Basic Price Example – No \"Sale Price\" Set](#nosale)\n* [\"Sale Price\" Set](#yessale)\n* [Prices and Conditional Logic – Special for You!](#logic)\n* [Including and/or Excluding Tax](#tax)\n* [Tax/Sale Price Interactions](#taxprice)\n* [Mapping of Control-Panel Settings to Catalog Price Properties](#map)\n\n## <span id=\"about\"> About Price Properties </span>\n\nFor each product in their catalog, merchants can use BigCommerce control-panel options to set multiple prices. As a theme developer seeking ways to more effectively merchandise products, you might want your theme to use this information to highlight the savings that a merchant is providing over the list price, also commonly known as the manufacturer's suggested retail price (MSRP). \n\nIn order to do this, you'll need to reference the correct property that the Stencil [catalog price object](/docs/catalog-price-common-object) returns for each product. This page explains how the properties interact with each other, and with control-panel options. It includes an example of building conditional logic around a price property.\n\nAlso, one property is never returned:\n\n## <span id=\"costprice\"> Cost Price (Hidden) </span>\n\nThe Cost Price property is never returned to the storefront. This is by design. Most merchants would not want to reveal their true cost of goods to the public. The cost price field is meant to be consumed by reports and third-party accounting integrations. \n\n## <span id=\"nosale\"> Basic Price Example – No \"Sale Price\" Set </span>\n\nAssume that the merchant has defined a product’s price like this in the BigCommerce control panel:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/0212435-price-no-sale.png\",\n        \"price-no-sale.png\",\n        981,\n        549,\n        \"#f2f2fa\"\n      ],\n      \"caption\": \"(Above, the \\\"Sale Price\\\" field is empty.)\",\n      \"sizing\": \"full\"\n    }\n  ]\n}\n[/block]\nNote that: \n* The `Price` field contains this product’s standard store price.\n* The `Excluding Tax` indicator beside `Price` is applicable to the whole column of price fields.\n* The `Cost Price` field will not be returned, for reasons described above.\n* The `Retail Price` field contains the list price (also known as MSRP).\n* No `Sale Price` has been set here.\n\nA corresponding Stencil price object for the product will be structured as follows:\n\n<pre>\"product\": { \n  \"price\": {\n    \"without_tax\": {\"formatted\": \"$150.00\",\"value\": 150},\n    \"rrp_without_tax\": {\"formatted\": \"$250.00\",\"value\": 250},\n    \"saved\": {\"formatted\": \"$100.00\",\"value\": 100},\n    \"tax_label\": \"Tax\"\n  }\n}\n</pre>\n\nAbove:\n* The `without_tax` property represents the standard store price (the control panel’s `Price` field). \n* The `rrp_without_tax` property represents the list price or MSRP. (Here, `rrp` is short for \"regular retail price.\")\n* The `saved` property is the computed difference between the `without_tax` versus `rrp_without_tax` values.\n\n## <span id=\"yessale\"> \"Sale Price\" Set </span>\n\nThis second example is identical, except that here the merchant has assigned the product a discounted `Sale Price` of `$123`:\n\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/29f7bec-price-plus-sale.png\",\n        \"price-plus-sale.png\",\n        971,\n        455,\n        \"#f2f2fa\"\n      ],\n      \"caption\": \"(Above, a \\\"Sale Price\\\" is now defined.)\",\n      \"sizing\": \"full\"\n    }\n  ]\n}\n[/block]\nA corresponding Stencil price object for the product will be structured as shown below. Note that:\n* The product’s effective price *is* the `Sale Price`. \n* To `Sale Price` entry now appears in the object’s `without_tax` property. \n* The regular store price is now displayed in an added property called `non_sale_price_without_tax`.\n\n<pre>\"product\": { \n  \"price\": {\n    \"without_tax\": {\"formatted\": \"$123.00\",\"value\": 123},\n    \"non_sale_price_without_tax\": {\"formatted\": \"$150.00\",\"value\": 150},\n    \"rrp_without_tax\": {\"formatted\": \"$250.00\",\"value\": 250},\n    \"saved\": {\"formatted\": \"$127.00\",\"value\": 127},\n    \"tax_label\": \"Tax\"\n  }\n}\n</pre>\n\n## <span id=\"logic\"> Prices and Conditional Logic – Special for You! </span>\n\nStencil structures product prices as described above for backward compatibility with the BigCommerce platform's traditional treatment of prices. As a theme developer, this behavior enables you to embed logic that determines whether to display a strikeout (struck-out) price on the storefront. \n\nThe example below tests for the presence of the `non_sale_price_without_tax` property. If it is present, that means that the product has a sale price, so the page will display the regular store price ~~struck-out~~:\n\n<pre>  {{#if price.non_sale_price_without_tax}}\n     ... [some code to display on-sale strikeout pricing] ...\n  {{/if}}\n</pre>\n\n## <span id=\"tax\"> Including and/or Excluding Tax </span>\n\nDepending on how the store has been set up in the control panel’s `Store Setup > Tax > Configure Tax Display Settings`, the price object’s properties will represent prices including tax, excluding tax, or in both ways. \n\nThis setting affects not only how values are returned in the Stencil framework, but also how the values appear on storefront pages:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/e4d3914-price-tax-settings.png\",\n        \"price-tax-settings.png\",\n        742,\n        463,\n        \"#f1f1f7\"\n      ],\n      \"sizing\": \"full\",\n      \"caption\": \"(Above, the lower two options return extra properties.)\"\n    }\n  ]\n}\n[/block]\nHere is an example of a Stencil price object that returns properties’ values both including, and excluding, tax. Here, we have configured a flat 10% tax rate:\n\n<pre>\"product\": { \n  \"price\": {\n    \"with_tax\": {\"formatted\": \"$165.00\",\"value\": 165},\n    \"without_tax\": {\"formatted\": \"$150.00\",\"value\": 150},\n    \"rrp_with_tax\": {\"formatted\": \"$275.00\",\"value\": 275},\n    \"rrp_without_tax\": {\"formatted\": \"$250.00\",\"value\": 250},\n    \"saved\": {\"formatted\": \"$110.00\",\"value\": 110},\n    \"tax_label\": \"Tax\"\n  } \n} \n</pre>\n\nNote that:\n* The `with_tax` property is new in this example, and represents the `without_tax` value plus a 10% tax markup.\n* The `rrp_with_tax` property is new as well, and represents the `rrp_without_tax` value plus a 10% tax markup.\n* You would see the same new properties and values if the control-panel setting had been `Including tax`, rather than `Including and excluding tax`. But these properties/vaues would not be added for a control-panel seting of `Excluding tax`.\n\n## <span id=\"taxprice\"> Tax/Sale Price Interactions </span>\n\nHere is the same example – values both including and excluding tax, and a flat 10% tax rate – but we have also defined a sale price for the product:\n\n<pre>\"product\": { \n  \"price\": {\n    \"with_tax\": {\"formatted\": \"$135.30\",\"value\": 135.3},\n    \"without_tax\": {\"formatted\": \"$123.00\",\"value\": 123},\n    \"rrp_with_tax\": {\"formatted\": \"$275.00\",\"value\": 275},\n    \"rrp_without_tax\": {\"formatted\": \"$250.00\",\"value\": 250},\n    \"saved\": {\"formatted\": \"$139.70\",\"value\": 139.7},\n    \"non_sale_price_without_tax\": {\"formatted\": \"$150.00\",\"value\": 150},\n    \"non_sale_price_with_tax\": {\"formatted\": \"$165.00\",\"value\": 165},\n    \"tax_label\": \"Tax\"\n  }\n}\n</pre>\n\nHere again:\n* The `with_tax` property represents the `without_tax` value, plus a 10% tax markup.\n* The `rrp_with_tax` property represents the `rrp_without_tax` value, plus a 10% tax markup.\n\nNew here:\n* The `non_sale_price_without_tax` and `non_sale_price_with_tax` properties are added, to represent the standard store price (respectively) without and with tax.\n* The `saved` value is now based on the difference between the `with_tax` versus `non_sale_price_with_tax` values.\n* You would see the same results if the control-panel setting had been `Including tax`, rather than <span class=\"inline-code\">Including&#160;and excluding tax</span>. But these properties/values would not be added for a control-panel seting of `Excluding tax`.\n\n## <span id=\"map\"> Mapping of Control-Panel Options to Catalog Price Properties </span>\n\nThis table shows how price options available in the BigCommerce control panel relate to properties returned on the Stencil framework.\n[block:html]\n{\n  \"html\": \"<table>\\n  <tr>\\n    <td>Control-Panel Field</td>\\n    <td>Stencil Catalog Price Object and Property</td>\\n    <td>Notes</td>\\n  </tr>\\n\\n  <tr>\\n    <td>Retail Price (excluding tax)</td>\\n    <td> <span class=\\\"inline-code\\\"><NOBR>{{ product.price.rrp_without_tax }}</nobr></span></td>\\n    <td>Typically used to represent the product’s list price (MSRP).</td>\\n  </tr>\\n\\n  <tr>\\n    <td>Retail Price (including tax)</td>\\n    <td> <span class=\\\"inline-code\\\"><NOBR>{{ product.price.rrp_with_tax }}</nobr></span></td>\\n    <td>Typically used to represent the product’s list price (MSRP), including tax.</td>\\n  </tr>\\n\\n  <tr>\\n    <td>Price <NOBR>(excluding tax)</nobr></td>\\n    <td> <span class=\\\"inline-code\\\"><NOBR>{{ product.price.non_sale_price_without_tax }}</nobr></span></td>\\n    <td>The standard store price for the product.</td>\\n  </tr>\\n\\n  <tr>\\n    <td>Price <NOBR>(including tax)</nobr></td>\\n    <td> <span class=\\\"inline-code\\\"><NOBR>{{ product.price.non_sale_price_with_tax }}</nobr></span></td>\\n    <td>The standard store price for the product, with tax.</td>\\n  </tr>\\n  \\n  <tr>\\n    <td>Sale Price <NOBR>(excluding tax)</nobr></td>\\n    <td> <span class=\\\"inline-code\\\"><NOBR>{{ product.price.without_tax }}</nobr></span></td>\\n    <td>This product’s discounted/sale price.</td>\\n  </tr>\\n  \\n  <tr>\\n    <td>Sale Price (including tax)</td>\\n    <td> <span class=\\\"inline-code\\\"><NOBR>{{ product.price.with_tax }}</nobr></span></td>\\n    <td>This product’s discounted/sale price, with tax.</td>\\n  </tr>\\n  \\n  <tr>\\n    <td>[No control-panel field]</td>\\n    <td> <span class=\\\"inline-code\\\"><NOBR>{{ product.price.saved }}</nobr></span></td>\\n    <td>The customer’s savings on the effective price versus list price. </td>\\n  </tr>\\n</table>\"\n}\n[/block]","excerpt":"","slug":"price-object-properties","type":"basic","title":"Catalog Price Object: How Properties Interact"}

Catalog Price Object: How Properties Interact


This page provides details on properties of the Stencil common [catalog price object](/docs/catalog-price-common-object), in the following sections: * [About Price Properties](#about) * [Cost Price (Hidden)](#costprice) * [Basic Price Example – No "Sale Price" Set](#nosale) * ["Sale Price" Set](#yessale) * [Prices and Conditional Logic – Special for You!](#logic) * [Including and/or Excluding Tax](#tax) * [Tax/Sale Price Interactions](#taxprice) * [Mapping of Control-Panel Settings to Catalog Price Properties](#map) ## <span id="about"> About Price Properties </span> For each product in their catalog, merchants can use BigCommerce control-panel options to set multiple prices. As a theme developer seeking ways to more effectively merchandise products, you might want your theme to use this information to highlight the savings that a merchant is providing over the list price, also commonly known as the manufacturer's suggested retail price (MSRP). In order to do this, you'll need to reference the correct property that the Stencil [catalog price object](/docs/catalog-price-common-object) returns for each product. This page explains how the properties interact with each other, and with control-panel options. It includes an example of building conditional logic around a price property. Also, one property is never returned: ## <span id="costprice"> Cost Price (Hidden) </span> The Cost Price property is never returned to the storefront. This is by design. Most merchants would not want to reveal their true cost of goods to the public. The cost price field is meant to be consumed by reports and third-party accounting integrations. ## <span id="nosale"> Basic Price Example – No "Sale Price" Set </span> Assume that the merchant has defined a product’s price like this in the BigCommerce control panel: [block:image] { "images": [ { "image": [ "https://files.readme.io/0212435-price-no-sale.png", "price-no-sale.png", 981, 549, "#f2f2fa" ], "caption": "(Above, the \"Sale Price\" field is empty.)", "sizing": "full" } ] } [/block] Note that: * The `Price` field contains this product’s standard store price. * The `Excluding Tax` indicator beside `Price` is applicable to the whole column of price fields. * The `Cost Price` field will not be returned, for reasons described above. * The `Retail Price` field contains the list price (also known as MSRP). * No `Sale Price` has been set here. A corresponding Stencil price object for the product will be structured as follows: <pre>"product": { "price": { "without_tax": {"formatted": "$150.00","value": 150}, "rrp_without_tax": {"formatted": "$250.00","value": 250}, "saved": {"formatted": "$100.00","value": 100}, "tax_label": "Tax" } } </pre> Above: * The `without_tax` property represents the standard store price (the control panel’s `Price` field). * The `rrp_without_tax` property represents the list price or MSRP. (Here, `rrp` is short for "regular retail price.") * The `saved` property is the computed difference between the `without_tax` versus `rrp_without_tax` values. ## <span id="yessale"> "Sale Price" Set </span> This second example is identical, except that here the merchant has assigned the product a discounted `Sale Price` of `$123`: [block:image] { "images": [ { "image": [ "https://files.readme.io/29f7bec-price-plus-sale.png", "price-plus-sale.png", 971, 455, "#f2f2fa" ], "caption": "(Above, a \"Sale Price\" is now defined.)", "sizing": "full" } ] } [/block] A corresponding Stencil price object for the product will be structured as shown below. Note that: * The product’s effective price *is* the `Sale Price`. * To `Sale Price` entry now appears in the object’s `without_tax` property. * The regular store price is now displayed in an added property called `non_sale_price_without_tax`. <pre>"product": { "price": { "without_tax": {"formatted": "$123.00","value": 123}, "non_sale_price_without_tax": {"formatted": "$150.00","value": 150}, "rrp_without_tax": {"formatted": "$250.00","value": 250}, "saved": {"formatted": "$127.00","value": 127}, "tax_label": "Tax" } } </pre> ## <span id="logic"> Prices and Conditional Logic – Special for You! </span> Stencil structures product prices as described above for backward compatibility with the BigCommerce platform's traditional treatment of prices. As a theme developer, this behavior enables you to embed logic that determines whether to display a strikeout (struck-out) price on the storefront. The example below tests for the presence of the `non_sale_price_without_tax` property. If it is present, that means that the product has a sale price, so the page will display the regular store price ~~struck-out~~: <pre> {{#if price.non_sale_price_without_tax}} ... [some code to display on-sale strikeout pricing] ... {{/if}} </pre> ## <span id="tax"> Including and/or Excluding Tax </span> Depending on how the store has been set up in the control panel’s `Store Setup > Tax > Configure Tax Display Settings`, the price object’s properties will represent prices including tax, excluding tax, or in both ways. This setting affects not only how values are returned in the Stencil framework, but also how the values appear on storefront pages: [block:image] { "images": [ { "image": [ "https://files.readme.io/e4d3914-price-tax-settings.png", "price-tax-settings.png", 742, 463, "#f1f1f7" ], "sizing": "full", "caption": "(Above, the lower two options return extra properties.)" } ] } [/block] Here is an example of a Stencil price object that returns properties’ values both including, and excluding, tax. Here, we have configured a flat 10% tax rate: <pre>"product": { "price": { "with_tax": {"formatted": "$165.00","value": 165}, "without_tax": {"formatted": "$150.00","value": 150}, "rrp_with_tax": {"formatted": "$275.00","value": 275}, "rrp_without_tax": {"formatted": "$250.00","value": 250}, "saved": {"formatted": "$110.00","value": 110}, "tax_label": "Tax" } } </pre> Note that: * The `with_tax` property is new in this example, and represents the `without_tax` value plus a 10% tax markup. * The `rrp_with_tax` property is new as well, and represents the `rrp_without_tax` value plus a 10% tax markup. * You would see the same new properties and values if the control-panel setting had been `Including tax`, rather than `Including and excluding tax`. But these properties/vaues would not be added for a control-panel seting of `Excluding tax`. ## <span id="taxprice"> Tax/Sale Price Interactions </span> Here is the same example – values both including and excluding tax, and a flat 10% tax rate – but we have also defined a sale price for the product: <pre>"product": { "price": { "with_tax": {"formatted": "$135.30","value": 135.3}, "without_tax": {"formatted": "$123.00","value": 123}, "rrp_with_tax": {"formatted": "$275.00","value": 275}, "rrp_without_tax": {"formatted": "$250.00","value": 250}, "saved": {"formatted": "$139.70","value": 139.7}, "non_sale_price_without_tax": {"formatted": "$150.00","value": 150}, "non_sale_price_with_tax": {"formatted": "$165.00","value": 165}, "tax_label": "Tax" } } </pre> Here again: * The `with_tax` property represents the `without_tax` value, plus a 10% tax markup. * The `rrp_with_tax` property represents the `rrp_without_tax` value, plus a 10% tax markup. New here: * The `non_sale_price_without_tax` and `non_sale_price_with_tax` properties are added, to represent the standard store price (respectively) without and with tax. * The `saved` value is now based on the difference between the `with_tax` versus `non_sale_price_with_tax` values. * You would see the same results if the control-panel setting had been `Including tax`, rather than <span class="inline-code">Including&#160;and excluding tax</span>. But these properties/values would not be added for a control-panel seting of `Excluding tax`. ## <span id="map"> Mapping of Control-Panel Options to Catalog Price Properties </span> This table shows how price options available in the BigCommerce control panel relate to properties returned on the Stencil framework. [block:html] { "html": "<table>\n <tr>\n <td>Control-Panel Field</td>\n <td>Stencil Catalog Price Object and Property</td>\n <td>Notes</td>\n </tr>\n\n <tr>\n <td>Retail Price (excluding tax)</td>\n <td> <span class=\"inline-code\"><NOBR>{{ product.price.rrp_without_tax }}</nobr></span></td>\n <td>Typically used to represent the product’s list price (MSRP).</td>\n </tr>\n\n <tr>\n <td>Retail Price (including tax)</td>\n <td> <span class=\"inline-code\"><NOBR>{{ product.price.rrp_with_tax }}</nobr></span></td>\n <td>Typically used to represent the product’s list price (MSRP), including tax.</td>\n </tr>\n\n <tr>\n <td>Price <NOBR>(excluding tax)</nobr></td>\n <td> <span class=\"inline-code\"><NOBR>{{ product.price.non_sale_price_without_tax }}</nobr></span></td>\n <td>The standard store price for the product.</td>\n </tr>\n\n <tr>\n <td>Price <NOBR>(including tax)</nobr></td>\n <td> <span class=\"inline-code\"><NOBR>{{ product.price.non_sale_price_with_tax }}</nobr></span></td>\n <td>The standard store price for the product, with tax.</td>\n </tr>\n \n <tr>\n <td>Sale Price <NOBR>(excluding tax)</nobr></td>\n <td> <span class=\"inline-code\"><NOBR>{{ product.price.without_tax }}</nobr></span></td>\n <td>This product’s discounted/sale price.</td>\n </tr>\n \n <tr>\n <td>Sale Price (including tax)</td>\n <td> <span class=\"inline-code\"><NOBR>{{ product.price.with_tax }}</nobr></span></td>\n <td>This product’s discounted/sale price, with tax.</td>\n </tr>\n \n <tr>\n <td>[No control-panel field]</td>\n <td> <span class=\"inline-code\"><NOBR>{{ product.price.saved }}</nobr></span></td>\n <td>The customer’s savings on the effective price versus list price. </td>\n </tr>\n</table>" } [/block]