Jump to content

[Résolu] Fancybox & Ancres - Quelqu'un sait comment faire ?

Profette
 Share

Recommended Posts

Profette Newbie

Profette

Posted
Posted (edited)

Bonjour,

 

J'utilise la 1.6.0.6  et donc il y a des popup fancybox (images produits et autres).

J'ai rajouté le petit script dans le footer de mon thème et aucun problème pour faire apparaître le popup.

 

Ma question est plutôt au sujet des ancres en html.

 

Par exemple, j'ai un petit sommaire au début de mes CGU qui fonctionne bien et donc avec des ancres.

Ce que je voudrais faire est par exemple un lien vers mon paragraphe livraison et que cela apparaisse en popup avec fancy box.

 

Donc mon lien est :

http://www.monsite.be/cms/cgu-3?content_only=1#livraison

Mais ça ne fonctionne pas...
Le lien s'ouvre bien en popup mais ne prend pas en compte mon ancre et donc reste au début de la page...

 

Après quelques recherches sur google, j'ai vu que pas mal de fois la question restait ouverte...

 

Quelqu'un a déjà réussi à faire ça ?

 

 

Edited by Profette (see edit history)
Link to comment
Share on other sites
Profette Newbie

Profette

Posted
  • Author
Posted

Merci pour la piste !

Je n'ai cependant pas réussi à la tester car pour moi les modifications à faire ne m'apparaissent pas clairement...

 

Pour appeler déclencher le popup, c'est "class="iframe".

Le contenu est une page cms "href=./cms/cgu-3"

Puis l'ancre (qui est donc l'ID d'une DIV dans ma page cgu) "href=./cms/cgu-3#divId"

 

Et j'ai remarqué que lorsque mon PC était lent, il allait bien jusqu'à l'ancre mais remontait au début de la page.

J'imagine qu'une fonction qque part force la page à se positionner au début...

Link to comment
Share on other sites
loulou66 Rookie

loulou66

Posted
Posted

Coucou

 

je pense que tu est pas loin de la solution mais je trouve pas non plus

 

essaye de PM SWITCHBOARD qui avait le même probleme a qui l'a résolu d'après se que j'ai vu sur sont site

 

http://www.prestashop.com/forums/topic/333767-is-it-possible-to-include-an-anchor-link-in-a-link-fancybox/

 

son ! sur sa fiche produit affiche bein une fancybox avec l'ancre #license

 

@++

 

Loulou66

Link to comment
Share on other sites
loulou66 Rookie

loulou66

Posted
Posted (edited)

Coucou

 

il m'avait sembler que cela fonctionner tout a l'heurre :(

 

en regardant les option de fancybox je voit que l'on peut declarer le href dans le script ^^

 

j'ai donc test sur une PS 1.5.4.1 sur le condition générales de ventes

sur mon liens <a>

<a href="" class="iframe">{l s='(Read Terms of Service)'}</a>

dans le script

<script type="text/javascript">
	$('a.iframe').fancybox({
		href: 'url_complete_de _la page#tarifs'
		});
	</script>

cela m'affiche bien la pages CGV a la div id="tarifs"

 

on peut rajouter dans le script la hauteur et largeur pour le iframe

a savoir que si vous ne voulez pas les barre de scroll il faut rajouter scrolling: 'no' qui est a 'auto' par défaut

 

@++

 

Loulou66

Edited by loulou66 (see edit history)
Link to comment
Share on other sites
loulou66 Rookie

loulou66

Posted
Posted

Coucou

 

j'ai refait des test sur ma PS 1.6 vierge

alors bizzarement si je laisse la classe iframe dans la balise <a> ca bug ( plein de message d'erreur dans la fancy) si je met une class genre "myfancy" ça fonctionne :)

 

donc code source de ma page cms

<h2>Vos conditions de ventes</h2>
<div id="1">
<h3>Règle n°1</h3>
<p>Contenu de la règle numéro 1</p>
</div>
<div id="2">
<h3>Règle n°2</h3>
<p>Contenu de la règle numéro 2</p>
</div>
<div id="3">
<h3>Règle n°3</h3>
<p>Contenu de la règle numéro 3<br /><br /></p>
</div>
<div id="4">
<h3>Règle n°4</h3>
<p>Contenu de la règle numéro4<br /><br /></p>
</div>
<div id="5">
<h3>Règle n°5</h3>
<p>Contenu de la règle numéro 5<br /><br /></p>
</div>
<div id="6">
<h3>Règle n°6</h3>
<p>Contenu de la règle numéro 6<br /><br /></p>
</div>
<div id="7">
<h3>Règle n°7</h3>
<p>Contenu de la règle numéro 7</p>
</div>

liens dans le order-carrier.tpl

ligne 243
<a href="{$link_conditions|escape:'html':'UTF-8'}" class="myfancy" rel="nofollow">{l s='(Read the Terms of Service)'}</a>

script a la fin du order-carrier.tpl

<script type="text/javascript">
	$('a.myfancy').fancybox({
	type : 'iframe',
        autoSize : false,
        href : 'http://127.0.0.1/prestashop_1.6.0.6/content/3-conditions-generales-de-ventes#5',
       	scrolling : 'no',
       	height : 90		
	});
</script>

remplacer le href par votre url ^^

 

cela m'affiche bien "Contenu de la règle numéro 5" en 1er en haut de la fancybox par contre le titre Règle n°5 est caché une ligne trop haut

si je met dans mon code source des <p id="..."> a la place des <div id="..." et des <span> a  la place des <p>

la fancy m'affiche le début de la regle N°6 a partir de titre donc pour avoir la section n°5 je met #4 dans le href

 

a vos test :)

 

@++

 

Loulou66

 

  • Like 1
Link to comment
Share on other sites
Profette Newbie

Profette

Posted
  • Author
Posted (edited)

Lol !!!

Evidemment que je vais développer !  (Mwahahaha, je suis vraiment méchant :P mais pas trop :P )

 

Donc code source de la page cms (pour reprendre loulou66) :

<h2>Vos conditions de ventes</h2>
<div id="1">
<h3>Règle n°1</h3>
<p>Contenu de la règle numéro 1</p>
</div>
<div id="2">
<h3>Règle n°2</h3>
<p>Contenu de la règle numéro 2</p>
</div>
<div id="3">
<h3>Règle n°3</h3>
<p>Contenu de la règle numéro 3<br /><br /></p>
</div>
<div id="4">
<h3>Règle n°4</h3>
<p>Contenu de la règle numéro4<br /><br /></p>
</div>
<div id="5">
<h3>Règle n°5</h3>
<p>Contenu de la règle numéro 5<br /><br /></p>
</div>
<div id="6">
<h3>Règle n°6</h3>
<p>Contenu de la règle numéro 6<br /><br /></p>
</div>
<div id="7">
<h3>Règle n°7</h3>
<p>Contenu de la règle numéro 7</p>
</div>

Lien dans le order-carrier.tpl

ligne 243
<a href="http://www.monsite.be/content/3-conditions-generales-de-vente?content_only=1#5" class="myfancy" rel="nofollow">{l s='(Read the Terms of Service)'}</a>

Et le script

<script type="text/javascript">
	$('a.myfancy').fancybox({
	type : 'iframe',
        autoSize : false,
	});
</script>

Bref, l'argument magique est le autoSize : false

 

Ce qui m'a mis la puce à l'oreille est que comme je le disais plus haut :

 

Et j'ai remarqué que lorsque mon PC était lent, il allait bien jusqu'à l'ancre mais remontait au début de la page.

J'imagine qu'une fonction qque part force la page à se positionner au début...

 

Donc le autosize par défaut était sur true et forçait la page a se redéfinir et à revenir au début de la page !

 

C'est beau le travail d'équipe !

 

Merciiiiiiiii !!! :)

 

P.S. en Edit : En tout cas, ça fonctionne avec Internet Explorer, Chrome mais pas Firefox (il se positionne 1 paragraphe + tard, dans une autre div ?!??)

Edited by Profette (see edit history)
Link to comment
Share on other sites
loulou66 Rookie

loulou66

Posted
Posted

coucou

 

oui sous firefox il y a un décalage

sinon il y a peut être un autre solution vu que vous voulez afficher qu'une section d'une page cms

1°) créer un page cms avec que cette section

2°)  le lien devient  <a href= "$link->getCmsLink(id_cms, link_rewrite)" class="iframe">

4°) le script (copie du order-carrier.js du theme)

$(document).ready(function(){
     if (!!$.prototype.fancybox)
	$("a.iframe").fancybox({
		'type': 'iframe',
		'width': 600,
		'height': 600
   });
});

adaptez les valeur du width et height

 

cela n'afficheras donc que la section que vous voulez :)

 

@++

 

Loulou66

Link to comment
Share on other sites
  • 3 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...