Jump to content

Rollover en imagenes de productos

David Aguilar

By David Aguilar
in Discusión general

 Share

Recommended Posts

David Aguilar Newbie

David Aguilar

Posted
Posted

Buen dia estimados,

Tengo una situación que llevo aproximadamente 4 días sin resolver. Se trata de una característica que tiene la plantilla que compre pero que no la veo activada en mi tienda online. 
La plantilla que adquirí es esta: https://ld-prestashop.template-help.com/next-pres-electronics/index.php La función que hace que se muevan los productos al pasar sobre ellos es la función que no aparece en mi proyecto. http://verdehn.com/PajaroAzul/index.php 

En la plantilla los productos tienen una clase activa llamada> class="thumbnails-rollover horizontal_slide"
En mi tienda los productos tienen una clase activa llamada>  class="carousel-item active"

Me fije que si sustituyo la clase Rollover en mi clase Carousel, se activa el movimiento del producto, pensando en esto, fui al archivo donde esta esta clase class="carousel-item active" para sustituirla que es el archivo: <!-- begin modules/jxproductlistgallery/views/templates/hook/jxproductlistgallery.tpl -->
                    Este archivo contiene el siguiente código: 

{if $smarty_settings.st_display && !($smarty_settings.st_type == 'slideshow' && !$smarty_settings.st_slider_pager && !$smarty_settings.st_slider_controls)}
  {if $smarty_settings.st_type == 'rollover'}
    <div class="thumbnails-rollover horizontal_slide}">
      {foreach from=$product.images item=image name=image}
        {if $image.cover}
          <img
            class="img-fluid"
            src = "{$image.bySize.home_default.url}"
            alt = "{if !empty($image.legend)}{$image.legend}{else}{$product.name|truncate:30:'...'}{/if}"
            data-full-size-image-url = "{$image.large.url}"
          >
          {assign var="isCover" value=true}
        {/if}
      {/foreach}
      {foreach from=$product.images item=image name=image}
        {if $image.cover}{assign var="isCoverDuplicate" value=true}{continue}{/if}
        <img
          class="img-fluid"
          src = "{$image.bySize.home_default.url}"
          alt = "{if !empty($image.legend)}{$image.legend}{else}{$product.name|truncate:30:'...'}{/if}"
          data-full-size-image-url = "{$image.large.url}"
        >
        {if (isset($isCover) && $isCover && !isset($isCoverDuplicate) && $smarty.foreach.image.first) || $smarty.foreach.image.iteration == 2}{break}{/if}
      {/foreach}
    </div>
    
  {else}
    <div class="thumbnails-carousel slide {$smarty_settings.st_type}">
      <div class="carousel-inner">
        {foreach from=$product.images item=image name=image}
          <div class="carousel-item{if $image.cover} active{/if}"> <!-- Aqui es donde estaba agregando la clase Rollover, pero no me funciona -->
            <img
              class="img-fluid"
              src = "{$image.bySize.home_default.url}"
              alt = "{if !empty($image.legend)}{$image.legend}{else}{$product.name|truncate:30:'...'}{/if}"
              data-full-size-image-url = "{$image.large.url}"
            >
          </div>
          {if $smarty.foreach.image.iteration == $smarty_settings.st_nb_items}
            {break}
          {/if}
          {if $smarty_settings.st_type == 'gallery' && !$smarty_settings.st_gall_carousel && $smarty.foreach.image.iteration == $smarty_settings.st_visible}
            {break}
          {/if}
        {/foreach}
      </div>
      
      
      {if ($smarty_settings.st_type == 'gallery') || ($smarty_settings.st_type == 'slideshow' && $smarty_settings.st_slider_pager)}
        <ol class="carousel-indicators">
          {foreach from=$product.images item=image name=image}
            <li data-slide-to="{$smarty.foreach.image.iteration - 1}"{if $image.cover} class="active"{/if}{if $smarty_settings.st_type == 'gallery'} style="width: calc(100%/{$smarty_settings.st_visible})"{/if}>
              {if $smarty_settings.st_type == 'gallery'}
                <img
                  class="img-fluid"
                  src = "{$image.small.url}"
                  alt = "{if !empty($image.legend)}{$image.legend}{else}{$product.name|truncate:30:'...'}{/if}"
                >
              {/if}
            </li>
            {if $smarty.foreach.image.iteration == $smarty_settings.st_nb_items}
              {break}
            {/if}
            {if $smarty_settings.st_type == 'gallery' && !$smarty_settings.st_gall_carousel && $smarty.foreach.image.iteration == $smarty_settings.st_visible}
              {break}
            {/if}
          {/foreach}
        </ol>
      {/if}
      {if ($smarty_settings.st_type == 'slideshow' && $smarty_settings.st_slider_controls)}
        <span class="left carousel-control">
          <i class="fa fa-chevron-left" aria-hidden="true"></i>
        </span>
        <span class="right carousel-control">
          <i class="fa fa-chevron-right" aria-hidden="true"></i>
        </span>
      {/if}
    </div>
  {/if}
{/if}


image.thumb.png.de46d5b87315b1d14c4e1ea0b1727d33.pngDespués de cambiar la clase que comento en el código, suceden 2 cosas, la primera, se mueve la imagen pero la imagen siguiente imagen esta en blanco, y lo segundo, me duplica mis cards de productos, adjunto imagen de lo que menciono.

 

 

 

 

 

 

 

 


En el inspector de elementos de mi explorador funciona pero hago 2 cosas para que se vea el efecto de pasar de una imagen a otra de la siguiente forma: 


<!-- Codigo Original -->
<div class="thumbnails-carousel slide gallery">
      <div class="carousel-inner">
          <div class="carousel-item">
            <img class="img-fluid" src="http://verdehn.com/PajaroAzul/img/p/1/6/0/9/1609-home_default.jpg" alt="BATERÍA ACÚSTICA MAPEX ARMORY" data-full-				size-				image-url="http://verdehn.com/PajaroAzul/img/p/1/6/0/9/1609-large_default.jpg">
          </div>
          <div class="carousel-item active">
            <img class="img-fluid" src="http://verdehn.com/PajaroAzul/img/p/1/6/1/0/1610-home_default.jpg" alt="BATERÍA ACÚSTICA MAPEX ARMORY" data-full-					size-				image-url="http://verdehn.com/PajaroAzul/img/p/1/6/1/0/1610-large_default.jpg">
           </div>
           <div class="carousel-item">
            <img class="img-fluid" src="http://verdehn.com/PajaroAzul/img/p/1/6/1/1/1611-home_default.jpg" alt="BATERÍA ACÚSTICA MAPEX ARMORY" data-full-					size-			image-url="http://verdehn.com/PajaroAzul/img/p/1/6/1/1/1611-large_default.jpg">
           </div>
</div>

<!-- Codigo Modificado -->
<div class="thumbnails-carousel slide gallery">
      <div class="carousel-inner">
          <div class="carousel-item">
            <img class="img-fluid" src="http://verdehn.com/PajaroAzul/img/p/1/6/0/9/1609-home_default.jpg" alt="BATERÍA ACÚSTICA MAPEX ARMORY" data-full-				size-				image-url="http://verdehn.com/PajaroAzul/img/p/1/6/0/9/1609-large_default.jpg">
          </div>
          <div class="thumbnails-rollover horizontal_slide">
            <img class="img-fluid" src="http://verdehn.com/PajaroAzul/img/p/1/6/1/0/1610-home_default.jpg" alt="BATERÍA ACÚSTICA MAPEX ARMORY" data-full-				size-image-url="http://verdehn.com/PajaroAzul/img/p/1/6/1/0/1610-large_default.jpg">
			<img class="img-fluid" 										 src="http://verdehn.com/PajaroAzul/img/p/1/6/1/0/1610-home_default.jpg" 			              alt="BATERÍA ACÚSTICA MAPEX ARMORY" data-full-size-image-url="http://verdehn.com/PajaroAzul/img/p/1/6/1/0/1610-large_default.jpg">
          </div>
          <div class="carousel-item">
            <img class="img-fluid" src="http://verdehn.com/PajaroAzul/img/p/1/6/1/1/1611-home_default.jpg" alt="BATERÍA ACÚSTICA MAPEX ARMORY" data-full-                size-image-url="http://verdehn.com/PajaroAzul/img/p/1/6/1/1/1611-large_default.jpg">
          </div>
      </div>
</div>


Alguien me pueda dar una pista de como solucionarlo?

Agradezco su tiempo,

Saludos cordiales.

Link to comment
Share on other sites
David Aguilar Newbie

David Aguilar

Posted
  • Author
Posted
16 minutes ago, David Aguilar said:

Buen dia estimados,

Tengo una situación que llevo aproximadamente 4 días sin resolver. Se trata de una característica que tiene la plantilla que compre pero que no la veo activada en mi tienda online. 
La plantilla que adquirí es esta: https://ld-prestashop.template-help.com/next-pres-electronics/index.php La función que hace que se muevan los productos al pasar sobre ellos es la función que no aparece en mi proyecto. http://verdehn.com/PajaroAzul/index.php 

En la plantilla los productos tienen una clase activa llamada> class="thumbnails-rollover horizontal_slide"
En mi tienda los productos tienen una clase activa llamada>  class="carousel-item active"

Me fije que si sustituyo la clase Rollover en mi clase Carousel, se activa el movimiento del producto, pensando en esto, fui al archivo donde esta esta clase class="carousel-item active" para sustituirla que es el archivo: <!-- begin modules/jxproductlistgallery/views/templates/hook/jxproductlistgallery.tpl -->
                    Este archivo contiene el siguiente código: 


{if $smarty_settings.st_display && !($smarty_settings.st_type == 'slideshow' && !$smarty_settings.st_slider_pager && !$smarty_settings.st_slider_controls)}
  {if $smarty_settings.st_type == 'rollover'}
    <div class="thumbnails-rollover horizontal_slide}">
      {foreach from=$product.images item=image name=image}
        {if $image.cover}
          <img
            class="img-fluid"
            src = "{$image.bySize.home_default.url}"
            alt = "{if !empty($image.legend)}{$image.legend}{else}{$product.name|truncate:30:'...'}{/if}"
            data-full-size-image-url = "{$image.large.url}"
          >
          {assign var="isCover" value=true}
        {/if}
      {/foreach}
      {foreach from=$product.images item=image name=image}
        {if $image.cover}{assign var="isCoverDuplicate" value=true}{continue}{/if}
        <img
          class="img-fluid"
          src = "{$image.bySize.home_default.url}"
          alt = "{if !empty($image.legend)}{$image.legend}{else}{$product.name|truncate:30:'...'}{/if}"
          data-full-size-image-url = "{$image.large.url}"
        >
        {if (isset($isCover) && $isCover && !isset($isCoverDuplicate) && $smarty.foreach.image.first) || $smarty.foreach.image.iteration == 2}{break}{/if}
      {/foreach}
    </div>
    
  {else}
    <div class="thumbnails-carousel slide {$smarty_settings.st_type}">
      <div class="carousel-inner">
        {foreach from=$product.images item=image name=image}
          <div class="carousel-item{if $image.cover} active{/if}"> <!-- Aqui es donde estaba agregando la clase Rollover, pero no me funciona -->
            <img
              class="img-fluid"
              src = "{$image.bySize.home_default.url}"
              alt = "{if !empty($image.legend)}{$image.legend}{else}{$product.name|truncate:30:'...'}{/if}"
              data-full-size-image-url = "{$image.large.url}"
            >
          </div>
          {if $smarty.foreach.image.iteration == $smarty_settings.st_nb_items}
            {break}
          {/if}
          {if $smarty_settings.st_type == 'gallery' && !$smarty_settings.st_gall_carousel && $smarty.foreach.image.iteration == $smarty_settings.st_visible}
            {break}
          {/if}
        {/foreach}
      </div>
      
      
      {if ($smarty_settings.st_type == 'gallery') || ($smarty_settings.st_type == 'slideshow' && $smarty_settings.st_slider_pager)}
        <ol class="carousel-indicators">
          {foreach from=$product.images item=image name=image}
            <li data-slide-to="{$smarty.foreach.image.iteration - 1}"{if $image.cover} class="active"{/if}{if $smarty_settings.st_type == 'gallery'} style="width: calc(100%/{$smarty_settings.st_visible})"{/if}>
              {if $smarty_settings.st_type == 'gallery'}
                <img
                  class="img-fluid"
                  src = "{$image.small.url}"
                  alt = "{if !empty($image.legend)}{$image.legend}{else}{$product.name|truncate:30:'...'}{/if}"
                >
              {/if}
            </li>
            {if $smarty.foreach.image.iteration == $smarty_settings.st_nb_items}
              {break}
            {/if}
            {if $smarty_settings.st_type == 'gallery' && !$smarty_settings.st_gall_carousel && $smarty.foreach.image.iteration == $smarty_settings.st_visible}
              {break}
            {/if}
          {/foreach}
        </ol>
      {/if}
      {if ($smarty_settings.st_type == 'slideshow' && $smarty_settings.st_slider_controls)}
        <span class="left carousel-control">
          <i class="fa fa-chevron-left" aria-hidden="true"></i>
        </span>
        <span class="right carousel-control">
          <i class="fa fa-chevron-right" aria-hidden="true"></i>
        </span>
      {/if}
    </div>
  {/if}
{/if}


image.thumb.png.de46d5b87315b1d14c4e1ea0b1727d33.pngDespués de cambiar la clase que comento en el código, suceden 2 cosas, la primera, se mueve la imagen pero la imagen siguiente imagen esta en blanco, y lo segundo, me duplica mis cards de productos, adjunto imagen de lo que menciono.

 

 

 

 

 

 

 

 


En el inspector de elementos de mi explorador funciona pero hago 2 cosas para que se vea el efecto de pasar de una imagen a otra de la siguiente forma: 



<!-- Codigo Original -->
<div class="thumbnails-carousel slide gallery">
      <div class="carousel-inner">
          <div class="carousel-item">
            <img class="img-fluid" src="http://verdehn.com/PajaroAzul/img/p/1/6/0/9/1609-home_default.jpg" alt="BATERÍA ACÚSTICA MAPEX ARMORY" data-full-				size-				image-url="http://verdehn.com/PajaroAzul/img/p/1/6/0/9/1609-large_default.jpg">
          </div>
          <div class="carousel-item active">
            <img class="img-fluid" src="http://verdehn.com/PajaroAzul/img/p/1/6/1/0/1610-home_default.jpg" alt="BATERÍA ACÚSTICA MAPEX ARMORY" data-full-					size-				image-url="http://verdehn.com/PajaroAzul/img/p/1/6/1/0/1610-large_default.jpg">
           </div>
           <div class="carousel-item">
            <img class="img-fluid" src="http://verdehn.com/PajaroAzul/img/p/1/6/1/1/1611-home_default.jpg" alt="BATERÍA ACÚSTICA MAPEX ARMORY" data-full-					size-			image-url="http://verdehn.com/PajaroAzul/img/p/1/6/1/1/1611-large_default.jpg">
           </div>
</div>

<!-- Codigo Modificado -->
<div class="thumbnails-carousel slide gallery">
      <div class="carousel-inner">
          <div class="carousel-item">
            <img class="img-fluid" src="http://verdehn.com/PajaroAzul/img/p/1/6/0/9/1609-home_default.jpg" alt="BATERÍA ACÚSTICA MAPEX ARMORY" data-full-				size-				image-url="http://verdehn.com/PajaroAzul/img/p/1/6/0/9/1609-large_default.jpg">
          </div>
          <div class="thumbnails-rollover horizontal_slide">
            <img class="img-fluid" src="http://verdehn.com/PajaroAzul/img/p/1/6/1/0/1610-home_default.jpg" alt="BATERÍA ACÚSTICA MAPEX ARMORY" data-full-				size-image-url="http://verdehn.com/PajaroAzul/img/p/1/6/1/0/1610-large_default.jpg">
			<img class="img-fluid" 										 src="http://verdehn.com/PajaroAzul/img/p/1/6/1/0/1610-home_default.jpg" 			              alt="BATERÍA ACÚSTICA MAPEX ARMORY" data-full-size-image-url="http://verdehn.com/PajaroAzul/img/p/1/6/1/0/1610-large_default.jpg">
          </div>
          <div class="carousel-item">
            <img class="img-fluid" src="http://verdehn.com/PajaroAzul/img/p/1/6/1/1/1611-home_default.jpg" alt="BATERÍA ACÚSTICA MAPEX ARMORY" data-full-                size-image-url="http://verdehn.com/PajaroAzul/img/p/1/6/1/1/1611-large_default.jpg">
          </div>
      </div>
</div>


Alguien me pueda dar una pista de como solucionarlo?

Agradezco su tiempo,

Saludos cordiales.

Se me olvida mencionar que aqui hay una parte en la que menciona esto, pero no se en donde debo activar esas Smarty_settings para ponerlas como type 'Rollover' 

{if $smarty_settings.st_type == 'rollover'}
    <div class="thumbnails-rollover horizontal_slide}">
      {foreach from=$product.images item=image name=image}
        {if $image.cover}
          <img
            class="img-fluid"
            src = "{$image.bySize.home_default.url}"
            alt = "{if !empty($image.legend)}{$image.legend}{else}{$product.name|truncate:30:'...'}{/if}"
            data-full-size-image-url = "{$image.large.url}"
          >
          {assign var="isCover" value=true}
        {/if}

 

Link to comment
Share on other sites

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...