Magento media дублирует изображения и обменивается ими, когда это не требуется

Я столкнулся со странной проблемой. Таким образом, на странице продуктов magento создает дубликаты изображений для каждого изображения из галереи "Больше просмотров".

Я нашел соответствующий код в файле media.phtml и, в частности:

<?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
        <?php if ($this->isGalleryImageVisible($_image)): ?>
        <img id="image-<?php echo $i; ?>"
             class="gallery-image"
             src="<?php echo $this->getGalleryImageUrl($_image); ?>"
             data-zoom-image="<?php echo  $this->getGalleryImageUrl($_image); ?>" />
        <?php endif; ?>
    <?php $i++; endforeach; ?>

Есть ли способ остановить это ненужное дублирование изображений?

Кроме того, галерея не учитывает текущее основное изображение. При этом, если изображение 1 является основным изображением, и вы нажимаете на миниатюру изображения 1 он все еще выполняет обмен. Итак, могу ли я изменить галерею, чтобы она меняла местами только то, что еще не является основным изображением?

Копая дальше, я считаю, что следующая функция отвечает за изменение изображения(изображений):

swapImage: function(targetImage) {
    targetImage = $j(targetImage);
    targetImage.addClass('gallery-image');

    ProductMediaManager.destroyZoom();

    var imageGallery = $j('.product-image-gallery');

    if(targetImage[0].complete) { //image already loaded -- swap immediately

        imageGallery.find('.gallery-image').removeClass('visible');

        //move target image to correct place, in case it's necessary
        imageGallery.append(targetImage);

        //reveal new image
        targetImage.addClass('visible');

        //wire zoom on new image
        ProductMediaManager.createZoom(targetImage);

    } else { //need to wait for image to load

        //add spinner
        imageGallery.addClass('loading');

        //move target image to correct place, in case it's necessary
        imageGallery.append(targetImage);

        //wait until image is loaded
        imagesLoaded(targetImage, function() {
            //remove spinner
            imageGallery.removeClass('loading');

            //hide old image
            imageGallery.find('.gallery-image').removeClass('visible');

            //reveal new image
            targetImage.addClass('visible');

            //wire zoom on new image
            ProductMediaManager.createZoom(targetImage);
        });

    }
}
Author: Vaishal Patel, 2019-02-25
Source

1 answers

Решение вышеупомянутой проблемы довольно простое.

  1. Если это еще не сделано, то мы создадим копию файла media.phtml (" Найден по адресу:{Magento_root}/приложение/дизайн/интерфейс/rwd/по умолчанию/шаблон/каталог/продукт/представление") в нашей пользовательской теме.
  2. Далее нам нужно внести в него изменения, удалив строки с 47 по 54. Блок кода, отвечающий за дублирование изображений.

  3. Затем в теге привязки миниатюр изображений ("строка 59/65") мы нужно добавить атрибут id вот так:

    id="image-<?php echo $i; ?>"

  4. В том же теге привязки нам также теперь нужно добавить два новых атрибута данных data-main и data-zoom-mage, каждый из которых содержит URL-адрес изображения галереи. Вот так:

    data-main="<?php echo $this->getGalleryImageUrl($_image); ?>" data-zoom-image="<?php echo  $this->getGalleryImageUrl($_image); ?>"

  5. Это единственные изменения, необходимые в файле media.phtml. Полный файл теперь должен выглядеть следующим образом:

    <?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
?>
<div class="product-image product-image-zoom">
<div class="product-image-gallery">
    <img id="image-main"
         itemprop="image"
         class="gallery-image visible"
         src="<?php echo $this->helper('catalog/image')->init($_product, 'image') ?>"
         alt="<?php echo $this->escapeHtml($this->getImageLabel()) ?>"
         title="<?php echo $this->escapeHtml($this->getImageLabel()); ?>" />


</div>
</div>
  <?php if (count($this->getGalleryImages()) > 0): ?>
  <div class="more-views">
<h2><?php echo $this->__('More Views') ?></h2>
<ul class="product-image-thumbs">
<?php $i=0; foreach ($this->getGalleryImages() as $_image): ?>
    <?php if ($this->isGalleryImageVisible($_image)): ?>
    <li>
        <a class="thumb-link" href="#" title="<?php echo $this->escapeHtml($_image->getLabel()) ?>" id="image-<?php echo $i; ?>" data-image-index="<?php echo $i; ?>" data-main="<?php echo $this->getGalleryImageUrl($_image); ?>" data-zoom-image="<?php echo  $this->getGalleryImageUrl($_image); ?>">
            <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(75); ?>"
                 width="75" height="75" alt="<?php echo $this->escapeHtml($_image->getLabel()) ?>" />
        </a>
    </li>
    <?php endif; ?>
<?php $i++; endforeach; ?>
</ul>
</div>
<?php endif; ?>
<?php echo $this->getChildHtml('after'); ?>

  6. Далее, в нашей пользовательской теме нам нужно сделать копию файла app.js . ("Найдено в: {Magento_root/скин/внешний интерфейс/rwd/по умолчанию/js}").

  7. В нашей копии app.js файл перейдите в строку 1197, и вы должны увидеть функцию Swapimage.

  8. Нам нужно изменить функцию, чтобы отразить изменения в файле media.phtml. Итак, удалите все, что находится в скобках функции. Строки с 1198 по ~1241. Затем объявите две новые переменные. Один содержит основной элемент изображения, который по умолчанию будет иметь идентификатор image-main, а другой содержит значение атрибута data-main, который мы определили ранее в media.phtml. Отсюда нам нужно затем уничтожить масштаб текущего основного изображения, выполнить замену изображения, а затем воссоздать масштаб. Обратите внимание, что повторите масштабирование после загрузки изображения. Готовый код функции будет выглядеть следующим образом:

      swapImage: function(targetImage) {
  mainImage = $j("#image-main");
  targetImage = $j(targetImage).data("main");

  ProductMediaManager.destroyZoom();


  mainImage.src = targetImage;

  mainImage.attr('src', targetImage).load(function(){
  ProductMediaManager.createZoom(mainImage);

  });
  }

Эти шаги, описанные выше, просто устранят ненужное дублирование изображений для обмена изображениями.

 0
Author: Vaishal Patel, 2019-03-12 11:33:31