Selected Products Compare With jQuery

Products Comparison using jQuery
File Size:117.7 KB
Views Total:341
Last Update:January 7, 2018
Publish Date:January 7, 2018
Official Website:Go to website
License:MIT

In this plugin we have the jquery share plugin that helps in the compare of the products at the highest range of the functions and it works well in the simplicity of the modules of the work. It helps in the comparison of the products side by side. In this one there can be final additions and removals can be made before the final product listing.

How to use :

1. Add jQuery Library with Comparison JS :

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/Compare.js"></script>

2. Add All Products Lists With HTML :

<div class="w3-container  w3-center">
    <div class="w3-row w3-card-4 w3-grey w3-round-large w3-border comparePanle w3-margin-top">
        <div class="w3-row">
            <div class="w3-col l9 m8 s6 w3-margin-top">
                <h4>Added for comparison</h4>
            </div>
            <div class="w3-col l3 m4 s6 w3-margin-top">
                 
                <button class="w3-btn w3-round-small w3-white w3-border notActive cmprBtn" disabled>Compare</button>
            </div>
        </div>
        <div class=" titleMargin w3-container comparePan">
        </div>
    </div>
</div>

3. Add CSS for Styling :

.comparePanle{
                position: fixed;
                bottom: 10px;
                width:90%;
                left:50%;
                transform: translateX(-50%);
                display: none;
                z-index: 3;
            }
            @media only screen and (min-width:993px){
                .comparePanle{
                position: fixed;
                bottom: 10px;
                width:50%;
                left:50%;
                transform: translateX(-50%);
                display: none;
                z-index: 3;
               }
             }

4. Creating Comparision popup with HTML :

<div id="id01" class="w3-animate-zoom w3-white w3-modal modPos">
                <div class="w3-container">
                <a onclick="document.getElementById('id01').style.display='none'" class="whiteFont w3-padding w3-closebtn closeBtn">×</a>
                </div>
                <div class="w3-row contentPop w3-margin-top">
                </div>
              </div>

5. THis script for select product for comparison and add them to preview panel :

/* function to be executed when product is selected for comparison*/
    $(document).on('click', '.addToCompare', function () {
        $(".comparePanle").show();
        $(this).toggleClass("rotateBtn");
        $(this).parents(".selectProduct").toggleClass("selected");
        var productID = $(this).parents('.selectProduct').attr('data-title');
        var inArray = $.inArray(productID, list);
        if (inArray < 0) {
            if (list.length > 2) {
                $("#WarningModal").show();
                $("#warningModalClose").click(function () {
                    $("#WarningModal").hide();
                });
                $(this).toggleClass("rotateBtn");
                $(this).parents(".selectProduct").toggleClass("selected");
                return;
            }
            if (list.length < 3) {
                list.push(productID);
                var displayTitle = $(this).parents('.selectProduct').attr('data-id');
                var image = $(this).siblings(".productImg").attr('src');
                $(".comparePan").append('<div id="' + productID + '" class="relPos titleMargin w3-margin-bottom   w3-col l3 m4 s4"><div class="w3-white titleMargin"><a class="selectedItemCloseBtn w3-closebtn cursor">×</a><img src="' + image + '" alt="image" style="height:100px;"/><span id="' + productID + '" class="titleMargin1">' + displayTitle + '</span></div></div>');
            }
        } else {
            list.splice($.inArray(productID, list), 1);
            var prod = productID.replace(" ", "");
            $('#' + prod).remove();
            hideComparePanel();
        }
        if (list.length > 1) {
            $(".cmprBtn").addClass("active");
            $(".cmprBtn").removeAttr('disabled');
        } else {
            $(".cmprBtn").removeClass("active");
            $(".cmprBtn").attr('disabled', '');
        }
    });

6. Method to add selected products to comparison panel :

$(document).on('click', '.cmprBtn', function () {
        if ($(".cmprBtn").hasClass("active")) {
            /* this is to print the  features list statically*/
            $(".contentPop").append('<div class="w3-col s3 m3 l3 compareItemParent relPos">' + '<ul class="product">' + '<li class=" relPos compHeader"><p class="w3-display-middle">Features</p></li>' + '<li>Title</li>' + '<li>Size</li>' + '<li>Weight</li>' + '<li class="cpu">Processor</li>' + '<li>Battery</li></ul>' + '</div>');
            for (var i = 0; i < list.length; i++) {
                /* this is to add the items to popup which are selected for comparison */
                product = $('.selectProduct[data-title="' + list[i] + '"]');
                var image = $('[data-title=' + list[i] + ']').find(".productImg").attr('src');
                var title = $('[data-title=' + list[i] + ']').attr('data-id');
                /*appending to div*/
                $(".contentPop").append('<div class="w3-col s3 m3 l3 compareItemParent relPos">' + '<ul class="product">' + '<li class="compHeader"><img src="' + image + '" class="compareThumb"></li>' + '<li>' + title + '</li>' + '<li>' + $(product).data('size') + '</li>' + '<li>' + $(product).data('weight') + '<li class="cpu">' + $(product).data('processor') + '</li>' + '<li>' + $(product).data('battery') + '</ul>' + '</div>');
            }
        }
        $(".modPos").show();
    });

7. actions to be performed when comparison popup is closed :

$(document).on('click', '.closeBtn', function () {
        $(".contentPop").empty();
        $(".comparePan").empty();
        $(".comparePanle").hide();
        $(".modPos").hide();
        $(".selectProduct").removeClass("selected");
        $(".cmprBtn").attr('disabled', '');
        list.length = 0;
        $(".rotateBtn").toggleClass("rotateBtn");
    });

8. remove items from preview panel :

/*function to remove item from preview panel*/
                $(document).on('click', '.selectedItemCloseBtn', function () {
                 var test = $(this).siblings("span").attr('id');
                 $('[data-title=' + test + ']').find(".addToCompare").click();
                 hideComparePanel();
                });
                function hideComparePanel() {
                    if (!list.length) {
                    $(".comparePan").empty();
                    $(".comparePanle").hide();
                    }
                 }

Done