Add Products for comparison - jQuery

Creating HTML content

This section consists of three parts :

• Creating markup for products
• Creating preview panel
• Creating popup to view items selected for comparison

Creating markup for products

Use data-* attribute to add properties to product for ex: use data-title to add title of product

        <div class="selectProduct w3-padding" data-title="Nexus5" data-id="Nexus 5" data-size="4.9" "  data-weight="130 g" data-processor="2.3 GHz, Quad Core, Qualcomm Snapdragon 800" data-battery="2300 mAH">
        <a class="w3-btn-floating w3-light-grey addButtonCircular addToCompare">+</a>
        <img src="images/nexus5.jpg" class="imgFill productImg">
        <h4>Nexus 5</h4>
        </div>
        
        
        

Creating Preview Panel

This preview panel helps to preview the selected items

<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>    

            .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;
               }
             }
            

here "comparePan" css class is used to append items to the preview panel

Creating Comparision popup

This pop is full screen popup which is used to view the comparison of products

modal popup is created using W3.css framework. and css class is w3-modal

              <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>
            

jQuery part

Method to 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', '');
        }
    });
            

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();
    });
            

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");
    });
            

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();
                    }
                 }