- Home
- Categorie
- Coding e Sistemistica
- Javascript & Framework
- [jQuery]Modifica Carrello
-
[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