Ajaxify shopping cart in volusion

Question

I am working on a template on Volusion, my question is, can the "add to cart" button there be ajaxified?

<div id="custom-buttons">
<div id="custom-cart">
    <a href="ShoppingCart.asp">
    <input class="vCSS_input_addtocart" type="image"
    src="/v/vspfiles/templates/248/images/buttons/btn_addtocart.gif" 
    name="btnaddtocart" alt="Add to cart" border="0" 
    data-image-path="/v/vspfiles/templates/248/images/buttons/btn_addtocart.gif"/>
</a>
</div>

That is the code, the button itself works, but it takes me away from the product page to the cart page, and I would like to avoid that but still add the desired item to cart.

Thank you!

The code you posted is not complete. There is no mention of a product code. Also why do you have an image type input within an anchor tag. There are a few ways to add items to the cart via Ajax in Volusion but you haven't provided enough info to give you the best option. IE: Does this product have options? What do you want to do after the item is added, show the built in Volusion soft cart? — user357034, Sep 01 '14 at 12:52
This input works, but it takes me to the /ShoppingCart.asp page. I don't want the softcart to pop-up unless there is no other way to make the person stay on the same page. And yes, it was wraped in anchor tag, that was an error on my side. In the template of my page there is this part in the input: onclick="return addToCart(this.form, this);"> But when I have it in the code I get a: "bad reference/function call, addToCart is not defined" — iamx, Sep 02 '14 at 13:44
Not sure why you would want to add an item to the cart without letting the customer know its been successful??? Anyway see my revised answer. — user357034, Sep 02 '14 at 23:52
No, I wan't them to be able to see that they added the item, but I don't want the button/link to take them away from the product page once they add it :) — iamx, Sep 03 '14 at 00:13
Now you are making conflicting statements. You clearly said you didn't want the soft cart to popup which is the built in method for a customer to see that a item was added via Ajax. Now you want it? If not then how do you want them to know the items has been added? You need to be more clear on what you want from A to Z. — user357034, Sep 03 '14 at 01:38
I just don't want them to get away from the product page, be it with or without the soft cart, sorry for sounding confusing — iamx, Sep 03 '14 at 02:02

user357034 · Accepted Answer · 2014-09-03T03:01:38.483

Assuming your store has the admin config variable "Enable Add To Cart Popup" turned on, you can simply provide a link like shown below, anywhere in your template and when the user clicks on it it will add the item via Ajax so as long as the item does not have options or is not a gift certificate. Volusion has built in scripts which run which handle this automatically provided the config variable is turned on.

<a class="unbind" href="/ShoppingCart.asp?ProductCode=xyz">
   <img border="0" align="absmiddle" src="/v/vspfiles/templates/248/images/buttons/btn_addtocart_small.gif">
</a>

Add the following to the before the </head> tag in your template and use the above link to add the item. Each time you click on it it will add a quantity of one to the cart. There will be no visual feedback that the item has been added, per your request.

<script type="text/javascript">
$(function() {
$('.unbind').unbind()
    .click(function() {
        var product_code = $(this).attr('href').substr($(this).attr('href').lastIndexOf('=') + 1).toUpperCase();
        $.ajax({
            type: "POST",
            url: '/ProductDetails.asp?ProductCode=' + product_code + '&btnaddtocart=btnaddtocart&AjaxError=Y&batchadd=Y',
            data: 'ProductCode=' + product_code + '&QTY.' + product_code + '=1'
        });
        return false;
    });
});
</script>

If you want the soft cart to popup after an item is clicked on use the HTML shown above (change the product code accordingly) and use the following code.

<script type="text/javascript">
$(function() {
    $('.unbind').unbind()
        .click(function() {
            var qstr = 'ProductCode=' + global_URL_Encode_Current_ProductCode + '&QTY.' + global_URL_Encode_Current_ProductCode + '=1&ReplaceCartID=&ReturnTo=&e=&btnaddtocart.x=5&btnaddtocart.y=5';
            SoftAddSingleItem(global_URL_Encode_Current_ProductCode, 1, qstr);
            return false;
        });
});
</script>

Just tested it out, nothing is happening, and I've added the script into the head part of the html. When I check the cart page there is nothing there also — iamx, Sep 03 '14 at 00:21
Did you wrap it in opening/closing script tags? See edit above — user357034, Sep 03 '14 at 01:17
The code was tested on a live Volusion site and it works. Without a URL to your page where it is installed it's impossible to say why its not working for you. — user357034, Sep 03 '14 at 02:21
I get this error in the console: Uncaught TypeError: Cannot read property 'ProductIndex' of undefined — iamx, Sep 03 '14 at 02:52
This is why being specific is important. Since you are putting this on a product page you can use the following built in Volusion product code variable, global_URL_Encode_Current_ProductCode. See edit — user357034, Sep 03 '14 at 03:00
Ok, I just did one more test, and it works! Sorry for not being specific since the start, this Volusion platform is way over me sometimes... Thank you very much stranger! — iamx, Sep 03 '14 at 03:27

Ajaxify shopping cart in volusion

1 Answers1

Linked