<div id="fancyboxgetId()?>" class="fancybox fancy-popupbox" style="position:absolute; display:none;"> 
 
 
 __('Continue Shopping') ?> 
 
 <button onclick="setLocation('getBaseUrl();?>checkout/onepage')" class="button btn-checkout" title="Proceed to Checkout" type="button">__('Proceed to Checkout') ?> 
 
 

Qui s’appelle alors avec: –

 jQuery('.popup-text').html(data.message); jQuery('.fancy-popupbox').show(); 

Depuis la fonction de réussite dans la fonction setLocationAjax: –

 function setLocationAjax(url,id){ url += 'isAjax/1'; url = url.replace("checkout/cart","ajax/index"); jQuery('#ajax_loader'+id).show(); try { jQuery.ajax( { url : url, dataType : 'json', success : function(data) { jQuery('#ajax_loader'+id).hide(); jQuery('.popup-text').html(data.message); jQuery('.fancy-popupbox').show(); setAjaxData(data,false); } }); } catch (e) { } } 

Lorsque cette fonction est appelée à partir d’une modification du bouton Ajouter au panier: –

 <button type="button" title="__('Add to Cart') ?>" class="button btn-cart" onclick="setLocationAjax('getAddToCartUrl($_product) ?>','getId()?>')">__('Add to Cart') ?> 

Vous pouvez voir le balisage complet sur les pages liées à ci-dessus ou consulter le fichier list.phtml complet utilisé à cette pastebin (inclut également le script complet).

Donc, pour résumer, nous voulons essentiellement modifier le scénario 2 afin qu’il fonctionne comme le scénario 1.

Edit 1 from @ JFK’s Answer

Il n’a pas semblé aimer votre suggestion.

Quand j’ai implémenté …

 jQuery.fancybox.open('.fancy-popupbox'); 

La console est revenue …

 Uncaught TypeError: Object function (obj){var opts;if(busy){return;} busy=true;opts=typeof arguments[1]!=='undefined'?arguments[1]:{};selectedArray=[];selectedIndex=parseInt(opts.index,10)||0;if($.isArray(obj)){for(var i=0,j=obj.length;iselectedArray.length||selectedIndex<0){selectedIndex=0;} _start();} has no method 'open' 

Ainsi, le script complet ressemblait à ceci après la mise en œuvre …

 jQuery.noConflict(); jQuery(document).ready(function(){ jQuery('.fancybox').fancybox( { hideOnContentClick : true, width: 382, autoDimensions: true, type : 'iframe', showTitle: false, scrolling: 'no', onComplete: function(){ jQuery('#fancybox-frame').load(function() { // wait for frame to load and then gets it's height jQuery('#fancybox-content').height(jQuery(this).contents().find('body').height()+30); jQuery.fancybox.resize(); }); } } ); }); function showOptions(id){ jQuery('#fancybox'+id).sortinggger('click'); } function setAjaxData(data,iframe){ if(data.status == 'ERROR'){ alert(data.message); }else{ if(jQuery('.block-cart')){ jQuery('.block-cart').replaceWith(data.sidebar); } if(jQuery('.header .links')){ jQuery('.header .links').replaceWith(data.toplink); } jQuery.fancybox.close(); } } function setLocationAjax(url,id){ url += 'isAjax/1'; url = url.replace("checkout/cart","ajax/index"); jQuery('#ajax_loader'+id).show(); try { jQuery.ajax( { url : url, dataType : 'json', success : function(data) { jQuery('#ajax_loader'+id).hide(); jQuery('.popup-text').html(data.message); //jQuery('.fancy-popupbox').show(); jQuery.fancybox.open('.fancy-popupbox'); setAjaxData(data,false); } }); } catch (e) { } } 

Veuillez indiquer si un ajustement supplémentaire aurait été nécessaire. Merci.

Edit 2 Mise à jour Fancybox

J’ai mis à jour Fancybox de 1.3.4 à 2.1.4 (mais ce n’est pas sur le site actif lié à – c’est mis à jour sur une version dev). Donc, ce que nous avons besoin de réécrire pour fonctionner avec Fancybox 2, alors il semble maintenant.

Edit3 Progress Update

Je pense que je suis presque là, j’ai juste besoin d’aide pour convertir le texte ci-dessous en syntaxe correcte (je pense). Si quelqu’un pouvait aider à cela, ce serait fabuleux.

 jQuery.noConflict(); jQuery(document).ready(function( $ ){ $('.fancybox').fancybox( { hideOnContentClick : true, width: 382, autoDimensions: true, type : 'iframe', showTitle: false, scrolling: 'no', onComplete: function(){ $('#fancybox-frame').load(function() { // wait for frame to load and then gets it's height $('#fancybox-content').height(jQuery(this).contents().find('body').height()+30); $.fancybox.resize(); }); } } ); }); function showOptions(id){ $('#fancybox'+id).sortinggger('click'); } function setAjaxData(data,iframe){ if(data.status == 'ERROR'){ alert(data.message); }else{ if(jQuery('.block-cart')){ jQuery('.block-cart').replaceWith(data.sidebar); } if(jQuery('.header .links')){ jQuery('.header .links').replaceWith(data.toplink); } jQuery.fancybox.close(); } } function setLocationAjax(url,id){ url += 'isAjax/1'; url = url.replace("checkout/cart","ajax/index"); $('#ajax_loader'+id).show(); try { jQuery.ajax( { url : url, dataType : 'json', success : function(data) { //jQuery('#ajax_loader'+id).hide(); //jQuery('.popup-text').html(data.message); //jQuery('.fancy-popupbox').show(); //jQuery.fancybox.open('.fancy-popupbox'); jQuery.fancybox.open('.fancy-popupbox',{ // API options here }); setAjaxData(data,false); } }); } catch (e) { } } 

• Obtenir un fichier téléchargeable avec une requête ajax
• Différence entre le retour de ModelAndView dans un appel ajax
• beforeSend Objet xhr: Uncaught TypeError: Impossible de lire la propriété ‘addEventListener’ de undefined
• Impossible de cliquer sur le bouton plus d’une fois lors de l’ajout de données html
• Appel d’un service WCF avec jQuery ajax

 
 ...  

 jQuery('.fancy-popupbox').show(); 

 jQuery.fancybox.open('.fancy-popupbox'); 

 jQuery.fancybox.open('.fancy-popupbox',{ // API options here });