Support

Account

Register Login

Home › Forums › ACF PRO › Using ACF PRO to build a comparison chart

Solving

Using ACF PRO to build a comparison chart

  • Hello ACF Community,

    I’m getting ready to build a flexible content layout that will give users the ability to add a product comparison chart.

    I have attached a screenshot of a comparison chart so you can essentially see what I’m trying to build.

    I know that I could create a repeater for creating the columns and then a nested repeater to create the row cells for each column. But that just sounds like it would be a nightmare for the user to create and then maintain. They would have to remember how many rows there are, and then remember what feature (row) they are “checking” or entering text data into. Pardon my use of the terms rows/columns/cells, even though this has the general layout of a table, it will not be coded using html table tag. I will be using a css grid/cells.

    So I’m basically looking for advice on how to setup this up from an ACF standpoint that won’t be a pain for the user to manage. I’m good with then adding the flexible content layout to my template. It’s just the strategy and setting my fields up in ACF that will be easier for a user to create and maintain rather than the method I previously mentioned (repeater for columns and nested repeater for each row in the column).

    Any help would be greatly appreciated.

    Thanks,

    Ryan

    comparison-c....png

  • You might find it easier to create a Custom Post Type for the entries, then add custom fields to each Post using an ACF field group. The output as a table would then loop through the Posts. Your table is essentially, a Post list.

  • Hi @mhowellsmead , thank you for your reply. I had considered going the cpt route, the image I shared was just one simple example. My client is going to want to create many charts, each type of chart comparing different products and features. So as of now, even my client can’t provide me with a complete list of possible features a product can have. More products with different features are going to be made available and my client is not going to want me to have to go in and add new features as they become available.

    So sadly, creating the features as choices in a field group is not going to viable option. And I’m having a tough time thinking of a way to let the client enter custom features that will be simple and intuitive for them to use for all the different products and features they will comparing.

    I was wondering if there is a way to create 2 sets of repeaters. The first repeater for the features. The second repeater would be for products. Then inside the products repeater I would have a nested repeater where they could enter a value for a given feature, like a check, text or leave blank. The part I’m wondering if there is a way to dynamically create as many rows in the nested repeater as there are in the features repeater, and then maybe display the value of each row of the features repeater in each row of the nested repeater.

    So for example, if I created 5 features (in the first repeater): feature 1, feature 2, feature 3, feature 4 and feature 5. Then when I create a new row in the products repeater, there will be a nested repeater for whether this product has this feature. So in this nested repeater, there would already be 5 rows created, and value entered for its corresponding row in the features repeater displays as a label or something.

    I hope I didn’t confuse anyone further. Just trying to think of a creative solution. I’m just not sure how to pull it off.

  • That sounds like a very complicated way to build a simple table. I still think that you’ll be better off creating (what look like) Providers as individual entries, then assigning each one attributes, which you can then output on the front end in an infinitely flexible number of layouts. Binding the data to a single layout means that you’re stuck if you want to use the same data in a different layout. If the “learn more” link leads to a detail view of that provider, then you’d have to create the data all over again for that view, if you don’t use the Post-based solution.

  • Given what you have said, I would likely build an application.

    First I would create an options page. This options page would allow the client to create features. This being all of the things on the left side of the page. I would give them a few options, for example I see

    • features that have or do not have a check
    • I see features that have a yes or no
    • Features that might a choice of possible values
    • features that would require entering text

    These I would set up as a repeater on the options page and each row would allow the client to create features with the needed options. Depending on the conditions I would likely make it so that the client could add features, but never delete a feature. You’d also need to add some custom validation to ensure that they do not create duplicate features.

    Then I would do what Mark said and create a CPT for the “Products”, all of the things at the top of the page.

    The next step would be to build a field group using what the client adds to the features options page. I would create this field group in PHP, not in the ACF editor. I would read through the list of features and create an ACF field for each feature.

    The next step for me would then be to add another CPT for the “comparisons”. This CPT would contain it’s own field group. The first field would be a relationship field that allowed the client to select the “products” they want to compare on the page. The second would be a repeater that would allow them to select and order the features that they want to compare. I’d use a select field and the choices of this select field would also be dynamically generated from the features entered into the options page.

    Finally I’d build a template for showing the comparisons that pulls it all together. Get the list of fields to display and the order to display them, get the posts to display and then loop though the posts and show the values for each feature.

    A little complicated and would take more time, but then I’d never have to touch it again.

  • Thanks for the quick replies! I’m going to have to take some time and play around with it using both your suggestions. I’ve always found @hube2 advice to be awesome, so I’ll give it go. I’ll report back and let you know how it works out. Thanks again for all of your help, I really appreciate it.

  • :P, My main objective when I build something for a client is to never need touch it again or for them to need me to touch it again. For me, the idea of futzing with it every time they think of a new feature to add is just not appealing. I know that I’m at odds with many devs that want client’s to keep coming back, but I want them to come back for new things, not to mess with stuff I’ve already done.

    My main objective for this would be to try to nail down the types of features that need to be displayed because that is where I might need to work on the project again if they come up with a feature that does not fall into one of the already created choices.

  • A further suggestion of using existing tech, then: perhaps look into using either a custom taxonomy or a “Feature” CPT, then you can pull that in to each Provider/Product using a Relation field. That way, the editor can add whichever features they need, then apply them to the main CPT freely. This would work in the same way as categories and tags on regular posts.

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Using ACF PRO to build a comparison chart’ is closed to new replies.