Para dar contexto al tema:

Estoy usando GraphQL para llamar atributos de variantes de productos (colores de variantes de productos) a la página del catálogo para cada producto que se muestra allí.

Luego estoy procesando los datos y estoy tratando de asignar cada variante de color a su producto respetable.

Lo estoy comparando con el ID de entidad del producto, que he escrito en conjuntos de datos HTML.

El problema: asigna cada color a cada producto, puede verlo en vivo aquí: https://zebreo.com/shop/ , el rojo y el púrpura deben ser solo para el producto de la izquierda y el azul y el amarillo deben ser solo para el producto de la derecha.

Aquí está mi código:

 if (data) { const products = data.site.route.node.products.edges.map( item => { const product = item.node; const options = product.productOptions.edges; product.productOptions = options.map(item => item.node).filter((i) => i.displayName === 'Color'); return product; }); var array = []; $('[data-entity-id]').each(function () { array.push(parseInt($(this).attr("data-entity-id"))); }); const productIds = products.map(x => x.entityId); const filtered = productIds.filter(i => array.indexOf(i) !== -1); const productColor = products.map(y => y.productOptions[0].values.edges); const fragment = document.createDocumentFragment(); this.productColors.html(''); var appended = false; products.forEach((product, index) => { const id = product.entityId; const hex = product.productOptions[0].values.edges.map(node => node.node.hexColors[0]); const matched = array.find((element,index) => { return element === id; }); console.log(this.context); hex.forEach((code,index) => { const linkNode = document.createElement('span'); linkNode.className = 'product-swatch'; linkNode.setAttribute('style', `background: ${code};`); fragment.append(linkNode); this.productColors.append(fragment); // const target = document.querySelector('[data-entity-id] .card-body'); // target.append(fragment); }); }); }

No puedo entender, cómo debo construirlo. Dado que necesito recorrer cada producto para obtener el ID de entidad, que luego comparo con el ID del conjunto de datos, que quiero usar para asignar los colores correctos de la respuesta al producto respectivo.

Pero luego, al mismo tiempo, también tengo que hacer un bucle a través de cada código de color HEX de la respuesta, y crear un elemento de intervalo a partir de él y luego asignar el color a su atributo de estilo.

Cualquier consejo será útil.

¡Gracias!