SOLUCIONADO - Compactar la personalización de producto en la hoja de producto

[MarioCM]

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

 

 

Edited February 17, 2022 by MarioCM
Solucionado (see edit history)

[DNK-LUIFER]

En 17/2/2022 a las 12:09 PM, MarioCM dijo:

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

 

 

Muchas gracias.

Para que inicialmente aparezca compactada la sección de personalización ?

Genial para acortar la ficha.