Hotel Website | Bootstrap theme | Powerfull CMS built on

Introduction

Features

Seavuel was built for 4 main reasons:

• provide a SIMPLE yet powerfull user interface for the visitor in order for the hotel to be able to SELL more
• easy and straightforward way for the hotel-manager to update content (no modules, settings to distract)
• easy way to connect with 3rd party booking engines/channel managers (the new standard for the industry)
• upload 360° VR photos for the rooms can make the difference. You only need your smartphone!

 

Aside from the main reasons above, Seavuel has many more features which are listed below:

This guide

This guide shows you all features of SeaVuel | Hotel CMS/template and provides you with all neccessary information on how to setup, configure & customize your site.

Make sure you read at least the basics of the processwire docs after completing this guide in order to learn how to:

• create templates
• create fields for templates
• create users & roles
• manage view & edit access for templates
• enable/add languages
• install modules

Processwire is very easy to learn (at least the basics) and even if you don't read anything from the docs(i don't encourage that!) i am sure you will understand how things work after just seeing the code and logging-in on the backend.

---

---

Why SeaVuel | Hotel template?

SeaVuel | Hotel CMS/template consists of all the essentials needed by a hotel-website in order to promote itself to it's future visitors.

The website is built using Bootstrap 3.3.7 for the layout and Processwire CMF/CMS for the backend. It follows the KISS(Keep it Simple Stupid) principles.
I did my best keeping the css as "bootstrap" as possible!
The buttons, grid, carousels and forms are 100% bootstrap except the owl-carousel. Customization has been kept to a minimum.
This gives you the POWER of giving it the feel YOU like!

All styling has been written in SASS and breaken down to several files (general.scss, forms.scss, buttons.scss etc...)

 

Immersive VR experience

 

Aside from plain photos, the image slider also supports 360° VR photos. In order for the image you uploaded to be displayed in VR-mode you need to add the tag: "vr".

 

Weather with fancy icons

 

Weather with a 5 days forecast that also supports both Celcius and Fahrenheit units. The location can be set via Google maps location or by entering the location you prefer.

 

Theming | Play with the colours

 

Change the basic website colours (buttons etc) from your backend. Simple and quick to match your logo.

 

The template uses 6 different layout pages

4 of them are used on the standard pages only:

• Home-layout (present the hotel best photos, facilities & rooms)
• Location-layout (google maps & location specific info)
• Booking-on-request-layout (book-on-request form in case you do not connect a 3rd party booking engine)
• Gallery-layout (all image galleries in one place - hotel, rooms, location etc)
• Contact-layout (contact form & contact info)

The rest 2 are used for creating general purpose pages:

• Basic-layout
• Sections-layout

For each one of the above layouts a "Processwire template" is created in the backend. Each template has it's own fields (like title, body etc) but it is very easy to add your own fields in the existing templates and therefore customize each page as you see fit.

You can also create new templates and add whatever fields you like. No limitation nowhere.

---

Why Processwire CMS/CMF?

SeaVuel | Hotel CMS/template provides the developer with a quick & efficient way of creating a hotel-website. It is built on Processwire CMF/CMS, a powerfull CMS that will un-tie your hands and make you more productive. Stop thinking of creating/designing database tables, spending hours learning a CMS or losing time fixing plugins/modules that don't play well together.

PROCESSWIRE IS A VALUABLE TOOL FOR DESIGNERS, DEVELOPERS AND CLIENTS

The BEST reasons for using Processwire for a hotel website are the following:

1. Awarded by CMS Critic Awards as the: "Best Small Business CMS" for 2016
2. I give you MAXIMUM 1 hour effort to learn 90% of it's capabilities (well-documented, superb community)
3. Is multilingual by it's nature
4. Supports translations in the backend
5. You NEVER deal with the database
6. Has front-end LIVE-EDIT of your website (cool)
7. You can create different roles for admin & client so that the latter is not confused by seeing modules/settings etc (your client will love it!)
8. That's all, you want more?!

Read more about WHY processwire

---

Installation

Steps

---

Requirements

Before proceeding with installation make sure your server meets the following minimum requirements:

• A Unix or Windows-based web server running Apache
• PHP version 5.3.8 or newer with PDO database support
• MySQL 5.0.15 or greater
• Apache must have mod_rewrite enabled
• Apache must support .htaccess files
• PHP’s bundled GD 2 library

Even if you don't know your excact server's specifications, don't worry as the installation wizard will warn you if some requirements are not met.

---

Installation wizard

After downloading SeaVuel .zip file, unzip it. The .zip file contains 2 folders, "website" & "documentation".
The "website" folder's contents need to be moved inside your server's Document Root folder.

For example let's say you are on a Windows machine and the "document root" folder of Apache is "c:/wamp/www", then you need to place the contents of "website" folder(not the folder, only it's contents) inside folder "c:/wamp/www" and then open http://localhost on your browser.

The first time you access the site via a web browser you will be directed to /install.php where you’ll be guided through the install screens:

In case you need extra help check also this processwire installation guide

Just keep in mind that SeaVuel | Hotel CMS/template package already has Processwire included, so you don't need to download it. It also includes the "site-profile" of SeaVuel | Hotel CMS/template.

During the installation process through the wizard you will be asked to fill your database connection parameters under the section: "MySQL Database". This is the only "required" parameter in order for the installation to continue

Other than the MySQL parameters you should also define your timezone and leave the other fields as they are.

After you complete the installation and when you first load the home-page of the site have in mind that the initial load of any page takes some time in order for the images to be created(thumbnails etc.). If you see that some of the images on the front are not loaded, this usually means you don't have enough memory allocated for PHP(memory_limit), so you will have to increase it.

---

Settings

General

There are some general settings you need to set which are used throughout the website, which are:

1. Hotel details (name, address, phone, email, google maps coordinates etc)
2. Social media pages URLs
3. Weather settings
4. Email settings (used by the contact form)
5. Google reCaptcha API keys (used by the contact form)
6. Google Maps API key
7. Google Static Maps API key
8. Google Analytics Script setup
9. Book-online search form
10. Credentials(username/password) for client

Lets go through all one by one.

Common

Click on "Pages" from the menu, then on the bottom click on the "Admin" page. Under "Admin" page you can find and click "edit" button on the page with name: "Settings".

You may be wondering: "Is settings a page? Weird?". Actually in Processwire everything is a page, but don't let that confuse you. Settings page is actually a page that uses a template which is also called "Settings" and has some fields defined. The only difference between this page and contact-page for example, is that the latter is actually using a layout (html-php) file inside templates folder while settings page does not use a template because it's purpose is not to be rendered as a view on the front of the site but rather used only to store some settings.

On this page you can find most of the settings. Click edit button, fill them in then save.

Social Media

There is also a sub-page of settings called "social media". The reason it is a sub-page is only for grouping similar things to different pages, so its easier to find. You can edit this page also and enter all social media pages urls. These are shown on the footer of the website. You can leave blank the ones you do not need.

Weather widget

There is also a sub-page of settings called "Weather widget". You can edit this page and enter your OpenWeatherMap API key as well as customize the behaviour of the widget.

Email (contact form)

For sending email through the contact form we use "Wire Mail SMTP" processwire module. Just go to: Modules -> configure -> Wire Mail SMTP, insert and test your email settings(only SMTP Server section is required).
Make an extra check to see if you successfully receive mails through the contact form. All emails are sent to Hotel's email (which is set inside Settings page).

Google Maps

For saving Google Maps coordinates inside templates we have installed a special processwire field-type module which is called "Map Marker". You need to go to Modules -> Configure -> FieldtypeMapMarker and enter a Google Maps API key, then save.

Tracking / Analytics

In order to track visitors SeaVuel | Hotel CMS/template uses MarkupSEO module. Navigate to Modules -> Site -> MarkupSEO and scroll down to "Tracking" section

Google ReCaptcha

For generating a Google reCaptcha widget inside templates we have installed "Markup Google reCAPTCHA" module. You need to go to Modules -> Configure -> MarkupGoogleRecaptcha and enter site-key/secret-key, then save.

Client login

Last thing you need to configure is to set a password for the hotel-manager to login and update the website content. Go to Access -> Users -> client and set a password. Also add hotel-manager's email address. This will be your client's login.

This user has special roles. Not allowed to delete home-page for example, cannot add sub-pages under Contact-page etc. Normally you should never care about the roles for the existing templates. They are already set accordingly. But if you feel you need to change them you can always do so. For managing access/roles read next section.

---

Booking Form

For the setup of the "Book-online" search form you need to open the partial view file in your preferred file-editor: site/templates/partials/_search_form.php. Below you can see the contents of the file:

    <?php namespace ProcessWire; ?>
    <div class="book-online">
    <h3><?php echo __('Book Online'); ?></h3>
    <?php include 'search_forms/_book.request.php'; ?>
    </div>

As you can see we "include" the book-on-request-form file. This kind of form is posted on a new page(request-page) where the user can fill the details of his booking and send them to the hotel-manager.

Here you may include a different search-form (check the files inside site/templates/partials/search_forms folder).

In case you use a form other than the "_book.request.php" then you should also un-publish the "BOOKING" page from the menu as it makes no sense for the user to see both a booking-engine and an on-request booking through a simple form.

If you include booking.com search-form then the form is posted on a new tab on the browser which opens booking.com's booking engine. In the same manner you can include your own preferred booking provider by including the appropriate file:

• search_forms\_beds24.php
• search_forms\_booking.com.php
• search_forms\_bookwize.php
• search_forms\_eZeeReservation.php
• search_forms\_freeToBook.php
• search_forms\_littlehotelier.php
• search_forms\_travel.click.php
• search_forms\_web.hotelier.php
• search_forms\_wubook.php
• search_forms\_booking.expert.it.php

Each search-form file has some variables that need to be set, all available at the top of the file(ex. $form_url). In order for it to work properly you should set these variables to the ones provided by your booking-engine provider. For example have a look at booking.com (site/templates/partials/search_forms/_booking.com.php) partial file parameters that need to be set($form_url, $affiliate_id):

    <?php namespace ProcessWire;
    $form_url = 'http://www.booking.com/hotel/gr/nissaki-mykonos.en-gb.html';
    $affiliate_id = '330843';
    ?>

    <form class="form-horizontal" method="get" action="<?php echo $form_url;?>" target="_blank">
    <input type="hidden" name="aid" value="<?php echo $affiliate_id;?>">
    ...

---

Users/roles

As we said before, a user named "client" already exists in the backend and has already the appropriate roles/permissions. If you want to manage which templates a user can edit, if user is allowed to add sub-pages, if user can delete pages etc then you have to create the appropriate roles, assign them to a user you have created and then edit each template that you want to manage access for and activate the roles you want for that template.

Below is a post from processwire forums:

Here's a common scenario: Lets say you've got a section called /articles/ and you want to have authors that can edit articles:

1. Create new role called "author" and check permission box for "View" and "Edit". Assign this role to one or more users you've created.
2. Edit your "Article" template (Setup > Templates > edit), the one represented by /articles/some-article/, etc.
3. Check the "yes" box on "access" tab to enable access control.
4. Next to the "author" role, check boxes for: View, Edit

Want your authors to be able to create new articles too?

1. Edit your "Article" template again, check the box for "Create" for the author role.
2. Edit your "Articles" template (the one represented by page /articles/). Enable access control and check the box for "Add Children" for the author role.

Want authors to only be able to create new articles but not to publish them?

1. Add a new permission (Access > Permissions > New) and call it "page-publish"
2. You don't have to do anything else. Since the author role doesn't have page-publish permission, they can't publish pages. They can still edit and create unpublished pages.

Check also the forums of processwire (as in the official docs is not so well explained ) HERE

---

Translations/languages

Languages

In Processwire both translations and languages exist as configuration created through the backend. No need to edit config files.

In order to have a look on the existing languages go to: Setup -> Languages.
The ones that don't have text-opacity are the active ones.

If you want to disable a language, go to: Setup -> Languages, edit the one you want then go to: "Settings" tab -> Status and check the: "Hidden: Excluded from lists and searches" then save.
If you want to enable a language just un-check the: "Hidden: Excluded from lists and searches" from language settings tab.

If you want to add a new language that is not on the list, click "Add New" button and enter title and name.
Name value should be according to ISO 639.1(2 letter language code) as seen here so that the language flag can be correctly shown on the template language-switcher as shown here.

Translations

Inside templates files you can use translatable string this way:

<?php echo __("Live long and prosper!"); ?>

Then in order to make it available for translation go to: Setup -> Languages, edit the language you need translations for and go to "Translation Files" section and click on "Find files to translate" button.

At this point Processwire searches inside your template files for translatable strings and shows you a list of the files it found. On section "Translatable files in /site/" select all files under templates folder (ex. \templates\contact.php) by holding Ctrl button on the keyboard and then click "Submit" button.

After submit you will see that all template files you added are now inside "Site translation Files" section. Now you can click on "Edit" and insert your tranlations, so simple!

---

Customization

Adding rooms/pages

In order to add a new page go to "Pages", then hover an existing page (ex. Rooms) and click "New". This way you are adding a new page (room in this case) under "Rooms" page.

All main pages are sub-pages of "Home", so if you need to add a new page on the menu simply add it under "Home" page.

When creating a new page you should select a template(layout). Some pages, for example pages under "Rooms" page have predefined template("Room"), so you have no option to select some other template(layout) for them. For pages that do not have predefined template set, you can select one from the 2 templates(layouts) as seen on the image below:

Theme

There is a sub-page of Admin -> settings called "Theme". You can edit this page and enter your preffered colours for buttons.

Also you can define the background image patterns used on the footer and on the top section on some pages. For each pattern you can also define it's opacity.

HTML, CSS, JS

Layout / Views

Processwire uses a very simple way of generating html output.
The final page layout consists of:

1. The header file (_head.php)
2. The template file (any of the templates inside site/templates folder)
3. The footer file (_foot.php)

Whenever you try to load a page from a url, it checks which template this page uses (defined in the backend) and then opens the appropriate template file inside site/templates folder.
Inside that folder you can simply open and edit any of the template files in an editor. Inside each template file, except from the html markup you can find PHP code that calls Processwire API in order to fetch the data to be displayed.

Under site/templates folder there is a folder named partials
There you can find partial views used inside the templates (carousels, menu etc.) via a simple include 'partials/_file.php'

SASS | CSS | JS

Inside site/templates folder you can find the sass/ folder. There is a main.scss file that includes all others, so if you compile it you get a main.css file inside css/ folder.
If you don't know SASS and do not have time learning it then you can directly edit the css/main.css file.

All JS code needed inside templates (for example a jQuery plugin) can be loaded either inside the bottom of the templates/_foot.php file, if its meant to be used in most of the templates, or directly inside the template file.

Most CSS, JS files are loaded through jsDelivr CDN and some from Cloudflare. We do not keep the source files of external libraries inside /js or /css folders for simplicity reasons, which means that if you try to view the website on your local environment with no internet connection available then you may not be able to load the website correctly ( i assume this will never happen :) )

---

Templates/fields

Through the backend you can go to: Setup -> Fields and create new fields (title, text, image(s), rich-text etc).
Then you can go to: Setup -> Templates and create a new template or edit the existing ones in order to add the fields you created.
This way you can add new types of data to the existing templates of SeaVuel | Hotel CMS / template and display extra data on those templates.

Make sure you read at least the basics of the processwire docs after completing this guide in order to learn how to:

• create templates
• create fields for templates
• create users & roles
• manage view & edit access for templates
• enable/add languages
• install modules

---