Encapsulate shopping label functionality. (#37515)

ampproject · Jan 31, 2022 · 0eab595 · 0eab595
1 parent fad7fbc
commit 0eab595
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 deletions.
diff --git a/extensions/amp-story-page-attachment/0.1/amp-story-open-page-attachment.js b/extensions/amp-story-page-attachment/0.1/amp-story-open-page-attachment.js
@@ -99,11 +99,6 @@ const ctaLabelFromAttr = (element) =>
  */
 const openLabelOrFallback = (element, attachmentEl, label) => {
   const localizationService = Services.localizationForDoc(element);
-  if (attachmentEl.parentElement.tagName === 'AMP-STORY-SHOPPING-ATTACHMENT') {
-    return localizationService.getLocalizedString(
-      LocalizedStringId_Enum.AMP_STORY_SHOPPING_CTA_LABEL
-    );
-  }
   return (
     label?.trim() ||
     localizationService.getLocalizedString(

diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-attachment.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-attachment.js
@@ -54,21 +54,25 @@ export class AmpStoryShoppingAttachment extends AMP.BaseElement {
   /** @override */
   buildCallback() {
     loadFonts(this.win, FONTS_TO_LOAD);
-    this.attachmentEl_ = (
-      <amp-story-page-attachment
-        layout="nodisplay"
-        theme={this.element.getAttribute('theme')}
-      ></amp-story-page-attachment>
-    );
-    this.element.appendChild(this.attachmentEl_);
-    this.attachmentEl_.appendChild(this.plpContainer_);
 
     return Promise.all([
       Services.storyStoreServiceForOrNull(this.win),
       Services.localizationServiceForOrNull(this.element),
     ]).then(([storeService, localizationService]) => {
       this.storeService_ = storeService;
       this.localizationService_ = localizationService;
+
+      this.attachmentEl_ = (
+        <amp-story-page-attachment
+          layout="nodisplay"
+          theme={this.element.getAttribute('theme')}
+          cta-text={this.localizationService_.getLocalizedString(
+            LocalizedStringId_Enum.AMP_STORY_SHOPPING_CTA_LABEL
+          )}
+        ></amp-story-page-attachment>
+      );
+      this.element.appendChild(this.attachmentEl_);
+      this.attachmentEl_.appendChild(this.plpContainer_);
     });
   }
 

diff --git a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-attachment.js b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-attachment.js
@@ -89,6 +89,14 @@ describes.realWin(
       expect(() => shoppingImpl.layoutCallback()).to.not.throw();
     });
 
+    it('should build CTA with i18n shopping label text', async () => {
+      await dispatchTestShoppingData();
+      const attachmentChildEl = shoppingEl.querySelector(
+        'amp-story-page-attachment'
+      );
+      expect(attachmentChildEl.getAttribute('cta-text')).to.equal('Shop Now');
+    });
+
     it('should open attachment', async () => {
       await dispatchTestShoppingData();
       const attachmentChildEl = shoppingEl.querySelector(