切换图片

app/design/frontend/Joshine/breeze/Magento_Catalog/templates/product/list.phtml

@@ -4,7 +4,6 @@
  * See COPYING.txt for license details.
  * See COPYING.txt for license details.
  */
  */
 use Magento\Framework\App\Action\Action;
 use Magento\Framework\App\Action\Action;
-
 ?>
 ?>
 <?php
 <?php
 /**
 /**
@@ -17,6 +16,7 @@ use Magento\Framework\App\Action\Action;
 ?>
 ?>
 <?php
 <?php
 $_productCollection = $block->getLoadedProductCollection();
 $_productCollection = $block->getLoadedProductCollection();
+$_productCollection->addMediaGalleryData();
 /** @var \Magento\Catalog\Helper\Output $_helper */
 /** @var \Magento\Catalog\Helper\Output $_helper */
 $_helper = $block->getData('outputHelper');
 $_helper = $block->getData('outputHelper');
 ?>
 ?>
@@ -44,6 +44,21 @@ $_helper = $block->getData('outputHelper');
      */
      */
     $pos = $block->getPositioned();
     $pos = $block->getPositioned();
     ?>
     ?>
+<style>
+    .hoverImg{
+        display: block;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        opacity:0;
+        height: 100%;
+    }
+
+    .hoverImg:hover{
+        opacity: 1;
+    }
+</style>
     <div class="products wrapper <?= /* @noEscape */ $viewMode ?> products-<?= /* @noEscape */ $viewMode ?>">
     <div class="products wrapper <?= /* @noEscape */ $viewMode ?> products-<?= /* @noEscape */ $viewMode ?>">
         <ol class="products list items product-items">
         <ol class="products list items product-items">
             <?php /** @var $_product \Magento\Catalog\Model\Product */ ?>
             <?php /** @var $_product \Magento\Catalog\Model\Product */ ?>
@@ -54,6 +69,16 @@ $_helper = $block->getData('outputHelper');
                          data-container="product-<?= /* @noEscape */ $viewMode ?>">
                          data-container="product-<?= /* @noEscape */ $viewMode ?>">
                         <?php
                         <?php
                         $productImage = $block->getImage($_product, $imageDisplayArea);
                         $productImage = $block->getImage($_product, $imageDisplayArea);
+
+                        $baseImageUrl = $productImage->getImageUrl();
+                        $allImage = $_product->getMediaGalleryImages()->getItems();
+                        foreach ($allImage as $img){
+                            if (basename($baseImageUrl)  != basename($img->getUrl())){
+                                $haverImg = $img->getUrl();
+                                break;
+                            }
+                        }
+
                         if ($pos != null) {
                         if ($pos != null) {
                             $position = 'left:' . $productImage->getWidth() . 'px;'
                             $position = 'left:' . $productImage->getWidth() . 'px;'
                                 . 'top:' . $productImage->getHeight() . 'px;';
                                 . 'top:' . $productImage->getHeight() . 'px;';
@@ -64,6 +89,7 @@ $_helper = $block->getData('outputHelper');
                            class="product photo product-item-photo"
                            class="product photo product-item-photo"
                            tabindex="-1">
                            tabindex="-1">
                             <?= $productImage->toHtml() ?>
                             <?= $productImage->toHtml() ?>
+                            <img class="hoverImg"  whidth="<?= $productImage->getWidth() ?>" height="<?= $productImage->getHeight() ?>" src="<?= $haverImg ?>">
                         </a>
                         </a>
                         <div class="product details product-item-details">
                         <div class="product details product-item-details">
                             <?php $_productNameStripped = $block->stripTags($_product->getName(), null, true); ?>
                             <?php $_productNameStripped = $block->stripTags($_product->getName(), null, true); ?>