Product Gallery with Looper Provider

[progersnedig]

I’ve got a custom looper provider set up to use an API call to get data. I’m having trouble trying to set up an element to consume images from that data. I’ve tried using classic slider, but that only allows me to use set slides and images - nothing with dynamic content.

Is there another element I can use that will consume images from a provider and display them similarly to a WooCommerce single product gallery that will show the first image as the featured image larger than the other images as smaller thumbnails? Currently I’ve tried using a grid, which will allow me to consume the images as described but I can’t figure out how to set up the interaction for navigation and zoom.

For navigation ideally I’d like some way to move between the images so that if I click next or previous a new image in the gallery will display as the featured image. For zoom I need some sort of lightbox effect so that if I click on an icon over the image it shows a larger version of the image.

Thanks for any information you can provide!

[ruenel]

Hello Philip,

Thanks for writing in! Regretfully we do not have a set of elements that you can use for a custom Product Gallery that uses a Looper Provider. We only have the Product Gallery WooCommerce dynamic element and this does not have any option to use a Looper Provider. What you are trying to do is not possible with the existing set of elements. It may be possible with custom development which is beyond the scope of our support already.

Thank you for your understanding.

[progersnedig]

We’ll likely have to use another javascript library to handle the user interaction it sounds like until there are more flexible options to use within the page builder itself.

As far as X Theme Page Builder goes it looks like I cannot set up a raw content element as a consumer. Is there a way to set up a custom element that would work with the consumer to output custom html content? I guess I could extend the logic in the provider to create a new array element that would return all of the html pre-built and then set up something like a div as the consumer to get around it. Ultimately I’m looking for something like the following which would spit out a list of images:

{div class=“slider”}{ul class=“list”}{li class=“slide1”}{a href=“http://image.com”}{img src=“http://image.com” class=“image”}{/a}{/li}{li class=“slide2”}{a href=“http://image.com”}{img src=“http://image.com” class=“image”}{/a}{/li}{/ul}{/div}

[marc_a]

Hi Philip,

You could try creating the html structure inside a shortcode and add it in your functions.php file. Once the shortcode is created, you can now call it in your Raw element or text element. Please note that customization is outside the scope of our theme support, I am just giving you a personal preferences if I am going to build it. If you run into any problems with the custom coding, you may seek 3rd party developers to help you with your problems or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps and thank you for understanding.

[progersnedig]

I’m currently using a looper provider set up with an API call to get my data - so I will probably pass on the shortcode option. I’m currently testing using a text element as the consumer which will display pre-built html from the provider which will use splide.js as an additional library to get the gallery effect we’re looking for. I’ll post back after to let you know how it goes.

[christian]

No problem, Philip.

[progersnedig]

I was able to get this to work by configuring the provider in such a way that it built out the splide.js slider structure and then I set up a consumer text field to dump out the whole slider. You can’t use the looper provider debugger, {{dc:looper:debug_provider}}, as there’s a conflict with the splide.js trying to convert it as well so keep that in mind.

[ruenel]

Hey Philip,

Thanks for letting us know that you were able to get things to work out for you.

Cheers.

[progersnedig]

One thing I noticed is that the output from the provider to the consumer is blank when editing the page in Cornerstone - it does show up correctly when viewing the front-end of the site on the page. Is there a way that I control the element on the back-end so that I can toggle the preview from displaying? Or is there a way to control the size of the element on the back-end?

[tristup]

Hi Philip,

Regretfully, there is no way to control the element and size of the element from the backend.

Thanks

[progersnedig]

Is there anyway to disable the preview of the element in the cornerstone page builder?

Second is there a way to have the page js load in the cornerstone page builder? What I’m seeing on the back-end using splide.js is that the slider’s visibility is hidden. The end result is this creates a very large text element that looks blank. What I need is the the page’s js set via cornerstone to load, then the slider would look and function like it does on the front-end.

[ruenel]

Hello Philip,

If you are using the Raw Content element, you should be able to disable the preview of the element in the Cornerstone Page Builder:

You can load the splide.js inside the Raw Content element using the <script> HTML tag.

• https://www.w3schools.com/tags/tag_script.asp

Best Regards.

[progersnedig]

Sweet! That works for the Raw Content element, I checked on Text elements and didn’t see the same option available. We have to use a Text element because Customize > Looper Consumer isn’t an option using a Raw element and we’re trying to pass back the whole html structure of the slider from the looper provider.

I’ll try your fix with the splide.js script and see if it loads on the back-end while using the page builder.

[ruenel]

Hey Philip,

You can still use the Raw Content element inside a Looper Consumer. Just Insert a Div element and use this element as your Looper Consumer so that inside the Div element, you can simply insert the Raw Content element.

Best Regards.

[progersnedig]

I tried using a Raw Content element with a wrapping div and without and both times it didn’t pull in the html structure.

<div>{{dc:looper:field key="slider_html"}}</div>

It seems to only work using a Text element and Customize > Looper Consumer set to On.

[tristup]

Hi Philip,

The Raw Content element does not have the Looper Consumer option, like Text. So if you want to use that, please enable the Looper Consumer in its parent element.

Thanks

[progersnedig]

I can’t set the parent to a Looper Consumer as it’s the Looper Provider currently. What I can do is set up a Div element as the parent of the Raw Content element and set that as the Looper Consumer though.

So I have Cell 1 (Looper Provider) > Div (Looper Consumer > Raw Content ({{dc:looper:field key="key"}}) and after testing it out, this works great! Thanks!

[tristup]

Hi Philip,

Glad that we are able to help you.

Thanks