Newsletter dans une fancybox

[loulou66]

Coucou

 

voici une petite astuce pour ouvrir l'inscription a la newsletter dans une fancybox a l'aide d'un lien dans le header pour PS 1.6+

 

2 solution :

- une sans afficher le block dans le footer

- une avec le block dans le footer + le liens en header

 

premiere solution sans afficher le block dans le footer

 

1°)  Editez le fichier theme/votre_theme/blocknewsletter/blocknewsletter.tpl

2°)  pour éviter d’utiliser le même tpl si votre newsletter est aussi dans un colonne ou autre part dans votre boutique on va le dupliquer avec un autre nom dans le menu fichier cliquez sur enregistrer une copie

toujours dans theme/votre_theme/blocknewsletter donner le nom blocknewsletter_footer.tpl

3°)  Dans ce nouveau fichier rajouter pour cacher ce tpl

<div style="display:none">
apres
<!-- Block Newsletter module-->
et
</div>
avant
<!-- /Block Newsletter module-->

4°)  Modifier 

<div id="newsletter_block_left" class="block">
par
<div id="newsletter_block_left_footer" class="block">

5°)  Rajouter a la fin du fichier

<script type="text/javascript">
     $(document).ready(function() {
      $("#displaynewsletter").fancybox({
             'titlePosition'     : 'inside',
             'transitionIn'      : 'elastic',
             'transitionOut'     : 'elastic',
             'autoResize'        : 'false',
             'autoSize'          : 'false',
             'autoWidth '        : 'false',
             'minWidth'          : 250,
         });
     });
     </script>

6°)  Enregistrez et fermer le fichier

7°)  Editez le fichier modules/blocknewsletter/blocknewsletter.php

8°)  Recherchez

public function hookFooter($params)
{
return $this->hookDisplayLeftColumn($params);
}
remplacer par
public function hookFooter($params)
{
$this->_prepareHook($params);
return $this->display(__FILE__, 'blocknewsletter_footer.tpl');
}

9°) Enregistrez et fermer le fichier

10°) Editez le fichier  theme/votre_theme/blockcontact/nav.tpl

        rajoutez le liens avec

<div id="contact-link">
<a id="displaynewsletter" href="#newsletter_block_left_footer" title="{l s='Newsletter' mod='blockcontact'}">{l s='Newsletter' mod='blockcontact'}</a>
</div>

11°) Enregistrez le fichier et fermez

12°) Optionnel pour enlever le + surle titre Newletter pour les telephones 

editez le fichier  theme/votre_theme/css/blocknewsletter/blocknewsletter.css

a la fin du fichier rajouter avec la declaration pour la fancybox

 #fancybox-wrap .block h4:after, .fancybox-wrap .block h4:after {content: "";}

13°) Enregistrez et fermez

 

deuxieme solution avec le block dans le footer + le liens en header

 

1°)  Editez le fichier theme/votre_theme/blocknewsletter/blocknewsletter.tpl

2°)  copier le contenu html de

<!-- Block Newsletter module-->
 a
 <!-- /Block Newsletter module-->
 et coller le apres
<!-- /Block Newsletter module-->

3°)  rajoutez pour cacher cette partie

<div style="display:none">
apres le 2ieme
<!-- Block Newsletter module-->
et
</div>
avant le 2ieme
<!-- /Block Newsletter module-->

4°)  Modifiez 

<div id="newsletter_block_left" class="block">
par
<div id="newsletter_block_left_footer" class="block">

5°)  Rajoutez à la fin du fichier

<script type="text/javascript">
     $(document).ready(function() {
      $("#displaynewsletter").fancybox({
             'titlePosition'     : 'inside',
             'transitionIn'      : 'elastic',
             'transitionOut'     : 'elastic',
             'autoResize'        : 'false',
             'autoSize'          : 'false',
             'autoWidth '        : 'false',
             'minWidth'          : 250,
         });
     });
     </script>

6°) Editez le fichier  theme/votre_theme/blockcontact/nav.tpl

rejoutez le liens avec

<div id="contact-link">
<a id="displaynewsletter" href="#newsletter_block_left_footer" title="{l s='Newsletter' mod='blockcontact'}">{l s='Newsletter' mod='blockcontact'}</a>
</div>

7°) Enregistrez le fichier et fermez

8°) Optionnel pour enlever le + sur le titre Newletter pour les téléphones 

editez le fichier theme/votre_theme/css/blocknewsletter/blocknewsletter.css

à la fin du fichier rajoutez avec la declaration pour la fancybox 

 #fancybox-wrap .block h4:after, .fancybox-wrap .block h4:after {content: "";}

9°) Enregistrez et fermez

 

Dans cette deuxième solution la fancybox afficheras la partie cacher du tpl qui se trouve dans le footer et le 1er partie sera toujours opérationnelle avec les fonction normal du module

 

 

Voilou

 

@++

 

Loulou66

Edited November 10, 2014 by loulou66 (see edit history)