Comment pouvons-nous charger la galerie d'images de produits instantanément sans délai dans magento?

11

c'est ma première quesiton nue avec moi :)

Problème: La galerie fotorama utilisée dans magento 2 rend l'expérience utilisateur lente. Peu importe la vitesse à laquelle mon magento statique en cache s'exécute si l'image du produit n'est pas "instantanée".

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

Si vous allez sur le lien ci-dessus, (un magasin présenté sur le blog magento), vous pouvez voir qu'il s'ouvre, puis il affiche une icône de chargement, puis il charge les images. C'est horrible.

Il devrait se charger instantanément. Comme bamm. Terminé, spécialement avec cache pleine page et opcache activé.

Existe-t-il un moyen de modifier ce comportement? Pour le charger instantanément?

Pour l'utilisateur, c'est l'élément le plus important de la page. et il se charge comme le dernier .

Je ne comprends pas comment personne ne s'en plaint.

C'est le commerce électronique, la seule chose qui compte, c'est les "images". C'est ce qui importe à l'utilisateur. La raison pour laquelle ils cliquent sur la page du produit est de "mieux voir les images. Personnellement, pour moi, cela me dérange vraiment. Pour aucune raison je deviens super en colère et je me demande si je suis fou?

Merci d'avance, je ne sais pas comment une telle chose pourrait arriver.

Sur mon magento 1, il se charge instantanément.

magento2 product-images magento-2.1 fotorama-slider Fancyman
la source
D'accord, ils pourraient au moins avoir l'image de base affichée pendant le chargement de fotorama. Je vais devoir construire un module pour le faire.
Aaron Allen
Ils l'ont ajouté à la demande d'amélioration de la fonctionnalité. Sur mobile, c'est encore pire. Mais ce qui est drôle, c'est que lorsque vous allez sur le site Web de fotorama sur mobile, la charge de cette grande galerie d'images est plus rapide que celle de Magento. Lorsque vous effectuez un rafraîchissement, c'est presque instantané. Le problème réside avec magento.
Fancyman
Doit sûrement être une solution pour cela maintenant? C'est encore très lent, merci d'avoir posé la question, je vais continuer à vérifier pour voir si quelque chose change jamais haha.
andy jones
Parfois, cette commande fonctionnera: php bin / magento catalogue: images: resize
Saphal Jha
Qu'est-ce que cela signifie et comment dois - je trouvé un problème qui est quand ma charge de produit que l' image montre tout petit et que grand « Fix pour le contenu de saut Loader doit être la même taille que la galerie. »
Akbar Mo

Réponses:

10

Voici une solution simple qui provoquera l'affichage de l'image de base du produit pendant le chargement du JS. Créez le fichier suivant dans votre thème: {theme_dir}/Magento_Catalog/templates/product/view/gallery.phtml contenant:

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

J'espère que cela t'aides.

Aaron Allen
la source
Merci Aaron! J'essaierai ce soir une fois que je serai à la maison! J'apprécie beaucoup!
Fancyman
Aaron, je l'ai essayé. Ça marche. C'est une belle solution temporaire mais j'aurais aimé qu'ils puissent fixer la vitesse de chargement de la galerie. Je ne comprends pas pourquoi ça se charge si lentement. Sur le site fotorama, c'est une plus grande galerie et elle se charge instantanément. Vous pouvez même essayer sur votre mobile fotorama.io, vous pouvez voir que c'est beaucoup plus rapide et que les images sont beaucoup plus grandes.
Fancyman
@Aaron Allen, veuillez expliquer ce que vous avez fait avec un commentaire dans le post ou dans le code.
LucScu
1
J'ai ajouté la ligne pour le premier imgélément.
Aaron Allen
Cela a fonctionné pour moi sur Magento EE 2.1.7.
sparecycle
1

La réponse d'Aaron Allen était excellente et je l'ai utilisée pour comprendre comment le faire pour ma configuration personnalisée.

Tout ce que j'avais à faire était d'ajouter l'image avec du CSS en ligne et d'ajouter du padding-bottom: 100% au chargement-masque.

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

C'est assez similaire à la réponse ci-dessus mais je voulais ajouter mes 2 cents.

James Harrington
la source