Widget Docs

# Components

"Component" widgets are widgets that are not "full-page". These are placed anywhere within your application, within a page containing other elements and widgets.

# Listing Card Slider

<listing-card-slider
    endpoint="home-featured-listings"
    :settings='{
        "linkToListing":"\/listings\/{slug}",
        "slickOptions":{
            "slidesToShow":3,
            "slidesToScroll":3,
            "infinite":true,
            "arrows":true,
            "draggable":false,
            "responsive":[
                {
                    "breakpoint":1200,
                    "settings":{
                        "slidesToShow":2,
                        "slidesToScroll":2,
                        "infinite":true
                    }
                },
                {
                    "breakpoint":800,
                    "settings":{
                        "slidesToShow":1,
                        "slidesToScroll":1,
                        "draggable":true
                    }
                }
            ]
        }
    }'>
</listing-card-slider>

# Card Options

Property Type Description
linkToListing String URL format for listing
Property Type Description
slidesToShow Number Number of slides to display
slidesToScroll Number Number of slides to scroll
infinite Boolean Should the carousel loop?
arrows Boolean Display the arrow navigation
dots Boolean Display the dots navigation
draggable Boolean Enable slide dragging
responsive Array Apply settings at breakpoints

# Booking Form

<booking-form
    inline
    :modal="false"
    listing-slug="listing-url-slug"
    listing-name="Listing name goes here"
    listing-location="Listing location goes here"
    open-day-id="xx"
    open-day-group-id="xx"
    :enabled-dates="['2023-12-12']"
    >
</booking-form>

# Options

Property Type Description
inline Boolean Enables "inline" layout (instead of dropdown)
modal Boolean Enables modal layout
listing-id Integer The id of the target listing
listing-slug String The slug of the target listing
listing-name String Optional. The name of the target listing
listing-location String Optional. The location of the target listing
open-day-id Integer Id of the Open day
open-day-group-id Integer Group Id of the Open days
enabled-dates Array of date strings Filter dates

The booking form component is called in relation to either a listing, an open day, or an open day group. Initially, only listings could have an open day, but later this changed, and it is no longer necessary to attach a listing to an open day.

If we want to retrieve the open days for a given listing, we need to provide either the listing slug or the listing ID. In this case, it is not necessary to provide the open day ID or the open day group ID.

If we want to retrieve the booking form for a specific open day or a group of open days, we will need the open day ID or the open day group ID.
In this case, it is not necessary to provide the listing slug or the listing ID.

If we want to display only certain dates in the calendar, we can provide those dates in an array using the allowed-dates property.(Allowed dates must be valid open days)
Example: If a listing has 3 open days on 2024-09-21, 2024-09-22, and 2024-09-23, but we want only 2024-09-21 to be visible, we should proceed as follows:

<booking-form
    inline
    :modal="false"
    listing-slug="listing-url-slug"
    listing-name="Listing name goes here"
    listing-location="Listing location goes here"
    :enabled-dates="['2024-09-21']"
>
</booking-form>

# Login Menu

Place this snippet wherever you would like the login menu to appear. The login menu simply outputs login and register links when a user is not logged in. The widget is hooked into the session data, so once a user logs in, it will display the user account actions menu.

TIP

It is common practice to place this somewhere in the header, but it can be placed anywhere that you would like.

<login-menu></login-menu>

← Quick Search →