Frequently when building Sitecore sites, the need has come up for the content author to be able to enter the hours of operation for their business. Unfortunately there is no built-in field type in Sitecore and nothing on the Sitecore Marketplace. With the help of two of my colleagues, Aaron Ladage and Patrick Delancy, we created a custom hours of operation field type. Our type allows content authors to easily enter opening and closing times for each day of the week. The value is stored as XML and can be easily parsed not only to display for website visitors, but also to add the proper microdata and boost the website’s SEO.
Saving Value From Content Editor:
- Click the ‘Edit’ button directly above the name of the field. Don’t see this button? Make sure the files under App_Config and sitecore modules have been published.
- Set the appropriate values in the modal that appears. *Checking the ’24 Hours’ checkbox will disable the rest of the modal. Likewise, selecting ‘Closed’ on a specific day of the week will disable the drop downs for that day.*
- Click ‘OK’
- Save. *The box displaying the times will not update until the item has been saved.*
Raw XML Structure:
The raw value is simply a serialization of the HoursOfOperationModel using an XmlSerializer. Here are some examples of what that raw value can look like. Later I will show how to create the HoursOfOperationModel from the raw value and also how to serialize it to the raw value.
Open 24 hours:
Open 8:00 AM – 5:00 PM Monday – Friday, closed weekends:
Create Model From Raw Value:
Instantiating the HoursOfOperationModel from the raw value stored in Sitecore is very easy. The model contains a constructor which will accept the raw value from Sitecore and take care of any sanitizing that may need to occur for you.
Serialize Model To Raw Value:
Creating the raw value to save in Sitecore from the HoursOfOperationModel is done by using an XmlSerializer, which does the work for us. See the example method below.
Displaying Values In View:
You as the developer have complete control of how you display the information in the view. Below are some examples of how to do so. *In order to make this as page editor friendly as possible, I recommend using an edit frame. This greatly improves the page editor experience by not displaying the raw value.*
We encourage you to download this and give it a try! Want to contribute? Send us a pull request!