Skip to main content

Gallery Widget

1.2.8
Widget
Try Now

Configuration keys in both cases (React and WebComponent) needs to be passed as attributes. You will find how to do that in Examples section. In case of WebComponents you should handle configuration types: array, object and function needs to be handled differently. Array and Object should be a JSON string. You can validate if your string is a valid JSON here. I.e.

<sabre-widget
    hotels='[{"name": "Hotel 1"}, {"name": "Hotel 2"}]'
    config='{"key": "value"}'>
</sabre-widget>

React version in this case will look like:

<SabreWidget
    hotels={[{"name": "Hotel 1"}, {"name": "Hotel 2"}]}
    config={{"key": "value"}}
/>

In case of functions for WebComponents you need to pass a globally available function name. In case of React it's just a function.

<script>
function onHotelSelectMethod(hotel) {
    alert(hotel);
}
</script>

<sabre-widget
    onHotelSelect="onHotelSelectMethod">
</sabre-widget>

React version in this case will look like:

<SabreWidget
    onHotelSelect={(hotel => { alert(hotel); })}
/>

Supported keys

Name Type Default Required Description
api string     Valid API key required to make a widget work
images array []   Array of images to be displayed in a gallery. See below to see a full schema.
activeImage number -1   If greater than -1 it will open a specific image. Number is a position in an array.
category string all   Active category.
gutter number 20   Space between images
imageWidth number 280   Image width in a masonry grid.
labels object {}  

Object of translations labels you can override. I.e.
{"categoriesAll": "All photos", "socialShare": "Share this photo"}
Full list of available labels are listed below.

socialShareBody string     Global config for social share body
socialShareTitle string     Global config for social share title
socialShareUrl string     Global config for social share URL

Images Schema

PropTypes.arrayOf(
        PropTypes.shape({
            img: PropTypes.string.isRequired,
            imgFull: PropTypes.string.isRequired,
            video: PropTypes.string,
            title: PropTypes.string,
            subTitle: PropTypes.string,
            description: PropTypes.string,
            category: PropTypes.string,
            socialConfig: PropTypes.shape({
                socialShareHashTag: PropTypes.array,
                socialShareTitle: PropTypes.string,
                socialShareUrl: PropTypes.string,
                socialShareBody: PropTypes.string
            }),
            variants: PropTypes.arrayOf(
                PropTypes.shape({
                    label: PropTypes.string.isRequired,
                    imgFull: PropTypes.string.isRequired,
                    video: PropTypes.string,
                    title: PropTypes.string,
                    subTitle: PropTypes.string,
                    description: PropTypes.string,
                    socialConfig: PropTypes.shape({
                        socialShareHashTag: PropTypes.array,
                        socialShareTitle: PropTypes.string,
                        socialShareUrl: PropTypes.string,
                        socialShareBody: PropTypes.string
                    }),
                    controls: PropTypes.arrayOf(
                        PropTypes.shape({
                            type: PropTypes.oneOf(["button", "price"]),
                            onClick: PropTypes.oneOfType([
                                PropTypes.string,
                                PropTypes.func
                            ]),
                            label: PropTypes.string,
                            className: PropTypes.string,
                            style: PropTypes.object,
                            props: PropTypes.object
                        })
                    )
                })
            ),
            controls: PropTypes.arrayOf(
                PropTypes.shape({
                    type: PropTypes.oneOf(["button", "price"]),
                    onClick: PropTypes.oneOfType([
                                PropTypes.string,
                                PropTypes.func
                            ]),
                    // if button it will be button label
                    label: PropTypes.string,
                    className: PropTypes.string,
                    style: PropTypes.object,
                    // if price it requires best price widget props i.e. {"type":"price","props":{"hotel":"10155","chain":"12011","room":"DLXK","labelSlogan":"Rates from","labelSlogan2":""}}
                    props: PropTypes.object,
                })
            )
        })
    ).isRequired

Sample JSON

[
  {
    "img": "https://gc.synxis.com/hotel/10155/Images/Medium/Room/Dlux3.jpg",
    "imgFull": "https://gc.synxis.com/hotel/10155/Images/Room/Dlux3.jpg",
    "title": "Executive King Room",
    "subTitle": "DELUXE ROOMS",
    "description": "Enjoy a spacious and richly decorated room with breath taking views of the river and sunset when you choose this Deluxe Room. Features also include a balcony, One King bed, 42 in flat-screen LCD HD TV, coffee maker, daily newspaper, work desk, electronic safe with enough room for 17” laptops and spacious bathroom with bathtub and deluxe amenities.",
    "category": "Rooms",
    "variants": [
        {
          "imgFull": "https://gc.synxis.com/hotel/10155/Images/Room/room3.png",
          "title": "Contemporary King Room",
          "subTitle": "DELUXE ROOMS",
          "controls": [
            {
              "type": "button",
              "label": "Book King Room",
              "onClick": "onClick"
            }
          ]
        },
        {
          "imgFull": "https://gc.synxis.com/hotel/10155/Images/Room/room3.png",
          "title": "Contemporary Queen Room",
          "subTitle": "DELUXE ROOMS",
          "controls": [
            {
              "type": "button",
              "label": "Book Queen Room",
              "onClick": "onClick"
            }
          ]
        }
    ]
    "controls": [
      {
        "type": "price",
        "props": {
          "hotel": "10155",
          "chain": "12011",
          "labelSlogan": "Rates from",
          "labelSlogan2": ""
        }
      },
      {
        "type": "button",
        "label": "Book Now",
        "onClick": data => alert(data)
      }
    ]
  },
  {
    "img": "https://gc.synxis.com/hotel/10155/Images/Medium/Room/room3.png",
    "imgFull": "https://gc.synxis.com/hotel/10155/Images/Room/room3.png",
    "title": "Contemporary Queen Room",
    "subTitle": "DELUXE ROOMS",
    "description": "Enjoy a spacious and well equipped room with stunning view of the city when you choose this Superior Room. Features also include One Queen bed, 32 in flat-screen LCD HD TV, coffee maker, work desk, electronic safe with enough room for 17” laptops and spacious bathroom with shower and amenities.",
    "category": "Rooms"
  }
]

Translation labels

{
    categoriesAll: 'All',
    socialShare: 'Share',
    socialTweet: 'Tweet',
    socialLikeIt: 'Like It',
    socialLinkIt: 'Link It',
    next: 'Next',
    prev: 'Previous'
}