NO BUG: ACF Repeater Issue in Bricks Builder: Incorrect Colors Displayed on Product Archive Page

[luismola]

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: https://staging.mediterraneanpoppy.com/
Video: Jam

I have an ACF repeater linked to my WooCommerce products. This ACF repeater includes two fields: a color picker and a page relationship type field. When I’m on the product template, I’ve created a query loop that correctly displays the ACF repeater.

The issue arises when I want to display this ACF repeater on the product archive page. There, I’ve created a query loop to show the products, and within that loop, I tried to create another one to display the ACF repeater corresponding to each product.

It works to read how many rows the repeater has for each product. However, when it comes to displaying them, the way it shows the repeater doesn’t work properly. In the color picker field, it chooses a color that is not corresponding to the repeater of each product. Instead, it seems to read the colors of the first product in the archive and reproduces those same colors across all products.

What might I be doing wrong?

PS: Im using Bricks 1.9.8 beta

[timmse]

Hi Luis,
Thanks so much for your report!

The problem arises because every “color field” uses the same selectors, e.g.
.brxe-wliesx .brxe-vlbfhc.brxe-block[data-query-loop-index="1"].

You can avoid this problem by using a style tag instead so that the colors are output dynamically/individually. Remove the repeater background-color and the border from the repeater element, and add two attributes under style » attributes instead (one for the border, one for the background color):

Name: style
Value: background-color: {yourColorField}

Then it should work

[luismola]

It works! Thank you!