Como podemos carregar a galeria de imagens do produto instantaneamente sem o atraso no magento?

11

este é o meu primeiro quesiton nua comigo :)

Problema: A galeria de fotorama usada no magento 2 torna a experiência do usuário lenta. Não importa a rapidez com que meu magento 2 estático em cache é executado se a imagem do produto não for "instantânea".

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

Se você acessar o link acima, (uma loja exibida no blog magento), poderá vê-lo abrir, exibir um ícone de carregamento e carregar as imagens. Isso é horrível.

Deve carregar instantaneamente. Como bamm. Feito, Especialmente com cache de página inteira e opcache ativados.

Existe uma maneira de mudar esse comportamento? Carregá-lo instantaneamente?

Para o usuário, é o "elemento" mais importante da página. e carrega como o mais recente .

Eu não entendo como ninguém está reclamando disso.

Isso é comércio eletrônico, a única coisa que importa é "fotos". É o que o usuário se importa. A razão pela qual eles clicam na página do produto é "ver melhor as imagens. Pessoalmente, para mim, isso realmente me incomoda. Por nenhuma razão, fico super zangado e depois me pergunto se sou louco?"

Agradecemos antecipadamente, estou confuso como isso poderia acontecer.

No meu magento 1, ele carrega instantaneamente.

magento2 product-images magento-2.1 fotorama-slider Homem chique
fonte
De acordo, eles poderiam pelo menos exibir a imagem base enquanto o fotorama é carregado. Vou ter que construir um módulo para fazer isso.
Aaron Allen
Eles o adicionaram para apresentar uma solicitação de melhoria. No celular, é ainda pior. O engraçado é que, quando você acessa o site fotorama no celular, a galeria de imagens grandes carrega mais rápido que a do magento. Quando você faz uma atualização, é quase instantâneo. O problema está no magento.
Fancyman 6/09/16
Certamente deve ser uma solução para isso agora? Ainda é super lento, obrigado por fazer a pergunta, vou continuar verificando isso para ver se alguma coisa muda haha.
Andy Jones
Às vezes, este comando irá funcionar: catálogo php bin / magento: Imagens: redimensionamento
Saphal Jha
O que significa e como fazer "Correção para saltar o conteúdo. O carregador deve ter o mesmo tamanho da galeria" Encontrei um problema: quando o produto carrega com a imagem mostrada primeiro pequena e grande
Akbar Mo

Respostas:

10

Aqui está uma solução simples que fará com que a imagem base do produto seja exibida enquanto o JS estiver carregando. Crie o seguinte arquivo no seu tema: {theme_dir}/Magento_Catalog/templates/product/view/gallery.phtml contendo:

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

Aaron Allen
fonte
Obrigado Aaron! Vou tentar hoje à noite quando estiver em casa! Realmente aprecio isso!
Fancyman 12/09/16
Aaron, eu tentei. Funciona. É uma boa solução temporária, mas eu gostaria que eles pudessem ter corrigido a velocidade de carregamento da galeria. Não entendo por que carrega tão devagar. No site fotorama, é uma galeria maior e carrega instantaneamente. Você pode até experimentar no seu fotorama.io móvel, pode ver que é muito mais rápido e as imagens são muito maiores.
Fancyman 12/09/16
@ Aaron Allen, por favor, explique o que você fez com um comentário na postagem ou no código.
LucScu 03/10
1
Eu adicionei a linha para o primeiro imgelemento.
Aaron Allen
Isso funcionou para mim no Magento EE 2.1.7.
Sparecycle
1

A resposta de Aaron Allen foi ótima e eu a usei para descobrir como fazer isso na minha configuração personalizada.

Tudo o que eu precisava fazer era adicionar a imagem com algum CSS embutido e adicionar o preenchimento de fundo: 100% à máscara de carregamento.

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

É bastante semelhante à resposta acima, mas eu queria adicionar meus 2 centavos.

James Harrington
fonte