Step 1
Addition of Required Variables in the Theme File
- Go to BigCommerce Admin.
- Then, find Storefront on the left side menu, and click on that.
- Then click on “Themes”, and it will display the current theme details. Then click on Advanced, which will show a drop-down menu, and from that, click on “Edit Theme Files.”
Step 2
After clicking on the “Edit Theme Files”, it will redirect to the Stencil Theme File Editor.
- Find Templates in the left side menu of the editor and click on that.
- Go to templates > components > products > add_to_cart.html and open that file.
- In this HTML file, in the footer section, put the code. Make sure this code is added in between the main div i.e., the below code snippet must be added before the “</div>” tag of the file.
Codes to Add:
<script type=text/javascript>
var shopURL = 'https://dev.impactdesigner.io/bigcommerce/';
var productId = '{{product.id}}';
var skuId = '{{product.sku}}';
var cartId = '{{cart_id}}';
var customer = '{{customer}}';
var customerId = '{{customer.id}}';
var vid;
</script>
Step 3
Now go to another HTML file i.e., cart.html.
- Go to templates > pages > cart.html.
- Add the below-mentioned codes in the footer section. Make sure that this code is added between the theme handlebars declaration. For example:
{{inject 'cancelButtonText' (lang 'common.cancel')}}
{{#partial "page"}}
{{inject 'invalidEntryMessage' (lang 'cart.invalid_entry_message')}}
—--------------------------(codes below)
—--------------------------(codes below )
{{/partial}}
{{> layout/base}}
Code to Add in cart.html File:
<!-- The name number modelModal -->
<div id="nnModal" class="nn-modal" style="display:none;">
<!-- Modal content -->
<div class="nnmodal-content">
<span class="close">×</span>
<p>Getting Team Information...</p>
</div>
</div>
<style>
#nnModal{display:none;position:fixed;z-index:1;padding-top:250px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.4);z-index:9999}.nnmodal-content{background-color:#fefefe;margin:15% auto;padding:30px;border:6px solid #036d60;border-radius:20px;width:50%;max-height:400px;overflow-y:auto}.close{color:#f65b37;float:right;font-size:33px;font-weight:700}.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer}.nnlink{font:bold 11px Arial;text-decoration:none;background-color:#eee;color:#333;padding:2px 6px 2px 6px;border-top:1px solid #ccc;border-right:1px solid #333;border-bottom:1px solid #333;border-left:1px solid #ccc;cursor:pointer}.nnmodal-content table tbody tr th{background-color:#006eff;color:#faebd7;border-spacing:50px;width:23%}.nnmodal-content table tbody tr{text-align:center}
</style>
That should be all for the Theme changes, which BigCommerce does not have the facilities to automatically add in the Theme files. If you still feel there are some manual changes required or the integration did not work as per your expectations, please contact Impact Designer Support for quick resolution.