Please add specific language support for slugify formatter

We currently use routing with slugified links that replace ä with ae. ü with ue and ö with oe (german special characters). Unfortunately we have to change this (or let’s say add support of this) in the formatter.js file which is regularly overwritten on updates and the pages don’t work properly afterwards.

Please add some kind of language specific drop-down to select the desired language support. Thanks.

Couldn’t you just use ‘replace’ to change the characters before applying the sluggify formatter - then you wouldn’t have the update/overwrite problem?

It would be good to have a formatter that converted accented characters for situations like this.

the .slugify() formatter does exactly this.

So it does :slightly_smiling_face: .

This would do for my purposes - but if @swf wants the ‘ae’ etc., then using the ‘replace’ formatter might still be a solution.

1 Like

You want it for server-side or client-side?

@patrick will find a better solution, but I hope that this solution might be useful to other wappler users in the future. (I just wanted to share info)

slugify = function(text) {
    var trMap = {
        'çÇ':'c',
        'ğĞ':'g',
        'şŞ':'s',
        'üÜ':'u',
        'ıİ':'i',
        'öÖ':'o'
    };
    for(var key in trMap) {
        text = text.replace(new RegExp('['+key+']','g'), trMap[key]);
    }
    return  text.replace(/[^-a-zA-Z0-9\s]+/ig, '') // remove non-alphanumeric chars
                .replace(/\s/gi, "-") // convert spaces to dashes
                .replace(/[-]+/gi, "-") // trim repeated dashes
                .toLowerCase();

}

and

For App Connect you can create a custom formatter, I think speakingurl (https://github.com/pid/speakingurl) is a very good library.

Add the script include to your page

<script src="https://cdnjs.cloudflare.com/ajax/libs/speakingurl/14.0.1/speakingurl.min.js"></script>

The add a custom script block or put it in a file

dmx.Formatter('string', 'getSlug', function(val) {
  return getSlug(val, { lang: 'de' });
});

The in the expression use it like {{ 'Äpfel & Birnen!'.getSlug() }}.

Same could be done for server-side, problem is that there is no universal library. So if you find a library for PHP it is possible that it doesn’t generate the same url as the javascript version.

See How can I merge 2 or more json results on how to create custom formatter in PHP.

3 Likes

We have a php script to slugify the content in the dynamic sitemap.

On the page we’ll probably use this solution:

  1. On the page(s) we include slugify_de.js after appConnec.js include:
    <script src="js/slugify_de.js"></script>
  2. For slugify we just use .slugify_de() : {{binding_here.slugify_de()}}

slugify_de.js:

dmx.Formatters(‘string’, {
slugify_de: function (string) {
var map = { … de-code … };
var str = ‘’;
for (var i = 0; i < string.length; i++) {
str += map[string.charCodeAt(i).toString(16)] || ‘’;
}

    return str.toLowerCase().replace(/-+/g, '-').replace(/^-|-$/, '');
}

});