Bagaimana kita bisa memuat galeri gambar produk secara instan tanpa penundaan di Magento?

11

ini pertanyaan pertama saya dengan saya :)

Masalah: Galeri fotorama yang digunakan di magento 2 membuat pengalaman pengguna lamban. Tidak masalah seberapa cepat Magento 2 cache statis saya berjalan jika gambar produk tidak "instan".

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

Jika Anda pergi ke tautan di atas, (toko yang ditampilkan di blog magento), Anda dapat melihatnya terbuka, lalu menunjukkan ikon memuat dan kemudian memuat gambar. Mengerikan.

Seharusnya memuat secara instan. Seperti bamm. Selesai, Khususnya dengan cache halaman penuh dan opcache diaktifkan.

Apakah ada cara untuk mengubah perilaku ini? Untuk memuatnya secara instan?

Untuk pengguna, ini adalah "elemen" terpenting di halaman. dan itu memuat sebagai yang terbaru .

Saya tidak mengerti bagaimana tidak ada yang mengeluh tentang ini.

Ini adalah E commerce, satu-satunya hal yang penting adalah "gambar". Itu yang diperhatikan pengguna. Alasan mereka mengklik halaman produk adalah untuk "melihat gambar lebih baik. Secara pribadi bagi saya itu benar-benar mengganggu saya. Tanpa alasan saya menjadi sangat marah dan kemudian saya bertanya pada diri sendiri apakah saya gila?

Terima kasih sebelumnya, saya hanya bingung bagaimana hal itu bisa terjadi.

Pada magento 1 saya, itu dimuat langsung.

magento2 product-images magento-2.1 fotorama-slider Pria mewah
sumber
Setuju, mereka setidaknya bisa memiliki gambar dasar ditampilkan saat fotorama dimuat. Saya harus membuat modul untuk melakukan itu.
Aaron Allen
Mereka telah menambahkannya ke permintaan peningkatan fitur. Di ponsel, ini bahkan lebih buruk. Tapi lucunya, ketika Anda pergi ke situs web fotorama di ponsel, galeri gambar besar itu memuat lebih cepat daripada magento. Ketika Anda melakukan refresh, itu hampir instan. Masalahnya terletak pada magento.
Fancyman
Tentunya harus ada perbaikan untuk ini sekarang? Masih sangat lambat, terima kasih telah mengajukan pertanyaan, saya akan terus memeriksa kembali ini untuk melihat apakah ada yang berubah haha.
andy jones
Terkadang perintah ini berfungsi: katalog php bin / magento: images: resize
Saphal Jha
Apa artinya dan bagaimana melakukan "Memperbaiki untuk konten melompat. Loader harus memiliki ukuran yang sama dengan galeri" Saya menemukan satu masalah yaitu ketika memuat produk saya daripada gambar menunjukkan kecil dan besar pertama
Akbar Mo

Jawaban:

10

Inilah solusi sederhana yang akan menyebabkan gambar dasar produk ditampilkan saat JS sedang memuat. Buat file berikut dalam tema Anda: {theme_dir}/Magento_Catalog/templates/product/view/gallery.phtml mengandung:

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

Semoga ini membantu.

Aaron Allen
sumber
Aaron terima kasih! Saya akan mencoba malam ini begitu saya pulang! Sangat menghargai itu!
Fancyman
Aaron aku mencobanya. Berhasil. Ini solusi sementara yang bagus tapi saya berharap mereka bisa memperbaiki kecepatan memuat galeri. Saya tidak mengerti mengapa itu memuat sangat lambat. Di situs fotorama, ini adalah galeri yang lebih besar dan dimuat secara instan. Anda bahkan dapat mencoba di ponsel Anda fotorama.io, Anda dapat melihatnya lebih cepat dan gambarnya jauh lebih besar.
Fancyman
@ Harun Allen tolong jelaskan apa yang telah Anda lakukan dengan komentar di posting atau dalam kode.
LucScu
1
Saya menambahkan baris untuk imgelemen pertama .
Aaron Allen
Ini bekerja untuk saya di Magento EE 2.1.7.
sparecycle
1

Jawaban Aaron Allen luar biasa dan saya menggunakannya untuk mencari tahu bagaimana melakukannya untuk pengaturan kustom saya.

Yang harus saya lakukan adalah menambahkan gambar dengan beberapa inline css dan menambahkan padding-bottom: 100% ke loading-mask.

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

Ini sangat mirip dengan jawaban di atas tetapi saya ingin menambahkan 2 sen saya.

James Harrington
sumber