Carrrossel de produtos dentro do componente custom

@Erislandio e @estevao_santos consegui aqui! utilizei aparte do que foi passado, mas troquei o search-result-layout por um list-context.product-list.
olha como ficou:

home.json

"flex-layout.col#home-vip": {
    "children": [
      "carrossel-produtos"
    ]
  },
  "carrossel-produtos": {
    "blocks": [
      "list-context.product-list#carrosselProdutosVip"
    ]
  },
  "list-context.product-list#carrosselProdutosVip": {
   //sem props alguma
    "blocks": [
      "product-summary.shelf"
    ],
    "children": [
      "slider-layout#carrosselProdutosVipSlider"
    ]
  },
  "slider-layout#carrosselProdutosVipSlider": {
    "props": {
      "itemsPerPage": {
        "desktop": 4,
        "tablet": 2,
        "phone": 2
      },
      "slideTransition": {
        "speed": 500,
        "delay": 0,
        "timing": "ease-in"
      }
    }
  }

interfaces.json

"carrossel-produtos": {
        "component": "CarrosselProdutos",
        "required": [
            "list-context.product-list"
          ]
    },

component.js

import React, { useMemo } from "react";
import { ExtensionPoint } from 'vtex.render-runtime'

import styles from "./Produtos.css"

const CarrosselProdutos = ({ cards }) => {

    const shelves = useMemo(() => {
        return cards && cards.map((item) => (
            <div className={styles.produtos_item}>
                <h3 className={styles.produtos_item_title}>{item.__editorItemTitle}</h3>
                <a className={styles.produtos_item_link} href={`/${item.searchTypeName}?map=productClusterIds`}>VER TODOS</a>

                <div className={styles.produtos_item_carrossel}>
                    <ExtensionPoint
                        id="list-context.product-list"
                        collection={item.searchTypeName}
                        orderBy={item.orderBy}
                    />
                </div>

            </div>
        ));
    }, [cards]);

    if (!shelves) {
        return null;
    }

    return (
        <div className={styles.container_carrossel_produtos}>
            <h1 className={styles.title_carrossel_produtos}>COMPRE POR DESCONTO</h1>
            {shelves}
        </div>
    );

}

CarrosselProdutos.schema = {
    title: 'Carrossel de Produtos',
    type: 'object',
    properties: {
        cards: {
            type: 'array',
            title: 'List',
            items: {
                properties: {
                    __editorItemTitle: {
                        type: 'string',
                        title: 'Title section',
                    },
                    searchTypeName: {
                        title: 'Search Type Name',
                        type: 'string',
                    },
                    searchType: {
                        title: 'Search Type',
                        type: 'string',
                        enum: ['productClusterIds'],
                        enumNames: ['Collection'],
                    },
                    orderBy: {
                        default: 'OrderByScoreDESC',
                        title: 'orderBy',
                        type: 'string',
                        enum: [
                            '',
                            'OrderByTopSaleDESC',
                            'OrderByReleaseDateDESC',
                            'OrderByBestDiscountDESC',
                            'OrderByPriceDESC',
                            'OrderByPriceASC',
                            'OrderByNameASC',
                            'OrderByNameDESC',
                        ],
                        enumNames: [
                            '',
                            'OrderByTopSaleDESC',
                            'OrderByReleaseDateDESC',
                            'OrderByBestDiscountDESC',
                            'OrderByPriceDESC',
                            'OrderByPriceASC',
                            'OrderByNameASC',
                            'OrderByNameDESC',
                        ]
                    }
                }
            }
        }
    }
}

export default CarrosselProdutos

agora sim, cada item que eu coloco aqui dentro do site editor, é um bloco de shelf carrossel com o cluster
image

o resultado final ficou este:

Obrigado meus parceiros!

1 Like