Hotel Zante - Documentation

Thank you for purchasing our template. If you have any question please feel free to contact us via ThemeForest contact form or email us at contact@eagle-themes.com If you like this template, please don't forget to rate it!

About Hotel Zante

Hotel Zante - Hotel & Resort HTML Template is a HTML template designed for hotels, resorts and rooms reservation. Based on Bootstrap Framework. You can use all of Bootstrap 3 features.

Files Structure

css
- animate.css
- bootstrap.min.css
- bootstrap-datepicker.min.css
- bootstrap-select.min.css
- famfamfam-flags.css
- magnific-popup.css
- owl-carousel.min.css
- responsive.css
- style.css
email
- inc
  - MailChimp.php
- admin-template.html
- booking.php
- customer-template.html
- email.php
- subscribe.php
fonts
images
js
- bootstrap.min.js
- bootstrap-datepicker.min.js
- bootstrap-select.min
- countUp.js
- imagesloaded.pkgd.min.js
- isotope.pkgd.min.js
- jPushMenu.js
- jquery.countdown.min.js
- jquery.easing.min.js
- jquery.magnific-popup.min.js
- jquery.min.js
- jquery.smoothState.js
- main.js
- moment.min.js
- morphext.min.js
- owl.carousel.min.js
- owl.carousel.thumbs.min.js
- wow.min.js
revolution
videos
404.html
404-v2.html
about-us.html
blog.html
blog-post.html
blog-post2.html
booking-form.html
boxed.html
buttons.html
coming-soon.html
contact.html
contact2.html
event-details.html
events.html
full-width.html
gallery.html
gallery2.html
gallery-2columns.html
gallery-3columns.html
gallery-slider.html
gallery-withoutdetails.html
gallery-withoutfilters.html
icons.html
index.html
index2.html
index3.html
index4.html
left-sidebar.html
loading.html
loading2.html
loading3.html
location.html
our-staff.html
place-details.html
places.html
restaurant.html
right-sidebar.html
room.html
room2.html
rooms-block.html
rooms-grid.html
rooms-list.html
spa.html
typography.html

HTML STRUCURE

Boxed layout.

Search for body tag

Hotel Zante


<body>

Add class boxed

Example - Hotel Zante


<body class="boxed">

...

</body>

Sticky navigation.

Search for header tag

Hotel Zante


<header>

Add class fixed

Example - Hotel Zante


<header class="fixed">

...

</header>

Transparent navigation.

Search for header tag

Hotel Zante


<header>

Add class transparent

Example - Hotel Zante


<header class="transparent">

...

</header>

Revolution Slider

For Revolution Slider Documentation please click here

Lightbox

Create a big and a small image. The big image will be the lightbox image, the small image the thumbnail

Single Image Example - Hotel Zante


<a href="images/example-lg.jpg" data-rel="magnific-popup">
    <img src="images/example.jpg" alt="Image" />
</a>

Gallery Example - Hotel Zante


<div class="image-gallery">
    <a href="images/example-lg1.jpg">
        <img src="images/example1.jpg" alt="Image" />
    </a>
    <a href="images/example-lg2.jpg">
        <img src="images/example2.jpg" alt="Image" />
    </a>
    <a href="images/example-lg3.jpg">
        <img src="images/example3.jpg" alt="Image" />
    </a>
</div>

Google Map Configuration

Go to js folder
Open main.js
Search for GOOGLE MAP (line 933)
Replace details with yours.

main.js - Hotel Zante

/*========== GOOGLE MAP ==========*/
function initialize() {
    var map;
    var panorama;
    var var_latitude = 37.8614626; // Google Map Latitude
    var var_longitude = 20.625886; // Google Map Longitude
    var pin = 'images/icons/pin.svg';

    //Map pin-window details
    var title = "Hotel Zante - Click to see";
    var hotel_name = "Hotel Zante";
    var hotel_address = "25, Navagio Zakynthos, Greece";
    var hotel_desc = "5 star deluxe Hotel";
    var hotel_more_desc = "Lorem ipsum dolor sit amet, consectetur.";
...

}

Please Note: Since June 2016, Google Maps requires a API Key. Replace YOUR_API_KEY in every file with your API Key. Learn More

Booking FORM

Booking Form Configuration

Go to email folder
Open booking.php
Search for Site Settings (line 10)
Replace details with yours.

email/booking.php - Hotel Zante

// Site Settings 
$site_title          = "Hotel Zante";
$site_url            = "https://eagle-themes.com/zantehotel";
$facebook_link       = "https://www.facebook.com/"; 
$twitter_link        = "https://twitter.com/"; 
$admin_phone         = "18881234567";

// Email Settings
$admin_email         = "contact@eagle-themes.com";
$admin_subject       = "Hotel Zante - New Reservation"; 
$customer_subject    = "Hotel Zante - Booking Details"; 

// Output Messages
$success_mssg        = "Your reservation has been submitted to us.<br>We'll contact you as quickly as possible.";
$error_mssg          = "An error has occurred. Please check your PHP email configuration.";
$email_mssg          = "Please enter a valid email!"; 
$booking_date        = "You can't depart before you arrive"; 
$empty_email         = "Email is empty!<br> Please enter something.";
$empty_roomtype      = "Room Type is empty!<br> Please enter something.";
$empty_checkin       = "Arrival Date is empty!<br> Please enter something.";
$empty_checkout      = "Departure Date is empty!<br> Please enter something.";
$empty_adults        = "Adults is empty!<br> Please enter something.";
$empty_children      = "Children is empty!<br> Please enter something.";
$empty_name          = "Name is empty!<br> Please enter something.";
$empty_phone         = "Phone Number is empty!<br> Please enter something.";
$empty_comments      = "Coomments section is empty!<br> Please enter something.";
$empty_country       = "Country section is empty!<br> Please enter something.";

Info: Please take note that this will only will work in a live environment.

How to add new field?

Got to 1 of 4 booking forms (or advanced booking form - booking-form.html)
Add new field as seen below

Example


<form id="booking-form">
...
    <div class="form-group">
        <input type="text" class="form-control" name="booking-fax" placeholder="Fax" >
    </div>
...
</form>

Go to js folder
Open main.js
Search for BOOKING FORM (line 724)
Add new line as seen below

js/main.js - Hotel Zante

/*========== BOOKING FORM ==========*/
$("#booking-form, #horizontal_booking_form, #booking_form_advanced").on('submit', function (e) {
    e.preventDefault();

    //Get input field values from HTML form
    var booking_name = $("input[name=booking-name]").val();
    var booking_email = $("input[name=booking-email]").val();
    var booking_phone = $("input[name=booking-phone]").val();
    var booking_roomtype = $("select[name=booking-roomtype]").val();
    var booking_adults = $("select[name=booking-adults]").val();
    var booking_children = $("select[name=booking-children]").val();
    var booking_checkin = $("input[name=booking-checkin]").val();
    var booking_checkout = $("input[name=booking-checkout]").val();
    var booking_country = $("select[name=booking-country]").val();
    var booking_comments = $("textarea[name=booking-comments]").val();
    var booking_fax = $("input[name=booking-fax]").val(); //New field

    //Data to be sent to server
    var post_data;
    var output;
    post_data = {
        'booking_name': booking_name,
        'booking_email': booking_email,
        'booking_phone': booking_phone,
        'booking_roomtype': booking_roomtype,
        'booking_checkin': booking_checkin,
        'booking_checkout': booking_checkout,
        'booking_adults': booking_adults,
        'booking_children': booking_children,
        'booking_country': booking_country,
        'booking_comments': booking_comments,
        'booking_fax': booking_fax //New field
    };
    
...

});

Go to email folder
Open booking.php
Go to line 53
Add new line as seen below

email/booking.php - Hotel Zante

//Sanitize input data using PHP filter_var(). *PHP 5.2.0+
$customer_email     = filter_var($_POST["booking_email"], FILTER_SANITIZE_STRING);
$roomtype           = filter_var($_POST["booking_roomtype"], FILTER_SANITIZE_STRING);
$checkin            = filter_var($_POST["booking_checkin"], FILTER_SANITIZE_STRING);
$checkout           = filter_var($_POST["booking_checkout"], FILTER_SANITIZE_STRING);
$adults             = filter_var($_POST["booking_adults"], FILTER_SANITIZE_STRING);
$children           = filter_var($_POST["booking_children"], FILTER_SANITIZE_STRING);
$customer_name      = filter_var($_POST["booking_name"], FILTER_SANITIZE_STRING);
$customer_phone     = filter_var($_POST["booking_phone"], FILTER_SANITIZE_STRING);
$comments           = filter_var($_POST["booking_comments"], FILTER_SANITIZE_STRING);
$country            = filter_var($_POST["booking_country"], FILTER_SANITIZE_STRING);
$fax                = filter_var($_POST["booking_fax"], FILTER_SANITIZE_STRING); //New field

Now go to line 93
Add new line as seen below

email/booking.php - Hotel Zante

//Admin Message
$admin_message = str_replace('%customer_name%', $customer_name, $admin_message);
$admin_message = str_replace('%customer_email%', $customer_email, $admin_message);
$admin_message = str_replace('%customer_phone%', $customer_phone, $admin_message);
$admin_message = str_replace('%roomtype%', $roomtype, $admin_message);
$admin_message = str_replace('%adults%', $adults, $admin_message);
$admin_message = str_replace('%children%', $children, $admin_message);
$admin_message = str_replace('%checkin%', $checkin, $admin_message);
$admin_message = str_replace('%checkout%', $checkout, $admin_message);
$admin_message = str_replace('%country%', $country, $admin_message);
$admin_message = str_replace('%comments%', $comments, $admin_message);
$admin_message = str_replace('%fax%', $fax, $admin_message); //New field
$admin_message = str_replace('%site_title%', $site_title, $admin_message);
$admin_message = str_replace('%site_url%', $site_url, $admin_message);
$admin_message = str_replace('%facebook_link%', $facebook_link, $admin_message);
$admin_message = str_replace('%twitter_link%', $twitter_link, $admin_message);

Now go to line 109
Add new line as seen below

email/booking.php - Hotel Zante

//Customer Message
$customer_message = str_replace('%customer_name%', $customer_name, $customer_message);
$customer_message = str_replace('%customer_email%', $customer_email, $customer_message);
$customer_message = str_replace('%customer_phone%', $customer_phone, $customer_message);
$customer_message = str_replace('%roomtype%', $roomtype, $customer_message);
$customer_message = str_replace('%adults%', $adults, $customer_message);
$customer_message = str_replace('%children%', $children, $customer_message);
$customer_message = str_replace('%checkin%', $checkin, $customer_message);
$customer_message = str_replace('%checkout%', $checkout, $customer_message);
$customer_message = str_replace('%country%', $country, $customer_message);
$customer_message = str_replace('%comments%', $comments, $customer_message);
$customer_message = str_replace('%fax%', $fax, $customer_message); //New field
$customer_message = str_replace('%admin_email%', $admin_email, $customer_message);
$customer_message = str_replace('%admin_phone%', $admin_phone, $customer_message);
$customer_message = str_replace('%site_title%', $site_title, $customer_message);
$customer_message = str_replace('%site_url%', $site_url, $customer_message);
$customer_message = str_replace('%facebook_link%', $facebook_link, $customer_message);
$customer_message = str_replace('%twitter_link%', $twitter_link, $customer_message);

Now open admin-template.html
Go to line 230
Add new row as seen below

email/admin-template.html - Hotel Zante

<tr>
    <td>Comments</td>
    <td>%comments%</td>
</tr>
<tr>
    <td>Fax</td>
    <td>%fax%</td>
</tr>

Now open customer-template.html
Go to line 222
Add new row as seen below

email/customer-template.html - Hotel Zante

<tr>
    <td>Comments</td>
    <td>%comments%</td>
</tr>
<tr>
    <td>Fax</td>
    <td>%fax%</td>
</tr>

How to set disabled date?

Go to js folder
Open main.js
Search for DATE PICKER (line 704)
Add new disabled date

Example

/*========== DATE PICKER ==========*/
$('.datepicker').datepicker({
    format: "dd/mm/yyyy", //Set Date Format
    startDate: new Date(), //Set Min Date Today
    endDate: "18/12/2020", //Set Max Date
    datesDisabled: ['16/01/2017', '17/01/2017', '30/01/2017'], //Set Disabled Dates
    autoclose: true,
    todayHighlight: true,
});

Contact Form

Contact Form Configuration

Go to email folder
Open email.php
Search for Email Settings (line 6)
Replace details with yours.

email/email.php - Hotel Zante

//Email Settings
$site_title     = "Hotel Zante";
$to_email       = "contact@eagle-themes.com"; 
$subject        = "Hotel Zante - New Message"; 

// Output Messages
$success_mssg   = "Your message has been sent successfully. Thank you.";               
$error_mssg     = "An error has occurred. Please check your PHP email configuration."; 
$short_mssg     = "Too short message! Please enter something.";                      
$empty_fields   = "Input fields are empty! Please enter something.";              
$name_mssg      = "Name is too short or empty! Please enter something.";             
$email_mssg     = "Please enter a valid email!";                                  

//Email Text
$tr_name    = "Name";
$tr_email   = "Email";
$tr_message = "Message";
$tr_phone   = "Phone Number";

Info: Please take note that this will only will work in a live environment.

Sources and Credits

Images

Please Note: All images are just used Only for Preview Purpose. They are not part of the theme and NOT included in the final purchased files.

Javascript - CSS

Fonts - Icon Fonts

Updates

Version 1.3 – 02 November, 2017

Fixed Gallery Issue
Fixed Email/Booking character encoding

Files Affected

gallery.html (JAVASCRIPT)
gallery-2columns.html (JAVASCRIPT)
gallery-3columns.html (JAVASCRIPT)
gallery-withoutdetails.html (JAVASCRIPT)
main.js (ISOTOPE)
email.php
booking.php

Files Added

imagesloaded.pkgd.min.js

Version 1.2 – 08 February, 2017

Responsive Issues

Files Affected

index.html (Revolution Slider)
responsive.css
main.js (Revolution Slider - Home Page 1)

Version 1.1 – 15 January, 2017

Bug Fixes
Internet Explorer Issues
CSS Improvements
Mailchimp Integration

Files Affected

index2.html
coming-soon.html
style.css
main.js

Files Added

subscribe.php

Folders Added

Version 1.0 – 09 January, 2017 (Initial release)

Support

If you have any question please feel free to contact us via ThemeForest contact form or email us at contact@eagle-themes.com

Please don't forget to rate our Template.

Thank You,

Eagle-Themes

Hotel Zante - Hotel & Resort HTML Template

About Hotel Zante

Files Structure

HTML STRUCURE

Boxed layout.

Sticky navigation.

Transparent navigation.

Revolution Slider

Lightbox

Google Map Configuration

Booking FORM

Booking Form Configuration

How to add new field?

How to set disabled date?

Contact Form

Contact Form Configuration

Subscribe Form

Mailchimp Subscribe Form Configuration

Sources and Credits

Images

Javascript - CSS

Fonts - Icon Fonts

Updates

Files Affected

Files Added

Files Affected

Files Affected

Files Added

Folders Added

Support