¿Cómo podemos cargar la galería de imágenes del producto al instante sin la demora en magento?

11

esta es mi primera pregunta desnuda conmigo :)

Problema: la galería de fotosrama utilizada en magento 2 hace que la experiencia del usuario sea lenta. No importa qué tan rápido se ejecute mi Magento 2 estático en caché si la imagen del producto no es "instantánea".

https://www.ninewest.co.uk/sandals/high-heel/allclear-black-snake-print-nine-west

Si va al enlace de arriba, (una tienda mostrada en el blog de magento), puede ver que se abre, luego muestra un ícono de carga y luego carga las imágenes. Esto es horrible.

Debería cargarse al instante. Como bamm Hecho, especialmente con caché de página completa y opcache habilitado.

¿Hay alguna manera de cambiar este comportamiento? ¿Para cargarlo al instante?

Para el usuario, es el "elemento" más importante de la página. y se carga como lo último .

No entiendo cómo nadie se queja de esto.

Esto es comercio electrónico, lo único que importa son las "imágenes". Es lo que le importa al usuario. La razón por la que hacen clic en la página del producto es para "ver mejor las imágenes. Personalmente para mí realmente me molesta. Por ninguna razón me enojo mucho y luego me pregunto si estoy loco.

Gracias de antemano, estoy confundido de cómo tal cosa podría pasar.

En mi magento 1, se carga al instante.

magento2 product-images magento-2.1 fotorama-slider Hombre elegante
fuente
De acuerdo, al menos podrían mostrar la imagen base mientras se carga el fotorama. Tendré que construir un módulo para hacer eso.
Aaron Allen
Lo han agregado para presentar una solicitud de mejora. En dispositivos móviles es aún peor. Pero lo curioso es que, cuando va al sitio web de fotorama en el móvil, las grandes galerías de imágenes se cargan más rápido que las de magento. Cuando haces una actualización, es casi instantáneo. El problema radica en magento.
Fancyman
Seguramente debe ser una solución para esto ahora? Todavía es muy lento, gracias por hacer la pregunta, seguiré revisando esto para ver si algo cambia alguna vez, jaja.
andy jones
A veces este comando funcionará: php bin / magento catalogue: images:
resize
Qué significa y cómo hacerlo "Solución para saltar contenido. El cargador debe ser del mismo tamaño que la galería" Encontré un problema que es cuando la carga de mi producto que la imagen se muestra primero pequeña y grande
Akbar Mo

Respuestas:

10

Aquí hay una solución simple que hará que la imagen base del producto se muestre mientras se carga el JS. Cree el siguiente archivo en su tema: que {theme_dir}/Magento_Catalog/templates/product/view/gallery.phtml contiene:

<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
    <div data-role="loader" class="loading-mask">
        <div class="loader">

            <img src="<?php echo $block->getGalleryImages()->getFirstItem()->getData('medium_image_url') ?>" style="max-width: 100%; max-height: 100%">

            <img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
                 alt="<?php /* @escapeNotVerified */ echo __('Loading...') ?>">
        </div>
    </div>
</div>
<!--Fix for jumping content. Loader must be the same size as gallery.-->
<script>
    var config = {
            "width": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
            "thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height')
                        ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>,
            "navtype": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/navtype"); ?>",
            "height": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'height'); ?>
        },
        thumbBarHeight = 0,
        loader = document.querySelectorAll('[data-gallery-role="gallery-placeholder"] [data-role="loader"]')[0];

    if (config.navtype === 'horizontal') {
        thumbBarHeight = config.thumbheight;
    }

    loader.style.paddingBottom = ( config.height / config.width * 100) + "%";
</script>
<script type="text/x-magento-init">
    {
        "[data-gallery-role=gallery-placeholder]": {
            "mage/gallery/gallery": {
                "mixins":["magnifier/magnify"],
                "magnifierOpts": <?php /* @escapeNotVerified */ echo $block->getMagnifier(); ?>,
                "data": <?php /* @escapeNotVerified */ echo $block->getGalleryImagesJson(); ?>,
                "options": {
                    "nav": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/nav"); ?>",
                    <?php if (($block->getVar("gallery/loop"))): ?>
                        "loop": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/loop"); ?>,
                    <?php endif; ?>
                    <?php if (($block->getVar("gallery/keyboard"))): ?>
                        "keyboard": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/keyboard"); ?>,
                    <?php endif; ?>
                    <?php if (($block->getVar("gallery/arrows"))): ?>
                        "arrows": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/arrows"); ?>,
                    <?php endif; ?>
                    <?php if (($block->getVar("gallery/allowfullscreen"))): ?>
                        "allowfullscreen": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/allowfullscreen"); ?>,
                    <?php endif; ?>
                    <?php if (($block->getVar("gallery/caption"))): ?>
                        "showCaption": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/caption"); ?>,
                    <?php endif; ?>
                    "width": "<?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'width'); ?>",
                    "thumbwidth": "<?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'width'); ?>",
                    <?php if ($block->getImageAttribute('product_page_image_small', 'height') || $block->getImageAttribute('product_page_image_small', 'width')): ?>
                        "thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height')
                        ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>,
                    <?php endif; ?>
                    <?php if ($block->getImageAttribute('product_page_image_medium', 'height') || $block->getImageAttribute('product_page_image_medium', 'width')): ?>
                        "height": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'height')
                        ?: $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
                    <?php endif; ?>
                    <?php if ($block->getVar("gallery/transition/duration")): ?>
                        "transitionduration": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/transition/duration"); ?>,
                    <?php endif; ?>
                    "transition": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/transition/effect"); ?>",
                    <?php if (($block->getVar("gallery/navarrows"))): ?>
                        "navarrows": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/navarrows"); ?>,
                    <?php endif; ?>
                    "navtype": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/navtype"); ?>",
                    "navdir": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/navdir"); ?>"
                },
                "fullscreen": {
                    "nav": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/nav"); ?>",
                    <?php if ($block->getVar("gallery/fullscreen/loop")): ?>
                        "loop": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/loop"); ?>,
                    <?php endif; ?>
                    "navdir": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/navdir"); ?>",
                    <?php if ($block->getVar("gallery/transition/navarrows")): ?>
                        "navarrows": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/navarrows"); ?>,
                    <?php endif; ?>
                    "navtype": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/navtype"); ?>",
                    <?php if ($block->getVar("gallery/fullscreen/arrows")): ?>
                        "arrows": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/arrows"); ?>,
                    <?php endif; ?>
                    <?php if ($block->getVar("gallery/fullscreen/caption")): ?>
                        "showCaption": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/caption"); ?>,
                    <?php endif; ?>
                    <?php if ($block->getVar("gallery/fullscreen/transition/duration")): ?>
                        "transitionduration": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/transition/duration"); ?>,
                    <?php endif; ?>
                    "transition": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/transition/effect"); ?>"
                },
                "breakpoints": <?php /* @escapeNotVerified */ echo $block->getBreakpoints(); ?>
            }
        }
    }
</script>

Espero que esto ayude.

Aaron Allen
fuente
Gracias Aaron! ¡Intentaré esta noche una vez que esté en casa! ¡Realmente lo aprecio!
Fancyman
Aaron lo intenté. Funciona. Es una buena solución temporal, pero desearía que pudieran arreglar la velocidad de carga de la galería. No entiendo por qué se carga tan lento. En el sitio de fotorama, es una galería más grande y se carga al instante. Incluso puedes probar en tu móvil fotorama.io, puedes ver que es mucho más rápido y las imágenes son mucho más grandes.
Fancyman
@ Aaron Allen, explique qué ha hecho con un comentario en la publicación o en el código.
LucScu
1
Agregué la línea para el primer imgelemento.
Aaron Allen el
Esto funcionó para mí en Magento EE 2.1.7.
repuesto
1

La respuesta de Aaron Allen fue excelente y la utilicé para descubrir cómo hacerlo para mi configuración personalizada.

Todo lo que tenía que hacer era agregar la imagen con un poco de CSS en línea y agregar padding-bottom: 100% a la máscara de carga.

...
<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder">
    <div data-role="loader" class="loading-mask" style="padding-bottom:100%;">
        <div class="loader">
            <img src="<?php echo $_product->getData('img_url'); ?>" style="max-width: 100%; max-height: 100%; display: block;">
            <img src="<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('images/loader-1.gif'); ?>"
                 alt="<?php /* @escapeNotVerified */ echo __('Loading...') ?>">
        </div>
    </div>
</div>
...

Es bastante similar a la respuesta anterior, pero quería agregar mis 2 centavos.

James Harrington
fuente