ZenCart. ¿Cómo modificar carousel de productos?

Este tutorial le ayudará a modificar carousel (carrusel) de productos en plantillas ZenCart.

1. Abra el fichero catalog\includes\templates\theme###\common\tpl_main_page.php
2. El carrusel es desarrollado por medio del diseño de lista no ordenada:

<ul> 
  <li class="one"><a  href="index.php?main_page=product_info&cPath=5&products_id=40"><?php  echo zen_image(DIR_WS_TEMPLATE.'images/pic1.jpg'); ?></a> 
  <span  class="info"> 
  <div  class="desc"> 
  <h5>Model  Name:</h5> 
  <p>Virgin  Mobile - Samsung Intercept. Red.</p> 
  <h5>Description:</h5> 
  <p>Lorem  ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  tempor<br><br> Encididunt ut labore et dolore magna aliqua. Ut enim  ad minim veniamquis</p> 
  <span  class="price1">$570</span> 
  <a  class="btn1"  href="index.php?main_page=product_info&cPath=5&products_id=40"><?php  echo zen_image(DIR_WS_TEMPLATE.'buttons/english/button_goto_prod_details.png');  ?></a> 
  </div> 
  </span> 
  </li> 
  <li class="two"><a  href="index.php?main_page=product_info&cPath=2&products_id=5"><?php  echo zen_image(DIR_WS_TEMPLATE.'images/pic2.jpg'); ?></a> 
  <span  class="info"> 
  <div  class="desc"> 
  <h5>Model  Name:</h5> 
  <p>Virgin  Mobile - Samsung Intercept. Red.</p> 
  <h5>Description:</h5> 
  <p>Lorem  ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  tempor<br><br> Encididunt ut labore et dolore magna aliqua. Ut enim  ad minim veniamquis</p> 
  <span  class="price1">$500</span> 
  <a  class="btn1"  href="index.php?main_page=product_info&cPath=2&products_id=5"><?php  echo zen_image(DIR_WS_TEMPLATE.'buttons/english/button_goto_prod_details.png');  ?></a> 
  </div> 
  </span> 
  </li> 
  </ul>

Cada producto es un elemento de la lista:

<li  class="two"><a  href="index.php?main_page=product_info&cPath=2&products_id=5"><?php  echo zen_image(DIR_WS_TEMPLATE.'images/pic2.jpg'); ?></a> 
  <span  class="info"> 
  <div  class="desc"> 
  <h5>Model  Name:</h5> 
  <p>Virgin  Mobile - Samsung Intercept. Red.</p> 
  <h5>Description:</h5> 
  <p>Lorem  ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  tempor<br><br> Encididunt ut labore et dolore magna aliqua. Ut enim  ad minim veniamquis</p> 
  <span  class="price1">$500</span> 
  <a  class="btn1" href="index.php?main_page=product_info&cPath=2&products_id=5"><?php  echo zen_image(DIR_WS_TEMPLATE.'buttons/english/button_goto_prod_details.png');  ?></a> 
  </div> 
  </span> 
  </li>
 

Vamos a ver lo que cada etiqueta define:

<a  href="index.php?main_page=product_info&cPath=2&products_id=5"><?php  echo zen_image(DIR_WS_TEMPLATE.'images/pic2.jpg'); ?></a>

Aquí puede cambiar la imagen del carrusel y el enlace de imagen. Para cambiar las imágenes del carrusel suba imágenes de sus productos al directorio catalog\includes\templates\theme###\images y cambie la raíz de imagen ‘images/pic2.jpg’ en el código anterior.

Para cambiar la descripción modifique:

<h5>Model  Name:</h5> 
<p>Virgin  Mobile - Samsung Intercept. Red.</p> 
<h5>Description:</h5> 
<p>Lorem ipsum dolor sit amet,  consectetur adipisicing elit, sed do eiusmod tempor<br><br>  Encididunt ut labore et dolore magna aliqua. Ut enim ad minim  veniamquis</p> 
<span  class="price1">$500</span>