Hunter Amenities
Hunter Amenities International Ltd is a worldwide leader in Hotel Amenities and is foremost a designer and creator of exquisite crafted and fully customized personal care amenity programs for major hospitality corporations, boutique hotels, spas, cruise lines and retailers.
Process
Hunter Amenities is a project assignment given to me while working with Reshift Media. It’s a one developer role, with technical assistance from the VP of Technology Mahmoud Ghali. The site templates, menus, and components are from the Reshift design team.
Along with these static designs, the client wanted additional enhancements for the site:
- A filter for their product page
- A rotator for their billboard headers
- Image enlargement animations
- The capability to add an accordion
- Private sub sites to provide information for their clients
Development
The Hunter Amenities Theme was developed from the ground up using the Restarter Theme. The Restarter Theme is a bare-bone framework, created by using the Sage starter theme as the foundation. It contains a handful of helpful building tools such as the UIkit front-end framework, the CMB2 plugin, as well as Font Awesome.
Using the Flywheel application, I launched a multi-site environment on my localhost. The idea for the homepage is to display a dropdown menu with different countries and continents as options. Each option would direct the user to either a different sub site, or to a website based within that country / continent.
Most of the site contains the typical content you would find come to expect from a corporate website: About, Contact, and Blog pages with posts, along with the companies brands and services.
Development began in early April of 2019, and the majority of the development was complete by early June of the same year. Due to delays in content and revisions in designs, the site didn’t launch until mid July of 2020.
Page Filter
Hunter Amenities lists all of their company associates on their brands page. These companies fall into one of several categories. The integration of UIKit’s filter component remove brands from display unrelated to the selected category. An ‘All’ option is also available to re-display any filtered items.
The client wanted the header and footer menus to also contain links that would go to and filter the companies on the brands page. Despite setting up a link with the category hash, the brands won’t filter unless an option on the filter controller is selected.
An extra bit of javascript runs on the page that checks the URL for a hash value, and the page for a filter controller ID. If the controller has a value equal to the hash in the URL, the option would be clicked, and the page would filter the desired category.
Billboard Rotator
All individual brands, as well as the homepage, have a billboard header. These billboard use a custom meta field via the CMB2 plugin that allows the user to upload multiple images.
Integrating the UIKit Slider component into the front-end, allows the billboard images to fade between one another. The dot navigation style is also custom to match the site design.
Accordion
As with the other components, the accordion is from the UIKit framework. It is placeable on most posts and pages via three custom shortcodes: a single opening and closing shortcode, and an item shortcode, which can be used multiple times.
The item shortcode consists of a required title and text attribute for the clickable title and text content. There is also an optional icon attribute to display an image in the tab.
Private Sub Site
This is the most notable feature for Hunter Amenities for me, as it’s the one feature new to my development career. The idea is to create private pages that could display information strictly for their respective clients. Much to my delight, this can all done by using the WordPress system.
I develop a new sub site specifically for the a client. This site has a unique template based off of the Hunter Amenities Theme, as well as password protection. With this protection, any user who tries to visit this website gets a redirect to a custom login page.
A special user then gets subscription access to this site. The subscription access will give them the ability to view the content, but unable to edit or alter any of it. The client then gets this user information to view the content on the site. While this feature of the site was developed, it wasn’t launched when the site went live.
Technical Specs
Hunter Amenities launched with WordPress v5.4.2 as the CMS. The theme is based off the Sage v8.5.2 starter theme. The front-end framework uses UIKit v3.0.3, as well as the Javascript library jQuery v1.12.4. Sass and javascript is compiled using Gulp v3.9.1. There are also several essential plugins:
The Metropolis font type is used through-out the site, as well as Font Awesome Pro v5.8.1.
All screen shots were captured on August 23rd, 2020
Click here to view Hunter Amenities