добавить в корзину с помощью jquery - PullRequest
Новая
       0

добавить в корзину с помощью jquery

0 голосов
/ 03 февраля 2012

Я использую этот скрипт jquery: 

$(document).ready(function(){ 

$("#basketItemsWrap li:first").hide();

$(".productPriceWrapRight a img").click(function() {
    var productIDValSplitter    = (this.id).split("_");
    var productIDVal            = productIDValSplitter[1];

    var productX        = $("#productImageWrapID_" + productIDVal).offset().left;
    var productY        = $("#productImageWrapID_" + productIDVal).offset().top;

    if( $("#productID_" + productIDVal).length > 0){
        var basketX         = $("#productID_" + productIDVal).offset().left;
        var basketY         = $("#productID_" + productIDVal).offset().top;         
    } else {
        var basketX         = $("#basketTitleWrap").offset().left;
        var basketY         = $("#basketTitleWrap").offset().top;
    }

    var gotoX           = basketX - productX;
    var gotoY           = basketY - productY;

    var newImageWidth   = $("#productImageWrapID_" + productIDVal).width() / 3;
    var newImageHeight  = $("#productImageWrapID_" + productIDVal).height() / 3;

    $("#productImageWrapID_" + productIDVal + " img")
    .clone()
    .prependTo("#productImageWrapID_" + productIDVal)
    .css({'position' : 'absolute'})
    .animate({opacity: 0.4}, 100 )
    .animate({opacity: 0.1, marginLeft: gotoX, marginTop: gotoY, width: newImageWidth, height: newImageHeight}, 1200, function() {
                                                                                                                                                                                                                                                                                                                $(this).remove();

        $("#notificationsLoader").html('<img src="images/loader.gif">');

        $.ajax({  
            type: "POST",  
            url: "funzioni-carrello.asp",  
            data: { productID: productIDVal, action: "addToBasket"},  
            success: function(theResponse) {

                if( $("#productID_" + productIDVal).length > 0){
                    $("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
                    $("#productID_" + productIDVal).before(theResponse).remove();
                    $("#productID_" + productIDVal).animate({ opacity: 0 }, 500);
                    $("#productID_" + productIDVal).animate({ opacity: 1 }, 500);
                    $("#notificationsLoader").empty();

                } else {
                    $("#basketItemsWrap li:first").before(theResponse);
                    $("#basketItemsWrap li:first").hide();
                    $("#basketItemsWrap li:first").show("slow");  
                    $("#notificationsLoader").empty();          
                }

            }  
        });  

    });

});



$("#basketItemsWrap li img").live("click", function(event) { 
    var productIDValSplitter    = (this.id).split("_");
    var productIDVal            = productIDValSplitter[1];  

    $("#notificationsLoader").html('<img src="images/loader.gif">');

    $.ajax({  
        type: "POST",  
        url: "funzioni-carrello.asp",  
        data: { productID: productIDVal, action: "deleteFromBasket"},  
        success: function(theResponse) {

            $("#productID_" + productIDVal).hide("slow",  function() {$(this).remove();});
            $("#notificationsLoader").empty();

        }  
    });  

});

});

Тогда у меня вызов функции такой: 

<div id="basketWrap">
  <div id="basketTitleWrap">
    <h2>Carrello </h2>
  </div>
  <div id="basketItemsWrap">
    <ul>
    <li></li>
    <% 
        'dim getBasket
        getBasket() %>
   </ul>
  </div>
</div>

Как я могу изменить это так, чтобы, если корзина пуста, отображалось сообщение «Ваша корзина пуста». Оно исчезает, когда вы добавляете первый товар, и появляется снова, если вы удалили все товары из вашей корзины

1 Ответ

0 голосов
/ 03 февраля 2012

начинайте с пустой корзины, что-то вроде этого: 

<div id="basketWrap">
 <div id="empty">Your basket is empty!</div>
 <ul id="itemlist">
  ...

когда ваш список товаров пуст, вы применяете display:none; к #itemlist, если он заполнен display:none; к #empty div и display:block; для #itemlist.

Когда вы используете что-то вроде class="hidden", вы просто можете переключать классы.

ALtnernatively, вы можете манипулировать innerhtml вашей корзины через.html().

РЕДАКТИРОВАТЬ:

с приведенной выше разметкой, добавьте к вашей функции: 

$("#basketItemsWrap li img").live("click", function(event) {

следующий код: 

   if ($("#basketItemsWrap li").length == 1){
       $("#empty").show();
   }

(вы также можете использовать некоторые переходы.)

И к успешной части вашего вызова ajax в добавляемой вами функции add-product: 

   $("#empty").hide();
...