Avisos
Vaciar todo
Hola,
Al acceder a una categoría de mi tienda en dispositivo móvil he observado que carga el bloque 'left column' (con los módulos de navegación por facetas, promociones especiales, etc) en primer lugar y desaparece al poco tiempo y se mueve al final de la página. Esto provoca un retraso en la carga de los productos y además da tiempo a ver como carga el bloque 'left column' antes de desaparecer (efecto visual raro porque aparece y desaparece).
Revisando el header.tpl de mi tienda he visto que en primer lugar carga el div con el bloque 'left column' y luego a continuación el div con el bloque 'center column'. En el ordenador no hay ningún problema ya que en el ancho de la página se ve todo a la vez.
Para corregir este problema en móvil se me han ocurrido dos formas:
-Invertir directamente la posición de los bloques en el header.tpl haciendo que el div 'center column' cargue antes que el div 'left column'
He probado esta forma (no se si correctamente) pero al cargar antes el bloque central lo cambia de posición y lo coloca a la izquierda y el bloque left column lo coloca a la derecha (supongo que habrá algún fichero que indique que el primer bloque que aparece lo cargue a la izquierda y el segundo a la derecha) ¿Hay alguna forma de corregir ésto?
-La otra forma que se me ocurre es aplazar la carga del bloque left column en móvil con javascript (no tengo ni idea de si se puede hacer ni de cómo hacerlo)
Espero haberme explicado bien,
Muchas gracias por la ayuda.
URL del sitio: Contenido solo visible a usuarios registrados
Respondido : 04/07/2018 8:41 pm
Hola
Si quieres invertir el orden de una estrutura de tu theme puedes usar CSS a través de Flex
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Es decir tendrías que ubicar el contenedor y hacerlo flex, con : display: flex y también aplicar un flex-direction
Envíanos la url exacta en donde se muestra lo que comentas para ver la estrutura.
Sin embargo ten en cuenta que si hay un pequeño efecto como dices es posible que tu theme tenga código javascript que tendrá prioridad siempre a pesar de que lo cambies con CSS.
Saludos.
Respondido : 04/07/2018 10:37 pm
Hola Jhon,
Como bien dices debe haber un código javascript que hace ese efecto cuando adapta los bloques al dispositivo móvil ya que en el header.tpl aparece primero el bloque left column y debajo el bloque center column.
Si vas a la siguiente url de categoría e inspeccionas verás que en ordenador el orden es 1º left y 2º center column: https://www.zoesthome.com/42-colchas
Si adaptas a móvil e inspeccionas de nuevo verás que el orden es 1º center y 2º left column. Por lo tanto, pienso que hay un código javascript que hace ese cambio de orden al detectar el dispositivo móvil (carga 1º left column y un javascript lo mueve al final de la página por eso surge el efecto de aparecer y desaparecer).
Existe alguna forma de saber qué fichero de javascript y qué línea de código realiza ese cambio y si se puede modificar para que cargue primero el bloque center en móvil y después el left column sin que haga ese efecto y consiguiendo una carga de la página más rápida.
Muchas gracias,
Saludos.
Respondido : 05/07/2018 12:35 am
Hola,
He pensado otra forma para solucionarlo. Dado que el contenido que se muestra en el bloque left column (en nuestro tema) no es de mucha relevancia en dispositivo móvil, la idea es ocultarlo para estos dispositivos.
Si añado un class: hidden-sm-down al div del left column lo podré ocultar. ¿Es correcto utilizar esta class? Quiero decir, ¿de esta forma no cargará el código html ni el javascript del bloque left column en dispositivos móviles mejorando la velocidad de carga y solucionando el efecto de aparecer y desaparecer?
Además, me surge otra duda. ¿Google puede detectarlo como ocultación de contenido y penalizarlo?
Muchas gracias,
Saludos.
Respondido : 05/07/2018 11:00 am
Hola Hector.
Puedes desactivar los módulos para dispositivos móviles desde las opciones del modulo:
¿Google puede detectarlo como ocultación de contenido y penalizarlo?
No, si lo ocultas por css el contenido sigue estando lo que no lo muestra, digamos que es como un comentario.
Un saludo
Respondido : 05/07/2018 11:17 am
Hola Pepe,
Si desactivo los módulos para dispositivos móviles como dices también se me desactivan para tablets (aunque solo marque la opción de desactivar en móviles).
La idea es ocultarlo sin utilizar CSS para aligerar la carga de la página y evitar que cargue código javascript adicional. ¿Utilizar un class: hidden-sm-down en el div del left column no es una buena opción?
No se me ocurren más formas para solucionarlo.
Muchas gracias,
Saludos.
Respondido : 05/07/2018 7:30 pm
Hola
Creo que lo más práctico al final sería que lo ocultes por CSS, y usando mediaqueries sólo ocultarlo para disposivos con ancho <= 768px
PD. Me parece muy extraño que tu theme mueva el contenido de estructura por javascript, actualmente se puede hacer por Flex CSS, revisa si tu theme tiene actualizaciones o consulta con los desarrolladores.
Saludos.
Respondido : 05/07/2018 8:01 pm
