CMS Problem with an A-Z Page

Design help CMS
1

Hi there,

I do have a CMS solution that provides about 220 shop partner names.
Now there is a requirement to display all shops, sorted by letter (from A to Z) each visible under the correspondend index letter.

Like this:

858×332 16.2 KB

Right now, there is no solution to display this kind of information on one page because of the “only 10 dynamic list” restriction, right?
I only thought about having different dynamic lists, each with a filter “index letter” but I can only display 10 letters, not all of them.

Any ideas?
Thanks in advance,
Daniel

2

Display all in a single list, then use JavaScript to add headers.

3

Thx. But I cant use one single list, because its limited to 100 data entries. Also how should I separate entries between the different indexes?

4

In that case you may split into two lists, A-M and N-Z. The answer for any unsupported functionality is always JavaScript - but I can’t tell you how to do that without knowing how your website looks.

5

Having three dynamic collections under each other I can display (most) of all shop links.
http://aztest.webflow.io/

I have the layout as a fake (because there are not all shops and index letters shown) page, what it finally should look like this:
(dynamic collections filtered by a reference letter that is within the shop template collection).

http://aztest.webflow.io/test

6

Try contacting support@webflow.com to see if they can extend your limit

7

For your first link, this is the JavaScript you need (try pasting this in the console and hit enter):

var curr = '';
$('.w-dyn-items').children().each(function() {
  var f = $(this).text().charAt(0);
  if(!isNaN(f) || f == curr) return;
  curr = f;
  $('<h1>'+curr+'</h1>').css({
    'clear': 'both',
    'padding-left': '10px'
  }).insertBefore(this);
});

How to install this? Wrap the above in script tags and ready code like this:

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  var curr = '';
  $('.w-dyn-items').children().each(function() {
    var f = $(this).text().charAt(0);
    if(!isNaN(f) || f == curr) return;
    curr = f;
    $('<h1>'+curr+'</h1>').css({
      'clear': 'both',
      'padding-left': '10px'
    }).insertBefore(this);
  });
});
</script>

Then paste it into your page settings, in the field called “Custom Code before body tag”.

1 Like
8

Awesome man, thank you very much!!!

9

I see that it works for you, have you tried it with the three collections?

1 Like
10

Not yet, trying it now :stuck_out_tongue_winking_eye:

Its okay because its just for demoing purpose - in the final version there should be a possibility to have a “a to z” inpage navigation menu, click one of the letters and page scroll to the correspondend anchor …

11

It works perfect !!! :).
Only thing is that I also have non letters in my database for shops that begin with 1 or another number. The script cant handle that yet. The index letter for that is the number 1.

See
http://aztest.webflow.io/test

12

You could add a static h1 title for the first few items, before the list. Would that work?

Also, I just noticed my script automatically skips over non-existent alphabets like Q :smile:

13

You can amend this part of the script to add an ID for each of the category titles:

$('<h1>'+curr+'</h1>')

change to:

$('<h1 id="'+curr+'">'+curr+'</h1>')

Then, you can add this to the link of your testlink menu item. Example for link “A”:

#A
1 Like
14

Works like a charm :).

p.s. yea but thank god i do not have a shop item starting with “Q…” :stuck_out_tongue: