Introducing more (TAG) filters doesnt work

Highlighted
New Member
15 0 0

I am just about to introduce multiple filters to my shop (using debut theme). But the instructions from the manual https://help.shopify.com/themes/customization/collections/filtering-a-collection-with-multiple-tag-d... doesnt work for me. 

https://ramsign.de/collections/arrowhead-kollektion

I can integrate multiple filters, but none of them actually have a function when you click on an item.

Did you do some modifications to the javascript? Did you place it in Templates > Collection.liquid?

Thanks!

0 Likes
Shopify Partner
2522 26 513

Hi Nick, 

this is the usual problem with Debut and older Shopify manuals. The modification you've implemented includes inlined javascript which uses jQuery. But in Debut jQuery is loaded as part of vendor.js (which is deferred until entire HTML file is finished processing).

This leads to console errors similar to one you have: "jQuery in not defined".

The easiest way to fix it is to remove the defer attribute from this line:

<script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script>

This is the first step I'd take in fixing your problem.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
New Member
15 0 0

Hello! Where is this line? I ve only seen it in theme.liquid, but removing the line here does not have any effect :(

0 Likes
Shopify Partner
2522 26 513

You should not remove the line, but the defer="defer" part of it!

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
New Member
15 0 0

Yeah but that does not solve the problem neither. The only file that contains that line is my theme.liquid:

 <!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script><!--<![endif]-->
  <!--[if lte IE 9]><script src="{{ 'vendor.js' | asset_url }}"></script><![endif]-->

and changing it here doesnt do anything obviously.

Should I make changes in vendor.js, collection-template.liquid or in the theme.liquid?

Thanks ;)

0 Likes
Shopify Partner
2522 26 513

This is the right place. However, I did not say this will fix your problem -- I said this is the first step:

Currently, your website show this error in browser console:

arrowhead-kollektion:1951 Uncaught ReferenceError: jQuery is not defined

And this is your tag filtering javascript. You can not proceed further without fixing this error first.

You should be patient and do it step by step.

Second -- for whatever reason you've decided to fiddle with the classes on your dropdowns and javascript code will not see them (when you have your jQuery error fixed). So you should return class="coll-filter" back.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes