Hi Antoine
Glad we have got items 1 and 3 resolved. In time we hope to release a collection of razor scripts to give our customers an idea of the things you can do.
So you asked about how we did the popup effect on the demo store. The answer is we have to replace part of the standard CV functionality with a javascript function which we loaded on the skin of the site.
You can do the same if you wish. These would be the steps.
1. Add a HTML notification div to the skin
<div id="maniNotification" class="text-center">
Item has been added to the cart
</div>
2. Create some CSS to hide and style.
#maniNotification{
padding:20px;
background:#fc8321;
bottom:0px;
position:fixed;
z-index:9999;
width:100%;
display:none;
}
3. Then we just need some javascript.
<script type="text/javascript">
function AddToCart(productId, c) {
//we may be in the catalogue view so check we have a textbox 1st.
var qty = 1;
var boundary = jQuery(c).parents(".cvVariantBoundary");
if(boundary.size() == 0)
{
boundary = jQuery(document);
}
if (boundary.find(".StoreQuantityTextBox").length>0)
{
qty = boundary.find(".StoreQuantityTextBox").val()
}
if(boundary.find(".ddlQtyRestrictions").length>0)
{
//pulling qty from the dropdownlist
qty = boundary.find(".ddlQtyRestrictions").val()
}
var data = {};
data.quantity = qty;
data.productId = productId;
data.action = 'add_product_to_cart';
data.event = 'AddToCart';
if(boundary.find(".cvEventDateOptions").length > 0){
eval("data.eventDate=\"" + boundary.find(".cvEventDateOptions").find("input:checked").val() + "\"");
}
AddToCartAjax(data);
return false;
}
function AddToCartAjax(data) {
eval("data.language = \"en-US\"");
var event = data.event;
jQuery.ajax({
type: "POST",
async: true,
url: "/DesktopModules/CartViper/CvAjaxHandler.ashx",
dataType: "json",
data: (data),
success: function (data) {
if (data.result) {
if (jQuery(".StoreMiniCartWrapper")) {
jQuery(".StoreMiniCartWrapper").show();
}
if (jQuery(".miniCartNumberItemsInCart")) {
jQuery(".miniCartNumberItemsInCart").text(data.TotalItemsInCart);
}
if (jQuery(".miniCartCartTotal")) {
jQuery(".miniCartCartTotal").text(data.FormattedCartTotal);
}
_gaq.push(['_trackEvent', 'Cart', event, data.sku]);
if (data.redirectUrl != "") {
window.location = data.redirectUrl;
}
else {
jQuery("#maniNotification").html(data.message).slideDown('slow').delay(1500).slideUp('slow');
}
} else {
jQuery("#maniNotification").html(data.message).slideDown('slow').delay(1500).slideUp('slow');
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
},
beforeSend: function (xhr) {
},
complete: function (XMLHttpRequest, textStatus) {
}
});
}
</script>
This script assumes you are using Google Analytics since I've got some code in the script above "_gaq" that will record some events for tracking events.
Regards
Mark