Sort selection tags linked to CMS

Ask the community
, , , ,
1

Hi all, I’m trying to figure out how to easily sort the selection tags on my webpage but can’t find a way to do it.
I cannot “manage choices” and just drag them as its linked to a database but sorting the tags in the database won’t have any impact on the selection tags.

I’ve developed the website never using dev mode, so if any code is required please kindly explain how and where to add it.
Thanks

2

You can enable dev mode and insert some code into page code section.

  1. Enable Dev Mode
  2. Open Code Panel (Bottom of The Page)
  3. Add Your Code
$w.onReady(function () {
    const selectionTags = $w('#selectionTags1').options;
    selectionTags.sort((a, b) => {
        return a.label.localeCompare(b.label);
    });

    $w('#selectionTags1').options = selectionTags;
});

Don’t forget to match the element ids. (Selection Tags IDs should be same in the code)

Inside sort function you may need something else to order how you want. I have ordered it based on the alphabetical order of label.

3

Hi,
I’ve tried but maybe adding the tags in teh wrong place.

These are the selection tags:

All, Medical, Electronic Devices, Consumer Products, Mechanical parts, Sport, Transportation, Baby Products, Pets Products, Fashion & Jewelery

They are currently sorted from a to z but I would need them sorted as above mentioned.

Can you help to understand how to set this up correctly in the code?
Thanks

4 
$w.onReady(function () {
    const customOrder = ['All', 'Fashion & Jewelry', 'Pets Products', 'Baby Products', 'Transportation', 'Sport', 'Mechanical parts', 'Consumer Products', 'Electronic Devices', 'Medical'];
    const selectionTags = $w('#selectionTags1').options;

    selectionTags.sort((a, b) => {
        const indexA = customOrder.indexOf(a.label);
        const indexB = customOrder.indexOf(b.label);
        if (indexA === -1) return 1;
        if (indexB === -1) return -1;
        return indexA - indexB;
    });

    $w('#selectionTags1').options = selectionTags;
});

Then this should do the job.

If this solves your problem don’t forget to mark this as solution.

5

Hey LoeiX,
Here is the code pasted on the website, but nothing changes in the page, nor in preview mode.
Am I doing anything wrong?

6

In the datasets settings (click and open the dataset settings panel) there should be an option to load data before page loaded.

Try to enable this feature. I have tested it on my end without connecting it to any dataset and it worked. So, there is probably something with dataset.

7

Yeah, that’s the thing, I have no problems in sorting them if not connected to a database, but in this case, since they are connected to one, the sorting is “a to z” by default and I can’t find any way to change it.
I’ve adjusted the settings of the dataset to read and write but nothing changes :frowning:

8

Hi LoeiX,
Any feedabck here please?

9

I’m not having notifications for some posts somehow I don’t know why. Next time you can tag me like that @loeiks

You don’t need to change write/read settings. I meant try to change load settings of data. This one:

image
image325×605 18.1 KB

Sometimes CMS and code don’t work together so maybe it won’t work like that. What you can do then is recreate these tags in your collection in the order you want and use dataset ordering feature by created date.

10

:confused: I don’t have that setting since the tags are linked to CMS. Also dataset ordering won’t affect the selection tags.
This is so bad, I’m stuck for something which sould be as simple as just dragging the elements to sort them.

11

Hi @user490 have you figured out any solution to this?
Asking only because I need the same functionality for our site and cannot find a fix.
None of the dataset settings are available for content linked to a CMS.
Thanks in advance.

12

Couldn’t find a solution yet