> For the complete documentation index, see [llms.txt](https://kb.craftformswp.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kb.craftformswp.com/documentation/ecommerce/catalog/catalog-listing.md). # Catalog Listing Show several catalog items on one page, so visitors can browse them and book. A listing can show **cards** (rooms, apartments, products: photo, description, price and a Book button), a list of **upcoming dates and times** (tours, classes, events: the free dates and times, day by day, with the places left), or a **calendar of free dates**. You can also let visitors switch between the three. Each Book button opens the item's booking form with the date and time already filled in. ![A Catalog Listing showing three apartments as cards, each with a photo, price per night and a Book button](https://97821998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2yV1foUgoGHBC66VBDw%2Fuploads%2Fg0HjTH40kpZGwIpLgxVm%2Fcatalog-listing--cards.jpg?alt=media) ### What you need * **CraftForms PRO.** * Items in **CraftForms → Catalog**. Cards show booking and product items. The list and the calendar show booking items booked by date or by time slot (not items booked by the night). * Somewhere for Book to go: each item's own page with its booking form, or one booking page whose form lets visitors pick the item (see [Catalog Items as Choices](/documentation/ecommerce/catalog/catalog-item-choices.md)). ### Add a listing to a page 1. Edit the page and add the **Catalog Listing** block. 2. In the block settings, open **Listing** and pick what to **Show**: * **Cards (rooms, products…)** * **Upcoming dates and times (tours, events…)** * **Calendar of free dates** 3. Optional: turn on **Let visitors switch view** to add tabs above the listing (see [Let visitors switch view](#let-visitors-switch-view)). 4. Under **Items**, tick the items to show, up to 50. With the list or the calendar (and no tabs), only items booked by date or time are offered. 5. Optional: set the price line and the button under **Price and button** (see [Settings](#settings)). 6. Pick a style in the **Styles** panel: **Default** (looks like your theme), **Modern**, or **Builderius CSS**. 7. Save the page. The editor shows the listing as visitors will see it. ![Catalog Listing block settings: Listing panel and Price and button](https://97821998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2yV1foUgoGHBC66VBDw%2Fuploads%2FuaPjC6G8tFOmH0CxmKSI%2Fcatalog-listing--block-settings.jpg?alt=media) ### The three views #### Cards One card per item, in the order you ticked them: the item's photo, its name, the start of its description, a price line, "Up to N guests" (for booking items that take more than one guest) and a **Book** button. The name links to the same place as the button. **Columns** is the most cards in a row. Cards never get too narrow, so narrow content areas and phones show fewer per row. #### Upcoming dates and times The free dates and times of the items, grouped by day, earliest first. Each row shows the time (or **All day** for items booked for a whole day), the item, the places left, the price line and **Book**. Book opens the booking form with that date and time filled in. ![Upcoming dates and times of a museum, a boat and a spa](https://97821998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2yV1foUgoGHBC66VBDw%2Fuploads%2Fy3AkLCc7aocJvDHDrnZU%2Fcatalog-listing--upcoming-dates.jpg?alt=media) Only free times are listed: a full time or a closed day doesn't show. #### Calendar of free dates Month grids from today to the end of **Days ahead**. A day with free places shows "N free": the number of free dates and times on that day, across all the items in the listing (each free time of each item counts once, a whole-day item counts once). Days with nothing free, and days outside the window, are greyed out. Click a day to list its free times under the calendar, with places left and **Book**, the same rows as the list. ![The calendar view with tabs, and the free times of the chosen day](https://97821998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2yV1foUgoGHBC66VBDw%2Fuploads%2F9huCQL0N1S88GdmQGizL%2Fcatalog-listing--calendar.jpg?alt=media) ### Let visitors switch view With **Let visitors switch view** on, the listing gets tabs: **Cards**, **List** and **Calendar**. The view picked under **Show** opens first. The List and Calendar tabs only appear when at least one item is booked by date or time; a listing of rooms booked by the night or of products shows cards only, without tabs. Visitors can also move between tabs with the arrow keys. ### Settings | Setting | What it does | | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | **Show** | The view: cards, upcoming dates and times, or the calendar | | **Let visitors switch view** | Tabs for cards, list and calendar | | **Columns** | Most cards in a row, 1 to 4 (cards) | | **Days ahead** | How far ahead the list and the calendar look, 1 to 90 days | | **Rows at most** | Most rows in the list, 1 to 200. The calendar isn't limited by it | | **Items** | The items to show, up to 50 | | **Price shown (booking items)** | An item smart variable to show as the price, like `nightly_rate`. Lists the variables of the ticked items. Product items always show their own price | | **Text after the price** | Shown after a booking item's price, like `/ night`. Not added to product prices | | **Button text** | The Book button's text. Empty: **Book** | | **Book button opens** | **Each item's own page**, or one page you pick (see below) | The price line shows the value the item holds, like €175 for an item with `nightly_rate` = 175. An item whose variable holds a formula, or doesn't have the variable, shows no price. #### Where Book goes * **Each item's own page**: the item's **Search result link** (in the item's **Catalog search** panel, see [Add/Modify Catalog Item](/documentation/ecommerce/catalog/add-modify-catalog-item.md#catalog-search)). By default, the published page or post with the item's booking form. An item linked to a post with the [Catalog item panel](/documentation/ecommerce/catalog/catalog-item-panel.md) goes to that post. * **A page you pick**: one booking page for all the items. The link adds `?item=`, so a form whose choices are catalog items opens with that item already picked. See [Catalog Items as Choices](/documentation/ecommerce/catalog/catalog-item-choices.md). An item with nowhere to go gets no Book button, and its name isn't a link. ### On another website You can show a listing on another website (a static site, a site builder, another domain) the same way as a search. 1. Go to **CraftForms → Embed**, open the **Search** tab and click **Add New**. 2. Under **What to show**, pick **Listing — cards, upcoming dates or a calendar of your items**. 3. In **Website domain**, enter the website the listing will appear on, without `https://`, like `example.com`. The listing only works there. 4. Optional: give it a **Name**. Only you see it. 5. Pick what to **Show**, turn on **Let visitors switch view** if you like, and tick the **Items to show**. Each item shows how it's booked: **By night**, **By date or time** or **Product**. 6. Set **Columns**, **Days ahead**, **Rows at most**, **Price shown**, **Text after the price**, **Button text** and the **Style** (**Default (inherits your site)**, **Modern** or **Builderius CSS**). 7. Optional: pick a **Language**. By default the listing uses the language of the page it sits on. 8. Click **Add listing**, then copy the code and paste it into your website. ![Adding a listing in CraftForms Embed](https://97821998-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FM2yV1foUgoGHBC66VBDw%2Fuploads%2FUs2PDZsm6vvnv6JAE42J%2Fcatalog-listing--embed-listing.jpg?alt=media) The code holds a key, not the list of items, and it only works on its website. The listing reads this site each time it's shown, so you never need to update the code: change its items, view, prices or style in **CraftForms → Embed** (the pencil icon) and the website shows the change. The bin icon removes it, and it stops working on that website straight away. On another website, Book always goes to each item's own page. For items whose booking forms are embedded on that website, set each item's **Search result link** to **A web address (static or hosted website)**. See [Embed](/documentation/form-building/embed.md) for embedding the forms themselves. ### Texts and languages The listing shows its texts in your site's language (on another website: the page's language, or the one you picked). To reword them, or translate them into another language, go to **CraftForms → Settings → Field Message Translations** and open the **Catalog listing** group: | Text | Default | | ------------------------------------ | --------------------------------- | | Book button | Book | | Places left | 1 place left / 5 places left | | Capacity on a card | Up to 1 guest / Up to 4 guests | | Item booked for the whole day | All day | | No free dates | No free dates in the coming days. | | Free on a calendar day | 5 free | | View switcher: cards, list, calendar | Cards, List, Calendar | Counts get one row per plural form the language uses. A listing's own **Button text** wins over the Book button text here. See [Field Message Translations](/documentation/form-building/general-settings/field-message-translations.md). ### Good to know * The places left stay current, even on pages your site caches: the listing refreshes its dates and times when the page opens. A new booking, or a change to an item, shows within a minute. * The listing shows only free places: no orders and no customer details. * Photos are the items' images. An item created from a post's [Catalog item panel](/documentation/ecommerce/catalog/catalog-item-panel.md) takes the post's featured image. Items without one show an empty grey box. * Cards, the list and the first days of the calendar work without JavaScript. The tabs, and the free times of later calendar days, need it. * A listing doesn't change availability: a visitor still books on the item's form, which checks the dates again. * For visitors who search by their own dates instead of browsing, use [Catalog Search](/documentation/ecommerce/catalog/catalog-search.md).