Skip to content

Commit

Permalink
Variables name fix
Browse files Browse the repository at this point in the history
Issue on page /voltohandson/eventlistingtemplate.html plone#682
  • Loading branch information
danalvrz authored Nov 1, 2022
1 parent 0493fa4 commit 1a74a4a
Showing 1 changed file with 6 additions and 6 deletions.
12 changes: 6 additions & 6 deletions docs/voltohandson/eventlistingtemplate.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div>
<h2>Events:</h2>
Expand All @@ -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`:
Expand Down Expand Up @@ -72,15 +72,15 @@ 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";
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 (
<Grid columns={3}>
Expand Down Expand Up @@ -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.
Expand Down

0 comments on commit 1a74a4a

Please sign in to comment.