🐛 Don't render CTA button when there are no shopping tags (#37114)

* added no rendering of shopping tag items when there are no items in the array

* added quick fix for attachmentEl

* added attachment element

* remove extra line

* added additional log

* Added additional check for if the attachment element is an amp story shopping attachment

* do not merge, removed line to fix end to end tests, will revert with next push

* reverting last push

* added UPPERCASE tag name check

examples/amp-story/amp-story-shopping.html

@@ -104,6 +104,45 @@
         </amp-story-grid-layer>
         <amp-story-shopping-attachment theme="dark"></amp-story-shopping-attachment>
       </amp-story-page>
+      <amp-story-page id="inline-no-product">
+          <!--
+            Example of:
+            CTA Button not rendering due to no product tags.
+          -->
+        <amp-story-shopping-config layout="nodisplay">
+          <script type="application/json">
+            {
+                "items" : []
+            }
+          </script>
+        </amp-story-shopping-config>
+        <amp-story-grid-layer template="fill">
+          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/shopping/bg.png"></amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical">
+        </amp-story-grid-layer>
+        <amp-story-shopping-attachment></amp-story-shopping-attachment>
+      </amp-story-page>
+      <amp-story-page id="remote-with-product">
+        <!--
+          Example of:
+          CTA Button rendering due to remote product tag existing, but no inline.
+        -->
+        <amp-story-shopping-config layout="nodisplay" src="/examples/amp-story/shopping/remote.json" >
+          <script type="application/json">
+            {
+                "items" : []
+              }
+          </script>
+        </amp-story-shopping-config>
+        <amp-story-grid-layer template="fill">
+          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/shopping/bg.png"></amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical">
+          <amp-story-shopping-tag data-tag-id="city-pop" ></amp-story-shopping-tag>
+        </amp-story-grid-layer>
+        <amp-story-shopping-attachment theme="dark"></amp-story-shopping-attachment>
+      </amp-story-page>
     </amp-story>
   </body>
 </html>

examples/visual-tests/amp-story/amp-story-shopping.html

@@ -104,6 +104,45 @@
         </amp-story-grid-layer>
         <amp-story-shopping-attachment theme="dark"></amp-story-shopping-attachment>
       </amp-story-page>
+      <amp-story-page id="inline-no-product">
+          <!--
+            Example of:
+            CTA Button not rendering due to no product tags.
+          -->
+        <amp-story-shopping-config layout="nodisplay">
+          <script type="application/json">
+            {
+                "items" : []
+            }
+          </script>
+        </amp-story-shopping-config>
+        <amp-story-grid-layer template="fill">
+          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/shopping/bg.png"></amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical">
+        </amp-story-grid-layer>
+        <amp-story-shopping-attachment></amp-story-shopping-attachment>
+      </amp-story-page>
+      <amp-story-page id="remote-with-product">
+        <!--
+          Example of:
+          CTA Button rendering due to remote product tag existing, but no inline.
+        -->
+        <amp-story-shopping-config layout="nodisplay" src="/examples/amp-story/shopping/remote.json" >
+          <script type="application/json">
+            {
+                "items" : []
+              }
+          </script>
+        </amp-story-shopping-config>
+        <amp-story-grid-layer template="fill">
+          <amp-img layout="fill" src="/examples/visual-tests/amp-story/img/shopping/bg.png"></amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="vertical">
+          <amp-story-shopping-tag data-tag-id="city-pop" ></amp-story-shopping-tag>
+        </amp-story-grid-layer>
+        <amp-story-shopping-attachment theme="dark"></amp-story-shopping-attachment>
+      </amp-story-page>
     </amp-story>
   </body>
 </html>

extensions/amp-story/1.0/amp-story-page.js

@@ -1577,7 +1577,13 @@ export class AmpStoryPage extends AMP.BaseElement {
     const attachmentEl = this.element.querySelector(
       'amp-story-page-attachment, amp-story-page-outlink, amp-story-shopping-attachment'
     );
-    if (!attachmentEl) {
+
+    if (
+      !attachmentEl ||
+      (attachmentEl.tagName === 'AMP-STORY-SHOPPING-ATTACHMENT' &&
+        this.element.getElementsByTagName('amp-story-shopping-tag').length ===
+          0)
+    ) {
       return;
     }