Insertar un vídeo de forma dinámica en la ficha de producto de Prestashop 1.6

En este vídeo se muestra cómo insertar un vídeo de forma dinámica en la descripción de la ficha de producto de Prestashop 1.6.

En este caso vamos a insertar un vídeo de Youtube, por lo que vamos a ver a continuación cómo obtener el código necesario del vídeo, para poder insertarlo en la ficha de producto de Prestashop 1.6; esto NO se explica en el vídeo, pero es muy sencillo.

Para comprender bien este artículo visualizar primero el vídeo, en él se habla de los códigos que aparecen en el resto del artículo. Después de ver el vídeo comprenderéis mejor el artículo.

Es muy recomendable hacer este ejercicio sobre un sitio en pruebas, de forma que si sale algo mal (aunque no tiene porqué), no perdamos ningún dato importante.

Obteniendo el código correspondiente al video de Youtube

Como vemos en la imagen de abajo solo tendríamos que clicar en la opción "Compartir" y luego en la pestaña "Insertar", y así obtendremos el iframe.

Obtener el código de compartir de un vídeo de Youtube

Hecho esto pasemos a ver los códigos necesarios.

El código HTML...

Del código que vemos abajo lo realmente importante es el atributo onclick() (que podríamos aplicarlo a cualquier elemento html), y el iframe, por lo que: onclick="nombre_funcion()" es lo que nos serviría y podríamos personalizar (cambiando el nombre a la función) según las necesidades de cada cual.

<h3 id="click_video" onclick="mostrar_video()">Modo de empleo</h3>
<p id="cont_video"><iframe src="https://www.youtube.com/embed/2-iInmkJl4c" width="560" height="315" frameborder="0"></iframe></p>

El código Javascript...

El código de abajo consiste en lo siguiente: Dependiendo de cuándo hagamos clic, a los elementos cuyo atributo id sea click_video o cont_video se les asigna una determinada clase.

var clic = 1;
function mostrar_video(){ 
   if(clic==1){
   document.getElementById('click_video').className = 'click';
   document.getElementById('cont_video').className = 'open';
   clic = clic + 1;
   } else{
       document.getElementById('click_video').className = 'no_click';
    document.getElementById('cont_video').className = 'close';     
    clic = 1;
   }   
   
}

Profundizando un poco más sería algo asi, teniendo en cuenta que una interacción se trata de un clic:

Un clic, otorga a var clic el valor 1, por lo que se ejecuta la instrucción de if.
Una segunda interacción o clic equivale a clic = clic + 1;, es decir, a 1 + 1, con lo que 1 + 1 = 2, o sea que no se cumple la instrucción if y se ejecuta el else.
Un tercero y último clic retorna el valor de var clic a 1, por lo que de nuevo se ejecuta el if, y así sucesivamente en un bucle interminable.

El código CSS...

El código CSS que vemos abajo podemos pegarlo en el archivo CSS que queramos, aunque lo más apropiado sería incluirlo en prestashop/themes/default-bootstrap/css/product.css, ya que en este archivo están las reglas CSS relativas la página de producto.

div#more_info_block h3#click_video {
  cursor: pointer;
  display: inline-block;
  margin-top: 8px;
}
 
div#more_info_sheets p#cont_video {
  height:0;
  opacity:0;
  margin:0;
  visibility:hidden;
}
   
div#more_info_block h3.click {
  margin-bottom:9px !important;
}

div#more_info_block h3.no_click {
  margin-bottom:9px !important;
}
   
div#more_info_block h3#click_video:after {
  content: "\f0d7";
  font-family:"FontAwesome";
  font-size: 1.2em;
  padding-left: 8px;
}

div#more_info_block h3.click:after {
  content: "\f0d8" !important;
}
  
div#more_info_sheets p.close {
  float: inherit;
  opacity: 0 !important;
  transition: 0.5s;
  visibility: hidden;
  height:0; }

div#more_info_sheets p.open {
 display:block !important;
    opacity: 1 !important;
    transition: 1s;
 visibility:visible !important;
 height:auto !important;
}

Y con esto termina este tutorial, espero que os sirva y suerte!

Insertar un vídeo de forma dinámica en la ficha de producto de Prestashop 1.6

No hay comentarios: