Primera opción con efecto fade degradado, estilo mercado libre
Código
/**
* Añade funcionalidad de descripción expandible con efecto fade
* para la descripción corta de productos WooCommerce by Ariapsa México.
*/
// Añadir los estilos y scripts necesarios
add_action('wp_enqueue_scripts', 'enqueue_expandable_description_assets');
function enqueue_expandable_description_assets() {
if (is_product()) {
// Registrar y encolar el estilo inline
wp_register_style('expandable-description-styles', false);
wp_enqueue_style('expandable-description-styles');
wp_add_inline_style('expandable-description-styles', '
.short-description-wrapper {
position: relative;
max-height: 180px;
overflow: hidden;
margin-bottom: 20px;
transition: max-height 0.3s ease-out;
}
.short-description-wrapper.expanded {
max-height: 1000px;
}
.description-gradient {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px; /* Reduce la altura si no es visible */
background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
pointer-events: none;
transition: opacity 0.3s ease;
}
.short-description-wrapper.expanded .description-gradient {
opacity: 0;
}
.expand-description {
display: inline-block;
color: #2fac9c;
cursor: pointer;
font-weight: 500;
margin-top: 10px;
margin-bottom: 40px; /* Espacio adicional de 20px debajo del botón */
transition: color 0.3s ease;
}
.expand-description:hover {
color: #248f82;
}
');
// Registrar y encolar el script inline
wp_register_script('expandable-description-script', false);
wp_enqueue_script('expandable-description-script');
wp_add_inline_script('expandable-description-script', '
jQuery(document).ready(function($) {
var shortDesc = $(".woocommerce-product-details__short-description");
if (shortDesc.length) {
// Envolver el contenido en un div
shortDesc.wrapInner("<div class=\'short-description-wrapper\'></div>");
// Añadir el gradiente y el botón
$(".short-description-wrapper").append("<div class=\'description-gradient\'></div>");
shortDesc.append("<span class=\'expand-description\'>Ver descripción completa</span>");
var wrapper = $(".short-description-wrapper");
var expandBtn = $(".expand-description");
// Mostrar el botón solo si el contenido excede la altura máxima
if (wrapper[0].scrollHeight <= 100) {
expandBtn.hide();
$(".description-gradient").hide();
}
// Manejar el clic en el botón
expandBtn.on("click", function() {
wrapper.toggleClass("expanded");
if (wrapper.hasClass("expanded")) {
expandBtn.text("Ver menos");
} else {
expandBtn.text("Ver descripción completa");
// Scroll suave hacia arriba si el contenido está fuera de la vista
$("html, body").animate({
scrollTop: wrapper.offset().top - 100
}, 300);
}
});
}
});
');
}
}
Segunda opción (funciona)
Código
add_action( 'woocommerce_before_single_product', 'dl_comprimir_descripcion_corta_productos' );
function dl_comprimir_descripcion_corta_productos() {
wc_enqueue_js('
var show_char = 350;
var ellipses = "... ";
var content = $(".woocommerce-product-details__short-description").html();
if (content.length > show_char) {
var a = content.substring(0, show_char);
var html = "<span class=\'truncated\'>" + a + ellipses + "<a class=\'read-more\'>...Leer más</a></p></span><span class=\'truncated\' style=\'display:none\'>" + content + "<a class=\'read-less\'>...Leer menos</a></span>";
$(".woocommerce-product-details__short-description").html(html);
}
$(".read-more").click(function(e) {
e.preventDefault();
$(".woocommerce-product-details__short-description .truncated").toggle();
});
$(".read-less").click(function(e) {
e.preventDefault();
$(".woocommerce-product-details__short-description .truncated").toggle();
});
');
}