Page 1 of 1
Cart2 Ajax calls
Posted: Wed Dec 04, 2019 9:07 am
by blackrain
I am trying to get the Cart2 module to perform an ajax request rather than submitting the page.
I am using javascript to display that an item is added to the basket. unfortunately the page refreshes and the javascript instance is lost.
any thoughts welcome
Thanks
Re: Cart2 Ajax calls
Posted: Wed Dec 04, 2019 9:47 am
by calguy1000
the add to cart action is designed to redirect to a destination page after submission. Ajax won't be possible there till the action is rewritten.
Re: Cart2 Ajax calls
Posted: Wed Dec 04, 2019 11:01 am
by blackrain
@calguy1000
Is there a way of the Cart2 module exposing the sku's currently held in the cart so that on load I can tell the page to scroll the sku id I have assigned to the product widget? this may be a solution I could explore to solve my issue in the short term?
Thanks
Re: Cart2 Ajax calls
Posted: Wed Dec 04, 2019 9:12 pm
by calguy1000
The view cart template has the sku (if it exists) of every item in the cart.
You may be able to repurpose a call to the viewcart action with a different template to do what you want.
Re: Cart2 Ajax calls
Posted: Thu Dec 05, 2019 6:20 am
by iturbay
This code will help you add products and not refresh the page.
Code: Select all
<head>
<__script__ type="text/javascript" src="assets/js/jquery.min.js"></__script>
</head>
MyCart
Code: Select all
<ul id="mycart" class="navbar-mini-cart navbar-nav animate-dropdown nav flip">
<li class="nav-item dropdown">
<a href="{cms_selflink href='korzina'}" class="nav-link">
<i class="ec ec-shopping-bag"></i>
{strip}
{if $cart_itemcount == 0}
{*Пустая корзина*}
{else if $cart_itemcount >= "100"}
<span class="cart-items-count count">∞ </span>
{else}
<span class="cart-items-count count">{$cart_itemcount}</span>
{/if}
{/strip}
<span class="cart-items-total-price total-price">
{strip}
{if $cart_itemcount == 0}
Корзина пуста
{else}
<span class="amount">
{$cart_totalprice} {$currency_symbol}
</span>
{/if}
{/strip}
</span>
</a>
</li>
</ul>
Addtocart
Code: Select all
<div id="{$submitname}_cart" class="frm_cart">
{$formstart}
{strip}
<input type="hidden" name="{$submitname}" value="1" style="display: none;" />
<div class="input-group">
<input class="form-control " type="text" value="1" name="{$quantityname}" placeholder="1" size="3" maxlength="3"/>
<span class="input-group-btn">
<button type="submit" name="{$submitname}" class="btn btn-danger btn-lg" ><i class="ec ec-add-to-cart"></i> Купить </button>
</span>
</div>
{/strip}
{$formend}
</div>
{jsmin}
{literal}
<__script__ type="text/javascript">
function ajaxifyCartButtons_{/literal}{$submitname}{literal}() {
$('#{/literal}{$submitname}{literal}_cart form').on( "submit", function( event ) {
event.preventDefault();
var posturl = $(this).attr("action") + "?showtemplate=false";
var postdata = $(this).serialize();
/* ajax */
$.post(posturl,postdata,function() {
//we don't display returned data
// but update cart
updateCart_{/literal}{$submitname}{literal}();
replaceButton_{/literal}{$submitname}{literal}();
});
});
}
function updateCart_{/literal}{$submitname}{literal}() {
$("#mycart").load(
"{/literal}{module_action_link module='Cart2' action='mycart' urlonly=1 jsfriendly=1}{literal}",
{ 'showtemplate' : 'false' },
function() {}
)
};
function replaceButton_{/literal}{$submitname}{literal}() {
$("button[name~='{/literal}{$submitname}{literal}']").replaceWith('<button type="submit" class="btn btn-warning ripple" disabled> <i class="fa fa-check" aria-hidden="true"></i> Добавлено <span class="md-ripple"></span></button>');
};
ajaxifyCartButtons_{/literal}{$submitname}{literal}();
</__script>
{/literal}
{/jsmin}