Mixitup Dynamic List Category with multiple words

Design help Custom code
1

@sabanna awesome mixitup tutorial for dynamic lists, but it doesn’t seem to work for a category that has more than multiple words (such as New York) , or even a comma in the title (such as Queens, New York). Just seems to work if it only has one word.

How can this be accomplished? I think it might be by adjusting the code below, but not sure how.

 $('.w-dyn-item .categ').each(
  function(index, element) {
    var _this = $(element);
    var text = _this.text();
    var select = text.indexOf(' ') == -1 ? text.length : text.indexOf(' '); 
    var className = text.substr(0, select);
    _this.parent().addClass(className.toLowerCase());
  }
);

Thank you!

2

Hello @simmyd

Try this:

 $('.w-dyn-item .categ').each(
  function(index, element) {
    var _this = $(element);
    var text = _this.text();
    var conv = text.replace(/[!\"#$%&'\(\)\*\+,\.\/:;<=>\?\@\[\\\]\^`\{\|\}~]/g, '');
    var textNew = conv.replace (/ /g, "-").toLowerCase();
    var className = textNew.substr();
    _this.parent().addClass(className);
  }
);

It should work. Let me know if you you will need more help with that

Cheers,
Anna

3

Why not this instead? Replace non-alpha characters and hyphens

var textNew = text.replace(/[^a-z0-9-]+/gi, '-').replace(/(^-|-$)/g, '').toLowerCase();

Reduced code:

$('.w-dyn-item .categ').each(function() {
    var text = $(this).text().replace(/[^a-z0-9-]+/gi, '-').replace(/(^-|-$)/g, '').toLowerCase();
    $(this).parent().addClass(text);
});
4

Well, if he is not planning to use any characters (punctuations) at the end of the text that he is trying to convert, then your option would work.

Otherwise we could end up converting “I am here!” to i-am-here-

5

Good point, changed to

.replace(/[^a-z0-9-]+/gi, '-').replace(/(^-|-$)/g, '')
6

:+1: Thank you for help, @samliew

7

Thank you @sabanna nd @samliew ! But still only the single words work :frowning: Here’s the code I’m using.

<script src="https://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>

<script>
// Creating dynamic elements classes from its categories:
$('.w-dyn-item .categ').each(function() {
    var text = $(this).text().replace(/[^a-z0-9-]+/gi, '-').replace(/(^-|-$)/g, '').toLowerCase();
    $(this).parent().addClass(text);
});

// Adding data-dilter attributes for filtering:
$('#dyn-filter-menu > div').each(
	function() {
		var catName = "." + $(this).children('a').text();
    $(this).attr('data-filter', catName.toLowerCase());
});

// On document ready Instantiate MixItUp plugin:
  $(document).ready(function() {
		$(function(){
			$('#container').mixItUp(); 
    });
  });
 
</script>

http://chart-7b7fc3.webflow.io

https://preview.webflow.com/preview/chart-7b7fc3?preview=05d03acfb8cf2ea7c9dfd8e8673f0bab

8

Site is protected…

9

Sorry about that @samliew and @sabanna !

http://chart-7b7fc3.webflow.io/1

10

Replace your script with

<script src="https://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>

<script>
// Utility function to convert any string to class-friendly format
function classify(str) {
  return str.toLowerCase().replace(/[^a-z0-9-]+/g, '-').replace(/(^-|-$)/g, '');
}

// Document ready function
$(function() {

    // For each dynamic item, add a class based on the category text
    $('.w-dyn-item').addClass(function() {
        return classify($(this).find('.categ').text());
    });

    // Adding data-filter attributes to category filters
    $('#dyn-filter-menu > div').attr('data-filter', function() {
        return '.' + classify($(this).children('a').text());
    });

    // Init MixItUp
    $('#container').mixItUp(); 

}); // End doc ready
</script>

You’re welcome. Have a nice day

Also, feel free to contact me for further code help and/or customization of third-party plugins

11

It works. Amazing. Thank you!