With online shops I have seen various ways of keeping the customer on the product page after adding a product to their cart but the method I am trying to emulate is on
www. oakfurnitureland .co.uk
I can trigger an AJAX post back to the server on the Add To Cart button click, then update the basket using the returned values although I'm having a few issues with product variations atm. I'll figure it out, but
can anyone point me in the direction of the JQuery utility used in dropping the advice / informative box from the top of the screen that shows how much more is needed to qualify for free shipping?
I am using Jbar for one of my applications. you will get the stackoverflow like effect
demo : www.areejperfume.com (the site is in arabic)
Many thanks for your example, much appreciated but its not quite the affect I'm looking for. I've seen the JBar option previously, but what I'm after is a box that slides onto the page... and slides off again after a set period of time or user-click.
That's good but it displays the div as block forcing other content down, the effect I'm after is for the div content to slide down over content, then slide off again without impacting what is already on the screen.
InternetReta...
Member
151 Points
171 Posts
JQuery Add To Cart Affect
Apr 10, 2012 02:21 PM|LINK
With online shops I have seen various ways of keeping the customer on the product page after adding a product to their cart but the method I am trying to emulate is on
www. oakfurnitureland .co.uk
I can trigger an AJAX post back to the server on the Add To Cart button click, then update the basket using the returned values although I'm having a few issues with product variations atm. I'll figure it out, but
can anyone point me in the direction of the JQuery utility used in dropping the advice / informative box from the top of the screen that shows how much more is needed to qualify for free shipping?
mameenkhn
Contributor
2026 Points
391 Posts
Re: JQuery Add To Cart Affect
Apr 10, 2012 02:32 PM|LINK
I am using Jbar for one of my applications. you will get the stackoverflow like effect
demo : www.areejperfume.com (the site is in arabic)
here is the sample code.
function addToCart(productId,productName) { var quantity = $("#numericUD" + productId).val(); $.ajax({ type: "POST", dataType: "json", contentType: "application/json", url: "MyShoppingCart.aspx/AddToCart", data: "{'strProductId':" + productId + ",'strQuantity':'" + quantity + "'}", //data: "{}", success: function (data) { $(this).bar({ filter: 'alpha(opacity=70)', opacity: '0.70', color: '#FFF', background_color: '#990033', removebutton: true, message: (data.d == 1) ? productName + ' successfully added to shopping cart ' : 'Could not add the item ' + productName, time: 4000 }); getTotalNoOfItems(); updateCartDiv(); }, error: function () { alert("Error calling the web service."); } }); $("#numericUD" + productId).val('1'); } function getTotalNoOfItems() { $.ajax({ type: "POST", dataType: "json", contentType: "application/json", url: "MyShoppingCart.aspx/GetNoOfItems", data: "{}", success: function (data) { $("#MyCart").html("<b>My Cart (" + data.d + ")</b>"); //$("#MyCart").html("My Cart *" + data.d + ")"); }, error: function () { alert("Error calling the web service."); } }); } function updateCartDiv() { $.ajax({ type: "POST", dataType: "json", contentType: "application/json", url: "MyShoppingCart.aspx/GetMyShoppingCart", data: "{}", success: function (data) { // alert("test: " + data.d); $('#blockCart').text(""); $.each(data.d, function (index, product) { //alert("test: " + category.CategoryName); $('#blockCart').append(product.ProductName + ' ' + product.Quantity + '' + product.UnitPrice + '<br/>'); }); }, error: function () { alert("Error calling the web service."); } });--------------------------------------------------
Muhammad Amin
محمد امين
InternetReta...
Member
151 Points
171 Posts
Re: JQuery Add To Cart Affect
Apr 11, 2012 07:31 AM|LINK
Many thanks for your example, much appreciated but its not quite the affect I'm looking for. I've seen the JBar option previously, but what I'm after is a box that slides onto the page... and slides off again after a set period of time or user-click.
Any other suggestions really welcome.
mameenkhn
Contributor
2026 Points
391 Posts
Re: JQuery Add To Cart Affect
Apr 11, 2012 12:29 PM|LINK
give a fixed position to div through css and display:none; then
you can do something like this
$("#yourDiv").show("slide", { direction: "down" }, 1000).delay(6000).hide("slide", { direction: "up" }, 1000);--------------------------------------------------
Muhammad Amin
محمد امين
InternetReta...
Member
151 Points
171 Posts
Re: JQuery Add To Cart Affect
Apr 11, 2012 01:24 PM|LINK
That's good but it displays the div as block forcing other content down, the effect I'm after is for the div content to slide down over content, then slide off again without impacting what is already on the screen.
InternetReta...
Member
151 Points
171 Posts
Re: JQuery Add To Cart Affect
Apr 11, 2012 01:39 PM|LINK
Well that got me on the right track, so the basis of a solution is:
<div class="page" id="page">
<div class="message">
<p>Hello!</p>
</div>
</div>
JQuery:
$(".page").hover(
function(){
$(this).children("div.message").stop().animate({top: 50}, 750);
},
function(){
$(this).children("div.message").stop().animate({top: -20}, 750);
});
CSS:
.message {
position: absolute;
top: -20px;
width: 200px;
background: #000;
color: #fff;
}