Please add following tags to <head> (Be careful about paths)
<link href="store/node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet" /><link href="store/node_modules/blueimp-gallery/css/blueimp-gallery.min.css" rel="stylesheet" /><link href="store/assets/jquery.arcticmodal-0.3/jquery.arcticmodal-0.3.css" rel="stylesheet" /><link href="store/assets/jquery.arcticmodal-0.3/themes/simple.css" rel="stylesheet" /><link href="store/styles/symbiotic.css" rel="stylesheet" /><script src="store/node_modules/jquery/dist/jquery.min.js"></script><script src="store/node_modules/bootstrap/dist/js/bootstrap.min.js"></script><script src="store/node_modules/mustache/mustache.min.js"></script><script src="store/node_modules/blueimp-gallery/js/blueimp-gallery.min.js"></script><script src="store/assets/jquery.arcticmodal-0.3/jquery.arcticmodal-0.3.min.js"></script><script src="store/js/sym-core-10.0.0.js"></script>In end just before closing </body> add following code. (please change path and template)
<script> symbiotic.init({ debug:false, path:'/symbiotic/10/store', template:'/symbiotic/10/store/templates', });</script>DIV or SPAN <div></div>data-sym attribute to it so script knows that it needs to be processed.<div data-sym='sym-product' ></div>data-sympid attribute and its value should be product id of product we want to use.<div data-sym='sym-product' data-sympid='123' ></div>data-symtpl (Template name) attribute and its value should be name of template you want to load. By default there are image button infobtn name price but you can create own templates and save them in templates folder.<div data-sym='sym-product' data-sympid='123' data-symtpl='image'></div><div data-sym='sym-product' data-sympid='123' data-symtpl='button'></div><div data-sym='sym-product' data-sympid='123' data-symtpl='infobtn'></div><div data-sym='sym-product' data-sympid='123' data-symtpl='name'></div><div data-sym='sym-product' data-sympid='123' data-symtpl='price'></div>You are all done
You need to add data-click="show-sym-cart" to element that you want to be clickable and show Cart Pop-up.
<a href="javascript:;" data-click="show-sym-cart">Cart (<span class="sym-count-items">0</span> Items, <span class="sym-cart-total">0</span>)</a>.sym-cart-total shows total number of items in cart.
.sym-count-items shows total amount of current contents of cart.
Add these classes to any container and its contents will be replaced with its values as described above.