Merge pull request #1291 from Ubersmake/STRF-5007

Disable zoom and link for default "No Image" image.
bigcommerce · Jun 28, 2018 · b2b5f6a · b2b5f6a
2 parents d47c637 + 3b903a5
commit b2b5f6a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 - Fix wishlist dropdown background color bleeding out of container [#1283](https://github.com/bigcommerce/cornerstone/pull/1283)
 - Fix indefinite load spinner for products without an image in order history. [#1284](https://github.com/bigcommerce/cornerstone/pull/1284)
 - Fix Webpack DefinePlugin configuration. [#1286](https://github.com/bigcommerce/cornerstone/pull/1286)
+- Disable zoom and link for default "No Image" image. [#1291](https://github.com/bigcommerce/cornerstone/pull/1291)
 
 ## 2.2.0 (2018-06-22)
 - Fix quantity edit on Simple Product AMP pages. [#1257](https://github.com/bigcommerce/cornerstone/pull/1257)

diff --git a/templates/components/products/product-view.html b/templates/components/products/product-view.html
@@ -152,16 +152,25 @@ <h2 class="productView-brand"{{#if schema}} itemprop="brand" itemscope itemtype=
     <section class="productView-images" data-image-gallery>
         <figure class="productView-image"
                 data-image-gallery-main
+                {{#if product.main_image}}
                 data-zoom-image="{{getImage product.main_image 'zoom_size' (cdn theme_settings.default_image_product)}}"
+                {{/if}}
                 >
             <div class="productView-img-container">
-                <a href="{{getImage product.main_image 'zoom_size' (cdn theme_settings.default_image_product)}}">
-                    <img class="productView-image--default lazyload"
-                         data-sizes="auto"
-                         src="{{cdn 'img/loading.svg'}}"
-                         data-src="{{getImage product.main_image 'product_size' (cdn theme_settings.default_image_product)}}"
-                         alt="{{product.main_image.alt}}" title="{{product.main_image.alt}}" data-main-image>
-                </a>
+                {{!-- Remove the surrounding a-element if there is no main image. --}}
+                {{#if product.main_image}}
+                    <a href="{{getImage product.main_image 'zoom_size' (cdn theme_settings.default_image_product)}}">
+                {{/if}}
+
+                <img class="productView-image--default lazyload"
+                     data-sizes="auto"
+                     src="{{cdn 'img/loading.svg'}}"
+                     data-src="{{getImage product.main_image 'product_size' (cdn theme_settings.default_image_product)}}"
+                     alt="{{product.main_image.alt}}" title="{{product.main_image.alt}}" data-main-image>
+
+                {{#if product.main_image}}
+                    </a>
+                {{/if}}
             </div>
         </figure>
         <ul class="productView-thumbnails"{{#gt product.images.length 5}} data-slick='{