🌐 Internationalization for CTA Text for Amp Story Shopping Component (#…

…37008) * added in new set cta text - needs localization PR and unit tests. * added some null checks * Added working cta migration button solution * added compactification for textcontent code * updated to sue new localization service * removed unued promise * archive this commit, jsut for rolback if needed * Added initial call (page change dens't get tirggered initially) * added store service and localization service dependency for shopping attachment * removed index selectors * added shopping data definition callback * added tests for cta button * cealnup up unit tests * removed lone newline * cleaned up unit tests * migrate page attachment code to page attachment file * added calltoinizilize, fixed refresh problem * code optimization * updated shopping label to use shop now * added in htmlrefs * added in page attachment optimziations * added in shop now string with JSX optimizations * removed store service * removed resgisterservicebuidler * removed unused dependencies * removed build callback * added a few nit fixes
ampproject · Dec 2, 2021 · 4ecf84d · 4ecf84d
1 parent ec4606c
commit 4ecf84d
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 44 deletions.
diff --git a/examples/amp-story/amp-story-shopping.html b/examples/amp-story/amp-story-shopping.html
@@ -54,16 +54,6 @@
                     "product-tag-id": "hat",
                     "product-title": "Hootenanny Hat",
                     "product-price": "799"
-                   },
-                   {
-                    "product-tag-id": "sunglasses",
-                    "product-title": "Spectacular Spectacles",
-                    "product-price": "400"
-                   },
-                   {
-                    "product-tag-id": "backpack",
-                    "product-title": "Beastly Backpack",
-                    "product-price": "1000"
                    }
                 ]
               }
@@ -74,15 +64,13 @@
         </amp-story-grid-layer>
         <amp-story-grid-layer template="vertical">
           <amp-story-shopping-tag data-tag-id="hat" ></amp-story-shopping-tag>
-          <amp-story-shopping-tag data-tag-id="sunglasses" ></amp-story-shopping-tag>
-          <amp-story-shopping-tag data-tag-id="backpack" ></amp-story-shopping-tag>
         </amp-story-grid-layer>
         <amp-story-shopping-attachment></amp-story-shopping-attachment>
       </amp-story-page>
       <amp-story-page id="remote-dark-theme">
         <!--
-          Example of JSON retrieved from src attribute.
-          Falls back to inline if request fails.
+          Example of JSON retrieved from src attribute,
+          falls back to inline if request fails.
         -->
         <amp-story-shopping-config layout="nodisplay" src="/examples/amp-story/shopping/remote.json" >
           <script type="application/json">

diff --git a/examples/visual-tests/amp-story/amp-story-shopping.html b/examples/visual-tests/amp-story/amp-story-shopping.html
@@ -54,16 +54,6 @@
                     "product-tag-id": "hat",
                     "product-title": "Hootenanny Hat",
                     "product-price": "799"
-                   },
-                   {
-                    "product-tag-id": "sunglasses",
-                    "product-title": "Spectacular Spectacles",
-                    "product-price": "400"
-                   },
-                   {
-                    "product-tag-id": "backpack",
-                    "product-title": "Beastly Backpack",
-                    "product-price": "1000"
                    }
                 ]
               }
@@ -74,8 +64,6 @@
         </amp-story-grid-layer>
         <amp-story-grid-layer template="vertical">
           <amp-story-shopping-tag data-tag-id="hat" ></amp-story-shopping-tag>
-          <amp-story-shopping-tag data-tag-id="sunglasses" ></amp-story-shopping-tag>
-          <amp-story-shopping-tag data-tag-id="backpack" ></amp-story-shopping-tag>
         </amp-story-grid-layer>
         <amp-story-shopping-attachment></amp-story-shopping-attachment>
       </amp-story-page>

diff --git a/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js b/extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js
@@ -5,7 +5,7 @@ import {Services} from '#service';
 
 import {CSS as shoppingTagCSS} from '../../../build/amp-story-shopping-tag-0.1.css';
 import {
-  ShoppingConfigDataDef,
+  ShoppingDataDef,
   StateProperty,
 } from '../../amp-story/1.0/amp-story-store-service';
 import {createShadowRootWithStyle} from '../../amp-story/1.0/utils';
@@ -36,13 +36,6 @@ const renderShoppingTagTemplate = (tagData) => (
   </div>
 );
 
-/**
- * @typedef {{
- *  items: !Map<string, !ShoppingConfigDataDef>,
- * }}
- */
-let ShoppingDataDef;
-
 export class AmpStoryShoppingTag extends AMP.BaseElement {
   /** @param {!AmpElement} element */
   constructor(element) {

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
@@ -1,3 +1,5 @@
+import {expect} from 'chai';
+
 import '../../../amp-story/1.0/amp-story';
 import '../amp-story-shopping';
 import {registerServiceBuilder} from '../../../../src/service-helpers';

diff --git a/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js b/extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-config.js
@@ -33,7 +33,7 @@ describes.realWin(
       });
 
       requestService = getRequestService(win);
-      registerServiceBuilder(win, 'story-store', function () {
+      registerServiceBuilder(win, 'story-request', function () {
         return requestService;
       });
 

diff --git a/extensions/amp-story/1.0/_locales/en.json b/extensions/amp-story/1.0/_locales/en.json
@@ -250,5 +250,9 @@
   "100": {
     "string": "Read more",
     "description": "Label for a button to open a drawer containing additional content."
+  },
+  "101": {
+    "string": "Shop Now",
+    "description": "Label for the shopping CTA button."
   }
 }
diff --git a/extensions/amp-story/1.0/amp-story-open-page-attachment.js b/extensions/amp-story/1.0/amp-story-open-page-attachment.js
@@ -82,15 +82,18 @@ const ctaLabelFromAttr = (element) =>
 
 /**
  * @param {!Element} element
- * @param {?string=} label
+ * @param {!Element} attachmentEl
+ * @param {?string} label
  * @return {?string}
  */
-const openLabelOrFallback = (element, label) =>
-  label?.trim() ||
-  localize(
-    element,
-    LocalizedStringId_Enum.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL
-  );
+const openLabelOrFallback = (element, attachmentEl, label) =>
+  attachmentEl.tagName === 'AMP-STORY-SHOPPING-ATTACHMENT'
+    ? localize(element, LocalizedStringId_Enum.AMP_STORY_SHOPPING_CTA_LABEL)
+    : label?.trim() ||
+      localize(
+        element,
+        LocalizedStringId_Enum.AMP_STORY_PAGE_ATTACHMENT_OPEN_LABEL
+      );
 
 /**
  * Renders inline page attachment UI.
@@ -113,6 +116,7 @@ const renderOutlinkUI = (pageEl, attachmentEl) => {
 
   const openLabel = openLabelOrFallback(
     pageEl,
+    attachmentEl,
     anchorChild?.textContent || ctaLabelFromAttr(attachmentEl)
   );
 
@@ -182,7 +186,11 @@ const renderInlineUi = (pageEl, attachmentEl) => {
   };
 
   const theme = attachmentEl.getAttribute('theme')?.toLowerCase();
-  const openLabel = openLabelOrFallback(pageEl, ctaLabelFromAttr(attachmentEl));
+  const openLabel = openLabelOrFallback(
+    pageEl,
+    attachmentEl,
+    ctaLabelFromAttr(attachmentEl)
+  );
 
   return (
     <a

diff --git a/extensions/amp-story/1.0/amp-story-store-service.js b/extensions/amp-story/1.0/amp-story-store-service.js
@@ -76,6 +76,13 @@ export let InteractiveReactData;
  */
 export let ShoppingConfigDataDef;
 
+/**
+ * @typedef {{
+ *  items: !Map<string, !ShoppingConfigDataDef>,
+ * }}
+ */
+export let ShoppingDataDef;
+
 /**
  * @typedef {{
  *    canInsertAutomaticAd: boolean,
@@ -244,7 +251,7 @@ const stateComparisonFunctions = {
 };
 
 /**
- * Returns the new sate.
+ * Returns the new state.
  * @param  {!State} state Immutable state
  * @param  {!Action} action
  * @param  {*} data

diff --git a/src/service/localization/strings.js b/src/service/localization/strings.js
@@ -111,6 +111,9 @@ export const LocalizedStringId_Enum = {
   AMP_STORY_INTERACTIVE_QUIZ_ANSWER_CHOICE_C: '73',
   AMP_STORY_INTERACTIVE_QUIZ_ANSWER_CHOICE_D: '74',
 
+  // amp-story-shopping
+  AMP_STORY_SHOPPING_CTA_LABEL: '101',
+
   // DEPRECATED_AMP_STORY_EXPERIMENT_ENABLE_BUTTON_LABEL: '0',
   // DEPRECATED_AMP_STORY_EXPERIMENT_ENABLED_TEXT: '1',
   // DEPRECATED_AMP_STORY_CONSENT_DISMISS_DIALOG_BUTTON_LABEL: '24',