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.
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!