Making the countdown block customizable

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.

Introduction

Now we have an h1 element rendered, it's possible to use it to display information that depends on the component's properties (props). For that, some concepts will be shown, given that they are essential for app development.

Changing the content rendered on the component

In the interface defined in Countdown.tsx, add a prop called targetDate, its type is string. We are, hence, defining a component prop that will be used to initialize the countdown.

_10// react/Countdown.tsx _10interface CountdownProps { _10+ targetDate: string _10}
Now, we need to use it on the component, substituting the text used previously, Countdown Test, for another, using Site Editor.

Keep in mind that targetDate will be used to define the countdown ending date. However, for now, it will work as a dummy field.

First, change the component in order for it to use the targetDate prop. To do that, you need to use its variable inside the h1 of the React component.

_10// react/Countdown.tsx _10const Countdown: StorefrontFunctionComponent<CountdownProps> = ({ _10 targetDate, _10}) => { _10 return ( _10 <div> _10 <h1>{targetDate}</h1> _10 </div> _10 ) _10}
Furthermore, to be able to edit this property through Site Editor, it's necessary to add that same prop to the schema. This is done by adding the targetDate key to the properties object of the schema:

_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: 'Final date', _14+ description: 'Final date used in the countdown', _14+ type: 'string', _14+ default: null, _14+ }, _14 }, _14}

All set! Now you can change the text content through Site Editor.

You can go to the Site Editor by accessing the following link: {yourWorkspace}--appliancetheme.myvtex.com/admin/cms/site-editor.

Go ahead to the Site Editor and click on Countdown on the side menu, this will open an edit menu, like the shown below:

{"base64":" ","img":{"width":284,"height":263,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":12016,"url":"https://user-images.githubusercontent.com/19495917/80523072-e382f700-8963-11ea-892d-3922a99de487.png"}}

Now, in the field below the title, type the date in the format AAAA-MM-DD and see the change, that will then show the text you've typed!

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