আমরা ম্যাজেন্টোতে দেরি না করে কীভাবে তাত্ক্ষণিকভাবে পণ্য চিত্র গ্যালারী লোড করতে পারি?

Question

এটি আমার সাথে প্রথম আমার জিজ্ঞাসাটি :)

সমস্যা: ম্যাজেন্টো 2-তে ব্যবহৃত ফোটোরামা গ্যালারী ব্যবহারকারীর অভিজ্ঞতাকে দুর্বল করে তোলে। যদি পণ্যের চিত্রটি "তাত্ক্ষণিক" না হয় তবে আমার ক্যাশেড স্ট্যাটিক ম্যাজেন্টো কত দ্রুত চালায় তা বিবেচ্য নয়।

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

আপনি যদি উপরের লিঙ্কটিতে যান (ম্যাগন্টো ব্লগে একটি স্টোর শোকেসড), আপনি দেখতে পাচ্ছেন এটি খোলা আছে, তবে এটি একটি লোডিং আইকন দেখায় এবং তারপরে এটি চিত্রগুলি লোড করে। এটা কি সাংঘাতিক.

এটি তাত্ক্ষণিকভাবে লোড করা উচিত। বাম মত। সম্পন্ন হয়েছে, বিশেষত পুরো পৃষ্ঠার ক্যাশে এবং ওপচী সক্ষম হয়েছে।

এই আচরণ পরিবর্তন করার কোন উপায় আছে কি? তাত্ক্ষণিকভাবে এটি লোড করতে?

ব্যবহারকারীর জন্য এটি পৃষ্ঠায় সর্বাধিক গুরুত্বপূর্ণ "উপাদান"। এবং এটি সর্বশেষ হিসাবে লোড হয় ।

আমি বুঝতে পারি না কেউ কীভাবে এ বিষয়ে অভিযোগ করছে না।

এটি ই কমার্স, কেবলমাত্র বিষয়গুলি হল "ছবি"। এটি ব্যবহারকারী যা চিন্তা করে। তারা পণ্যের পৃষ্ঠায় ক্লিক করার কারণটি হ'ল "চিত্রগুলি আরও ভালভাবে দেখানো Pers ব্যক্তিগতভাবে আমার জন্য এটি সত্যই আমাকে বাগিয়ে দেয় no কোনও কারণ ছাড়াই আমি প্রচণ্ড রাগান্বিত হয়ে যাই এবং তারপরে আমি নিজেকে জিজ্ঞাসা করি আমি কি পাগল?

অগ্রিম ধন্যবাদ, আমি ঠিক বিভ্রান্ত হয়েছি যে কীভাবে এই জিনিসটি সুখী হতে পারে।

আমার ম্যাজেন্টো 1 এ, এটি তাত্ক্ষণিকভাবে লোড হয়।

Comments

সম্মত হন, ফোটোরমা লোড করার সময় তাদের কমপক্ষে বেস চিত্র প্রদর্শিত হতে পারে। আমি এটি করতে একটি মডিউল তৈরি করতে হবে।

— অ্যারন অ্যালেন

তারা এটিকে বৈশিষ্ট্য উন্নয়নের অনুরোধে যুক্ত করেছে। মোবাইলে এটি আরও খারাপ। তবে মজার বিষয় হ'ল, আপনি যখন মোবাইলে ফটোরাম ওয়েবসাইটটিতে যান, সেই বড় ইমেজ গ্যালারী লোড দ্রুত তারপরে একটি ম্যাজেন্টো। আপনি যখন একটি রিফ্রেশ করেন, এটি প্রায় তাত্ক্ষণিক। সমস্যাটি ম্যাজেন্টো নিয়ে।

— অভিনেত্রী

অবশ্যই এখনই এটির জন্য একটি সমাধান হতে হবে? এটি এখনও অত্যন্ত ধীর, প্রশ্ন জিজ্ঞাসা করার জন্য ধন্যবাদ, আমি কোনও কিছু হাহা পরিবর্তন করে কিনা তা দেখার জন্য আমি এটি আবার পরীক্ষা করে দেখব।

— অ্যান্ডি জোনস

কখনও কখনও এই আদেশটি কাজ করবে: পিএইচপি বিন / ম্যাজেন্টো ক্যাটালগ: চিত্রগুলি: পুনরায় আকার দিন

— সাফলাল ঝা

এর অর্থ কী এবং কীভাবে করতে হবে "সামগ্রীতে জাম্পিংয়ের জন্য স্থির করুন Lo লোডারটি অবশ্যই গ্যালারী হিসাবে একই আকারের হতে হবে" আমি একটি সমস্যা পেয়েছি যা তখন আমার ছবির চিত্রের চেয়ে প্রথম লোডটি ছোট এবং বড় দেখায়

— আকবর মো

Answer 1

এখানে একটি সহজ সমাধান যা জেএস লোড করার সময় পণ্যের বেস চিত্রটি প্রদর্শিত হতে পারে। আপনার থিমে নিম্নলিখিত ফাইলটি তৈরি করুন: {theme_dir}/Magento_Catalog/templates/product/view/gallery.phtml ধারণ করে:

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

আশাকরি এটা সাহায্য করবে.

Comments

ধন্যবাদ হারুন! আমি আজ রাতে বাড়িতে একবার চেষ্টা করব! এটা সত্যিই কৃতজ্ঞ!

— অভিনেত্রী

হারুন আমি চেষ্টা করেছিলাম। এটা কাজ করে। এটি একটি দুর্দান্ত অস্থায়ী সমাধান তবে আমি চাই তারা গ্যালারী লোডের গতি ঠিক করতে পারত। আমি বুঝতে পারছি না কেন এটি এত ধীরে ভারী। ফোটোর্মা সাইটে, এটি বড় গ্যালারী এবং এটি তত্ক্ষণাত লোড হয়। এমনকি আপনি আপনার মোবাইল ছবিতে চেষ্টা করতে পারেন। আপনি দেখতে পাচ্ছেন এটি খুব দ্রুত এবং চিত্রগুলি আরও বড়।

— অভিনেত্রী

অ্যারন অ্যালেন দয়া করে পোস্টে বা কোডটিতে একটি মন্তব্য দিয়ে কী করেছেন তা ব্যাখ্যা করুন।

— লুস্ক্কু

আমি প্রথম imgউপাদানটির জন্য লাইন যুক্ত করেছি ।

— অ্যারন অ্যালেন

এটি আমার জন্য Magento EE 2.1.7 এ কাজ করেছে।

— স্পেরিসাইকেল

Answer 2

হারুন অ্যালেনের উত্তর দুর্দান্ত ছিল এবং আমি আমার কাস্টম সেটআপের জন্য এটি কীভাবে করব তা নির্ধারণের জন্য এটি ব্যবহার করেছি।

আমাকে যা করতে হয়েছিল তা হ'ল কিছু ইনলাইন সিএসএস সহ ছবিটি যুক্ত করে প্যাডিং-বটম যুক্ত করুন: লোডিং-মাস্কে 100%।

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

এটি উপরের উত্তরের সাথে বেশ মিল, তবে আমি আমার 2 সেন্ট যোগ করতে চেয়েছিলাম।