PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
Y

Shopping cart popup

Door Yoeri Achterbergen op 14-12-2017 13:57
3.401 views
Hi,


Wat ik probeer te bereiken is een popup wat geladen word als er op de winkelwagen button word geklikt.
De Jquery werkt op bijvoorbeeld codepen etc. maar op de site waar het daadwerkelijk moet gaan functioneren niet, wat komt door een refresh van de pagina.

Wat ik heb geprobeerd is het volgende

$("#show_popup").click(function() {
  $(window).on("load", function() {
    $("body").append('<div class="basket_overlay"></div>');
    $(".basket_overlay").fadeIn(400, function() {
      $(".ccjc_basket_popup").fadeIn(500);
    });
  });
});


Helaas krijg ik het niet werkend :(

Welke manier bestaat er om dit te creëren ?

Gr. Yoeri
Ariën
14-12-2017 14:10 gewijzigd op 14-12-2017 14:10
Hoe refresht die pagina zich? En waarom refresht die zich?
Dan zou ik eerder denken aan een asynchrone refresh met AJAX.
Frank Nietbelangrijk
14-12-2017 14:19
Wellicht bedoel je dat je de popup direct wilt zien na het laden van de pagina?

Over het algemeen moet je gewoon een css attribuut aanpassen:


$('#myModal').css('display: block;');


Maar persoonlijk vindt ik het in een dergelijk geval toch nog iets directer als je een style blok invoegt in de head van je html:


<style>
#myModal { display: block !important; }
</style>
Nick Vledder
14-12-2017 15:45 gewijzigd op 14-12-2017 17:58
@Yoeri
Kan het zijn dat jij regel 1 en regel 2 hebt verwisseld?

PS Ik weet ook niet of je liever zou kiezen voor: $( document ).ready(function() ...

... om vervolgens het click-event te koppelen aan het element met id "show_popup".

Verder is het beter te spreken over modal/ dialog.
Thomas van den Heuvel
14-12-2017 16:56 gewijzigd op 14-12-2017 17:06
Wat @Nick zegt, dit is een vreemde constructie.

Lees je code nog eens na:
Als je klikt op #show_popup moet er iets gebeuren, maar alleen als $(window).on("load") vuurt. Maar je kunt pas klikken op #show_popup als het document geladen is. En dan heeft $(window).on("load") al gevuurd, en zal dit waarschijnlijk niet opnieuw doen? Dus ergens is het niet zo verwonderlijk dat er niets gebeurt?

Splits dit in twee acties:
- het dynamisch toevoegen van de basket_overlay-div wanneer het document wordt geladen
- dingen die moeten gebeuren als je klikt op #show_popup

Je had ook wellicht de DOM kunnen inspecteren, waarschijnlijk komt de div hier in de huidige opzet helemaal niet in terug?

EDIT: en mogelijk moet je het default gedrag van de klikactie afvangen met .preventDefault() (of hoe dit ook heette), zodat de link (of wat dit element ook is) niet wegnavigeert van de huidige pagina.

EDIT #2: en wat @Nick dus zegt, als je je code niet omringt met $().ready() of equivalent is de pagina mogelijk nog niet geladen gereed op het moment dat de JavaScript wordt uitgevoerd. De huidige constructie is dus zodanig dat er meerdere momenten zijn waarop het mis kan gaan.
Y
Yoeri Achterbergen
14-12-2017 21:19
Dank voor de reactie’s hier ga ik even mee stoeien.
De site is extern gebouwd dus het is voor mij even zoeken waar wat staat qua codering.
Op het moment dat er een product in de winkelwagen word gestopt komt achteraan in de link ‘?justinbasket=true’ te staan.

De pagina word dus opnieuw geladen waardoor de link veranderd. De actie van het orderformulier word verwerkt in de index.php.
Kan ik dan alsnog werken met de jQuery default functie?
Nick Vledder
14-12-2017 23:05 gewijzigd op 14-12-2017 23:29
@Yoeri
Er zit nogal wat ruis in vraagstelling. Dus, keer ik even terug naar de vraag waarmee je bent begonnen. Het tonen van de modal/ dialog van de winkelwagen (uitgeklapt als het ware). Dit uitklappen (en inklappen eventueel, d.i. togglen) leent zich zeer prima voor clientside oplossing m.b.v. JS (bijv jQuery).

De HTML die je in 'uitgeklapte' vorm laat zien, kun je middels AJAX (jQuery e.a. bibliotheken) rechtstreeks van de server halen mochten bepaalde data nog niet voorhanden zijn in de browser.

PS 1. Veranderen URL kan ook clientside, zonder herladen pagina. Geen best practice overigens, maar evenmin uit te sluiten (door mij dan) dat het hier niet gebeurt.

2. Zelf ben ik niet zo'n fan van onnodig herladen pagina's (los van het feit of dat daadwerkelijk gebeurt). Mag ik vragen op basis van welk e-Commerce framework deze site is ontwikkeld?


R
Rob Doemaarwat
15-12-2017 10:13
Nick Vledder op 14/12/2017 23:05:28
Veranderen URL kan ook clientside, zonder herladen pagina. Geen best practice overigens

Huh?

Frank Nietbelangrijk
15-12-2017 18:33
>> Veranderen URL kan ook clientside, zonder herladen pagina. Geen best practice overigens

Veranderen URL kan tegenwoordig prima Clientside. Maar De nieuwe URL moet wel geldig zijn. Over het algemeen gebruik je dit nadat je een deel van de pagina voorzien hebt met nieuwe content. Deze content zou je ook te zien moeten krijgen als je de pagina opnieuw laadt met de nieuwe URL. (Althans dan ben je goed bezig in mijn optiek)
R
Rob Doemaarwat
15-12-2017 19:58
@Nick: History Object ken ik. Vroeg me alleen af waarom het geen "best practice" zou zijn?

Als je met window.onpopstate er voor zorgt dat de back en forward button gewoon blijven werken (zoals de gebruiker verwacht), en zoals Frank al zegt er voor zorgt dat de URL die je toont later (bijvoorbeeld na doorsturen of bij F5) ook weer precies hetzelfde resultaat geeft, dan lijkt mij d'r niks mis mee.

Reageren

Inloggen om te reageren