NOTE
If your video is not loaded upload your code to a server.
Documentation v.2.1
Start
- Last update: 02-02-2021
- By: Ultimate Websolutions
- Web: Costy
- Mail: info@ultimatewebsolutions.net
Thank you for purchasing Costy.
We hope you will find all answers to your questions in this Documentation.
However, if you still need support, please, go to your envato profile and
use this form
to send a message or drop us a line to mail address shown above.
We are happy to answer shortly.
We appreciate, if you will have few minutes for rating. Please log in to your codecanyon account and leave a rating
in your Downloads section. Many thanks!
Overview
Costy is a multipurpose, 100% responsive, simple and clean cost calculator and order wizard built with HTML5, CSS3, jQuery using Bootstrap4. With its PHP engine Costy is able to generate PDF summary about the order request which is sent in attachment by a nicely formatted email notification. Comes with premade color variations and layouts.
- assets contains icons and images for the order summary email template
- html main folder
- css folder of stylesheets
- img folder of images
- js folder of JavaScripts
- pdf folder of pdf files
- php folder of PHP scripts
- vendor folder of vendor styles and scripts
- documentation
HTML structure
The HTML structure is divided by separate areas shown below.
HTML structure setup
If we setup our own titles and prices in the Calculator Area we have to focus on the values and names shown below.
HTML structure of the email response
The email template of the order summary can be found in php/mailer folder. Now logo, hero image, icons, social icons set in the php/mailer/email.html are hosted on the author's server. Please find these assets in the assets folder, upload them to your server and change the URLs in the php/mailer/email.html pointing to your domain.
Allow special characters on the HTML form
The input on the HTML form can be managed by patterns. You can allow or block special characters. The following code can be found in index html files at the end of the input fields. If you need special characters add them like in example below or simply delete the whole data-parsley-pattern="^[A-Za-z\s]+$" element. Put or remove the "required" keyword at the end of the input tags if you want to manage the input field to be or not to be required.
- data-parsley-pattern="^[ÁáÉéÍíÓóÖöŐőÚúÜüŰűA-Za-z\s]+$" required input WITH special characters
- data-parsley-pattern="^[A-Za-z\s]+$" required input WITHOUT special characters
- data-parsley-pattern="^[A-Za-z\s]+$" this input is NOT required input
Other that that in send_order_1-2-3_attached_pdf.php depending on the layout you use, the followings have to be commented or deleted.
// After sanitization validation is performed
$pattern_address = array('options'=>array('regexp'=>'/^[,.a-zA-Z0-9\s.]+$/'));
$_POST['address'] = filter_var($_POST['address'], FILTER_VALIDATE_REGEXP, $pattern_address);
CSS structure
CSS code which is responsible for the look and feel can be found in css folder. These files are containing the separate color variations:
- style.css Default style. Primary color: #ff7b79
- style-aqua.css Primary color: #1cbbb4
- style-blue.css Primary color: #64b5f6
- style-green.css Primary color: #02b843
The structure is the same in css files above they only differ in primary color.
/* ======= Costy Style Structure =======
01. PRELOADER
02. GENERAL
03. HEADER
04. SUB HEAEDR
05. FOOTER
06. HERO
07. SERVICES
08. FAQ
09. MAP
10. CONTAINERS
11. FORM ELEMENTS
12. ORDER SUMMARY
13. BACK TO TOP
14. SUCCESS SUBMIT
15. RESPONSIVE
================================= */Change Color
If you want to change the primary color the following styles have to be changed.
<!DOCTYPE html>
<html lang="en">
<head>
...
/* ======= Main Style ======= */
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
Below the default coral is changed to green.
<!DOCTYPE html>
<html lang="en">
<head>
...
/* ======= Main Style ======= */
<link type="text/css" rel="stylesheet" href="css/style-green.css">
</head>
To have the same look and feel on submit you have to change the hexa color in the very bottom of all php/order_send.php files.
...
<g fill="none" stroke="#02b843" stroke-width="2">
...
JavaScript structure
JavaScript code which is responsible for functionality can be found in js folder.
- redirect.js for redirection after submit
- scripts.js for demo layout 1
- scripts-2.js for demo layout 2
- scripts-3.js for demo layout 3
- scripts-4.js for demo layout 4
The main structure is the same in js files above they only differ in calculator logic.
/* ======= Costy Scripts Structure =======
01. PRELOADER
02. BACK TO TOP BUTTON
03. NAVBAR
04. STICKY SIDEBAR SETUP
05. MOBILE MENU
06. FAQ NICE SCROLL
07. FAQ ACCORDION
08. GALLERY
09. CALCULATOR ELEMENTS
11. INIT DROPDOWNS
12. RANGE SLIDER 1
13. RANGE SLIDER 2
14. RANGE SLIDER 3
15. FORM INPUT VALIDATION
================================= */Change currency
If you want to change the currency you have to change the followings in scripts.js or scripts-2.js or scripts-3.js depending which layout do you use. Change the '$' symbol to e.g.: 'EUR'. It means your prices will be formatted in the desired currency.
// =====================================================
// CALCULATOR ELEMENTS
// =====================================================
// Function to format item prices usign priceFormat plugin
function formatItemPrice() {
$('.price').priceFormat({
prefix: '$ ',
centsSeparator: '.',
thousandsSeparator: ','
});
}
// Function to format total price usign priceFormat plugin
function formatTotalPrice() {
$('#total').priceFormat({
prefix: '$ ',
centsSeparator: '.',
thousandsSeparator: ','
});
}
Change redirection after submit
Redirection after submit can be set in the js/redirect.js file. Please change the URL to your desired location.
// Redirect
function delayedRedirect() {
window.location = 'https://your-domain-where-to-redirect.com'
}
Change range slider
Range slider options can me modified in js/scripts.js or js/scripts-2.js or js/scripts-3.js file depending which layout do you use. The followings are recommended only to be modified: min value, max value, skin: 'flat' or skin: 'round'.
// =====================================================
// RANGE SLIDER 1
// =====================================================
var $range = $('#optionGroup1RangeSlider'),
$input = $('#optionGroup1Qty'),
instance,
min = 1,
max = 100;
$range.ionRangeSlider({
skin: 'flat',
...
...
from: 50,
...
Setup Media Lightbox
It is possible do open image, gallery or video related to an option group (calculator element). To change the already existing ones or create a new image, gallery or video item, see the code section below. It can be found in scripts.js, scripts-2.js, scripts-3.js and scripts-4.js.
// =====================================================
// GALLERY
// =====================================================
// Single Image
$('#openImage1').magnificPopup({
items: {
src: 'img/gallery/1.jpg',
title: 'Image related to Option Single 1'
},
...
});
// Single Video
$('#openVideo1').magnificPopup({
items: {
src: 'https://vimeo.com/432854555'
},
...
});
// Image Gallery
$('#openGallery1').magnificPopup({
items: [
{
src: 'img/gallery/1.jpg',
title: 'Image related to Option 1.1'
},
{
src: 'img/gallery/2.jpg',
title: 'Image related to Option 1.2'
},
{
src: 'img/gallery/3.jpg',
title: 'Image related to Option 1.3'
}
],
...
});
Setup Map
In order to use the map it is required to have Google Maps API KEY. Visit the following link to get started if you do not have an API KEY yet: Get an API KEY. Some additional info how to create an API KEY. After you get the key set it in the following line in contacts.html at the very bottom of the page.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
NOTE
If you set your API KEY and the map does not load locally: upload the code to your server.
The map infobox details and your desired latitude and longitude map coordinates can be modified in js/map.js file in the following lines. To find the proper coordinates visit: latlong.net
markersData = {
'Marker': [
{
logoUrl: 'img/map/infoimg.png',
address: 'New York',
title: 'Costy Office',
mail: 'info@yourdomain.com',
phone: '+3630123456789',
latitude: 40.697149,
longitude: -74.259865
}
]
};
...
center: new google.maps.LatLng(40.697149, -74.259865),
PHP structure
PHP code which is responsible for pdf generation and mail sending can be found in php folder.
- send_order_1_attached_pdf.php Sending PDF summary in attachment for demo layout 1
- send_order_1_simple_mail.php Sending simple mail summary for demo layout 1
- send_order_2_attached_pdf.php Sending PDF summary in attachment for demo layout 2
- send_order_2_simple_mail.php Sending simple mail summary for demo layout 2
- send_order_3_attached_pdf.php Sending PDF summary in attachment for demo layout 3
- send_order_3_simple_mail.php Sending simple mail summary for demo layout 3
The structure is the same in php files above they only differ in pdf generation logic based on different layouts.
/* ======= PHP Scripts Structure =======
01. SETUP
02. VALIDATE USER INPUTS
03. VALIDATE HIDDEN INPUTS
04. ORDER GENERATION
05. MAIL SENDING
================================= */Setup PDF summary
Main content of PDF summary can be modified by changing some values in send_order_1_attached_pdf.php or send_order_2_attached_pdf.php or send_order_3_attached_pdf.php depending on the layout you want to use.
NOTE
This PDF generation supports multi language and special characters. Built up based on UTF-8.
At phpinvoice('purple','A4','$') The '$' symbol can be replaced with '€', or with text 'EUR' or with 'CHF' etc. with your desired currency.
/* Setup
==================================== */
$order = new phpinvoice('purple','A4', '$');
...
$default_option = 'Select';
// Setup Seller Details
$seller_name = 'Seller Name';
$seller_address = '123 Juanita Ave, Glendora, CA 91740, USA';
$seller_notice = 'Contact data';
$seller_company_name = 'Your Company';
If you want to display currency on the right side on the pdf change:
$curreny_direction = "left" to $curreny_direction =
"right" in the very top of the
php\phpinvoice\phpinvoice.php
Change PDF summary
In the Order Generation section of send_order_1-2-3_attached_pdf.php files you can set your logo, and the reference (now it is 'ORDER'). Here you can also set description of extra options if you use them. Below the '1' is the quantity and '50' is the price of the extra option. So after you setup your extra option values in your HTML file you have to update these in the send_order_1-2-3_attached_pdf.php too depending on the layout you use. If you use calculator-2.html you have to update send_order_2_attached_pdf.php etc. If you set VAT at every item in % e.g.: '20%' instead of '0%', the prices will be calculated accordingly.
/* Order Generation
==================================== */
// Header Settings
$order->setLogo('phpinvoice/templates/purple/logo.png');
$order->setReference('ORDER-'.$timestamp);
...
// Add Items (name, description, amount, vat, price, discount)
if ($selected_option1_title !== $default_option) {
$order->addItem($selected_option1_title, '', $option1_qty, "0%", $selected_option1_price, false);
}
...
// Add Extra Items (name, description, amount, vat, price, discount)
if (isset($extra_option_1)) {
$order->addItem($extra_option_1_title, 'Extra Option 1 description', 1, "0%", 50, false);
}
...
Addig totals is handled by the script however you can extend the total calculation with Shipment. To do so, set 'Shipment' and 'Grand Total'. The '100' is the price of the shipment in this example. The final price will be calculated considering the shipment price.
// Add Totals
$order->addTotal('Sub Total', $order->items_total);
$order->addTotal('Shipment', '100');
$order->addTotal('Grand Total', $order->GetGrandTotal());
In line below you can set a link in the footer of the PDF.
...
// Set footer note
$order->setFooternote('Pay online at <a href="http://paypal.com/" target="_blank">PayPal</a>');
Change mail sending
In order to change the mail sending you have to set the items below in send_order_1-2-3_attached_pdf.php files depending on layout you use.
/* Mail Sending
==================================== */
// Set Sender
$mail->setFrom('noreply@yourdomain.com', 'Costy');
// Set Reply-to Address
$mail->addReplyTo('replyto@yourdomain.com', 'Costy');
// Set Recipients
$mail->addAddress('websolutions.ultimate@gmail.com', 'Ultimate Websolutions');
...
// Set Subject
$mail->Subject = 'Order Request from Costy';
If you want to send and get emails only with text without nicely formatted layout please use code under Text Content Only part and comment out the content under Set HTML Content part like shown below.
/* Mail Sending
==================================== */
// Set HTML Content
//$body = str_replace(array('customerName'),array($customer_name),$email_html);
//$mail->MsgHTML($body);
// Text Content Only
$mail->isHTML(true);
$mail->Body = 'Dear <b>'.$customer_name.'</b>, <br/><br/>your text goes here.</b>'.'<br/><br/>';
Use simple mail summary
In order to change the mail sending from PDF summary to simple mail summary you have to set the appropriate file in HTML: send_order_1_attached.php has to be changed to send_order_1_simple_mail.php if you are using Demo1.
Sources and Credits
We've used the following images, icons or other files, sources as listed.
Updates
Version 2.1 02-02-2021
- Added nice animation when filling the form
- Added simple mail summary without pdf
- Added Calculator Demo 4
Version 2.0 12-10-2020
- Whole refactor of the site.
- Added new desktop and mobile menu system.
- Restructured the calculator components and all pages.
- Added new calculator elements such as quantity sliders, checkboxes and dropdown lists.
- Added extra elements like PDF generation about the summary and formatted email notification.
Version 1.0 25-03-2019
- Initial release