Feature Request: Pass Dynamic Content to custom loopers

Beta
#1

I build a lot of sites where I am creating custom loopers.

Perhaps I have missed something but I can’t seem to pass dynamic content in the params to a custom looper.

My current use case is I have a client using WooCommerce / WooCommerce Subscriptions / LearnDash.

The client wants to have his staff access the site on the front-end and have the ability to view the students details on the front-end rather than in the WordPress admin.

I’m building the front-end page in Cornerstone with custom loopers. For the subscriptions we show all the info you would see on the “My Subscriptions” page and the single subscription in the users account but it has been adapted.

The subscriptions are listed in accordions. With the subscription id as the title of the accordion.

The issue is that within each accordion I need to get all the order info, coupon info, product info and display it.

I already have everything I want built with the ability to show everything I need. I just need a way to do this in Cornerstone.

I have the below array to create the accordion which is working fine. I can obviously build a multidimensional array but I’m trying to keep my custom loopers a bit more manageable.

I just need a way to send the subscription_id back to a new looper.

Array
(
    [0] => Array
        (
            [subscription_id] => 14333
            [subscription_status] => Scheduled
            [billing_total] => R998.00 / month
        )

    [1] => Array
        (
            [subscription_id] => 14331
            [subscription_status] => Scheduled
            [billing_total] => R665.00 / month
        )

    [2] => Array
        (
            [subscription_num] => 14329
            [subscription_status] => Scheduled
            [billing_total] => R665.00 / month
        )
)

Option 2
Create a multidimensional array.
This is possible but it would still be really nice to pass dynamic content in the params.
Access the data from the multidimensional array and loop through it.

Array
(
    [0] => Array
        (
            [order_num] => 14333
            [order_status] => Scheduled
            [billing_total] => R998.00 / month
            [order_details] => Array
                (
                    [0] => Array
                        (
                            [order_id] => 14333
                            [product_id] => 299
                            [variation_id] => 4957
                            [subscription_total] => 998
                            [start_date_for_sub] => 2023-05-03
                            [course_name] => Foundations of Financial Management
                        )

                )

            [related_orders] => Array
                (
                    [0] => Array
                        (
                            [order_num] => iQA11289
                            [order_date] => WC_DateTime Object
                                (
                                    [utc_offset:protected] => 0
                                    [date] => 2023-05-03 09:55:42.000000
                                    [timezone_type] => 3
                                    [timezone] => Africa/Johannesburg
                                )

                            [order_total] => 99.00
                            [order_status] => completed
                        )

                )

        )

    [1] => Array
        (
            [order_num] => 14331
            [order_status] => Scheduled
            [billing_total] => R665.00 / month
            [order_details] => Array
                (
                    [0] => Array
                        (
                            [order_id] => 14331
                            [product_id] => 296
                            [variation_id] => 4982
                            [subscription_total] => 665
                            [start_date_for_sub] => 2023-05-03
                            [course_name] => Bookkeeping
                        )

                )

            [related_orders] => Array
                (
                    [0] => Array
                        (
                            [order_num] => iQA11289
                            [order_date] => WC_DateTime Object
                                (
                                    [utc_offset:protected] => 0
                                    [date] => 2023-05-03 09:55:42.000000
                                    [timezone_type] => 3
                                    [timezone] => Africa/Johannesburg
                                )

                            [order_total] => 99.00
                            [order_status] => completed
                        )

                    [1] => Array
                        (
                            [order_num] => iQA11288
                            [order_date] => WC_DateTime Object
                                (
                                    [utc_offset:protected] => 0
                                    [date] => 2023-05-03 09:33:25.000000
                                    [timezone_type] => 3
                                    [timezone] => Africa/Johannesburg
                                )

                            [order_total] => 99.00
                            [order_status] => completed
                        )

                )

        )
)
1 Like
#3

We can support this pretty easily. I’ll just render dynamic content before we decode the JSON if I catch your drift. I’m assuming you want to have something similar to this in your custom looper params.

{{dc:looper:item}}

or

{
  "test": "{{dc:looper:item}}"
}
1 Like
#4

Yes please.

I can build custom arrays that are more complex, but in some instances this could make the custom loopers more reusable.

Or at least least complex queries when reusing them :grin:

#5

Just to take this a step further it would be awesome if dynamic content could be used in CSS and in various values.

i.e. adding{{dc:looper:item}} into a width of a div or size of a font etc. or setting .my-width { width: {{dc:looper:item}}; }

#6

As in you loop and create CSS through like a raw content element? Using the list (group[]) type as a parameter you can do something similar to what you are describing. I guess I’m curious what you’re trying to do. If your custom looper returns an array I think you could create a width property that you use through {{dc:looper:field key="width"}}

#7

Hopefully the below makes sense. I’m not always so good at articulating what I want.

In this instance I was creating a bar graph of sorts for a custom LearnDash dashboard for the clients staff. This section of the dashboard is similar to the user insights plugin and shows the staff the progress the students have made in each course they are signed up to.

The percentage in the screenshot is a dynamic value. I wanted to add the value either to the div width or to dynamic css.

image

I have a custom looper that returned the % of the course completed and wanted to add the percentage as a width to a div. I couldn’t get the dynamic value into the CSS, element CSS or the width or position value on the div. In the end I added a percentage class to the div and had to make a ton of CSS classes with width=90% etc.

Would be nice to be able to replace auto with {{dc:looper:field key="course_css_percentage_iqa"}} in the screenshot below.

image

Or add the dynamic field into the element CSS.

$el { right: {{dc:looper:field key="course_css_percentage_iqa"}}; }

The work around was to have a div with a class

div-progress-{{dc:looper:field key="course_css_percentage_iqa"}}

image

I now have this CSS

.div-progress-100 { right: 0; }
.div-progress-95 { right: 5%; }
.div-progress-90 { right: 10%; }
.div-progress-85 { right: 15%; }
.div-progress-80 { right: 20%; }
.div-progress-75 { right: 25%; }
.div-progress-70 { right: 30%; }
.div-progress-65 { right: 35%; }
.div-progress-60 { right: 40%; }
.div-progress-55 { right: 45%; }
.div-progress-50 { right: 50%; }
.div-progress-45 { right: 55%; }
.div-progress-40 { right: 60%; }
.div-progress-35 { right: 65%; }
.div-progress-30 { right: 70%; }
.div-progress-25 { right: 75%; }
.div-progress-20 { right: 80%; }
.div-progress-15 { right: 85%; }
.div-progress-10 { right: 90%; }
.div-progress-5 { right: 95%; }
.div-progress-0 { right: 100%; }

Perhaps there is a better way or I missed something.

#8

I would add a percentage sign to the end of the {{}}. That looks valid to me. If that doesn’t work, do you want to inspect the element and screenshot what the actual value is for right?

$el { right: {{dc:looper:field key="course_css_percentage_iqa"}}%; }
#9

Thanks. I have tried this previously but end up with is the following:

My div with the element CSS and dynamic content looks like this.

<div class="x-div e14337-e98 mb29-1s mb29-1t mb29-1u mb29-1v mb29-2g div-progress-50" style="--tco-dcb29-0:50;"></div>

In the inspector I have the following CSS.

element {
  --tco-dcb29-0: 50;
}

.e14337-e98 {
  right: var(--tco-dcb29-0)%;
}

And the end result is that the CSS doesn’t do anything.

1 Like
#10

A trick I’ve found is that you can add a calc around it and multiply it by 1% to turn the number into a % (or any other unit)

E.g.

$el {
  right: calc( {{dc:looper:field key="percent"}} * 1% );
}

This should result in code similar to the following:

element {
  --tco-dcb29-0: 50;
}

.e14337-e98 {
  right: calc( var(--tco-dcb29-0) * 1% );
}

Which will calculate correctly

2 Likes
#11

Thanks. That is helpful.

1 Like