Last updated
Show extended data on listing page
Learn how to show extended data on the listing page using the public data key.
Table of Contents
Show public data on ListingPage
In the previous article, we added "view" publicData key to the listing entity. In this article, we add that info to the listing page.
To add a view info to the ListingPage component we need to modify ListingPage.js and we also add a new subcomponent to that directory: SectionViewMaybe.js.
└── src
└── containers
└── ListingPage
├── ListingPage.js
└── SectionViewMaybe.jsAdd new subcomponent
SectionViewMaybe.js contains the following code:
import React from 'react';
import { FormattedMessage } from '../../util/reactIntl';
// Import css from existing CSS Modules file:
import css from './ListingPage.module.css';
// Create new React component
const SectionViewMaybe = props => {
// Component's props should include all the possible options (from config)
// and listing's publicData
const { options, publicData } = props;
const selectedOption =
publicData && publicData.view ? publicData.view : null;
// Don't return anything if public data doesn't contain view field
// That's why we named this component as SectionViewMaybe
if (!publicData || !selectedOption) {
return null;
}
// Find selected options label
const optionConfig = options.find(o => o.key === selectedOption);
const optionLabel = optionConfig ? optionConfig.label : null;
return (
<div className={css.sectionFeatures}>
<h2>
<FormattedMessage
id="ListingPage.viewType"
values={{ view: optionLabel.toLowerCase() }}
/>
</h2>
</div>
);
};
export default SectionViewMaybe;Modify ListingPage.js
We also need to modify ListingPage.js to take the new subcomponent into use.
Step 1: Import the component
import SectionViewMaybe from './SectionViewMaybe';Step 2: Get view options from filter config
This can be done similarly as amenity options
const viewOptions = findOptionsForSelectFilter('view', filterConfig);
const amenityOptions = findOptionsForSelectFilter(
'amenities',
filterConfig
);Step 3: Add new component to the returned JSX
<SectionViewMaybe options={viewOptions} publicData={publicData} />Note: publicData is already spread out of currentListing.attributes on ListingPage.
Add microcopy
In addition, we need to add the new microcopy key ("ListingPage.viewType") to microcopy:
└── src
└── translations
└── en.jsonThe microcopy message we use contains a variable "view".
"ListingPage.viewType": "Cottage with {view}",After that you should have this new component visible on listings that
have "view" key set:
In the next article, we'll use this "view" public data field on
listing page.
› Go to the next article