CouponZ - Deals & Coupon HTML Template

Documentation version 1.2.4

Introduction

  • Item Name : CouponZ - Deals & Coupon HTML Template
  • Item Version : v1.2.4
  • Author : Codeboxr
  • Support : Contact Us

Thank you for purchasing our Template. If you have any questions that are beyond the scope of this help file, please feel free to email via our contact form Here. Thanks so much!

Download Now

Overview #back to top

CouponZ - Deals & Coupon HTML Template is an awesome HTML template built with modern technologies like HTML5, CSS3, jQuery, Bootstrap5.x, Font Awesome 5.x, SASS, Gulp, and more which is specially designed for any kind of promotion . To easily modify all those pages according to your need, this documentation is going to help you. The theme contains 25 html template files:

  1. about-us.html
  2. blog.html
  3. blog-left-sidebar.html
  4. blog-grid.html
  5. blog-grid-left-sidebar.html
  6. blog-grid-nosidebar.html
  7. blog-grid-three-column.html
  8. category.html
  9. contact.html
  10. dashboard.html
  11. index.html
  12. index-coupon.html
  13. pricing.html
  14. signin.html
  15. signup.html
  16. blog-single.html
  17. blog-single-leftsidebar.html
  18. blog-single-nosidebar.html
  19. single-coupon-code.html
  20. single-coupon-printable.html
  21. single-coupon-sale.html
  22. single-store.html
  23. stores.html
  24. submit-coupon.html
  25. typography.html

It is accepted that before you start modifying the HTML for your need at least you have basic knowledge in html and twitter Bootstrap 5x. If you need custom development as well as need to know any thing specific for this Template that doesn't cover in this documentation, you are always welcome to contact us.

STRUCTURE#back to top

When you run 'npm run dev', a directory named 'dist' will be created, which is the template directory compiled from Gulp, the directory structure is as follows:

  • /assets
    • /images
      • /favicon
    • /js
      • /app.js
    • /css
      • /style-default.css
      • /style-navy.css
      • /style-olive.css
      • /style-orange.css
      • /style-pink.css
      • /style-red.css
      • /style-violet.css
      • /style-yellow.css
  • /index.html
  • /about.html
  • /event.html
  • /gallery.html
  • /.........

Gulp Development Files Structures#back to top

Node.js and Gulp.js are required to compile the template. If you don't have Node.js and Gulp.js installed, please follow the instructions below:

Install Node.js and Gulp.js

  • 1. Download node js form here: Node.js
  • 2. Open command prompt in folder and run 'npm install -g gulp'

To develop, please run 'npm install', then 'npm run dev' a directory named 'dist' will be created, the development directory structure is as follows:

npm run build - This will create a production ready version of your template in the dist folder. This will also create minified versions of your CSS and JS files.

  • /src
    • /assets
      • /images
      • /js
      • /css
    • /html
      • /data
      • /layout
      • /section
      • /shared
  • /.editorconfig
  • /.gitignore
  • /gulpfile.js
  • /package.json
  • /package-lock.json

Slider #back to top

The codes for the Slider lies within lines270 - 360 in index.html .To modify the contents follow the instruction.

There are some javascript code. The codes for the Slider lies within lines185 - 195 in theme.js .To modify the javascript code follow the instruction. 

                    //Deal Coupon Slider Start
                    $("#deal-coupon-slider").owlCarousel({
                    loop: true,
                    items: 1,
                    autoplay: true,
                    dots: true,
                    nav: true,
                    autoPlay: 8000,
                    navText: ["
", "
"],
                    });
                    //Deal Coupon Slider End

New Deal & Coupon #back to top

The codes for the New Deal & Coupon Slider lies within lines432 - 635 in index.html .To modify the contents follow the instruction.

There are some javascript code. The codes for the Slider lies within lines197 - 223 in theme.js .To modify the javascript code follow the instruction. 

                    //New Deal Carousel Start
                    $("#new-deal-carousel").owlCarousel({
                    loop: true,
                    items: 4,
                    autoplay: false,
                    margin:20,
                    dots: false,
                    nav: true,
                    autoPlay: 8000,
                    navText: ["
", "
"],
                    responsiveClass:true,
                    responsive: {
                    0:{
                    items:1
                    },
                    480:{
                    items:2
                    },
                    600:{
                    items:3
                    },
                    1000:{
                    items:4
                    }
                    }
                    });
                    //New Deal Carousel End

New Deal & Coupon #back to top

The codes for the New Deal & Coupon Slider lies within lines664 - 867 in index.html .To modify the contents follow the instruction.

There are some javascript code. The codes for the Slider lies within lines225 - 252 in theme.js .To modify the javascript code follow the instruction. 

        //Popular Deal Carousel Start
        $("#popular-deal-carousel").owlCarousel({
            loop: true,
            items: 4,
            autoplay: true,
            margin:20,
            dots: false,
            nav: true,
            autoPlay: 4000,
            navText: ["
", "
"],
            responsiveClass:true,
            responsive: {
                0:{
                    items:1
                },
                480:{
                    items:2
                },
                600:{
                    items:3
                },
                1000:{
                    items:4
                }
            }
        });
        //Popular Deal Carousel End

Subscription #back to top

The codes for the Subscription lies within lines1105 - 1113 in index.html .To modify the contents follow the instruction.

There are some javascript code. The codes for the ajax Subscription lies within lines106 - 147 in theme.js .To modify the javascript code follow the instruction. 

                    $('form#cbx-subscribe-form').on( 'submit', function (evnt) {
                        evnt.preventDefault();

                        var $form = $(this);
                        var emailInput = $( 'form#cbx-subscribe-form' ).find( 'input#subscribe' );
                        if (isEmail( emailInput.val() )) {

                            $.ajax({
                                url: cbx_path + '/php/subscribe.php',
                                type: 'post',
                                data: { 'email': emailInput.val().toLowerCase()},
                                beforeSubmit: function (argument) {
                                    // body...
                                },
                                success: function (ajaxResponse) {

                                    console.log(ajaxResponse);
                                    try {
                                        var ajaxResponse = $.parseJSON(ajaxResponse);
                                        if ( !ajaxResponse.error ) {
                                            emailInput.css('color', '#0f0');
                                        } else {
                                            emailInput.removeAttr( 'style' ); //css('color', '#f00');
                                            throw ajaxResponse.message;
                                        }
                                        //alert( ajaxResponse.message );
                                    } catch (e) {
                                        //e.message;
                                        //alert(e.message );
                                    }
                                },
                                error: function (argument) {
                                    // body...
                                }
                            });
                            $form[0].reset();
                        } else {
                            emailInput.css('color', '#f00');
                            return false;
                        }
                    });

There are some php code. The codes for the ajax Subscription lies in php/subscribe.php .To modify the javascript code follow the instruction. 



	$save_in_csv    = false;
    $send_email     = true;
    $api_key        = 'c9bee5a70d502b2939e274a8a64ae602-us11';
    //$list_id        = 208869;
    $list_id        = 'd1c6438b35';

	$ajax_response  = array(
		'success' => false,
		'message' => 'Email is not valid.',
	);

	function is_already_subscribe($email) {
		if (is_file('subscribe.csv')) {
			$fp = fopen('subscribe.csv', 'r');
			while (!feof($fp) ) {
			    $subscribe_list = fgetcsv($fp);
			    if ($subscribe_list[0] == $email) {
			    	fclose($fp);
			    	return true;
			    }
			}
	    	fclose($fp);
	    	return false;
		}
		return false;
	}

	if ($_POST['email']) {
		$email = strtolower($_POST['email']);
		if ($email != null && filter_var($email, FILTER_VALIDATE_EMAIL)) {
			$ajax_response = array(
				'success' => true,
				'message' => 'Thanks for subscribe us.',
			);

			//saving in csv file
			if ($save_in_csv && !is_already_subscribe($email)) {
				$fp = fopen('subscribe.csv', 'a');
				$list = array ($email);
				fputcsv($fp, $list);
				fclose($fp);
			}

            if ( $send_email && $api_key != null && $list_id != null ) {

	            require_once( 'Mailchimp.php' );
                $lz_mailchimp = new Mailchimp( $api_key );

                try {
                    $subscriber = $lz_mailchimp->lists->subscribe( $list_id, array( 'email' => htmlentities($_POST['email'] ) ) );
                    if ( empty( $subscriber['euid'] ) || empty( $subscriber['leid'] ) ) {
                        throw new Exception( 'Subscribe is not available now.' );
                    }
                } catch( Exception $Exp) {
                    $ajax_response = array (
                        'success' => false,
                        'message' => $Exp->getMessage()
                    );
                }
            }
			echo json_encode($ajax_response);
		} else {
			echo json_encode($ajax_response);
		}
	}

Contact #back to top

The codes for the Subscription lies within lines274 - 304 in contact.html .To modify the contents follow the instruction.

There are some javascript code. The codes for the ajax Subscription lies within lines33 - 95 in theme.js .To modify the javascript code follow the instruction. 

                    var $contactForm = $( 'form#cbx-contact-form' );

        $contactForm.validate({
            submitHandler: function(form) {
                // console.log(form);
                //form.submit();
                var $contactForm = $(form);
                $.ajax({
                    url: cbx_path + '/php/contact.php',
                    type: 'post',
                    data: $contactForm.serialize()+'&action=cbx_contact_us',
                    beforeSubmit: function (argument) {
                        // body...
                    },
                    success: function (ajaxResponse) {
                        try {
                            var ajaxResponse = $.parseJSON(ajaxResponse);
                            console.log(ajaxResponse);
                            if (ajaxResponse.error) {
                                //for field error
                                $.each(ajaxResponse.error_field, function(i) {
                                    $('label#'+ajaxResponse.error_field[i]+'-error').text(ajaxResponse.message[ajaxResponse.error_field[i]]);
                                });
                            } else if(ajaxResponse.successmessage) {

                                //alert(ajaxResponse.successmessage);
                                //$( '.cbx-formalert' ).addClass( "alert alert-success" );
                                $('#cbx-formalert').addClass( "alert alert alert-success" ).html(ajaxResponse.successmessage);
                                $contactForm[0].reset();
                            }
                        } catch (e) {
                            //consoe.log(e.message );
                            //alert(ajaxResponse.message);
                        }

                        $contactForm.reset();
                    },
                    error: function (argument) {
                        // body...
                        //console.log('error');
                        //alert('Sorry, Mail could not be sent. Please contact server admin.');
                        //$('#cbx-formalert').addClass( "alert alert-danger" ).html('Sorry, Mail could not be sent. Please contact server admin.');
                        $contactForm.reset();
                    }
                });

                return false;

            },

            rules: {
                'cbxname': {
                    required: true
                },
                'cbxemail': {
                    required: true
                },
                'cbxmessage': {
                    required: true
                }
            }
        });

There are some php code. The codes for the ajax Contact Form lies in php/contact.php .To modify the javascript code follow the instruction. 


define('DS', DIRECTORY_SEPARATOR);
//defined('DS') or die('Error');

//options parameter for user

//if you want to save the contact informations in csv then change the below params to true, by default it's false
// the csv file location is /php/contacts.csv
$save_in_csv = false;

$admin_email_to         = 'admin@yourdomain.com'; // admin email who will get the contact email alert
$admin_email_to_name    = "Company Name"; // Admin Name/Company name who will get the email alert
$admin_email_from       = 'noreply@yourdomain.com';  // admin email from which email address email will be sent
$admin_email_from_name  = 'System'; //admin name from which email will be sent
$admin_send_subject     = 'Contact form alert'; //email subject what the admin will get as contact email alert
$user_send_subject      = 'Thanks for contact, your copy'; //email subject what the user will get if the user agreed or select "copy me"

//end options parameter for user



$list = array();

$validation_message = array(
    'error' => false,
    'error_field' => array(),
    'message' => array()
);


$rules = array(
    'cbxname' => 'trim|required',
    'cbxemail' => 'trim|required|email',
    'cbxmessage' => 'trim|required|alpha_numeric_spaces',
);


if ($_POST) {
    require_once(__DIR__.DS.'class.validation.php');
    $frm_val = new validation;

    foreach ($rules as $post_key => $rule) {
        $frm_val->validate($post_key, $rule);
    }

    $validation_info = $frm_val->validation_info();
    $validation_message['error'] = !$validation_info['validation'];

    foreach ($validation_info['error_list'] as $error_field => $message) {
        $validation_message['error_field'][] = $error_field;
        $validation_message['message'][$error_field] = $message;
    }

    $cbxname        = $frm_val->get_value('cbxname');
    //var_dump($cbxname);
    $cbxemail       = $frm_val->get_value('cbxemail');
    ///var_dump($cbxemail);
    $cbxsendme      = isset( $_POST['cbxsendme'] ) ? 'on' : '';

    ///var_dump($cbxsendme);
    $cbxmessage     = $frm_val->get_value('cbxmessage');
    //var_dump($cbxmessage);
    //exit();


    //if save in csv true
    if ($save_in_csv && $validation_info['validation']) {
        $list[] = $cbxname;
        $list[] = $cbxemail;
        $list[] = $cbxmessage;
        $fp = fopen('contacts.csv', 'a');
        fputcsv($fp, $list);
        fclose($fp);
    }
    //end if save is csv true
   // $validation_message['message'] = 'This is success Process';
    //send email

    if($validation_info['validation']){
        //now prepare for sending email

        //include the php emailer library
        require 'phpmailer/PHPMailerAutoload.php';

        //create an instance of phpmailer class
        $mail = new PHPMailer;

        //some config if you need help based on your server configuration
       // $mail->Host = 'localhost';  // Specify main and backup SMTP servers

        // $mail->Username = 'user@example.com';                 // SMTP username
        // $mail->Password = 'secret';                           // SMTP password
        // $mail->SMTPSecure = 'tls';                            // Enable TLS encryption, `ssl` also accepted
        //$mail->Port = 25;                                    // TCP port to connect to

        //add admin from email
        $mail->From = $admin_email_from;
        //add admin from name
        $mail->FromName = $admin_email_from_name;
        //add admin to email and name
        $mail->addAddress($admin_email_to ,$admin_email_to_name);

        //add more if you need more to recipient
        //$mail->addAddress('ellen@example.com');               // Name is optional

        //add if you need reply to
        //$mail->addReplyTo('info@example.com', 'Information');
        //add if you need cc
        //$mail->addCC('cc@example.com');

        //add if you need bcc
        // $mail->addBCC('bcc@example.com');

        //$mail->addAttachment('/var/tmp/file.tar.gz');         // Add attachments
        //$mail->addAttachment('/tmp/image.jpg', 'new.jpg');    // Optional name
        $mail->isHTML(true);                                  // Set email format to HTML

        $mail->Subject = $admin_send_subject;
        $mail->Body    = $cbxmessage;
        //$mail->AltBody = 'This is the body in plain text for non-HTML mail clients';

        if($mail->send() === true) {
            $validation_message['successmessage'] = 'Message has been sent successfully !';
        } else {
            $validation_message['successmessage'] = 'Sorry, Mail could not be sent. Please contact server admin.';
        }

        //send email to user if user agreed or selected "copy me"
        if($cbxsendme == 'on'){
            $mail2 = new PHPMailer;

            //some config if you need help based on your server configuration
            //$mail2->Host = 'localhost';  // Specify main and backup SMTP servers

            // $mail->Username = 'user@example.com';                 // SMTP username
            // $mail->Password = 'secret';                           // SMTP password
            // $mail->SMTPSecure = 'tls';                            // Enable TLS encryption, `ssl` also accepted
           // $mail2->Port = 25;                                    // TCP port to connect to

            //add admin from email
            $mail2->From = $admin_email_from;
            //add admin from name
            $mail2->FromName = $admin_email_from_name;
            //now send to user
            //$mail->From = $admin_email_from;
           // $mail->FromName = $admin_email_from_name;
            //$mail->all_recipients = array();
            $mail2->addAddress($cbxemail ,$cbxname);     // Add a recipient, user who fillted the contact form
            //$mail->addAddress('ellen@example.com');               // Name is optional
            //$mail->addReplyTo('info@example.com', 'Information');
            //$mail->addCC('cc@example.com');
            // $mail->addBCC('bcc@example.com');

            //$mail->addAttachment('/var/tmp/file.tar.gz');         // Add attachments
            //$mail->addAttachment('/tmp/image.jpg', 'new.jpg');    // Optional name
            $mail2->isHTML(true);                                  // Set email format to HTML

            $mail2->Subject = 'Copy Mail:'.$admin_send_subject;
            $mail2->Body    = $cbxmessage;
            //$mail->AltBody = 'This is the body in plain text for non-HTML mail clients';

            if($mail2->send() === true) {
                $validation_message['successmessage'] = 'Message has been sent successfully !';


            } else {
                $validation_message['successmessage'] = 'Sorry, Mail could not be sent. Please contact server admin.';

            }
        }
    }
    else{

    }

    //end send email

    echo json_encode($validation_message);
    die(1);
}

Version History (Changelog) #back to top

Changelog

										-----------------------------------------------------------------------------------------
                                        Version 1.2.4 - 22.06.2023
                                        -----------------------------------------------------------------------------------------

                                        - Minor improvements

										-----------------------------------------------------------------------------------------
                                        Version 1.2.3 - 21.06.2023
                                        -----------------------------------------------------------------------------------------

                                        - Improved build system (gulp, npm)

										-----------------------------------------------------------------------------------------
                                        Version 1.2.2 - 20.06.2023
                                        -----------------------------------------------------------------------------------------

                                        - Contact form submission and error/success msg display improved
                                        - Better build system using gulp

                                        -----------------------------------------------------------------------------------------
                                        Version 1.2.0 - 20.02.2023
                                        -----------------------------------------------------------------------------------------

                                        - Updated to Bootstrap 5.3.0
                                        - Updated to jQuery 3.6.0
                                        - Updated to Font Awesome 5.15.3
                                        - Updated to Owl Carousel 2.3.4
                                        - Updated Gulp to 4.0.2 and other dependencies
                                        - Added Sass support

                                        -----------------------------------------------------------------------------------------
                                        Version 1.0 - 17.12.2017
                                        -----------------------------------------------------------------------------------------

                                        - Initial Release

Credits & Acknowledgements #back to top

Free Picture or Photos Credit

Icons