Boa tarde pessoal, tudo bem?
eu precisava criar um componente custom, onde eu passo o clusterId via site editor e ele cria um carrossel de produtos com base neste cluster, alguem sabe se é possível e quais apps eu preciso utilizar?
eu ja tenho todo schema pronto, mas nao sei se estou utilizando do ExtensionPoint ou do ListContext corretamente, o fato é que ele nao aparece nada pra mim
a ideia é que ao passar um cluster Id dentro de um schema
ele rederize desta forma, clustes de 298 rederiza o carrossel de acima, cluster 299, renderiza o carrossel de baixo
1 Like
Fala @andreyfaiottoclement tranquilo?
Sugiro usar o condiional layout.
Aqui você consegue passar no schema para usar o ID da coleção e daí na página customizada que você está mexendo será possível alterar esse ID.
Veja a parte onde fala sobre:
Possible values for subject prop of the condition-layout.product block:
Espero que te ajude.
Abs,
Estevão.
Se as informações foram úteis, marque-a como solução para apoiar outros da comunidade.
1 Like
Fala Estevão, então, eu preciso renderizar os dois carrosseis, nao apenas um.
preciso que ele faça isso aqui
só que este site esta em CMS, e ai a gente controla tudo via placeholder, só que no vtex IO eu preciso mudar isso pra ficar mais dinamico, então eu tenho um site editor aqui e cada um deles deve carregar uma coleção e mostrar todas juntas
Opa @andreyfaiottoclement o que eu imagino é que você pode replicar os blocos do condicional layout.
Você conseguiu algo desse tipo?
Voce tem que criar um componente customizado que exposta um schema to tipo array, tipo assim:
CustomDynamicShelf.schema = {
title: 'Search Result List',
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',
],
},
},
},
},
},
}
dentro do seu componente voce vai receber os dados vindos do site-editor, ai voce poder usar o extension point apontando para o componente nativo da vtex: search-result-layout.custom-query
interface ShelfItem {
searchTypeName: string;
searchType: string;
orderBy: string;
__editorItemTitle: string;
}
const CustomDynamicShelf: StoreFrontFC<{
cards: ShelfItem[];
}> = ({ cards }) => {
const shelves = useMemo(
() =>
cards.map((item) => {
return (
<>
<ExtensionPoint
key={item.searchTypeName}
id="search-result-layout.customQuery"
querySchema={{
mapField: item?.searchType,
queryField: item?.searchTypeName,
maxItemsPerPage: 10,
}}
/>
</>
);
}),
[cards]
);
if (!shelves) {
return null;
}
return <section className={handles.searchResultList}>{shelves}</section>;
};
interfaces ficaria assim:
"custom-collection-shelfs": {
"component": "CustomDynamicShelf",
"required": [
"search-result-layout.customQuery"
]
},
blocks
{
"custom-collection-shelfs": {
"blocks": ["search-result-layout.customQuery#custom"]
},
"search-result-layout.customQuery#custom": {
"children": [
...
]
}
}
3 Likes
@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
o resultado final ficou este:
Obrigado meus parceiros!
1 Like
que bom que deu certo! eu ia falar pra voce usar o contexto da página de busca pra renderizar esse carousel, mas desse jeito ficou bem mais fácil.
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.