BCTHEME-327: PDP - Empty "Description" is Hiding All Tabs When in Tab…

… View (bigcommerce#1947)
sacr3dc0w · Mar 31, 2021 · 430418a · 430418a
1 parent ac84b64
commit 430418a
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 29 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- PDP - Fixed Empty "Description" Hiding All Tabs When in Tab View. [#1947](https://github.com/bigcommerce/cornerstone/pull/1947)
 - Added custom event for product price change on PDP page. [#1948](https://github.com/bigcommerce/cornerstone/pull/1948)
 - Fixed announcement of subscription message. [#1952](https://github.com/bigcommerce/cornerstone/pull/1952)
 - Error message on PLPs not announced by screen reader. [#1956](https://github.com/bigcommerce/cornerstone/pull/1956)

diff --git a/templates/components/products/description-tabs.html b/templates/components/products/description-tabs.html
@@ -1,9 +1,11 @@
 <ul class="tabs" data-tab>
-    <li class="tab is-active">
-        <a class="tab-title" href="#tab-description">{{lang 'products.description'}}</a>
-    </li>
+    {{#if product.description}}
+        <li class="tab is-active">
+            <a class="tab-title" href="#tab-description">{{lang 'products.description'}}</a>
+        </li>
+    {{/if}}
     {{#if product.warranty}}
-        <li class="tab">
+        <li class="tab {{#unless product.description}}is-active{{/unless}}">
             <a class="tab-title" href="#tab-warranty">{{lang 'products.warranty'}}</a>
         </li>
     {{/if}}
@@ -19,15 +21,17 @@
     {{/all}}
 </ul>
 <div class="tabs-contents">
-    <div class="tab-content is-active" id="tab-description">
-        {{{product.description}}}
-    </div>
-   {{#if product.warranty}}
-       <div class="tab-content" id="tab-warranty">
-           {{{product.warranty}}}
-       </div>
-   {{/if}}
-   {{#all product.custom_fields theme_settings.show_custom_fields_tabs}}
+    {{#if product.description}}
+        <div class="tab-content is-active" id="tab-description">
+            {{{product.description}}}
+        </div>
+    {{/if}}
+    {{#if product.warranty}}
+        <div class="tab-content {{#unless product.description}}is-active{{/unless}}" id="tab-warranty">
+            {{{product.warranty}}}
+        </div>
+    {{/if}}
+    {{#all product.custom_fields theme_settings.show_custom_fields_tabs}}
       <div class="tab-content" id="tab-{{dashcase (lowercase (sanitize theme_settings.pdp-custom-fields-tab-label))}}">
          <dl class="productView-info">
             {{#each product.custom_fields}}
@@ -36,10 +40,10 @@
             {{/each}}
          </dl>
       </div>
-   {{/all}}
-   {{#all settings.show_product_reviews theme_settings.show_product_reviews}}
+    {{/all}}
+    {{#all settings.show_product_reviews theme_settings.show_product_reviews}}
        <div class="tab-content" id="tab-reviews">
            {{> components/products/reviews reviews=product.reviews product=product urls=urls}}
        </div>
-   {{/all}}
+    {{/all}}
 </div>
diff --git a/templates/components/products/description.html b/templates/components/products/description.html
@@ -1,7 +1,9 @@
-<p class="productView-title">{{lang 'products.description'}}</p>
-<div class="productView-description" {{#if settings.data_tag_enabled}} data-event-type="product" {{/if}}>
-    {{{product.description}}}
-</div>
+{{#if product.description}}
+    <p class="productView-title">{{lang 'products.description'}}</p>
+    <div class="productView-description" {{#if settings.data_tag_enabled}} data-event-type="product" {{/if}}>
+        {{{product.description}}}
+    </div>
+{{/if}}
 
 {{#if product.warranty}}
     <p class="productView-title">{{lang 'products.warranty'}}</p>

diff --git a/templates/components/products/product-view.html b/templates/components/products/product-view.html
@@ -250,15 +250,13 @@ <h2 class="productView-brand"{{#if schema}} itemprop="brand" itemscope itemtype=
         {{/unless}}
     </section>
 
-    {{#if product.description}}
-        <article class="productView-description"{{#if schema}} itemprop="description"{{/if}}>
-            {{#if theme_settings.show_product_details_tabs}}
-                {{> components/products/description-tabs}}
-            {{else}}
-                {{> components/products/description}}
-            {{/if}}
-        </article>
-    {{/if}}
+    <article class="productView-description"{{#if schema}} itemprop="description"{{/if}}>
+        {{#if theme_settings.show_product_details_tabs}}
+            {{> components/products/description-tabs}}
+        {{else}}
+            {{> components/products/description}}
+        {{/if}}
+    </article>
 </div>
 
 <div id="previewModal" class="modal modal--large" data-reveal>