checkout page

WWW_DATA/wp-content/plugins/apex_global_lms/template.php

 <?php
-$lmsVersion = "0.1";
+$lmsVersion = "0.3";
 add_action('wp_enqueue_scripts', 'enqueue_admin_css');
 add_filter('template_include', 'use_lms_template', 99);
 
 function enqueue_admin_css()
 {
     global $lmsVersion;
+    wp_enqueue_style("lms-reset", plugin_dir_url(__FILE__) . "template/css/reset.css", array('lms-bootstrap'), $lmsVersion, 'all');
     wp_enqueue_style("lms-bootstrap", plugin_dir_url(__FILE__) . "template/css/bootstrap.min.css", array(), $lmsVersion, 'all');
-    wp_enqueue_style("lms-styles", plugin_dir_url(__FILE__) . "template/css/lms.css", array(), $lmsVersion, 'all');
+    wp_enqueue_style("lms-styles", plugin_dir_url(__FILE__) . "template/css/lms.css", array('lms-bootstrap'), $lmsVersion, 'all');
+
+    wp_enqueue_script("lms-script", plugin_dir_url(__FILE__) . "template/js/lms.js", array("jquery"), $lmsVersion, true);
 }
 
 function use_lms_template($data)
@@ -17,6 +20,10 @@ function use_lms_template($data)
          return __DIR__ . "/template/e-learning.php";
     }
 
+    if(is_page('lms-checkout')){
+         return __DIR__ . "/template/learner-detail.php";
+    }
+
     else if(is_page('lms-courses')) {
     	return __DIR__  . "/template/it-course.php";
     }

WWW_DATA/wp-content/plugins/apex_global_lms/template/css/reset.css

+/* Browser Reset */
+.bootstrap-iso div,
+.bootstrap-iso span,
+.bootstrap-iso applet,
+.bootstrap-iso object,
+.bootstrap-iso iframe,
+.bootstrap-iso h1,
+.bootstrap-iso h2,
+.bootstrap-iso h3,
+.bootstrap-iso h4,
+.bootstrap-iso h5,
+.bootstrap-iso h6,
+.bootstrap-iso p,
+.bootstrap-iso blockquote,
+.bootstrap-iso pre,
+.bootstrap-iso a,
+.bootstrap-iso abbr,
+.bootstrap-iso acronym,
+.bootstrap-iso address,
+.bootstrap-iso big,
+.bootstrap-iso cite,
+.bootstrap-iso code,
+.bootstrap-iso del,
+.bootstrap-iso dfn,
+.bootstrap-iso em,
+.bootstrap-iso font,
+.bootstrap-iso img,
+.bootstrap-iso ins,
+.bootstrap-iso kbd,
+.bootstrap-iso q,
+.bootstrap-iso s,
+.bootstrap-iso samp,
+.bootstrap-iso small,
+.bootstrap-iso strike,
+.bootstrap-iso strong,
+.bootstrap-iso sub,
+.bootstrap-iso sup,
+.bootstrap-iso tt,
+.bootstrap-iso var,
+.bootstrap-iso b,
+.bootstrap-iso u,
+.bootstrap-iso i,
+.bootstrap-iso center,
+.bootstrap-iso dl,
+.bootstrap-iso dt,
+.bootstrap-iso dd,
+.bootstrap-iso ol,
+.bootstrap-iso ul,
+.bootstrap-iso li,
+.bootstrap-iso fieldset,
+.bootstrap-iso form,
+.bootstrap-iso label,
+.bootstrap-iso legend {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    background: transparent;
+    font-size: 100%;
+    vertical-align: baseline;
+}
+.bootstrap-iso body {
+    line-height: 1;
+}
+.bootstrap-iso ol,
+.bootstrap-iso ul {
+    list-style: none;
+}
+.bootstrap-iso blockquote,
+.bootstrap-iso q {
+    quotes: none;
+}
+.bootstrap-iso blockquote:before,
+.bootstrap-iso blockquote:after,
+.bootstrap-iso q:before,
+.bootstrap-iso q:after {
+    content: "";
+    content: none;
+}
+.bootstrap-iso blockquote {
+    margin: 20px 0 30px;
+    padding-left: 20px;
+    border-left: 5px solid;
+}
+.bootstrap-iso :focus {
+    outline: 0;
+}
+.bootstrap-iso ins {
+    text-decoration: none;
+}
+.bootstrap-iso del {
+    text-decoration: line-through;
+}
+.bootstrap-iso table {
+    border-spacing: 0;
+    border-collapse: collapse;
+}
+.bootstrap-iso article,
+.bootstrap-iso aside,
+.bootstrap-iso footer,
+.bootstrap-iso header,
+.bootstrap-iso hgroup,
+.bootstrap-iso nav,
+.bootstrap-iso section {
+    display: block;
+}
+.bootstrap-iso body {
+    color: #666;
+    background-color: #fff;
+    font-family: "Open Sans", Arial, sans-serif;
+    font-size: 14px;
+    font-weight: 500;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: 1.7em;
+}
+.bootstrap-iso body.et_non_fixed_nav.et_transparent_nav.et_boxed_layout #page-container,
+.bootstrap-iso body.et_fixed_nav.et_boxed_layout #page-container {
+    padding-top: 80px;
+}
+.bootstrap-iso body.page-template-page-template-blank-php #page-container {
+    padding-top: 0 !important;
+}
+.bootstrap-iso body.et_cover_background {
+    background-repeat: no-repeat !important;
+    background-attachment: fixed;
+    background-position: top center !important;
+    -webkit-background-size: cover !important;
+    -moz-background-size: cover !important;
+    background-size: cover !important;
+}
+.bootstrap-iso a {
+    color: #2ea3f2;
+    text-decoration: none;
+}
+.bootstrap-iso a:hover {
+    text-decoration: none;
+}
+.bootstrap-iso p {
+    padding-bottom: 1em;
+}
+.bootstrap-iso p:last-of-type {
+    padding-bottom: 0;
+}
+.bootstrap-iso p.et_normal_padding {
+    padding-bottom: 1em;
+}
+.bootstrap-iso strong {
+    font-weight: bold;
+}
+.bootstrap-iso cite,
+.bootstrap-iso em,
+.bootstrap-iso i {
+    font-style: italic;
+}
+.bootstrap-iso pre,
+.bootstrap-iso code {
+    margin-bottom: 10px;
+    font-family: Courier New, monospace;
+}
+.bootstrap-iso ins {
+    text-decoration: none;
+}
+.bootstrap-iso sup,
+.bootstrap-iso sub {
+    position: relative;
+    height: 0;
+    line-height: 1;
+    vertical-align: baseline;
+}
+.bootstrap-iso sup {
+    bottom: 0.8em;
+}
+.bootstrap-iso sub {
+    top: 0.3em;
+}
+.bootstrap-iso dl {
+    margin: 0 0 1.5em 0;
+}
+.bootstrap-iso dl dt {
+    font-weight: bold;
+}
+.bootstrap-iso dd {
+    margin-left: 1.5em;
+}
+.bootstrap-iso blockquote p {
+    padding-bottom: 0;
+}
+.bootstrap-iso embed,
+.bootstrap-iso iframe,
+.bootstrap-iso object,
+.bootstrap-iso video {
+    max-width: 100%;
+}
+.bootstrap-iso h1,
+.bootstrap-iso h2,
+.bootstrap-iso h3,
+.bootstrap-iso h4,
+.bootstrap-iso h5,
+.bootstrap-iso h6 {
+    padding-bottom: 10px;
+    color: #333;
+    font-weight: 500;
+    line-height: 1em;
+}
+.bootstrap-iso h1 a,
+.bootstrap-iso h2 a,
+.bootstrap-iso h3 a,
+.bootstrap-iso h4 a,
+.bootstrap-iso h5 a,
+.bootstrap-iso h6 a {
+    color: inherit;
+}
+.bootstrap-iso h1 {
+    font-size: 30px;
+}
+.bootstrap-iso h2 {
+    font-size: 26px;
+}
+.bootstrap-iso h3 {
+    font-size: 22px;
+}
+.bootstrap-iso h4 {
+    font-size: 18px;
+}
+.bootstrap-iso h5 {
+    font-size: 16px;
+}
+.bootstrap-iso h6 {
+    font-size: 14px;
+}
+.bootstrap-iso input {
+    -webkit-appearance: none;
+}
+.bootstrap-iso input[type=checkbox] {
+    -webkit-appearance: checkbox;
+}
+.bootstrap-iso input[type=radio] {
+    -webkit-appearance: radio;
+}
+.bootstrap-iso input[type=text],
+.bootstrap-iso input[type=password],
+.bootstrap-iso input[type=tel],
+.bootstrap-iso input[type=email],
+.bootstrap-iso input.text,
+.bootstrap-iso input.title,
+.bootstrap-iso textarea,
+.bootstrap-iso select {
+    padding: 2px;
+    border: 1px solid #bbb;
+    color: #4e4e4e;
+    background-color: #fff;
+}
+.bootstrap-iso input[type=text]:focus,
+.bootstrap-iso input.text:focus,
+.bootstrap-iso input.title:focus,
+.bootstrap-iso textarea:focus,
+.bootstrap-iso select:focus {
+    border-color: #2d3940;
+    color: #3e3e3e;
+}
+.bootstrap-iso input[type=text],
+.bootstrap-iso input.text,
+.bootstrap-iso input.title,
+.bootstrap-iso textarea,
+.bootstrap-iso select {
+    margin: 0;
+}
+.bootstrap-iso textarea {
+    padding: 4px;
+}
+.bootstrap-iso img {
+    max-width: 100%;
+    height: auto;
+}
+.bootstrap-iso #ie8 img {
+    width: auto;
+}
+.bootstrap-iso .clear {
+    clear: both;
+}
+.bootstrap-iso br.clear {
+    margin: 0;
+    padding: 0;
+}

WWW_DATA/wp-content/plugins/apex_global_lms/template/js/lms.js

+(function ($) {
+    var lmsLearners = $("#lms-learners");
+    var courseSummeryHolder = $(".lms-summery-course");
+    var lmsCheckoutForm = $("#lmsCheckoutForm");
+
+    var learnerFormTemplate = $("#learnerTemplate").html();
+    var singleCourseTemplate = $("#singleCourseTemplate").html();
+    var lmsSummeryCourse = $("#lmsSummeryCourse").html();
+    var lmsSummerySingleLearner = $("#lmsSummerySingleLearner").html();
+
+    var addLearnerBtn = $("#lms-add-learner");
+    var learners = [];
+
+    function renderLearnersPage() {
+        renderLearnersForm();
+        renderOrderSummery();
+    }
+
+    function renderOrderSummery() {
+        var selectedCourses = [];
+        var uniqueId = [];
+        var courseLearner = [];
+        var totalCost = 0;
+
+        learners.forEach(function (learner) {
+            selectedCourses = selectedCourses.concat(learner.courses);
+            learner.courses.forEach(function (course) {
+                if (!courseLearner[course.id]) {
+                    courseLearner[course.id] = [];
+                }
+                courseLearner[course.id].push(learner);
+            })
+        });
+        selectedCourses = selectedCourses.filter(function (course) {
+            if (uniqueId.indexOf(course.id) === -1) {
+                uniqueId.push(course.id);
+                return course;
+            }
+        });
+
+
+        courseSummeryHolder.html("");
+        selectedCourses.forEach(function (course) {
+            var lmsSummeryCourseElem = $(lmsSummeryCourse);
+
+            lmsSummeryCourseElem.find(".courseName").html(course.name);
+            courseSummeryHolder.append(lmsSummeryCourseElem);
+
+            courseLearner[course.id].forEach(function (learner, index) {
+                var lmsSummerySingleElem = $(lmsSummerySingleLearner);
+                lmsSummerySingleElem.find(".index").html(index + 1);
+                lmsSummerySingleElem.find(".name").html(learner.name);
+                lmsSummerySingleElem.find(".email").html(learner.email);
+                lmsSummerySingleElem.find(".phone").html(learner.phone);
+                lmsSummerySingleElem.find(".price").html(course.cost + " " + lmsSettings.vq_lms_settings_field_currency_symbol);
+                totalCost += parseFloat(course.cost);
+                courseSummeryHolder.append(lmsSummerySingleElem);
+            });
+        });
+
+        $(".lms-total").html(totalCost + " " + lmsSettings.vq_lms_settings_field_currency_symbol);
+        $(".lms-grand-total").html(totalCost + " " + lmsSettings.vq_lms_settings_field_currency_symbol);
+    }
+
+    function renderLearnersForm() {
+        lmsLearners.html("");
+        learners.forEach(function (item, index) {
+            var learnerFormElement = $(learnerFormTemplate);
+            learnerFormElement.find(".lmsIndex").html(index + 1);
+            learnerFormElement.find("input[name='name']").val(item.name);
+            learnerFormElement.find("input[name='email']").val(item.email);
+            learnerFormElement.find("input[name='confirmEmail']").val(item.confirmEmail);
+            learnerFormElement.find("input[name='phone']").val(item.phone);
+
+
+            if (index == 0) {
+                learnerFormElement.find(".lms-learner-remove span").html("");
+            } else {
+                learnerFormElement.find(".lms-learner-remove span").click(removeLearner.bind(index));
+            }
+            learnerFormElement.find(".lms-courses-select-btn").click(showAddMoreCourses.bind(item));
+            learnerFormElement.find("input").keyup(updateLearnerInfo.bind(item));
+            learnerFormElement.find("input").change(updateLearnerInfo.bind(item));
+
+            var couseHolder = learnerFormElement.find(".lms-all-course-holder");
+            couseHolder.html("");
+            if (item.courses.length === 0) {
+                couseHolder.html('<div class="lms-single-course-holder"> \
+                    <span class="name">No course selected.</span> \
+                <div class="clear"></div> \
+                    </div>')
+            }
+            item.courses.forEach(function (course) {
+                var singleCourseElement = $(singleCourseTemplate);
+                course.cost = (course.cost) ? course.cost : lmsSettings.vq_lms_settings_field_general_price;
+
+                singleCourseElement.find(".name").html(course.name)
+                singleCourseElement.find(".price").html(course.cost + " " + lmsSettings.vq_lms_settings_field_currency_symbol)
+                singleCourseElement.find(".remove").click(removeCourse.bind(item, course.id));
+                couseHolder.append(singleCourseElement);
+            });
+
+
+            item.element = learnerFormElement;
+            lmsLearners.append(learnerFormElement);
+        })
+    }
+
+    function removeCourse(courseId) {
+        this.courses = this.courses.filter(function (course) {
+            return course.id != courseId;
+        });
+        renderLearnersPage();
+    }
+
+    function showAddMoreCourses(e) {
+        e.preventDefault();
+        var select = this.element.find(".lms-courses-select");
+        this.element.find(".lms-courses-select-btn").hide();
+        select.show();
+        select.find("select").chosen({
+            no_results_text: "Oops, no courses found!"
+        }).change(onCourseSelected.bind(this));
+    }
+
+    function onCourseSelected(e) {
+        var selectedCourse = courses.filter(function (item) {
+            return item.id == e.target.value
+        });
+
+        if (selectedCourse.length > 0) {
+            if (this.courses.indexOf(selectedCourse[0]) === -1)
+                this.courses.push(selectedCourse[0]);
+        }
+
+        this.element.find(".lms-courses-select").hide();
+        this.element.find(".lms-courses-select-btn").show();
+
+        renderLearnersPage();
+    }
+
+    function updateLearnerInfo(e) {
+        var input = $(e.target);
+        this[input.attr("name")] = input.val();
+        renderOrderSummery();
+    }
+
+    function removeLearner() {
+        learners.splice(this, 1);
+        renderLearnersPage();
+    }
+
+    function addEmptyLearner() {
+        var lerner = {
+            name: "",
+            email: "",
+            confirmEmail: "",
+            phone: "",
+            courses: []
+        };
+
+        learners.push(lerner);
+    }
+
+    function initEvents() {
+        addLearnerBtn.click(function (e) {
+            addEmptyLearner();
+            renderLearnersPage();
+        });
+    }
+
+    if (lmsLearners.length) {
+        initEvents();
+        addEmptyLearner();
+        renderLearnersPage();
+    }
+
+
+    lmsCheckoutForm.submit(function (e) {
+        var learnersWithNoCourse = learners.filter(function (learner) {
+            return learner.courses.length === 0;
+        });
+
+        if (learnersWithNoCourse.length > 0) {
+            alert("Please select courses with all learners.");
+            e.preventDefault();
+        }
+    });
+
+})(jQuery);
\ No newline at end of file