Sortable CMS ordering with javascript/Need Dev

To start out fully honest, my javascript skills are weak. I am a designer stepping into dev and need a developer for this idea.

I have played around enough to figure out that using Jquery Sortable and some embed code can allow me to display a cms collection and drag the order around.

Now it seems to me that it might be possible to have a page inside of a WF site that is password protected giving access to this “cms ordering page” to a client.

The part I can’t figure out how to do is how to use the Webflow api to update a “order” field in the cms.

Hosting a custom custom JS file seperate from the WF site is not a problem. So it seems to me all the parts are there but I need a dev to get this figured out.

Anyone up for the challenge?

Hi,

I can help.

You can reach me on Skype: cisin.justin or Email: justin@cisinlabs.com so that we can discuss this further.

Justin
+14074139057

Hi,
I am an experienced developer and this is something well within my area of expertise…
You can reach me on andrewjohnson56782@gmail.com
Best Wishes,
Andrew

Wondering if you ever got this sorted out? If so could you provide some information on who you worked with an maybe an example of the completed solution. Thank you in advance!

Hey Dan,

I’m not the OP but I have two possible solutions for editor-level list re-ordering.

SOLUTION 1 - Manual sortkey with editor-level support

Here’s a discussion of some of the challenges I found, and the approach I took in solving this for some LMS projects that required explicit lesson-ordering;

Basic approach was, create a text field in the CMS, make it min & max 3 chars, and then store a sortable numeric string like 002 981 or 368. As a number it’s easy to sort, with no localization issues. As string, it can be edited directly in editor mode.

I coupled that with some special script that detects when the user is in editor mode, so that numbered field only appears while in editor mode, and is not visible to site users.

SOLUTION 2 - Drag drop script, + logic

With Logic, today you can probably build a drag-drop ordering solution. You’d use script to make the elements draggable and re-orderable, and then on a drop, you’d calculate the new position as a number, by averaging the positions of the adjacent items.

I’m working on an implementation of this now for my own purposes.

Both of these solutions require some scripting ability and some configuration as well, so if you’re looking for a developer to assist in building it feel free to PM me.

UPDATE: #2 is prototyped as well, but I’m facing a small glitch with Logic so it’s not 100% ready yet. I’ll turn this one into a cloneable when it’s complete.

2 Likes

That would be so amazing! I’m specifically looking for option #2. Here is a very simple solution of the desired functionality of the sorting.

https://draggable-list-items-2.webflow.io/

To give some further context….

We are building a coaching course platform for a client and really looking to create an admin space where the coach (authenticated user) can easily do that outside of the CMS.

This would be the ideal layout we’re looking for.

Courses
Modules
Lessons

Where courses represent the top level of each course they will be providing their customers.

A variety of Modules below each course.

And a variety of Lessons below each module.

Each course, module and lesson would have the following functionality.

  • Ability to be sorted in an easy list for management of content
  • Ability to be added/removed from the list with the click of a button.

Obviously the basic functionality for of that would be to sort a list and reflect that into the CMS so that we can make sure the pages reflect the reordering of modules / lessons on the front-end.

Your explanation seems to be exactly what I am looking for and I totally appreciate you taking the time respond and articulate a solution that seems would work very well for our use case.

Have a great day/evening. Much appreciated. Thank you.

It may be some time before #2 is possible with Logic, I’ve submitted a bug report and the team is having a look at it. However I’ve prototyped the drag-and-drop sorting part successfully, so primarily the saving part remains, as well as some thinking about how new items are created and sorted in to the list.

I’ve bookmarked this thread and I’ll add the cloneable here if I’m able to complete that.

However, if you need something sooner, it should be possible to build the saving part, and the sorted-item-create handlers using an external automation service like Make or n8n, until Logic can bring that fully internal to the site.

PM me if you want to dig into some design approaches for that, or need a dev to help put it all together.

1 Like

Hello,there
Hope you are doing great
We would love to assist you with the same .
please visit our company website:-https://www.ibrinfotech.com/
Let’s connect and discuss
waiting for your response
Thanks & Regards
Skype: live:.cid.f2c84566cabcba14
Email:srishti.2ibrinfotech@gmail.com