From 1a74a4a93c601c98fd6b3ce6a3f882087f3be66d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dante=20=C3=81lvarez?= <89805481+danalvrz@users.noreply.github.com> Date: Tue, 1 Nov 2022 16:22:36 -0600 Subject: [PATCH] Variables name fix Issue on page /voltohandson/eventlistingtemplate.html #682 --- docs/voltohandson/eventlistingtemplate.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/voltohandson/eventlistingtemplate.md b/docs/voltohandson/eventlistingtemplate.md index 8b5abfdee..b90838a4f 100644 --- a/docs/voltohandson/eventlistingtemplate.md +++ b/docs/voltohandson/eventlistingtemplate.md @@ -22,12 +22,12 @@ At the moment of writing this training there were 2 Events "Plone Conf 2022" and ## create the actual template -Inside of your `components/Blocks/` directory create a new folder called `listing` and in there a file `eventTemplate.jsx`. Before we create the proper template we will first create a simple mock like this: +Inside of your `components/Blocks/` directory create a new folder called `listing` and in there a file `eventListingTemplate.jsx`. Before we create the proper template we will first create a simple mock like this: ```jsx import React from "react"; -const eventTemplate = ({ items }) => { +const eventListingTemplate = ({ items }) => { return (

Events:

@@ -40,7 +40,7 @@ const eventTemplate = ({ items }) => { ); }; -export default eventTemplate; +export default eventListingTemplate; ``` Export the component from the `index.js` as you already did with the Block View components and import it to your `config.js`: @@ -72,7 +72,7 @@ This should be enough to show make the "Events" template choosable when adding a ## Style the template properly -To style the template, replace the code from `eventTemplate.jsx` with: +To style the template, replace the code from `eventListingTemplate.jsx` with: ```jsx import React from "react"; @@ -80,7 +80,7 @@ import { Grid } from "semantic-ui-react"; import { UniversalLink } from "@plone/volto/components"; import moment from "moment"; -const eventTemplate = ({ items }) => { +const eventListingTemplate = ({ items }) => { console.log(items); return ( @@ -131,7 +131,7 @@ const eventTemplate = ({ items }) => { ); }; -export default eventTemplate; +export default eventListingTemplate; ``` Note that the `moment` js is imported into the component to properly format the dates of the events.