Cart Face :: Apps Store

Wish List (1.1)

FREE

Get this Plugin

Front End Screens

Support Details

For any assistance you may contact our support team.

: +91 9073901979
: [email protected]
: https://www.cartface.com/

Wish list app permits the customers to build wish list without login. It is actually simple to use and the wish list can be created by just a few clicks. It is exceptionally easy to install and anybody with zero coding experience can effortlessly do this. Why wish list app?

No purchaser login or registration needed for creating a wish list
Consumers can add items to Wish list both from collection and the product pages
Extraordinary speed

Tutorial

Steps to be followed to integrate this plug in.

Get the plug-in
Login to your store admin panel
Go to Store front from left menu and select theme
Copy the snippet code given in the below section
Paste the snippet code as mentioned in below section

Snippet Code

1) Paste the snippet code given below on include/products.html.twig where you need to show Wishlist icon

<!--wishList snippet-->    
{% if check_plugin_exsist('wishlist') %}
    <div class="wish-list-icon pull-right">            
        {% if session.userdata.front_uid %} 
            <div class="wish-opt" style="z-index:100; font-size: 16px; padding-right: 5px"><a id="wish_{{row.id}}" data-product-id="{{row.id}}" class="dev_wish_div" href="javascript:void(0)" onclick="addRemove(this)"><i class="fa fa-heart-o text-muted"></i></a></div>
        {% else %}
             <div class="wish-opt" style="z-index:100; font-size: 16px; padding-right: 5px"><a href="javascript:void(0)" onclick="userNotLoggedIn()"><i class="fa fa-heart-o text-muted"></i></a></div>
        {% endif %}
    </div>
    {% endif %}
<input type="hidden" class="loaderHidden" id="wishlist" value="0"/>
<!--/wishList snippet-->


2) Paste the snippet code given below on include/products.html.twig at the end of page 

<!-- WishlistScript -->   
   <script>
    var wishlist_url = "{{ base_url('admin/getWishlist') }}/";
    $.ajax({
            type: "POST",
            url: wishlist_url,
            dataType:"html",
            //data:formdata,
            beforeSend: function(){
                $('#wishlist').val(0)
            },
            success:function(responseText)
            {
                //alert("trtss")
                var wistlist_arr = responseText.split('@');
                $('.dev_wish_div').each(function(){

                    //alert($(this).attr('id'));

                    if($.inArray($(this).attr('id').replace('wish_',''), wistlist_arr)!= -1)
                    {
                        $(this).addClass('devRemoveFromWishList');
                        $(this).html('<i class="fa fa-heart text-danger"></i>');
                    }    
                    $(this).css('display','inline');
                });
                $('#wishlist').val(1)
                //maintainLoader();
            }
    });


    function addRemove(elem)
    {
        var add_remove_url = "{{ base_url('admin/addRemoveWishlist') }}/";
        var add_remove     = 'add';
        var effect_div     = $(elem);
        if($(elem).hasClass('devRemoveFromWishList'))
        {
            add_remove = 'remove';
        }


        $.ajax({
            type: "POST",
            url: add_remove_url,
            dataType:"html",
            data:{product_id:$(elem).attr('data-product-id'),add_remove:add_remove},
            beforeSend: function(){
                $('.loader-wrapper').css('display','block');
            },
            success:function(responseText)
            {
                if(add_remove == 'add')
                {
                    //effect_div.removeClass('btn-default').addClass('btn-danger');
                    effect_div.addClass('devRemoveFromWishList');
                    effect_div.html('<i class="fa fa-heart text-danger"></i>');
                }
                else
                {
                    effect_div.removeClass('devRemoveFromWishList');
                    effect_div.html('<i class="fa fa-heart-o text-muted"></i>');
                }

                $('.loader-wrapper').css('display','none');
            }
        });
    }

    </script>
    <!--/WishlistScript-->


3) Paste the snippet code given below on include/product-description.html.twig after Product name.

    
        <!--- Wishlist Plug In -->
        {% if check_plugin_exsist('wishlist') %}
            <div class="wish-list-icon">                
        {% if session.userdata.front_uid %} 
            <div  style="font-size: 16px;" data-product-id="{{ product.id }}" id="wish_{{ product.id }}" class="dev_wish_div" style="display:none;"><i class="fa fa-heart-o text-muted"></i></div>
        {% else %}
            <div style="font-size: 16px;"><a href="javascript:void(0)" onclick="userNotLoggedIn()"><i class="fa fa-heart-o text-muted"></i></a></div>         
        {% endif %}
            </div>
        {% endif %}
        <!--- /Wishlist Plug In -->

 4) Paste the snippet code given below on include/product-description.html.twig at the end of page

    <!--- Wishlist Plug In -->
    <script>
   
    var wishlist_url = "{{ base_url('admin/getWishlist') }}/";
    $.ajax({
            type: "POST",
            url: wishlist_url,
            dataType:"html",
            beforeSend: function(){
                $('.loader-wrapper').css('display','block');
            },
            success:function(responseText)
            {
                var wistlist_arr = responseText.split('@');
                $('.dev_wish_div').each(function(){                    
                    if($.inArray($(this).attr('id').replace('wish_',''), wistlist_arr)!= -1)
                    {
                        //$(this).html('Remove From Wish List');
                        $(this).addClass('devRemoveFromWishList');
                        $(this).html('<i class="fa fa-heart text-danger"></i>');
                        //$(this).removeClass('btn-warning').addClass('btn-danger');
                    }
                });
                $('.dev_wish_div').css('display','inline');
                $('.loader-wrapper').css('display','none');
            }
    });

    $(document).on("click", '.dev_wish_div', function(event) { 
        var add_remove_url = "{{ base_url('admin/addRemoveWishlist') }}/";
        var add_remove     = 'add';
        var effect_div     = $(this);
        if($(this).hasClass('devRemoveFromWishList'))
            add_remove = 'remove';

        $.ajax({
            type: "POST",
            url: add_remove_url,
            dataType:"html",
            data:{product_id:$(this).attr('data-product-id'),add_remove:add_remove},
            beforeSend: function(){
                $('.loader-wrapper').css('display','block');
            },
            success:function(responseText)
            {
                if(add_remove == 'add')
                {
                    //effect_div.removeClass('btn-warning').addClass('btn-danger').html('Remove From Wish List');
                    effect_div.addClass('devRemoveFromWishList');
                    effect_div.html('<i class="fa fa-heart text-danger"></i>');
                }
                else
                {
                    effect_div.removeClass('devRemoveFromWishList');
                    effect_div.html('<i class="fa fa-heart-o text-muted"></i>');
                }

                $('.loader-wrapper').css('display','none');
            }
        });
    });
    </script>
    <!--- /WishList Script -->


5) Paste the snippet code given below on profile.html.twig in tab section button (generally in line no 20 in default theme).

    {% if check_plugin_exsist('wishlist') %}
            {% if session.userdata.front_uid %} 
                <li><a href="#wish_list" data-toggle="tab">My Wishlist</a></li>
            {% endif %}
    {% endif %}

6) Paste the snippet code given below on profile.html.twig after the end of the div containing "profile_order" id.

    <!--WishList-->
        {% if check_plugin_exsist('wishlist') %}
        {% if session.userdata.front_uid %} 
            <div class="tab-pane" id="wish_list">
                <div class="row margin-b-20">
                  <div id="carttablecontainer" class="col-md-12">
                    <div class="table-responsive">
                      <table class="table table-condenced carttable">
                        <thead>
                          <tr>
                            <th></th>
                            <th>Product</th>
                            <th>Price ({{get_base_currency_setting('symbol')}})</th>
                            <th>Description</th>
                            <th></th>
                          </tr>
                        </thead>
                        <tbody class="dev_wish_tbody"></tbody>
                      </table>
                    </div>
                  </div>
                </div>
            </div>
        {% endif %}
    {% endif %}
        <!--/WishList-->

            



7) Paste the snippet code given below on profile.html.twig at the end of page

      <!--WishList-->
    <script>
    var wishlist_load_url = "{{ base_url('admin/loadWishList') }}/";
    var wishlist_remove_url = "{{ base_url('admin/removeWish') }}/";
    $.ajax({
        type: "POST",
        url: wishlist_load_url,
        dataType:"html",
        success:function(responseText)
        {
          var wishListArr = jQuery.parseJSON(responseText);
          var currency_symbol = '{{ get_base_currency_setting('symbol') }}';
          if(wishListArr.length > 0)
          {
            var wishListHtml = "";
            for(var i = 0;i< wishListArr.length;i++)
            {
              var stock_html = '';
              var price_html = '';
              if(wishListArr[i]['remaining_stock'] > 0)
                stock_html = '<span class="text-success"><strong>In Stock</strong></span>';
              else
                stock_html = '<span class="text-faliure"><strong>Out of Stock</strong></span>';

              if(parseFloat(wishListArr[i]['price']) != parseFloat(wishListArr[i]['final_price']))
              {
                price_html = '<div class="product-amt"><div class="inline-block pprice"><del>'+currency_symbol+wishListArr[i]['price']+'</del></div><div class="inline-block pprice">'+currency_symbol+wishListArr[i]['final_price']+'</div></div>';
              }
              else
              {
                price_html = '<div class="inline-block pprice">'+currency_symbol+wishListArr[i]['price']+'</div>';
              }

               wishListHtml = wishListHtml + '<tr><td class="col-sm-1 col-md-1"><img alt="" height="100" width="100" src="'+wishListArr[i]['image_path']+'" class="img-responsive thumbnail"></td><td><div class="mediax"><div class="media-bodyx"><h4 class="media-headingx"><a href="javascript:void(0)">'+wishListArr[i]['name']+'</a></h4><p>Status: '+stock_html+'<br></p></div></div></td><td>'+price_html+'</td><td>'+wishListArr[i]['short_description']+'</td><td><button class="btn btn-danger btn-xs dev_remove_wish" data-product-id="'+wishListArr[i]['id']+'" type="button"><span class="glyphicon glyphicon-remove"></span></button></td></tr>';
            }
            $('.dev_wish_tbody').html(wishListHtml);
          }
          else
            $('.dev_wish_tbody').html('<td colspan="5" class="text-faliure" style="text-align:center;">Your wishlist is empty.</td>');
        }
    });

    $(document).on('click','.dev_remove_wish',function()
    {
      var property_id = $(this).attr('data-product-id');
      var add_remove_url = "{{ base_url('admin/addRemoveWishlist') }}/";
      var remove_element = $(this);
      $.ajax({
            type: "POST",
            url: add_remove_url,
            dataType:"html",
            data:{product_id:property_id,add_remove:'remove'},
            beforeSend: function(){
                $('.loader-wrapper').css('display','block');
            },
            success:function(responseText)
            {
              remove_element.parent().parent().remove();
              $('.loader-wrapper').css('display','none');
            }
        });
    });
    </script>
<!--/WishList-->


8) Paste the snippet code given below on include/header.html.twig in the header-wrapper div after My Account
    and Log out section.

<!--WishList-->
    {% if check_plugin_exsist('wishlist') and session.userdata.front_uid %}
    <li><a href="javascript:void(0);" onclick="refreshModal()"><i class="fa fa-heart"></i></a></li>
    {% endif %}
<!--/WishList-->

9) Paste the snippet code given below on include/header.html.twig at the end of page

    <!--WishList-->
    <script>
        var wishlist_load_url = "{{ base_url('admin/loadWishList') }}/";
        var wishlist_remove_url = "{{ base_url('admin/removeWish') }}/";


        $(document).on('click', '.dev_remove_wish', function ()
        {

            var property_id = $(this).attr('data-product-id');
            var add_remove_url = "{{ base_url('admin/addRemoveWishlist') }}/";
            var remove_element = $(this);
            $.ajax({
                type: "POST",
                url: add_remove_url,
                dataType: "html",
                data: {product_id: property_id, add_remove: 'remove'},
                beforeSend: function () {
                    //window.location.reload();
                    $('.loader-wrapper').css('display', 'block');
                },
                success: function (responseText)
                {
                    //alert(property_id);
                    $('#wish_' + property_id).html('<i class="fa fa-heart-o text-muted"></i>');
                    //$('#wish_' + property_id).addClass('btn-default');
                    remove_element.parent().parent().remove();
                    $('.loader-wrapper').css('display', 'none');
                }
            });
        });

        function refreshModal() {
            //alert('hello');
            $.ajax({
                type: "POST",
                url: wishlist_load_url,
                dataType: "html",
                success: function (responseText)
                {
                    var wishListArr = jQuery.parseJSON(responseText);
                    var currency_symbol = '{{ get_base_currency_setting('symbol') }}';
                    if (wishListArr.length > 0)
                    {
                        var wishListHtml = "";
                        for (var i = 0; i < wishListArr.length; i++)
                        {
                            var stock_html = '';
                            var price_html = '';
                            if (wishListArr[i]['remaining_stock'] > 0)
                            {
                                stock_html = '<span class="text-success">In Stock</span>';
                            }
                            else
                            {
                                stock_html = '<span class="text-faliure">Out of Stock</span>';
                            }
                            if (parseFloat(wishListArr[i]['price']) != parseFloat(wishListArr[i]['final_price']))
                            {
                                price_html = '<div class="product-amt"><div class="inline-block pprice"><del>' + currency_symbol + wishListArr[i]['price'] + '</del></div><div class="inline-block pprice">' + currency_symbol + wishListArr[i]['final_price'] + '</div></div>';
                            }
                            else
                            {
                                price_html = '<div class="inline-block pprice">' + currency_symbol + wishListArr[i]['price'] + '</div>';
                            }
                            //alert(wishListArr[i]['slug']);
                            wishListHtml = wishListHtml + '<tr><td><img alt="" height="100" width="100" src="' + wishListArr[i]['image_path'] + '" class="img-responsive thumbnail"></td><td><p><a href="{{ base_url() }}{{ 'products' }}/' + wishListArr[i]['slug'] + '">' + wishListArr[i]['name'] + '</a></p><p>Status: ' + stock_html + '<br></p></td><td>' + price_html + '</td><td class="hidden">' + wishListArr[i]['short_description'] + '</td><td><button class="btn btn-danger btn-xs dev_remove_wish" data-product-id="' + wishListArr[i]['id'] + '" type="button" title="Remove this product from wishlist"><i class="fa fa-trash"></i></button></td></tr>';
                        }
                        $('.dev_wish_tbody').html(wishListHtml);
                    }
                    else
                    {
                        $('.dev_wish_tbody').html('<td colspan="5" class="text-faliure alert alert-danger" style="text-align:center;">Your wishlist is empty.</td>');
                    }
                }
            })
                    ;
            $('#wishModal').modal('show');
        }

        function userNotLoggedIn()
        {
            showAlert("Please login to add to wishlist.", 'alert-danger');
        }

    </script>
    <!--/WishList-->

10) Paste the snippet code given below on include/header.html.twig after mySmallModalLabel modal
    <!--WishList Modal to view Listed items of wishList-->
    <div class="modal fade" id="wishModal" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h4 class="modal-title">Your Wish List</h4>
                </div>
                <div class="modal-body table-full-width">
                    <table class="table table-striped table-condensed">
                        <thead>
                            <tr>
                                <th width="100"></th>
                                <th>Product</th>
                                <th>Price ({{get_base_currency_setting('symbol')}})</th>                                                
                                <th width="50"></th>
                            </tr>
                        </thead>
                        <tbody class="dev_wish_tbody">

                        </tbody>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!--/WishList-->

Total Reviews :0