Created: 21 January 2018
Last udpate: 11 December 2018
By: Ansonika
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please post a comment on item page. If you are happy with the theme, please TAKE A MOMENT TO RATE IT from your DOWNLOADS PAGE. Thanks so much!
This theme has a fixed centered layout 1170px. It's based on Boostrap 4 framework grid. It's ULTRA RESPONSIVE!!
CONFIGURATOR is an HTML5 site template wizard with price calculator feature. You can create products or services order form, add how many items or steps you need, set price for each item…and the total will be calculate and sent via email with the order details. It have included the PHP email form that send the results, plus a confirmation/summary email to the user who fill the form. The script have a spam control via Javascript and PHP.
The css files are inside the css folder (not minified and minified versions included) .To modify colors, typografy, button style ecc....find the realtive comment line in style.css. We reccomend to apply every changes in css/custom.css in order to makes future updates easly to apply. SASS files are included. Below how the file is organized:
1. SITE STRUCTURE and TYPOGRAPHY
- 1.1 Typography
- 1.2 Buttons
- 1.3 Structure
2. CONTENT
- 2.1 Wizard
- 2.2 Success submit
3. COMMON
- 3.1 Input forms
- 3.2 Spacing
Change the logo
To change the logo, simply use your PNG24 file (suggested logo height is 34px)Below how is coded
LOGO HOME VERSION WITH H1 FOR SEO PURPOSES (change sizes via css if you need in style.css) <div id="logo_home">
<h1><a href="index.html">CONFIGURATOR | Multipurpose Working Configurator Wizards</a></h1>
</div> REMEMBER to create the retina version that have double size of the orginal dimension and name it with _2x
(logo_2x.png).
Wizard Steps
Each step is defined by the step class <div class="step"> your content....
</div><!-- end step--> Last step <div class="submit step"> your content....
</div><!-- end step-->
Price Calculator
Here an example of an item <input data-price="1499.00" data-label="MacBook Pro Air" id="answer_1_group_1" type="radio" name="answer_group_1" value="MacBook Pro Air $1499.00" class="required">
data-price: the price of an item data-label: displays the item label name with price in the order details box if an item is selected Common settings
In js/common_scripts.js at the bottom aprox line 8494 you can change total label, order details label displayed in the box beside the total, and the currency symbol:
var settings = $.extend({
totallabel: "Total:",
detailslabel: "Order details",
currency:"$"
}, options );
Make an input field, select or radio/checkbox required or not.
Simply add or remove the class "required" to the element. To change the error message go to js/common_scripts.js under the section jQuery Validation Plugin aprox line 7522.
Items with checkbox
Open the HTML page. As you can see the name of the input has to be the same with at the end [], each one have a different value:
<input data-price="30.00" data-label="Mouse Wirelles" id="answers_5_1" type="checkbox" name="answers_5[]" value="Mouse Wirelles $30.00">
then in the php file should be: $message .= "\nOptional Products:\n" ;
foreach($_POST['answers_5'] as $value)
{
$message .= "- " . trim(stripslashes($value)) . "\n";
}; Of course you can change the input name (for every input elements in the html), but remember to change them in php file.
Antispam protection:
spam bots usually disable javascripts to avoid the jquery validation or automatically fill all the input fields and send the email. Now the php submission script link is removed from the html and placed inside the the js script. So if the js will be disabled, the form will be not processed. The js script check also if the hidden input field (id website) is filled by the spam bot...if filled the form will be not processed.
LEAVE THE HIDDEN INPUT FIELD WEBSITE for the reason above
<input id="website" name="website" type="text" value="">
THE GRID
Please refer to this documentation Boostrap
If you doesn't recieve the email please first check:
1) Your spam folder
2) If you hosting requires special settings (SMTP Authentication)
3) If your email has to be managed from the same hosting provider
Main settings:
1) $to = change with your email address
2) Edit the text as you need (\n is equal to a br)
3) DelayRedirect on body tag = increse the value to get more delay on the redirect page
4) window.location = "your redirect page"
This theme use these Javascript (minified versions included). i've included all the common theme scripts in a single file for a fast edit and load (or if you prefer you can find the same js in separate files in js folder). Main js item setting are in main.js file.
common_scripts.js content:
I've used the following images, icons or other files as listed. For the js listed below, you can find the more documentation on the relative sites.
Images are not included.
HOW TO UPDATE FROM PREVIOUS VERSION 1) Update the following files: - js/bootstrap.js
- js/bootstrap.min.js
- css/bootstrap.css
- css/bootstrap.min.css - js/common_scripts.js 2) Update css/style.css or remove @import for Google font Add on every html pages: <!-- GOOGLE WEB FONT -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300,400,400i,700" rel="stylesheet">
Once again, thank you so much for purchasing this theme. Please take a moment to rate it from your Downloads page.
Ansonika