Collection Filter Plugin - Check if text contains WHOOPS and if it does display reset button and remove extra text

by ONELIVE Webmaster February 24, 2017

This technique was first used on the Nitromall store: https://nitromall.myshopify.com/collections/mens-apparel/cf-size-s-m+cf-type-jacket+eventnhra-winternationals-pomona+driverconnie-kalitta

Problem

The Collection filter displays removal text which is not very user friendly from UX perspective.

The Solution

Check to see if text on the collection page displays "Whoops" and if it does then remove the extra text and add a reset filter

The Code

theme-variables.liquid

Open theme-variables.liquid and add the following code at the bottom of the page. This code captures the collection handle and assigns to the current-col variable to be used in step 2.

{% capture current-col %}{{ collection.handle }}{% endcapture %}

Theme.liquid

Add the following code at the bottom of the file.

let checkExists = setInterval(() => {
    $( "h2:contains('Whoops')" ).after( '<a class="reset-filter" href="/collections/{{ current-col }}">RESET FILTER <i class="fa fa-undo" aria-hidden="true"></i></a>' );
      clearInterval(checkExists);

      $( "p:contains('There are'), ul:contains('remove')" ).css( "display", "none" );
      clearInterval(checkExists);
});