Shopping cart popup
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
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$("#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);
});
});
});
$(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
Dan zou ik eerder denken aan een asynchrone refresh met AJAX.
Gewijzigd op 14/12/2017 14:10:25 door - Ariën -
Over het algemeen moet je gewoon een css attribuut aanpassen:
Code (php)
1
$('#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:
Code (php)
1
2
3
2
3
<style>
#myModal { display: block !important; }
</style>
#myModal { display: block !important; }
</style>
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.
Gewijzigd op 14/12/2017 17:58:19 door Nick Vledder
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
Gewijzigd op 14/12/2017 17:06:42 door Thomas van den Heuvel
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?
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?
Gewijzigd op 14/12/2017 23:29:59 door Nick Vledder
Nick Vledder op 14/12/2017 23:05:28:
Veranderen URL kan ook clientside, zonder herladen pagina. Geen best practice overigens
Huh?
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)
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.
Gewijzigd op 15/12/2017 20:42:04 door Nick Vledder