[Resolved] Creating a dynamic, styled, variable list.

[Author]

Posts

[Pete]

Hi there,

First time using Toolset and slowing getting my head round using it.

We are using Elementor and have set up a test listing here: hidden link

Before we start styling this for wider use we have hit a bit of a wall.

See lower down, The Essentials?
We need to create some kind of list with icon before text. A 'check mark' ideally. (see image attached)

Now the list changes with the different properties so no list will be the same. I have no idea how to set this up in our Post Field Group or then feed this to the post dynamically.

If this isn't possible, can we have a manual section in the layout so we can manually add this to each post?

Really unsure how to proceed with this.

Any help gratefully received.

Regards, Pete

[Christian Cox]

Hi, this sounds like two main questions:
1. How can I store The Essentials for each post, so I can display a list of included Essentials in the post template?
2. How can I format a list in the template so that it shows a checkmark before each item?

1. The most straightforward way to save this information in a custom field is to use a checkboxes group. Each possible Essential item will be included as an option in the checkboxes group. When you save a post, you can select each Essential item by checking the corresponding checkbox. If you'd like to use these checkboxes for a custom search filter, be sure to use the checkboxes group option "Don't save anything" instead of "Save 0 to the database".

2. You can use the Types field shortcode to output each checked checkbox. You can also add markup around each element to create an unordered list. Then adding custom styles to list elements will require custom CSS code. This post describes one method you can use to apply an icon to a list item: https://stackoverflow.com/questions/13354578/custom-li-list-style-with-font-awesome-icon

[Pete]

Hi there Christian,

Thank you for your reply.

I was trying to do what you suggested in point 1. I can save every option using the Toolset checkboxes, (see screen 1).

However I can think of no way of displaying as a styled list using Elementor. Checkboxes does not appear as an option (see screen 2).

Any thoughts on this please?

Regards, Pete

[Christian Cox]

Unfortunately the Elementor dynamic field integration isn't really well suited for complex fields or field display. It works okay for simple text. If you want to use this code in an Elementor template, I recommend setting up the list markup in a Toolset Content Template first without Elementor, then once it's working like you want you can copy + paste that code into an Elementor text element.

[Pete]

Ok at least I know I'm not missing something in trying to make this work.

As a newbe to Toolset, is there any info on a step by step guide for....
I recommend setting up the list markup in a Toolset Content Template first without Elementor, then once it's working like you want you can copy + paste that code into an Elementor text element.

[Christian Cox]

Basically you would go to Toolset > Content Templates and create a new Content Template. Then click the Fields and Views button above the editor area and click the button to insert your checkboxes group field. In the popup, you have the option to add custom code in the separator field. The system will then generate the appropriate shortcode for you. Here's some documentation for displaying custom fields: https://toolset.com/documentation/customizing-sites-using-php/functions/#checkboxes

If you want the fast version, here's the code I would use in the Elementor text widget:

<ul class="ts-check-list"><li>[types field='your-checkboxes-group-slug' separator='</li><li>'][/types]</li></ul>

Replace your-checkboxes-group-slug with the slug of your checkboxes group field.

Then to style the list, you can target the CSS class .ts-check-list to style the list and list items.

.ts-check-list {
  /* add your css code for the ul here */
}
.ts-check-list > li {
  /* add your css code for the li here */
}

You can add this css in Appearance > Customize > Additional CSS

[Pete]

Thank you for your reply, I appreciate your time.

Ok, I still don't understand what to do here, I guess I'm missing something...sorry!

The fast version sounds best to me, less messing about however I don;t get it!

I don;t understand this: Replace your-checkboxes-group-slug with the slug of your checkboxes group field.

If I give you access, it's only a dev site, would you show by example what you mean.

Is it safe to give login details here if you are happy to do this?

Many thanks, Pete

[Christian Cox]

The slug of a custom field is defined when you create the field in Types. In your screenshot above, "Screen 1", you can see the field slug is "features". So in this case, your code would look like this:

<ul class="ts-check-list"><li>[types field='features' separator='</li><li>'][/types]</li></ul>

[Pete]

Hi Christian,

Ok, I do not understated what you are says ref pretty much most of the above.

Can you give me a 'step by step' list of what exactly I do here please?

What I need to do in what screen and what code I need to use?

Thank you.

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Pete,

As christian is currently on vacation I will be handling this thread for him.

Based on what i've read so far Christian was saying all you need to do is to copy and past this shortcode below into your elementor template

<ul class="ts-check-list"><li>[types field='features' separator='</li><li>'][/types]</li></ul>

Perhaps inside a text editor cell in elementor.

Thanks,
Shnae

[Pete]

Thank you Shane,

I have added the code suggested to an El text module. Ok, I don't see how this would work taking the dynamic info from FEATURES in each individual listing?

This is just one of the listings this dynamic feed would be needed. See The Essentials and your list: hidden link

If you could enlighten me I would be very grateful 🙂

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Pete,

So lets say the user selects the feature "close to the cost" is it that you want to display an icon for this ? or you just want what the user selects to be displayed on the frontend.

Please let me know.

Thanks,
Shane

[Pete]

Hi Shane,

We need to be able to select from a long list of features, in each individual post, what we need to appear on the front end of each property listing.

Every property has different features so we select in the backend, these appear on the front...to look something like the attachment.

Thank you. Pete

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Pete,

Ok I see what you are trying to achieve.

Unfortunately its not possible to do it like this and you will definitely need to employ some form of custom code in order to achieve exactly what you want.

Our plugin is only able to display the items that are selected, not the ones that aren't

Thanks,
Shane

[Pete]

Hi there,

So is there no way, like we do for a text area, add what we wish for each property's FEATURES but instead of this displaying as sentences, it appears as a styled list?

Basically a list of text items?

Something like the property list here on this: hidden link

I can do this in Elementor no issue manually, it's really frustrating that I can't somehow do this with Toolset someway!

Regards, Pete