Add Dynamically Updated Prices Next To Your BigCommerce Store Product Options
This isn’t a typical Crunchy Blog post but we’ve been in the process of setting up our online technology store using a solution called BigCommerce. Its a pretty robust ecommerce platform to help you quickly setup an online store with SSL certificate/PCI Compliance/Google Shopping integration yada yada yada. The only problem is, it doesn’t display price rule adjustments next to the option click value which we thought was a pretty standard store feature.
Above is a screenshot from Apple’s online store showing the feature I’m referencing. If you wanted to show price increases of option rule price changes next to the option name in BigCommerce, you would have to actually edit the name value of each rule set and type in the description [Add $79.00] manually which would create tons of different rule options and they would still never dynamically update on their own. This didn’t work well for us because we have many different options for technology products like Touch Overlays and the amount of touchpoints they could simultaneously process which are 2 touch points, 6 touch points, 12 and 32. Then each product has a different size available from 20 inches to 150 inches and each touch point increase or decrease would affect each size differently in regards to cost. Because of this, we wrote some code to completely make this dynamic.
You can see the implementation of our code working at our online store at https://crunchytech.com/32-touch-overlay/
Step 1:
Right click this link and click “Save target as” or “Save link as”.
This is our code written to make this feature functional.
Step 2:
You’ll need to WebDav into your BigCommerce installation and upload the file you just saved called optionPriceDifference.js into your root directory content folder. If you do not know how to WebDav into your BigCommerce installation, read this guide here.
Step 3:
This is the last step. Log into the online BigCommerce store manager and navigate to editing the product.html template file shown in the below images:
In the top section of the product.html template file, you’ll find some javascript references that look like this:
<script type=“text/javascript” src=“%%GLOBAL_CdnAppPath%%/javascript/jquery/plugins/validate/jquery.validate.js?%%GLOBAL_JSCacheToken%%”></script>
<script type=”text/javascript” src=“%%GLOBAL_TPL_PATH%%/js/product.functions.js?%%GLOBAL_JSCacheToken%%”>
<script type=”text/javascript” src=“%%GLOBAL_CdnAppPath%%/javascript/product.js?%%GLOBAL_JSCacheToken%%”><script>
You’ll just want to paste this snippet after the referenced lines above:
<script type=”text/javascript” src=“%%GLOBAL_ShopPath%%/content/optionPriceDifference.js” ><script>
You can control the style of the text added next to the option name by creating a custom CSS style called .priceoption
Our CSS entry looks like this:
.priceoption {
font-size:12px;
color: #999;
}
I hope this helps someone out there! Please give us feedback or let us know if you’d like something custom designed or coded for BigCommerce or your E-Commerce platform! Happy selling!