Edit History

Buenas,

Quisiera modificar mi hoja de producto compactando la sección de las personalizaciones del producto, con algún sistema acordeon, para mejorar un poco la estética.

Edito con la solución por si alguien lo necesita, es muy sencillo:

Modificamos en product.tpl:

        	{if $product.is_customizable && count($product.customizations.fields)}
<!-- Acordeon-->
            <div id="accordion-container">
				<h2 class="accordion-header">{l s='Product customization' d='Shop.Theme.Catalog'}<span class="toggle-icon"></span></h2>
				<div class="accordion-content">
			  {block name='product_customization'}
                {include file="catalog/_partials/product-customization.tpl" customizations=$product.customizations}
              {/block}
			   </div>
			</div>  
            {/if}

Añadiendo el JS en core.js:

$(document).ready(function(){$('.accordion-header').toggleClass('inactive-header');var contentwidth = $('.accordion-header').width();$('.accordion-content').css({'width' : contentwidth });$('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');$('.accordion-content').first().slideDown().toggleClass('open-content');$('.accordion-header').click(function (){if($(this).is('.inactive-header')){$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');$(this).toggleClass('active-header').toggleClass('inactive-header');$(this).next().slideToggle().toggleClass('open-content');}else{$(this).toggleClass('active-header').toggleClass('inactive-header');$(this).next().slideToggle().toggleClass('open-content');}});return false;});

Y luego ya recolocar a gusto con el css.

Saludos!!

Buenas,

Quisiera modificar mi hoja de producto compactando la sección de las personalizaciones del producto, con algún sistema acordeon, para mejorar un poco la estética.

Alguien ha modificado algo pareciso para ver por dónde atacarlo?

Estoy probando con estas mopdificaciones en el product.tpl:

        	{if $product.is_customizable && count($product.customizations.fields)}
<!-- Acordeon-->
            <div class="accordion-container">
				<a href="#" class="accordion-titulo">{l s='Product customization' d='Shop.Theme.Catalog'}<span class="toggle-icon"></span></a>
				<div class="accordion-content">
			  {block name='product_customization'}
                {include file="catalog/_partials/product-customization.tpl" customizations=$product.customizations}
              {/block}
			   </div>
			</div>  
            {/if}

Añadiendo el JS en theme.js:

$(function(){
  $(".accordion-titulo").click(function(e){
           
        e.preventDefault();
    
        var contenido=$(this).next(".accordion-content");

        if(contenido.css("display")=="none"){ //open		
          contenido.slideDown(250);			
          $(this).addClass("open");
        }
        else{ //close		
          contenido.slideUp(250);
          $(this).removeClass("open");	
        }

      });
});

Pero de momento no me funciona...

Gracias!!