Plugins

You can integrate any js or css plugin with MightyMerchant. When integrating a plugin, you should follow the documentation on the plugin's website to learn more about options for that plugin and for detailed integration instructions.

In general, to integrate a plugin you will need to reference the plugin with a <script> tag and then call the plugin inside a $(document).ready() function. 

Referencing a plugin on the main template

If you want to use a plugin throughout the site, you should include a script tag for that plugin below the {JSASSETS} tag on the main template: 

  <!-- JS -->
  ...
  {JSASSETS}
  <!-- Custom codes -->
  <script src="{ASSETSURL}/essentials/plug-ins/stickyjs/1.0.4/jquery.sticky.js"></script>

Referencing the plugin on a component template

In many cases you will only want to use a plugin on a single component. In this case, you should use MightyMerchant's special <!--js: and <!--css: tags to only insert the plugin files for that component. These tags will automatically include the css and js paths that you specify at the correct points on the page. They will also ensure that there are no duplicate references.

I.e., if you are trying to use a plugin on a category_detail, product_detail, product_list, or category_list, you would use this method. 

Here is an example:

<!--css:essentials/plug-ins/slick/1.7.0/slick.css-->
<!--js:essentials/plug-ins/slick/1.7.0/slick.css-->
<div class="slider">
  ...
</div>

These tags automatically use the {ASSETSURL} at the beginning of the path, so you only need to include the ending of the path.

You should put these tags at the very top of the document.

Calling the Plugin

All plugins have documentation on how to call the plugin. In general, whether you are on the main template or another template, you should create a script tag at then end of the page with a $(document).ready() function and call the plugin inside. (NOTE: there should be only one $(document).ready() on the template, so just add your plugin call to the existing $(document).ready() if it's already on the template)

<script>
 $(document).ready(function(){
   $('.slider').slick();
 });
</script>

Plugins used on MightyMerchant's Default Components: