/*This function is designed to enable an ajax enabled buttons on the screen. It minimally requires a button with an id that is the same as the product_id. It also can accomodate a dropdown selection box that has the id of the product_id+_select
If there is no corresponding quantity, the quantity defaults to 1
Here are the requirements
A container with id=product_id+_container i.e. 134131_container. The button and quantity must be inside this container
*optional: A Quantity from a drop down that has a value. The value must be an integer. One day, I'll parse an integer. In the meantime, the id must be product_id+_select i.e. 234323_select
An element with onclick event. id is product_id only and the class must be .product
This will accomodate one or maybe more buttons
*/
dojo.addOnLoad(function(){
var account_id = dojo.byId('account_id').value;
var cartstring='';
var addToCart = function(event){ //"this" is the node that we connected earlier and event is the event of that node.
//This function takes the product id and quantity from a button press and add it to the cart through ajax
event.preventDefault(); //a special dojo method on event that stops the event from happening. Here, it is the node.onclick event
//Let's see if 'this' works
product_id = this.id; //this refers to the node magically as well
//set quantity equals to the number selected in id product_id'+selected', which is the presumed id of the quantity above the button
//If there is no dropdown amount, set quantity to 1
if(dojo.byId(product_id+'_select')){
quantity = dojo.byId(product_id+'_select').value;
}else{
quantity=1;
}
//Then change button so the user knows we pressed a button
dojo.byId(product_id+'_container').innerHTML = 'Wait for it...';
//send post
d=dojo.xhrPost({
url: "http://www.scrapbookingsuppliesrus.com/order",
timeout: 5000,
handleAs: "json",
content: {
'action': 'ajax_add',
'product_id': product_id,
'quantity': quantity
}
});
//process the result. Here I had to send back the id I send over to the server in order to get the button I'm using. If we made a class, this would have been smoother, but I'm not sure how to make classes.
d.addCallback(function(result){
//Magically in this function, this is the window, not the node. Even though it was defined in addToCart, where this refers to the node. Maybe I have to hitch this like d.addCallback(dojo.hitch(this, function(result){})) and the response is still magically pushed into result.
//change button to message
dojo.byId(result.product_id+'_container').innerHTML = result.message;
//add cart if there isn't one
if (!dojo.byId('cartnum')){
dojo.byId('cart_container').innerHTML = cartstring;
}
//change quantity in cart
dojo.byId('cartnum').innerHTML = parseInt(dojo.byId('cartnum').innerHTML) + parseInt(result.quantity);
});
}
//shopping button
dojo.query(".product").forEach(
function(node){
dojo.connect(node,'onclick',addToCart);
}
);
});
/*This function is designed to enable an ajax enabled buttons on the screen for a wishlist. It minimally requires a button with an id that is the same as the 'w_'+product_id.
Here are the requirements
A container with id='w_'+product_id+'_container' i.e. w_134131_container. An element must be inside this container
An element with onclick event like a button or . id is w_product_id only and the class must be .wishlist
This will accomodate one or maybe more buttons
*/
dojo.addOnLoad(function(){
var addToWishList = function(event){ //"this" is the node that we connected earlier and event is the event of that node.
//This function takes the product id and quantity from a button press and add it to the cart through ajax
event.preventDefault(); //a special dojo method on event that stops the event from happening. Here, it is the node.onclick event
//Let's see if 'this' works
wishlist_id = this.id; //this refers to the node magically as well
//parse the product_id of the element clicked
product_id=wishlist_id.substr(2);//takes all the characters starting from the third character
//Then change button so the user knows we pressed a button
dojo.byId('w_'+product_id+'_container').innerHTML = 'Wait for it...';
//send post
d=dojo.xhrPost({
url: "http://www.scrapbookingsuppliesrus.com/wishlist/ajax",
timeout: 5000,
handleAs: "json",
content: {
'action': 'ajax_add',
'product_id': product_id
}
});
//process the result. Here I had to send back the id I send over to the server in order to get the button I'm using. If we made a class, this would have been smoother, but I'm not sure how to make classes.
d.addCallback(function(result){
//Magically in this function, this is the window, not the node. Even though it was defined in addToCart, where this refers to the node. Maybe I have to hitch this like d.addCallback(dojo.hitch(this, function(result){})) and the response is still magically pushed into result.
//change button to message
dojo.byId('w_'+result.product_id+'_container').innerHTML = result.message;
});
}
//shopping button
dojo.query(".wishlist").forEach(
function(node){
dojo.connect(node,'onclick',addToWishList);
}
);
});
