• User

    [jQuery]Modifica Carrello

    Ciao a tutti,
    premetto che non sono molto pratica di javascript 😊....
    cmq sto implementando un carrello ecommerce con jquery per poter inserire gli oggetti in modo 'on the fly'.

    Questa è la parte 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();
                
                }  
            });  
            
        });
    
    });
    
    ```Mentre per la parte del carrello vero e proprio lo richiamo in questo modo:
    
    

    <div id="basketWrap">
    <div id="basketTitleWrap">
    <h2>Carrello </h2>
    </div>
    <div id="basketItemsWrap">
    <ul>
    <li></li>
    <%

                    getBasket() %>
                   </ul>
    

    </div>
    </div>

    Quello che manca e vorrei aggiungere è mostrare l'avviso "il tuo carrello è vuoto" quando non è presente nessun  oggetto, cosa che al momento non è presente.
    Come posso fare?
    Vi ringrazio per l'aiuto e consiglio :ciauz:
    Elisa