Tornando o bloco countdown customizável

This content was migrated from the VTEX Learning Center and is no longer being actively maintained. For the most accurate and up-to-date information, please check the official documentation.

Introdução

Agora que temos um elemento h1 renderizado, é possível utilizá-lo para mostrar informações que dependam de uma prop do componente. Para isso, alguns conceitos serão apresentados, já que são necessários para desenvolver uma aplicação.

Alterando o conteúdo renderizado do componente

Na interface definida no Countdown.tsx, adicione uma prop chamada targetDate, ela é do tipo string. Com isso, estamos definindo uma prop do componente que será utilizada para inicializar o contador.

_10// react/Countdown.tsx _10interface CountdownProps { _10+ targetDate: string _10}
Feito isso, é preciso utilizá-la no componente, substituindo o texto de antes, "Teste Countdown" por um outro texto, através do Site Editor.

No futuro, esse targetDate será utilizado para definir a data de término para o contador. Porém, por enquanto, esse campo pode ser genérico.

Primeiramente, é preciso alterar o componente para utilizar a prop targetDate definida anteriormente. Para isso, é preciso adicionar dentro do componente React a variável a ser utilizada no h1. Você lembra do bloco de código do componente na etapa anterior? Vamos utilizá-lo novamente para fazer as alterações.

_10// react/Countdown.tsx _10const Countdown: StorefrontFunctionComponent<CountdownProps> = ({ _10 targetDate, _10}) => { _10 return ( _10 <div> _10 <h1>{targetDate}</h1> _10 </div> _10 ) _10}
Além disso, para alterar essa propriedade através do Site Editor, é necessário adicionar essa mesma prop ao schema. Isso é feito através da adição de um objeto com chave targetDate dentro do objeto properties no schema. Ou seja:

_14// react/Countdown.tsx _14Countdown.schema = { _14 title: 'editor.countdown.title', _14 description: 'editor.countdown.description', _14 type: 'object', _14 properties: { _14+ targetDate: { _14+ title: 'Data final', _14+ description: 'Data final utilizada no contador', _14+ type: 'string', _14+ default: null, _14+ }, _14 }, _14}

Pronto! Agora você pode alterar o conteúdo do texto através do Site Editor. Vamos ver como ficou?

Você pode acessar o Site Editor através do seguinte link: {yourWorkspace}--appliancetheme.myvtex.com/admin/cms/site-editor.

Vá até o Site Editor e clique em Countdown no menu lateral, isso abrirá o menu de edição da app, que será como a imagem abaixo.

{"base64":" ","img":{"width":287,"height":294,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":12876,"url":"https://user-images.githubusercontent.com/19495917/80977387-0cd7d300-8dfb-11ea-87e4-35218eab524b.png"}}

Agora, no campo abaixo do título, digite uma data no formato AAAA-MM-DD e veja a alteração, que passará a exibir o texto que você digitou.

Answer sheet

See answer sheet for Countdown.tsx

Countdown.tsx


_32// store-block/react/Countdown.tsx
_32import React from 'react'
_32
_32interface CountdownProps {
_32  targetDate: string
_32}
_32
_32const Countdown: StorefrontFunctionComponent<CountdownProps> = ({
_32  targetDate,
_32}) => {
_32  return (
_32    <div>
_32      <h1>{targetDate}</h1>
_32    </div>
_32  )
_32}
_32
_32Countdown.schema = {
_32  title: 'editor.countdown.title',
_32  description: 'editor.countdown.description',
_32  type: 'object',
_32  properties: {
_32    targetDate: {
_32      title: 'Data final',
_32      description: 'Data final utilizada no contador',
_32      type: 'string',
_32      default: null,
_32    },
_32  },
_32}
_32
_32export default Countdown