Avisos
Vaciar todo
Hola,
Tenía mi sitio con la plantilla yourshop y con Virtuemart 2.5 y Virtuemart 2.6. En el se podía ver la página de detalles de los productos con la descripción en un tab y las valoraciones en otro tab, según la imagen1 que adjunto, de manera que no ocupaba mucho pues sólo era visible una de las dos pestañas.
He dado el paso de adaptar todo el sitio a la plantilla epimeteo, siguiendo con jommla 2.5 y Virtuemart 2.6, para en breve dar el salto a jommla 3.x con virtuemart 3.x y publicarlo ya con dicha plantilla.
Por ello estoy mejorando cosas que necesito en la plantilla epimeteo con joomla 2.5 y, entre ellas, una de las carencias que veo es que en la vista del producto la descripción y las calificaciones salen a la vez, una cosa bajo la otra, de manera que ocupan mucho en vertical y la página se hace pesada por la altura que adquiere.
Viendo que en la plantilla yourshop me gustaba el que estos datos se mostrasen con tabs he visitado la web de Gavick y tras documentarme he realizado los cambios necesarios para recreaar estos tabs en la epimeteo con Jommla 2.5 y ha funcionado correctamente. No los he recreado en la vista de los productos, para no liarme, pues en breve quiero pasar a joomla 3.x pero los he recreado en un artículo y funcionan bien, podeis verlo aquí http://www.vision65.com/horario
El caso es que con los mismos cambios de código HTML y javascript no consigo que funcione en joomla 3.4 y virtuemart 3.0.4, con la misma plantilla. Analizando con Firebug veo que da un error en el archivo ../templates/epimeteo/js/script.js que es el que contiene la función necesaria para su funcionamiento y no se por que va.
La url del artículo de prueba que no funciona es http://visionco-cp76.webjoomla.es/copia/horario
A ver si me echais un cable.
Gracias y buenas noches.
URL del sitio: Contenido solo visible a usuarios registrados
Respondido : 20/04/2015 3:22 am
Hola
Revisa el siguiente artículo por si te es de utilidad:
Saludos
Respondido : 20/04/2015 4:04 am
Hola luis,
Ya lo he visto pero eso no vale para lo que yo digo. El DJ-VMPageBreak te permite crear tabs sólo y exclusivamente con el contenido que se escribe en la descripción del producto pero no interactua con el contenedor que muestra las calificaciones ocultándolo o mostrándolo.
Creo que al ser un joomla más moderno hay algún dato en la función de ese script que debe ser cambiado para adaptarse, pero no alcanzo a comprenderlo.
Quedo a la espera de alguna otra idea,
Dámaso.
Respondido : 20/04/2015 4:27 am
Hola,
Ignoro el sistema que has utilizado para cargar las pestañas en Joomla 2.5. Entiendo que has utilizado alguno de los plugins disponibles para Joomla que sirven para cargar datos en pestañas.
Si realmente has usado un plugin para cargar las pestañas lo primero que tendrías que hacer es asegurarte que el plugin es compatible con Joomla 3.
En todo caso dinos de forma detallada el sistema que has utilizado para añadir las pestañas.
Ten en cuenta que para mostrar los datos propios de Virtuemart (no solo la descripción) en pestañas será necesario modificar la plantilla que genera la ficha de producto, y esto puede llegar a ser relativamente complicado.
En concreto, para la plantilla Epimeteo los cambios habría que aplicarlos en el archivo templates/epimeteo/html/com_virtuemart/productdetails/default.php.
Respondido : 20/04/2015 12:45 pm
Hola Pablo, buenos días.
No, no he usado ningún plugin. Simplemete vi en el archivo de la vista del producto de la plantilla yourshop como estaba hecho el código para que alli se mostrase los datos en pestañas.
Con las pistas de ese código di con el siguiente post de gavick https://www.gavick.com/forums/esport/new-tab-in-product-description-19702 donde se confirmaba que con incluir tres fragmentos de código se hacía el sistema de tabs.
Como comentée ayer, no he querido implementarlo en el archivo de de la vista de detalle del producto por no liarme ahora, pero como el sistema es el mismo para poder implementarlo en un artículo de contenido lo he hecho, a modo de prueba en un artículo, pues si en el funciona también funcionará en el archivo de la vista del producto. Así me ahorro modificar ese fichero hasta no estar seguro de que funcionará.
Los pasos son
1) incluir el siguiente código que genera las pestañas:
- Pestaña 1
- Pestaña 2
2) A continuación este otro código que generará los contenedores para los datos que muestre cada pestaña:
Contenido de pestaña 1Contenido de pestaña 2
3) Finalmente hay que insertar el siguiente código en un archivo java que cargue la plantilla y que en el caso de Gavick recomienda hacerlo en el ../templates/gk_yourshop/js/gk.scripts.js
if(document.id('gkProductTabs')) {
document.id('gkComponent').addEvent('click', function(e){
var evt = new Event(e).target;
if((window.ie && evt.nodeName == 'SPAN') || (!window.ie && evt.get('tag') == 'span')) {
if($(evt).getParent().getParent().getProperty('id') == 'gkProductTabs') {
$$('.gkProductTab').addClass('gkUnvisible');
$$('#gkProductTabs li').setProperty('class', '');
var num = 0;
$$('#gkProductTabs li').each(function(el, i){
if(el == evt.getParent()){ num = i; }
});
$$('.gkProductTab')[num].removeClass('gkUnvisible');
$$('#gkProductTabs li')[num].setProperty('class', 'gkProductTabActive');
}
} else if((window.ie && evt.nodeName == 'LI') || (!window.ie && evt.get('tag') == 'li')) {
if($(evt).getParent().getProperty('id') == 'gkProductTabs') {
$$('.gkProductTab').addClass('gkUnvisible');
$$('#gkProductTabs li').setProperty('class', '');
var num = 0;
$$('#gkProductTabs li').each(function(el, i){
if(el == evt.getParent()){ num = i; }
});
$$('.gkProductTab')[num].removeClass('gkUnvisible');
$$('#gkProductTabs li')[num].setProperty('class', 'gkProductTabActive');
}
}
});
}
Dicho codigo debe ponerse dentro de la siguiente función window.addEvent('domready', function() quedando el resultado de la siguiente manera:
window.addEvent('domready', function(){
if(document.id('gkProductTabs')) {
document.id('gkComponent').addEvent('click', function(e){
var evt = new Event(e).target;
if((window.ie && evt.nodeName == 'SPAN') || (!window.ie && evt.get('tag') == 'span')) {
if($(evt).getParent().getParent().getProperty('id') == 'gkProductTabs') {
$$('.gkProductTab').addClass('gkUnvisible');
$$('#gkProductTabs li').setProperty('class', '');
var num = 0;
$$('#gkProductTabs li').each(function(el, i){
if(el == evt.getParent()){ num = i; }
});
$$('.gkProductTab')[num].removeClass('gkUnvisible');
$$('#gkProductTabs li')[num].setProperty('class', 'gkProductTabActive');
}
} else if((window.ie && evt.nodeName == 'LI') || (!window.ie && evt.get('tag') == 'li')) {
if($(evt).getParent().getProperty('id') == 'gkProductTabs') {
$$('.gkProductTab').addClass('gkUnvisible');
$$('#gkProductTabs li').setProperty('class', '');
var num = 0;
$$('#gkProductTabs li').each(function(el, i){
if(el == evt.getParent()){ num = i; }
});
$$('.gkProductTab')[num].removeClass('gkUnvisible');
$$('#gkProductTabs li')[num].setProperty('class', 'gkProductTabActive');
}
}
});
}
});
En las plantillas de Gavick este ../templates/gk_yourshop/js/gk.scripts.js ya lo carga la plantilla por defecto de manera que tal cual lo mencionado ya funcionan las pestañas alla donde insertes los códigos del paso 1 y 2.
En mi caso como la plantilla es otra he aprovechado el archivo /home/visionco/public_html/templates/epimeteo/js/script.js que trae la epimeteo y que viene vacío y alli he puesto el código del paso 3.
Luego para que dicho archivo lo cargue la plantilla he editado el ../templates/epimeteo/index.php y he activado la linea 38, pues sólo viene comentada, quedando asi:
$gantry->addScript("script.js");
Como toque final copié estos estilos de la plantilla yourhop para que en un principio se vea igual que en ella:
/* gk Product Tabs*/
#gkProductTabs li:hover,
#ui-tabs ul#tabs li:hover,
#gkProductTabs li.gkProductTabActive,
#ui-tabs ul#tabs li.current {background:#37B5DE !important;border-color: #37B5DE;}
#ui-tabs ul#tabs { padding:0 !important;}
.gkProductTab,
#ui-tabs .tabs { padding:20px; border:1px solid #d1d1d1; margin-top:20px; ;border-radius: 4px 4px 4px 4px; }
#ui-tabs .tabs {margin:0px 0 10px 0;}
#gkProductTabs li,
#ui-tabs ul#tabs li { margin:20px 10px 10px 0; background: url('../images/moduletable_header.png') repeat-x 0 0; border: 1px solid #D1D1D1;color: #383838;display: block;float: left;font-family: Arial,Verdana,sans-serif;font-size: 11px;font-weight: bold;height: 26px !important;line-height: 26px;;padding: 0 8px; border-radius: 4px 4px 4px 4px;}
#gkProductTabs li:hover,
#ui-tabs ul#tabs li:hover,
#gkProductTabs li.gkProductTabActive,
#ui-tabs ul#tabs li.current { color: #fff; cursor: pointer}
.gkUnvisible {height: 1px !important;left: -10000px !important; overflow: hidden !important; position: absolute !important;top: auto !important;width: 1px !important;}
.customer-reviews,
.availability {text-align:left;}
De esta manera en la plantilla epimeteo con Joomla 2.5 y Virtuemart 2.6 ya funciona. Sólo que en el arículo de prueba, pero de igual manera va si inserto los códigos de la parte 1 y 2 en el archivo templates/epimeteo/html/com_virtuemart/productdetails/default.php.
Pues bien todo esto, de idéntica forma lo pongo en la plantilla Epimeteo con Joomla 3.x y Vituemart 3.x de los packs tienda y en ellas no funciona.
Como comenté, probando con firebug la respuesta de dicho script en la plantilla con joomla 3 muestra un error que no se de que va, ya que mis conocimientos de estos temas son los que por el puro echo de ir aprendiendo de forma autodidacta he adquirido con los años. Pero he aprendido mucho con el empeño y con la mejor forma de hacerlo que es la prueba, el error e ir siempre un paso más alla usando como base lo ya aprendido.
Espero haberme explicado lo suficientemente claro para que sepas todo con detalle y te sugeriría que estos tabs o algo parecido no les vendría mal a los nuevos packs de gantry.
Todos muestran los productos de igual manera y si la pantalla con que ves el producto es de un móvil la ventana visible es infinitamente alta al no ocultarse ningun contenido de la misma.
Creo que, pensando en los dispositivos móviles, las plantillas tienen que ofrecer botones que muestren lo que se desea ver, ocultando el resto de manera que en el mínimo espacio posible se muestre lo máximo y necesario para hacer grata la visita al sitio.
Saludos y muchas gracias Pablo.
Dámaso.
Respondido : 20/04/2015 2:08 pm
Hola
Lo que envías puede funcionar para artículos y para contenido que tu definas manualmente pero no para la manera de mostrar los apartados de virtuemart, si te das cuenta en los pasos para definir los tabs en tu caso tendrías que realizar modificaciones a los archivos de virtuemart para separar la funcionalidad en tabs
Es un tema de programación y no podemos darte detalle sólo generalidades
Lo más recomendable es que evalues lo que te comentó Alejo con el artículo de tabs como parte de la descripción.
Saludos
Respondido : 20/04/2015 10:32 pm
