• Ajouter une fenêtre modale lors de l'ajout d'un produit sur oscommerce

    image de l'aticle Ajouter une fenêtre modale lors de l'ajout d'un produit sur oscommerce

    Dans includes/application_top.php
    Recherchez la ligne :

    if ($HTTP_GET_VARS['action'] == 'buy_now') {
    

    Rajoutez après la fermeture du if :

     elseif ($HTTP_GET_VARS['action'] == 'add_product') {
           $HTTP_GET_VARS['ajout_produit'] = 'true';
           $parameters = array('action', 'pid');
    // EOE: XSell 
          }
    


    Ensuite dans includes/header.php
    À la fin du fichier ajoutez

    <div id="background_premierefois"></div>
    <div id="boxes">
      <div id="dialog" class="window">
        <center>
          <b>Votre produit a été ajouté au panier, que souhaitez-vous faire?</b><br><br>
          <span><b><?php echo $cart->count_contents() . ' ' . PRODUCTS_SHOPPING_CART_HEADER ?></b></span>. <b><?php echo SUB_TITLE_TOTAL; ?></b><span> 
          <b><?php echo $cart->show_total(); ?> €</b></span><br><br>
       <a href="<?php echo tep_href_link(FILENAME_SHOPPING_CART); ?>"><?php echo tep_image('images/votre_panier.gif', 'votre panier'); ?></a>      <a href="<?php echo tep_href_link(FILENAME_CHECKOUT_SHIPPING); ?>"><?php echo tep_image('images/commander.gif', 'commander'); ?></a><br><br>
          <a type="button" class="close">>> Fermer la fenètre</a>
        </center>
      </div>
    </div>
    


    Enfin pour la mise en forme de votre fenêtre et l'appel à la galerie jquery entre les balises <head></head> de votre page dans un fichier étant appelé dans tous les autres fichiers de votre site de préférence mettez :

    <?php
    (isset($HTTP_GET_VARS['ajout_produit']) && $HTTP_GET_VARS['ajout_produit'] == 'true' && $cart->count_contents() > 0) {
    ?>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <style type="text/css">
    #background_premierefois { position: absolute; left: 0; top: 0; background-image: url('../../images/transparent_pres.png'); min-width:100%; min-height: 100%; z-index:200; }
    #boxes .window {position:absolute;left:0;top:0;width:auto;height:auto;display:none;z-index:9999;padding:20px; }
    #boxes #dialog {width:auto;height:auto;padding:10px;color:#fff;border:3px solid #fff;background-color:#000;}
    #boxes .close { cursor: pointer; float: right; margin: 10px 10px 0 0; }
    </style>
    <script type="text/javascript"> 
     jQuery.noConflict();
     
     jQuery(document).ready(function() { 
      var xH = jQuery(window).height();
      var xW = jQuery(window).width();
      jQuery("#dialog").css('top', xH/2-jQuery("#dialog").height()/2);
      jQuery("#dialog").css('left', xW/2-jQuery("#dialog").width()/2);
      jQuery("#dialog").fadeIn();         
      jQuery('.window .close').click(function () {
       jQuery("#background_premierefois").css('background', 'none');
       jQuery("#background_premierefois").css('display', 'none');
       jQuery("#background_premierefois").css('width', '0');
       jQuery("#background_premierefois").css('height', '0');
       jQuery('.window').hide();
      });  
     }); 
    </script>
    <?php 
    }
    ?>
    

    Pour savoir comment créer une fenètre modal avec jquery consultez la page suivante :
    Ajouter une publicité sur son site à la première visite de l'internaute.

Laissez un commentaire

* Votre e-mail ne sera jamais utilisé ou donné à un tiers

Recherche

Catégories

Newsletters

Archives