Vasta

"Clear all filters" link?

cyber83
Designer
Alates Romania
Liige alates
cyber83

Is it possible to do a [Clear all filters] link / button after the filters?

jackmaessen
LiteCart Fan
Alates Netherlands
Liige alates
jackmaessen

file: includes/templates/default.catalog/views/box_filter.inc.php
Below is existing js but modified:

$('body').on('input', '#box-filter form[name="filter_form"]', function(e){
        
    if (xhr_filter) xhr_filter.abort();
    var url = new URL(location.protocol + '//' + location.host + location.pathname + '?' + $('form[name="filter_form"]').serialize());  

    history.replaceState(null, null, url);
    $('.listing.products').hide();
    xhr_filter = $.ajax({
      type: 'get',
      url: url.href,
      dataType: 'html',
      success: function(response){
        var content = $('.listing.products', response).html();
        var classes = $('.listing.products', response).attr('class');
        var pagination = $('.pagination', response).length ? $('.pagination', response).html() : '';
        console.log($('.listing.products').length);
        $('.listing.products').html(content).attr('class', classes).show();
        $('.pagination').html(pagination);

  //Added//
  // add ClearAllButton if more then 1 token
  $('.tokens').each(function() {
    if($('.token', this).length > 1) {
      var clearAllButton = '<span class="token-clear-all"><a href="#" class="clear-all">[Clear All]</a></span>';
      $('#box-filter .tokens').append(clearAllButton);
    }

  });
  // End added//

      }
    });
  });```
Add this code to your js :
```// when click on ClearAllButton
  $('body').on('click', '.clear-all', function(e){
  if (xhr_filter) xhr_filter.abort();
    var url = new URL(location.protocol + '//' + location.host + location.pathname); // no query in url

    history.replaceState(null, null, url);
    $('.listing.products').hide();
    xhr_filter = $.ajax({
      type: 'get',
      url: url.href,
      dataType: 'html',
      success: function(response){
        var content = $('.listing.products', response).html();
        var classes = $('.listing.products', response).attr('class');
        var pagination = $('.pagination', response).length ? $('.pagination', response).html() : '';
        console.log($('.listing.products').length);
        $('.listing.products').html(content).attr('class', classes).show();
        $('.pagination').html(pagination);
    //added//
    $('.tokens').html(''); // empty div .tokens
    $('input:checkbox').prop("checked", false);  // uncheck checkboxes
                $('input:radio').prop('checked', false); // uncheck radios  
      }
    });
    
  });
  

  // in case hard refresh, add ClearAllButton 
  $('.tokens').each(function() {
    if($('.token', this).length > 1) {
      var clearAllButton = '<span class="token-clear-all"><a href="#" class="clear-all">[Clear All]</a></span>';
      $('#box-filter .tokens').append(clearAllButton);
    }

  });
  //end added//

I tested it here: http://litecartdevelop.webprofis.nl/rubber-ducks-c-1/

dodo
Moderator
Alates Lithuania
Liige alates
dodo 
<script>
$('body').on('input', '#box-filter form[name="filter_form"] :input', function(){
    $('#box-filter .tokens').html(''); 

    $.each($('#box-filter input[data-token-title][type="search"]'), function(i,el) {
        if (!$(this).val()) return;

        var $token = $('<span class="token"></span>');

        $token.attr('data-group', $(el).data('token-group'))
            .attr('data-name', $(el).attr('name'))
            .attr('data-value', $(el).val())
            .text($(el).data('token-title') +': '+ $(el).val())
            .append('<a href="#" class="remove">×</a></span>');

        $('#box-filter .tokens').append($token);
    });

    $.each($('#box-filter input[data-token-title][type="checkbox"]:checked, #box-filter input[data-token-title][type="radio"]:checked'), function(i,el) {
        if (!$(this).val()) return;

        var $token = $('<span class="token"></span>');

        $token.attr('data-group', $(el).data('token-group'))
            .attr('data-name', $(el).attr('name'))
            .attr('data-value', $(el).val())
            .text($(el).data('token-title') +': '+ $(el).data('token-value'))
            .append('<a href="#" class="remove">×</a></span>');

        $('#box-filter .tokens').append($token);
    });

    if ($('#box-filter .tokens').html() !== '') { 
        var $customToken = $('<span class="token" style="background: red;"></span>');
        $customToken.attr('data-group', 'static')
            .attr('data-name', 'Remove All')
            .attr('data-value', 'staticValue')
            .text('')
            .append('<a href="<?php echo document::href_ilink('category', ['category_id' => $_GET['category_id']]); ?>" class="remove-all">Clear All: <b>×</b></a>');
        $('#box-filter .tokens').append($customToken);
    }
});

  $('#box-filter form[name="filter_form"] input[name="product_name"]').trigger('input');

  var xhr_filter = null;
  $('body').on('input', '#box-filter form[name="filter_form"]', function(){
    if (xhr_filter) xhr_filter.abort();
    var url = new URL(location.protocol + '//' + location.host + location.pathname + '?' + $('form[name="filter_form"]').serialize());
    history.replaceState(null, null, url);
    $('.listing.products').hide();
    xhr_filter = $.ajax({
      type: 'get',
      url: url.href,
      dataType: 'html',
      success: function(response){
        var content = $('.listing.products', response).html();
        var classes = $('.listing.products', response).attr('class');
        var pagination = $('.pagination', response).length ? $('.pagination', response).html() : '';
        console.log($('.listing.products').length);
        $('.listing.products').html(content).attr('class', classes).show();
        $('.pagination').html(pagination);
      }
    });
  });

  $('body').on('click', '#box-filter form[name="filter_form"] .tokens .remove', function(e){
    e.preventDefault();
    var token = $(this).closest('.token');
    switch ($(':input[name="'+ $(token).data('name') +'"]').attr('type')) {
      case 'radio':
      case 'checkbox':
        $(':input[name="'+ $(token).data('name') +'"][value="'+ $(token).data('value') +'"]').prop('checked', false).trigger('input');
        break;
      case 'text':
      case 'search':
        $(':input[name="'+ $(token).data('name') +'"]').val('').trigger('input');
        break;
    }
  });
</script>

Another way of doing it.

This is full code from box_filter <script></script>

It links directly back to the category without any filter options selected.

I only added these lines:

jackmaessen
LiteCart Fan
Alates Netherlands
Liige alates
jackmaessen

Awesome solution @dodo. Much more elegant and efficient than what I created.

cyber83
Designer
Alates Romania
Liige alates
cyber83

works beautifully

cyber83
Designer
Alates Romania
Liige alates
cyber83

I've updated this code as follows:

  • when many filters set and there is no result
  • a sentence appears dynamically: "No products match your filters. Try using fewer options, or email us your specific requirements to: email@domain.com.".
<script>
$('body').on('input', '#box-filter form[name="filter_form"] :input', function(){
    $('#box-filter .tokens').html(''); 

    $.each($('#box-filter input[data-token-title][type="search"]'), function(i,el) {
        if (!$(this).val()) return;

        var $token = $('<span class="token"></span>');

        $token.attr('data-group', $(el).data('token-group'))
            .attr('data-name', $(el).attr('name'))
            .attr('data-value', $(el).val())
            .text($(el).data('token-title') +': '+ $(el).val())
            .append('<a href="#" class="remove">×</a></span>');

        $('#box-filter .tokens').append($token);
    });

    $.each($('#box-filter input[data-token-title][type="checkbox"]:checked, #box-filter input[data-token-title][type="radio"]:checked'), function(i,el) {
        if (!$(this).val()) return;

        var $token = $('<span class="token"></span>');

        $token.attr('data-group', $(el).data('token-group'))
            .attr('data-name', $(el).attr('name'))
            .attr('data-value', $(el).val())
            .text($(el).data('token-title') +': '+ $(el).data('token-value'))
            .append('<a href="#" class="remove">×</a></span>');

        $('#box-filter .tokens').append($token);
    });

    if ($('#box-filter .tokens').html() !== '') { 
        var $customToken = $('<span class="token" style="background: transparent;"></span>');
        $customToken.attr('data-group', 'static')
            .attr('data-name', 'Remove All')
            .attr('data-value', 'staticValue')
            .text('')
            .append('<a href="<?php echo document::href_ilink('category', ['category_id' => $_GET['category_id']]); ?>" class="remove-allX" style="color: #000000;">Clear All Filters: <b>&times;</b></a>');
        $('#box-filter .tokens').append($customToken);
    }
});

$('#box-filter form[name="filter_form"] input[name="product_name"]').trigger('input');

var xhr_filter = null;
$('body').on('input', '#box-filter form[name="filter_form"]', function(){
    if (xhr_filter) xhr_filter.abort();
    var url = new URL(location.protocol + '//' + location.host + location.pathname + '?' + $('form[name="filter_form"]').serialize());
    history.replaceState(null, null, url);
    $('.listing.products').hide();
    xhr_filter = $.ajax({
        type: 'get',
        url: url.href,
        dataType: 'html',
        success: function(response){
            var content = $('.listing.products', response).html();
            var classes = $('.listing.products', response).attr('class');
            var pagination = $('.pagination', response).length ? $('.pagination', response).html() : '';
            
            if (content.trim() === '') {
                // If no products are found:
                content = '<br><br><div class="open-sans-300 col-md-12" style="text-align: center; font-size: 24px; font-weight: normal;">No products match your filters.<br> Try using fewer options, or email us your specific requirements <br>to: <b> <a href="mailto:email@domain.com<">email@domain.com</a></b>.</div>';
            }

            $('.listing.products').html(content).attr('class', classes).show();
            $('.pagination').html(pagination);
        }
    });
});

$('body').on('click', '#box-filter form[name="filter_form"] .tokens .remove', function(e){
    e.preventDefault();
    var token = $(this).closest('.token');
    switch ($(':input[name="'+ $(token).data('name') +'"]').attr('type')) {
        case 'radio':
        case 'checkbox':
            $(':input[name="'+ $(token).data('name') +'"][value="'+ $(token).data('value') +'"]').prop('checked', false).trigger('input');
            break;
        case 'text':
        case 'search':
            $(':input[name="'+ $(token).data('name') +'"]').val('').trigger('input');
            break;
    }
});
</script>
Teie
This website uses no cookies and no third party tracking technology. We think we can do better than others and really think about your privacy.