Creating a dynamic Carousel with image and text data

[stefa...@gmail.com]

Hi there,

Im trying to create swipable gallery which pulls in images from a JSON feed but also features product text such as price.

I have created each element and changed the element attribute and Data schema object as follows:

gwd-swipegallery #gallery1 - Images - Product | pluck imageUrl | join ,

p #price - Text content - Product.0.price

I then grouped the swipegallery and the price elements by selecting them both and right clicking (create group). I then named the group dynamicGallery.

After this i selected the swipe gallery on its own and went to > properties > Groups and added the name dynamicGallery.

I also then created a binding between the group as a whole and the Product category using this guide here:

https://support.google.com/webdesigner/answer/6321678?hl=en-GB&ref_topic=3243982

The gallery loads the images fine & works perfect. But the text data such as price only loads the first product price.

Does anyone have any idea what i could be doing wrong?

Thanks

[Kent]

That first line sounds unusual (normally is Product.0.imageUrl) and your price looks correct... but the opposite is happening in your file. Even though your images are loading you might also want to check if your gallery exits to the correct item when clicked.

Two steps I don't see in your process is to initialize the gallery in Code view: 

• Uncomment: common.setGallery('swipegallery-items'); Located near bottom of page under function handleWebComponentsReady(event)

• Locate <div data-gwd-group=“item”> delete the id attribute, and add class=“js-item”

Generally, setting up a gallery from scratch is harder than just opening up one of the Dynamic templates and revising to suit your content. When using a template with the gallery component all those bindings and exits will be configured correctly and some other dependent files are included. If revising doesn't solve the problem then I'd suggest starting over with a template. Let me know how this works.

Hope that helps,

Kent

Google Web Designer team