手机版商品详情优化

app/design/frontend/Joshine/breeze/Magento_Catalog/templates/product/view/gallery.phtml

@@ -76,9 +76,10 @@ $thumbSizes = $responsiveImageHelper->getSizes('product_page_image_small');
         </a>
         </a>
     </div>
     </div>
 
 
-    <div class="thumbnails <?php echo $navType ? '' : 'hidden' ?>">
+    <div class="thumbnails <?php echo $navType ? '' : 'hidden' ?>" style="display: none;">
         <?php if (count($images) > 1) : // empty parent wrapper may be used at configurable product page ?>
         <?php if (count($images) > 1) : // empty parent wrapper may be used at configurable product page ?>
-            <?php foreach ($images as $image) : ?>
+            <?php
+            foreach ($images as $image) : ?>
                 <?php
                 <?php
                 $classes = array_filter([
                 $classes = array_filter([
                     'item',
                     'item',
@@ -102,6 +103,14 @@ $thumbSizes = $responsiveImageHelper->getSizes('product_page_image_small');
             <?php endforeach ?>
             <?php endforeach ?>
         <?php endif ?>
         <?php endif ?>
     </div>
     </div>
+    <div class="thumbnails-2" style="display: none;">
+        <ul class="des">
+        <?php
+        for($i=1;$i<count($images)+1;$i++) : ?>
+            <li><?= $i; ?></li>
+        <?php endfor ?>
+        </ul>
+    </div>
 </div>
 </div>
 
 
 <script type="text/x-magento-init">
 <script type="text/x-magento-init">
@@ -134,6 +143,44 @@ $thumbSizes = $responsiveImageHelper->getSizes('product_page_image_small');
         border-radius: 50%;
         border-radius: 50%;
         background-color: #fff;
         background-color: #fff;
     }
     }
+
+    @media (min-width: 768px) {
+        .breeze-gallery .thumbnails {
+           display: block !important;
+        }
+
+    }
+    @media (max-width: 768px) {
+        .breeze-gallery .thumbnails-2 {
+            display: block !important;
+            TEXT-ALIGN: center;
+            margin-top: -100px;
+            z-index: 999;
+        }
+        .thumbnails-2  > ul {
+            display: flex;
+            flex-flow: row nowrap;
+            justify-content: center;
+        }
+        .thumbnails-2  > ul li {
+            list-style: none;
+            text-align: center;
+            height: 15px;
+            font-size: 0px;
+            color: #000;
+            font-weight: 700;
+            background-color: #000;
+            width: 15px;
+            border-radius: 50%;
+            margin: 2px;
+        }
+
+        .active{
+            background-color: #fff;
+            color: #fff;
+        }
+
+    }
 </style>
 </style>
 
 
 <script>
 <script>

app/design/frontend/Joshine/breeze/web/css/_custom.less

@@ -1604,8 +1604,8 @@ footer{
     color:#b2b2b2;
     color:#b2b2b2;
   }
   }
   footer{
   footer{
-    padding-top: 120px;
-    margin-top: -140px;
+    padding-top: 115px;
+    margin-top: -120px;
     background-color: #f6f6f6;
     background-color: #f6f6f6;
     margin-bottom: env(safe-area-inset-bottom);
     margin-bottom: env(safe-area-inset-bottom);
   }
   }