Looper provider with array of fields key and value

progersnedig · October 4, 2021, 4:47pm

I’m working with a custom looper provider and I’ve got my data coming in correctly. I’m working with a particular array of fields in my data, key=qa, which is an array of fields. This means depending on the data I could have 1 or 10 fields under the array:

Type: Cornerstone_Looper_Provider_Custom
Size: 1
Current Data:
array(1) {
  [0]=>
  array(30) {
    ["qa"]=>
    array(3) {
      ["GVW"]=>
      string(5) "2000"
      ["Rears"]=>
      string(9) "DS404-355"
      ["Tars"]=>
      string(25) "Kndfk394"
    }
    ["type"]=>
    string(4) "9100"
    ["name"]=>
    string(9) "Part Name"
    ....
  }
}

I’d like to set up a consumer that will parse the array and create text element fields for key and value in a grid. Is it possible to pull the key name from dynamic content to do this? How would I go about setting up the consumer in a grid to parse all/many of the fields only under the qa array?

grid > cell 1 > text element 1 - key name
> cell 2 > text element 2 - key value

tristup · October 5, 2021, 9:10am

Hi Philip,

Thanks for reaching out.
It will be very difficult to understand the exact Array structure that comes from your Custom Looper Provider. Still, I have tried to replicate it in my local environment by adding the following code.
Which returns a set of an array where the key is name and value is stored in the value key.

add_filter('cs_looper_custom_testarr', function($result, $args) 
{
    return [
        [ 'key' => 'name', 'value'=>'John'],
        [ 'key' => 'name', 'value'=>'Matt' ]
    ];
}, 10, 2);

I have added this Looper Provider to the parent Column and applied the Looper Consumer to the Grid. Added 2 cells with the Text element, and in first cell {{dc:looper:field key=“key”}} to print the key i.e name in this case. And added {{dc:looper:field key=“value”}} in the second cell to show the value.
Please remember in the above array structure, the Grid will be created for each loop.

Hope it helps.
Thanks

progersnedig · October 6, 2021, 5:02pm

I was able to get this to work using your method to reconfigure my data into a multidimensional array with key_name and key_value and then set up a Looper Provider and Looper Consumer to create Grid elements for each key_name and key_value pair. It would be nice to be able to have one Grid element container instead of one for each key_name and key_value pair, but it’s manageable on the back-end. You can simply style the one Grid element and all others should have the same styling.

It would be nice for {{dc:looper:field}} object to be able to access they key name down the road though so I didn’t have to reconfigure my data.

Thanks!

ruenel · October 6, 2021, 11:49pm

Hey Philip,

You are most welcome. We really appreciate for the feedback. We’ll take note of that.

Cheers.

progersnedig · October 15, 2021, 7:04pm

Following up here is it possible to parse an array within a consumer? I have an array of fields that I’m already using the main consumer on, but within that I need to parse another smaller array of fields to build a 2 column grid of field name and field value for display.

Type: Cornerstone_Looper_Provider_Custom
Size: 2
Current Data:
array(2) {
  [0]=>
  array(2) {
    ["product_name"]=>
    string(7) "name 1"
    ["other_fields"]=>
    array(2) {
      ["field_1"]=>
      string(13) "field 1 value"
      ["field_2"]=>
      string(13) "field 2 value"
    }
  }
  [1]=>
  array(2) {
    ["product_name"]=>
    string(7) "name 2"
    ["other_fields"]=>
    array(2) {
      ["field_1"]=>
      string(13) "field 1 value"
      ["field_2"]=>
      string(13) "field 2 value"
    }
  }
}

ruenel · October 16, 2021, 4:17am

Hello Philip,

You can nest multiple Looper Providers and use the Custom or Array. Kindly check out this video tutorial:

The rest of the series can be found here:

Best Regards.

progersnedig · October 20, 2021, 7:06pm

Those videos were very helpful for me to get started, I’ve reviewed and watched all of them.

The main consumer is currently going through each “product”, (first level of array), just fine. But when I have another smaller array of data within each product that’s where I’m having trouble finding a solution that works. I can build into the provider a way to bring all these fields forward in the consumer as one field under the product. I was hoping that maybe there would be a different solution that I would be able to use where I could set up another dynamic consumer within the main consumer - does that make sense?

ruenel · October 21, 2021, 2:14am

Hello Philip,

Yes, you can have multiple consumers or multiple providers inside the main looper. Your structure would be like this:

Main Looper Provider
    > Consumer 
        >> Dynamic Content Looper Provider and use the ACF field that returns an array of data
              >>  Consumer

Please check out this video demo here:

https://www.youtube.com/watch?v=BFJdDM078VI&list=PLWPh_GoP7hYWzrfwrzAYL53b8YaQhFhfD&index=8&t=109s

Hope this makes sense.

progersnedig · October 21, 2021, 3:31pm

That is very helpful, thanks! Do you know how I can enable dev console on my page builder? https://youtu.be/BFJdDM078VI?t=393 (6:30 in the video).

Type: Cornerstone_Looper_Provider_Custom
Size: 2
Current Data:
array(2) {
  [0]=>
  array(2) {
    ["product_name"]=>
    string(7) "name 1"
    ["other_fields"]=>
    array(2) {
      ["field_1"]=>
      string(13) "field 1 value"
      ["field_2"]=>
      string(13) "field 2 value"
    }
  }
  [1]=>
  array(2) {
    ["product_name"]=>
    string(7) "name 2"
    ["other_fields"]=>
    array(2) {
      ["field_1"]=>
      string(13) "field 1 value"
      ["field_2"]=>
      string(13) "field 2 value"
    }
  }
}

In my example data set I have a Looper Provider around the entire data set and then I have a Consumer set up for each product which gets me access to product_name and other_fields. After watching the video I now know about the trick of {{dc:looper:field key=“other_fields.field_1”}} which will allow me to access the value under the other_fields array.

I know I can set up multiple Consumers using the main Looper Provider, but what I’m asking here is if I can set up a second Consumer WITHIN the primary Consumer that I can use to dynamically build an element list of other_fields laid out in a two column grid where the first column would be the field name, and the second would be the value.

field_1:     field 1 value
field_2:     field 2 value

At worst I can set up a my own two column grid within the page builder with the first column’s text element set to “field_1:” and then pull in the value for the second column’s text element set to “{{dc:looper:field key=“other_fields.field_1”}}” There will be times when field_1 won’t have a value though and so I’ll have the following:

field_1:     
field_2:     field 2 value

Is there a way to check the Consumer to see if field_1 has a value that I can use so I won’t build the “field_1:” field name for a field that has an empty value?

ruenel · October 21, 2021, 11:13pm

Hello Philip,

We would love to check your page layout with the Looper Provider and Looper Consumers in it. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

image1040×250 17.4 KB

Thank you in advance.

progersnedig · October 22, 2021, 8:38pm

I’ve added the secure note to my previous comment along with the page in question and notes to review. Not sure if you get updated when I add a note or not so I’m just replying here in case you don’t.

christian · October 24, 2021, 2:21pm

Hey Philip,

That’s the Dev Toolkit and that can be enabled under Preferences.

Try filling up the key-value like other_fields.field_1.value. If this doesn’t work, you will need to work on or be creative with your custom looper function.

Try assigning a Condition to the consumer element like the Consumer Output is initial which will display the element once inside a loop. If there’s nothing to loop, the element will not be displayed.

Hope that helps.

progersnedig · October 25, 2021, 4:12pm

Thank you for the instructions on the Dev Toolkit, I was able to get that enabled for me to help with debugging.

The solution that worked for me was to restructure my looper data from this:

Type: Cornerstone_Looper_Provider_Custom
Size: 2
Current Data:
array(2) {
  [0]=>
  array(2) {
    ["product_name"]=>
    string(6) "name 1"
    ["other_fields"]=>
    array(2) {
      ["field_1"]=>
      string(13) "field 1 value"
      ["field_2"]=>
      string(13) "field 2 value"
    }
  }
  [1]=>
  array(2) {
    ["product_name"]=>
    string(6) "name 2"
    ["other_fields"]=>
    array(2) {
      ["field_1"]=>
      string(13) "field 1 value"
      ["field_2"]=>
      string(13) "field 2 value"
    }
  }
}

To this which has a field for the field name so it can be pulled as a value for display.

Type: Cornerstone_Looper_Provider_Custom
Size: 2
Current Data:
array(2) {
  [0]=>
  array(2) {
    ["product_name"]=>
    string(6) "name 1"
    ["other_fields"]=>
	array(2) {
      [0]=>
        array(2) {
		["field_name"]=>
		string(7) "field_1"
		["field_value"]=>
		string(13) "field 1 value"
		}
      [1]=>
        array(2) {
		["field_name"]=>
		string(7) "field_2"
		["field_value"]=>
		string(13) "field 2 value"
		}
	}
  }
  [1]=>
  array(2) {
    ["product_name"]=>
    string(6) "name 2"
    ["other_fields"]=>
	array(2) {
      [0]=>
        array(2) {
		["field_name"]=>
		string(7) "field_1"
		["field_value"]=>
		string(13) "field 1 value"
		}
      [1]=>
        array(2) {
		["field_name"]=>
		string(7) "field_2"
		["field_value"]=>
		string(13) "field 2 value"
		}
	}
  }
}

Then a Looper Provider with Dynamic Content was set up on the div element where input is set to {{dc:looper:field key="other_fields"}}. This Looper Provider will then work through the restructured array.

Then a Looper Consumer was set up to Items: All on a Grid element so that a two-column Grid will be created for each array element. The first Cell has a Text element with content set to {{dc:looper:field key="field_name"}} and the second Cell has a Text element with content set to {{dc:looper:field key="field_value"}}.

marc_a · October 25, 2021, 4:47pm

Hi Philip,

We’re glad that you’re able to find a solution to your issue. If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.

system · November 4, 2021, 4:55pm

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.