Documentation v.2.0

Last update: 13-11-2020

Start

Thank you for purchasing Esty.

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

Esty is a multipurpose, 100% responsive, simple and clean cost estimator built with HTML5, CSS3, jQuery using Bootstrap4. With its PHP engine Esty is able to generate PDF summary about the order request which contains a PayPal link for checkout. The summary is sent in attachment by a nicely formatted email notification. Although it is not a Worpdress plugin, so does not have admin area, Esty can work withing Wordpress in a seperate folder. Comes with premade color variations and layouts. It can behave as a standalone site or can be integrated into HTML or CMS systems.

  • 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
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 setup
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.

HTML email structure
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 than that in order_send_1-2-3.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 green style. Primary color: #02b843
  • style.light.green.css Primary color: #00cec9
  • style.blue.css Primary color: #0984e3
  • style.light.blue.css Primary color: #00b7f0
  • style.yellow.css Primary color: #fcad1a
  • style.black.css Primary color: #000

The structure is the same in css files above they only differ in primary color.

/* ======= Esty Style Structure =======

01. PRELOADER
02. GENERAL
03. HEADER
04. SUB HEAEDR
05. FOOTER
06. CONTAINERS
07. FORM ELEMENTS
08. ORDER SUMMARY
09. BACK TO TOP
10. SUCCESS SUBMIT
11. 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 CSS ======= */
    <link type="text/css" rel="stylesheet" href="css/style.css"> 
</head>

Below the default green is changed to blue.

<!DOCTYPE html>
<html lang="en">
<head>    
    ...
    /* ======= Main CSS ======= */
    <link type="text/css" rel="stylesheet" href="css/style.blue.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="#0984e3" stroke-width="2">
...
Change Mobile Menu Color

If you want to change the mobile menu color (from light to dark) the following styles and scripts have to be changed.

1. At the very bottom of vendor/dmenu/css/menu.css use the code below


/* Use this when using DARK mobile menu */
ul.mm-listview li a {
    color: #ccc !important;
    display: block;
}

2. In js/scripts.js and scripts-2-3.js change "theme-white" to "theme-dark" at MOBILE MENU section.

// =====================================================
//      MOBILE MENU
// =====================================================
var $menu = $("nav#menu").mmenu({
    "extensions": ["pagedim-black", "theme-white"], // "theme-white" can be changed to: "theme-dark"
    counters: true,
    keyboardNavigation: {
        enable: true,
        enhance: true
    },
    navbar: {
        title: 'MENU'
    },
    navbars: [{ position: 'bottom', content: ['© 2020 Esty'] }]
},

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

The structure is the same in js files above they only differ in calculator logic.

/* ======= Esty Scripts Structure =======

01. PRELOADER
02. BACK TO TOP BUTTON
03. NAVBAR
04. STICKY SIDEBAR SETUP
05. MOBILE MENU
06. CALCULATOR ELEMENTS
07. INIT DROPDOWNS
08. RANGE SLIDER 1
09. RANGE SLIDER 2
10. RANGE SLIDER 3
11. COUNTRY INPUT
12. 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,
...

PHP structure

PHP code which is responsible for pdf generation and mail sending can be found in php folder.

  • order_send_1.php for demo layout 1
  • order_send_2.php for demo layout 2
  • order_send_3.php 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 order_send_1.php or order_send_2.php or order_send_3.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('green','A4','$') The '$' symbol can be replaced with '€', or with text 'EUR' or with 'CHF' etc. with your desired currency. If you want to use another order summary color, change 'green' to e.g.: 'blue'. You can chose from colors which are pre-made in php/phpinvoice/templates. Based on the structure you can create your own desired color as well. If changing the color template make sure to change the color folder (from green to e.g. blue) in
Order Generation / Header Settings: $order->setLogo('phpinvoice/templates/green/logo.png'); 

/* Setup
==================================== */
                                           
$order = new phpinvoice('green','A4', '$');
...
$default_option = 'Select';

// Setup Seller Details
$seller_name = 'Seller Name';
$seller_address = '128 AA Juanita Ave';
$seller_city_state_zip = 'Glendora, CA 91740';
$seller_country = 'United States';
$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

To change the PayPal business id to receive payments on your own PayPal account you have to create a free business account if you do not have yet. How to open a PayPal business account?

After having a busines account and since you are logged in, go to your business account details to capture your merchant (business id).

PayPal Business Id

This has to be set in php/order_send_1-2-3.php files at Setup section with your desired currency accepted by PayPal. 

/* Setup
==================================== */
...
// Setup PayPal Payment
$business = 'ZGLMRD86BBE48';
$currency_code = 'USD';
Change PDF summary

In the Order Generation section of order_send_1-2-3.php you can set your logo, and the title e.g.: 'Summary' or 'Invoice' wich will be present on the pdf. The due date: '+2 week' can be modified to e.g.: '+1 months', or to '+3 day' etc. More details: PHP strtotime. 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 order_send_1-2-3.php accordingly. 

/* Order Generation
==================================== */
                                           
// Header Settings
$order->setLogo('phpinvoice/templates/green/logo.png');
$order->setType('Order Summary');
...
// 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);
}
...

In line below you can set a link in the footer of the PDF. 


...                                        
// Set footer note
$order->setFooternote('YourText <a href="https://yourdomain.com/" target="_blank">YourTitle</a>');
Change mail sending

In order to change the mail sending you have to set the items below in order_send_1-2-3.php files depending on layout you use. 

/* Mail Sending
==================================== */
                                           
// Set Sender	
$mail->setFrom('noreply@yourdomain.com', 'Esty');

// Set Reply-to Address	
$mail->addReplyTo('replyto@yourdomain.com', 'Esty');

// Set Recipients	
$mail->addAddress('websolutions.ultimate@gmail.com', 'Ultimate Websolutions');
...

// Set Subject
$mail->Subject = 'Order Request from Esty';

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/>';

Sources and Credits

We've used the following images, icons or other files, sources as listed.

Updates

Version 2.0 13-11-2020

  • Added new desktop and mobile menu system.
  • Restructured the calculator components and all pages.
  • Added PayPal payment link into PDF generation.

Version 1.1 06-08-2020

  • Added multi language and special character support in pdf.

Version 1.0 25-03-2019

  • Initial release.