Vernieuw inhoud div

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Nien E

Nien E

19/06/2018 12:35:32
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


output:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>
 
PHP hulp

PHP hulp

14/07/2020 08:57:21
 
Thomas van den Heuvel

Thomas van den Heuvel

19/06/2018 14:11:42
Quote Anchor link
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:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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
    // ...
});

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

Nien E

19/06/2018 15:10:51
Quote Anchor link
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/
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.