[ASTUCE]Modification du carousel[RESOLU]

[Lactor]

Bonjour,

 

J'ai envie de modifier le module du homeslider, et mettre un carousel customisé à la place.

Suis-je obligée de passer par le développement d'un module, ou puis-je balancer mon code en modifiant les fichiers concernés ?

Ca a l'air bourrin, dit comme ça, mais j'ai déjà développé mon carousel, et je n'ai pas envie de le re-modifier pour en faire un module prestashop (du moins, pas pour le moment)... : |

Merci d'avance pour vos réponses !

 

 

Bonne soirée,

Okar

Edited November 7, 2014 by okar (see edit history)

[2FR3]

Bonjour,

Bien sur !

Il vous faut modifier le ou les tpl des pages concernées

[Lactor]

Bonjour 2FR3,

 

En effet, c'est ce que j'ai fini par faire.

J'ai repris le template du slider, ainsi que son css et js associé, et j'ai modifié directement dedans. En farfouillant, j'ai trouvé aussi des petites choses plutôt sympathiques.

Par exemple, sur le slider je voulais rajouter des flèches de défilement, je pensais qu'elles n'existaient pas, et en fait, il y avait une ligne de js à changer (si je peux me permettre de donner l'astuce, si d'autres personnes veulent customiser leur slider) :

 changer controls : false; à true. Et ensuite changer le css associé aux controls, parce de base, elles apparaissent en bas à gauche et collées.

[EDIT] en passant à true on les affiche, donc si on veut les enlever, il suffit simplement de passer à false. Après, pour gérer leur position, leur couleur et tout, c'est au niveu du css (les class sont nommées ainsi :

.bx-prev et .bx-next pour les flèches, et pour changer le tout, ce sont les class nommées .bx-controls-* (* = d'autres class, auto, direction, ...).

[/EDIT]

Dois-je marquer le topic en résolu, ou puis-je mettre [astuce] ?

 

Bonne journée,

 

Okar

Edited November 6, 2014 by okar (see edit history)

[2FR3]

Vous pouvez mettre les deux

Ceci dit, pour une astuce, je vous recommande de donner les sources aux membres

[Lactor]

Bah, les sources, c'est un truc que j'ai trouvé par moi-même, donc ça va être compliqué ^^' Je veux bien copier des bouts de code, mais c'est tout ce que j'aurai en source.

if (!!$.prototype.bxSlider)
		$('#homeslider').bxSlider({
			mode:'fade',
			useCSS: false,
			maxSlides: 1,
			slideWidth: homeslider_width,
			infiniteLoop: homeslider_loop,
			hideControlOnEnd: true,
			pager: true,
			autoHover: true,
			auto: homeslider_loop,
			speed: 1000,
			pause: homeslider_pause,
			controls: true
		});

Dans themes/montheme/js/modules/homeslider/js/homeslider.js, à la ligne 52, controls indique si les flèches de navigation sont activées (true) ou désactivées (false). Il suffit de changer ce paramètre pour faire apparaître ou disparaître les lfèches.

Pour pouvoir modifier par la suite la "beauté" de ces flèches, il faut se rendre dans themes/montheme/css/modules/homeslider/homeslider.css (les noms de fichiers sont explicites, c'est cool) :

#homepage-slider .bx-wrapper .bx-prev {
  left: -95px; }
  #homepage-slider .bx-wrapper .bx-prev:after {
    content: "\f053"; }
#homepage-slider .bx-wrapper .bx-next {
  right: -95px; }
  #homepage-slider .bx-wrapper .bx-next:after {
    content: "\f054"; }
#homepage-slider .bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 270px;
  outline: 0;
  width: 70px;
  height: 70px;
  text-indent: -9999px;
  z-index: 9999;
  /*border: 2px solid grey; */
  border-radius : 15px;}
  #homepage-slider .bx-wrapper .bx-controls-direction a:before {
    height: 70px;
    width: 70px;
    display: block;
    background: #660083;
	/* border: 2px solid grey; */
  border-radius : 15px;
    content: ".";
    opacity: 0.14;
	    color: #660083;
    text-indent: -9999px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1; }
  #homepage-slider .bx-wrapper .bx-controls-direction a:after {
    display: block;
    width: 70px;
    height: 70px;
    color: #660083;
	  /*border: 2px solid grey; */
  border-radius : 15px;
    text-indent: 0;
    text-align: center;
    font-size: 30px;
    font-family: "FontAwesome";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: 25px; }
  #homepage-slider .bx-wrapper .bx-controls-direction a:hover:before {
    background: #660083;
	color : #fff;
    opacity: 0.83; }
#homepage-slider .bx-wrapper .bx-controls-direction a.disabled {
  display: none; }
#homepage-slider .bx-wrapper .bx-controls-auto {
  text-align: center; }
#homepage-slider .bx-wrapper .bx-controls-auto .bx-start {
  display: block;
  text-indent: -9999px;
  width: 10px;
  height: 11px;
  outline: 0;
  background: url(images/controls.png) -86px -11px no-repeat;
  margin: 0 3px; }
#homepage-slider .bx-wrapper .bx-controls-auto .bx-start:hover,
#homepage-slider .bx-wrapper .bx-controls-auto .bx-start.active {
  background-position: -86px 0; }
#homepage-slider .bx-wrapper .bx-controls-auto .bx-stop {
  display: block;
  text-indent: -9999px;
  width: 9px;
  height: 11px;
  outline: 0;
  background: url(images/controls.png) -86px -44px no-repeat;
  margin: 0 3px; }
#homepage-slider .bx-wrapper .bx-controls-auto .bx-stop:hover,
#homepage-slider .bx-wrapper .bx-controls-auto .bx-stop.active {
  background-position: -86px -33px; }
#homepage-slider .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
  text-align: left;
  width: 80%; }
#homepage-slider .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
  right: 0;
  width: 35px; }

à partir de la ligne 133 on peut modifier l'apparence des flèches. Le code ci dessus est un code que j'ai modifié (couleur, taille, position).
Voilà pour l'astuce !

[EDIT] DAns themes/montheme/css/modules/homeslider/ il y a aussi un dossier images, qui contient les images de fond des flèches et du "loading". Vous pouvez les changer à votre gré, si vous ne changez pas les noms (sinon, le js et le css ne détecteront plus les fichiers, à moins d'aller faire uen manip' en plus, changer les noms des fichiers aux bons endroits ^^ ) [/EDIT]
En espérant que ça puisse aider quelqu'un d'autre (:

 

Okar

Edited November 7, 2014 by okar (see edit history)

[mktm20111]

Ou est-ce que je peut trouver le bouton du home slider? j'aimerais changer just sur l'une de mes images au lieu de acheter maintenant je veut mettre jouer maintenant