Some kind of JS conflict in shopify catalog

Question

Using a Shopmusic theme as a base.

Trying to have all the products on the main page. When I moved collection.liquid code to index (just the way it was told in tutorial)- javascript stopped working. When you go to collections/all, or any other collection, as a collection- it works perfectly. When i assign a certain collection to a certain page- JS for the product grid stops working on that page.

To be more exact, lightbox doesn't work, umbrella is lagging (when you add a product to a cart, link simply sends you to a cart page instead of simply updating a number)

After searching for a while, i figured, it's most likely some kind of JS conflict. Can't figure out what's in conflict, though.

Answer 1

The collection page linked shows scripts that are not present on the index template. Be sure that the theme is including those scripts on the home page. This does not mean there's not a conflict, but get this error out of the way first.

It's quite likely you've got a condition in theme.liquid like:

{% if template contains 'collection' %}
   <script src="your-script"></script>
{% endif %}

You should extend that to also include the home page:

{% if template contains 'collection' or template == 'index' %}
   <script src="your-script"></script>
{% endif %}

Answer 2

Try by replacing $ sign to jQuery for avoiding javascript conflict...