Vernieuw inhoud div
Ik wil graag het winkelmandje met ID #cartcustom vernieuwen wanneer iemand op de button 'add to cart' klikt.
Wanneer ik onderstaande code gebruik, wordt de content binnen de div gedupliceerd ipv vernieuwd. Wanneer ik de knop nog een keer gebruik wordt het winkelmandje wel vernieuwd, maar loopt 1 achter op de telling.
Heeft iemand een idee?
javascript:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<script type="text/javascript" >
$('.woocommerce a.button.add_to_cart_button.ajax_add_to_cart').click(function(){
var $this = $(this);
$this.text('Toegevoegd aan lijst');
$('#cartcustom').load(document.URL + ' #cartcustom>*');
});
</script>
$('.woocommerce a.button.add_to_cart_button.ajax_add_to_cart').click(function(){
var $this = $(this);
$this.text('Toegevoegd aan lijst');
$('#cartcustom').load(document.URL + ' #cartcustom>*');
});
</script>
output:
Code (php)
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<div id="cartcustom">
<a class="wcmenucart-contents" href="https://www.hetvignet.nl/aanvraag-patronen/" title="View your shopping cart">
<i class="fa fa-shopping-cart"></i>
6 items
</a>
<a class="wcmenucart-contents" href="https://www.hetvignet.nl/aanvraag-patronen/" title="View your shopping cart">
<i class="fa fa-shopping-cart"></i>
6 items
</a>
</div>
<a class="wcmenucart-contents" href="https://www.hetvignet.nl/aanvraag-patronen/" title="View your shopping cart">
<i class="fa fa-shopping-cart"></i>
6 items
</a>
<a class="wcmenucart-contents" href="https://www.hetvignet.nl/aanvraag-patronen/" title="View your shopping cart">
<i class="fa fa-shopping-cart"></i>
6 items
</a>
</div>
Code (php)
1
2
3
4
5
6
2
3
4
5
6
$(whatever).click(function(e) { // <-- geef het event (e) door aan de callback functie
// voorkom default gedrag = volgen van de link
e.preventDefault();
// de rest
// ...
});
// voorkom default gedrag = volgen van de link
e.preventDefault();
// de rest
// ...
});
Dan geef je daar, naar mijn mening, een nogal raar URL formaat door aan de load() functie? Wat betekent die ' #cartcustom>*' aan het eind? En daarbij, hoe geef je aan die URL door welk item je toe wilt voegen aan de cart?
But first things first, voorkom dat de pagina ververst wordt door de toevoeging van .preventDefault().
Ik snap inderdaad dat het er wat gek uit kan zien. De techniek die er achter zit is Wordpress, maar ik probeer het winkelmandje dmv ajax te vernieuwen. Misschien had ik dat wat uitgebreider moeten uitleggen.
Met je code kreeg ik het helaas niet werkend. Ik heb vroeger wel wat javascript/actionscript gedaan, maar blijkbaar nog niet genoeg om dit te begrijpen.
Toen ik net zocht op het letterlijke probleem kwam ik toevallig een artikel tegen. Ik weet niet precies wat deze code doet, maar het werkt blijkbaar!
https://iconicwp.com/blog/update-custom-cart-count-html-ajax-add-cart-woocommerce/