Como renderizar multiplos blocos/How to render multiple blocks

VTEX in your native language 🌎 Português
,
1

Estou com uma lista de card para colocar em uma página. Gostaria de saber se há uma forma mais fácil de listá-los./I have a list of cards to put on a page. I would like to know if there is an easier way to list them

Um exemplo prático no React seria usando um map para renderizar vários cards a partir de uma lista de objetos./A practical example in React would be using a map to render multiple cards from a list of objects.

Desde já, agradeço.

2

Olá, @MatheusRoberson. Não tenho certeza se entendi direito, mas uma forma de criar uma lista de cards (renderizar múltiplos cards) com vtex IO, é usando o vtex.info-card-list. Com ele é possível listar vários cards em um carrocel e, uma vez implementado, da para adicionar e remover cards editando o componente pelo site editor.

Vale lembrar que esses cards renderizam apenas algumas informações simples como imagens, textos e um botão.

Segue modelo desse componente

é preciso declarar esse componente nas dependências do manifest do seu tema

“vtex.info-card-list”: “0.x”

	"list-context.info-card-list#exemplo": {
		"children": ["slider-layout#exemplo"],
		"props": {
			"infoCards": [
				{
					"callToActionUrl": "#",
					"imageActionUrl": "#",
					"textMode": "rich-text",
					"headline": "#### seu texto aqui",
					"imageUrl": "assets/image.png"
				},
				{
					"callToActionUrl": "/paralamas-cavalo",
					"imageActionUrl": "/paralamas-cavalo",
					"textMode": "rich-text",
					"headline": "#### seu texto aqui",
					"imageUrl": "assets/image.png"
				},
				{
					"callToActionUrl": "#",
					"imageActionUrl": "#",
					"textMode": "rich-text",
					"headline": "#### seu texto aqui",
					"imageUrl": "assets/image.png",
					
				}
			],
			"blockClass": "suaclasse"
		}
	},
	"slider-layout#exemplo": {
		"title": "Layout do Slider",
		"props": {
			
			"itemsPerPage": {
				"desktop": 3,
				"tablet": 3,
				"phone": 1
			},
			"showNavigationArrows": "desktopOnly",
			"showPaginationDots": "always",
			"infinite": true,
			"fullWidth": true
		}
	}

Esses cards possuem as mesmas propriedades do info-card convencional da vtex Info Card<!-- --> by <!-- -->vtex

> Caso essa resposta te ajudou, marque como uma solução para ajudar outros da comunidade.

3

Olá, Imperiano. No caso essa dependência, apenas consegue renderizar múltiplos cards pelo que entendi. Estava procurando algo similar a isso:

import React from 'react';

const YourComponent = ({ dataList }) => {
  return (
    <div className="row">
      {dataList.map((item, index) => (
        <div className="col" key={index}>
          {/* Renderizar conteúdo das colunas */}
          <h2>{item.title}</h2>
          <p>{item.description}</p>
          {/* ... Outros elementos */}
        </div>
      ))}
    </div>
  );
};

export default YourComponent;

Assim, eu poderia modificar os blocks dentro desse laço para renderizar qualquer tipo de block, como row, col, card e etc.