Vernieuw inhoud div

Door Nien E op 19-06-2018 12:35

1.640 views

Al een paar dagen probeer ik het volgende probleem op te lossen.

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:


<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>

output:


<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>

Thomas van den Heuvel

19-06-2018 14:11

Ik denk dat het in eerste instantie verstandig is dat je het "default gedrag" van de hyperlink, wat het volgen van de hyperlink is (en daarmee wordt de pagina ververst), uit te schakelen. Hiertoe moet je wel het klik-event doorgeven aan de functie, dus zoiets:

$(whatever).click(function(e) { // <-- geef het event (e) door aan de callback functie
    // 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().

Nien E

19-06-2018 15:10

Dankjewel voor je antwoord Thomas!

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/

Reageren

Inloggen om te reageren