[amp story shopping] Product Listing Page (PLP) (#37318)

* plp * comment * Styling * Number formatting function. * White space * Rename enum * abstract load fonts into amp-story * Fix conflict * revert * format number * revert * Abstract shared functions from shopping tag * Revert "Abstract shared functions from shopping tag" This reverts commit 6851845. * tag * test commit * revert test commit * lint * Update dep check * Example update * Update variable names. * Set template function * Update visual tests. * unit test * lint * Update config test with new entries. * formatI18nNumber test * lint fix * Attachment content unit test. * Types, comments and structure * comment * indention in example template. * Template variables. * lint fix * update test * template names * Add depends on story service. * add dep * Update templates. * CTA label * CSS prefix. MutateElement. * Update type * Attachment state listener for populating PLP. * Test for invalid currency * Update template and images to royalty free. * background image on cards. * Update images and template * Prevent experience from building if no tags are on page. * Update template. * Update string * whitespace * Text adjustments * Revert "Text adjustments" This reverts commit 91180de. * text adjustments * rebase * comment. * try catch to gracefully fallback to a number. * space * Link directly to images. * call open on amp-story-page-attachment * spaces * lint * price fallback * update tests * Update price fallback * newline * clean up tests
ampproject · Jan 28, 2022 · 6267780 · 6267780
1 parent a602362
commit 6267780
Show file tree

Hide file tree

Showing 22 changed files with 721 additions and 247 deletions.
diff --git a/build-system/test-configs/dep-check-config.js b/build-system/test-configs/dep-check-config.js
@@ -271,10 +271,12 @@ exports.rules = [
       'extensions/amp-story-share-menu/0.1/amp-story-share-menu.js->extensions/amp-story/1.0/toast.js',
 
       // Story Shopping
+      'extensions/amp-story-shopping/0.1/amp-story-shopping.js->extensions/amp-story/1.0/utils.js',
       'extensions/amp-story-shopping/0.1/amp-story-shopping-config.js->extensions/amp-story/1.0/amp-story-store-service.js',
       'extensions/amp-story-shopping/0.1/amp-story-shopping-config.js->extensions/amp-story/1.0/request-utils.js',
       'extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js->extensions/amp-story/1.0/amp-story-store-service.js',
       'extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js->extensions/amp-story/1.0/utils.js',
+      'extensions/amp-story-shopping/0.1/amp-story-shopping-attachment.js->extensions/amp-story/1.0/amp-story-store-service.js',
 
       // Interactive components that depend on story functionality.
       'extensions/amp-story-interactive/0.1/amp-story-interactive-abstract.js->extensions/amp-story/1.0/amp-story-store-service.js',

diff --git a/examples/amp-story/amp-story-shopping.html b/examples/amp-story/amp-story-shopping.html
@@ -7,35 +7,28 @@
     <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
     <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+    <script async custom-element="amp-story-page-attachment" src="https://cdn.ampproject.org/v0/amp-story-page-attachment-0.1.js"></script>
     <script async custom-element="amp-story-shopping" src="https://cdn.ampproject.org/v0/amp-story-shopping-0.1.js"></script>
     <style amp-custom>
-      [data-tag-id="hat"] {
-        top: 33%;
-        left: 7%;
+      [data-tag-id="lamp"],
+      [data-tag-id="lamp-rtl"] {
+        top: 31%;
+        left: 1%;
       }
-      [data-tag-id="sunglasses"] {
-        top: 28%;
-        left: 43%;
+      [data-tag-id="art"],
+      [data-tag-id="art-rtl"] {
+        top: 15%;
+        left: 40%;
       }
-      [data-tag-id="backpack"] {
-        top: 33%;
-        left: 60%;
+      [data-tag-id="chair"],
+      [data-tag-id="chair-rtl"] {
+        top: 53%;
+        left: 30%;
       }
-      [data-tag-id=city-pop] {
-        top: 33%;
-        left: 7%;
-      }
-      [data-tag-id="hat-rtl"] {
-        top: 33%;
-        left: 7%;
-      }
-      [data-tag-id="sunglasses-rtl"] {
-        top: 28%;
-        left: 43%;
-      }
-      [data-tag-id="backpack-rtl"] {
-        top: 33%;
-        left: 80%;
+      [data-tag-id="flowers"],
+      [data-tag-id="flowers-rtl"] {
+        top: 46%;
+        left: 83%;
       }
     </style>
   </head>
@@ -55,38 +48,51 @@
             {
                 "items" : [
                    {
-                    "product-tag-id": "hat",
-                    "product-title": "Hootenanny Hat",
+                    "product-tag-id": "lamp",
+                    "product-title": "Brass Lamp",
+                    "product-brand": "Lamp Co",
                     "product-price": 799.00,
                     "product-price-currency": "USD",
-                    "product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png"
+                    "product-images": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"]
                    },
                    {
-                    "product-tag-id": "sunglasses",
-                    "product-title": "Spectacular Spectacles",
-                    "product-price": 400.00,
+                    "product-tag-id": "art",
+                    "product-title": "Abstract Art",
+                    "product-brand": "V. Artsy",
+                    "product-price": 1200.00,
                     "product-price-currency": "INR",
-                    "product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png"
+                    "product-images": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"]
                    },
                    {
-                    "product-tag-id": "backpack",
-                    "product-title": "Beastly Backpack",
+                    "product-tag-id": "chair",
+                    "product-title": "Yellow chair",
+                    "product-brand": "Chair Co.",
                     "product-price": 1000.00,
                     "product-price-currency": "BRL",
-                    "product-tag-text": "Beastly Backpack Brews Beastly Beverages",
-                    "product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png"
+                    "product-tag-text": "The perfectly imperfect yellow chair",
+                    "product-images": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"]
+                   },
+                   {
+                    "product-tag-id": "flowers",
+                    "product-title": "Flowers",
+                    "product-brand": "Very Long Flower Company Name",
+                    "product-price": 10.00,
+                    "product-price-currency": "USD",
+                    "product-icon": "/examples/visual-tests/amp-story/img/shopping/icon.png",
+                    "product-images": ["https://source.unsplash.com/SavQfLRm4Do/500x500"]
                    }
                 ]
               }
           </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-img layout="fill" src="https://source.unsplash.com/_HqHX3LBN18/1000x2000"></amp-img>
         </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-shopping-tag data-tag-id="lamp" ></amp-story-shopping-tag>
+          <amp-story-shopping-tag data-tag-id="art" ></amp-story-shopping-tag>
+          <amp-story-shopping-tag data-tag-id="chair" ></amp-story-shopping-tag>
+          <amp-story-shopping-tag data-tag-id="flowers" ></amp-story-shopping-tag>
         </amp-story-grid-layer>
         <amp-story-shopping-attachment></amp-story-shopping-attachment>
       </amp-story-page>
@@ -99,20 +105,23 @@
             {
                 "items" : [
                    {
-                    "product-tag-id": "city-pop",
-                    "product-title": "Plastic Love",
-                    "product-price": 19.00,
+                    "product-tag-id": "art",
+                    "product-title": "Abstract Art",
+                    "product-brand": "V. Artsy",
+                    "product-price": 1200.00,
                     "product-price-currency": "JPY",
-                   }
+                    "product-images": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"]
+                   },
                 ]
               }
           </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-img layout="fill" src="https://source.unsplash.com/_HqHX3LBN18/1000x2000"></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-shopping-tag data-tag-id="art" ></amp-story-shopping-tag>
         </amp-story-grid-layer>
         <amp-story-shopping-attachment theme="dark"></amp-story-shopping-attachment>
       </amp-story-page>
@@ -124,15 +133,15 @@
         <amp-story-shopping-config layout="nodisplay" src="/examples/amp-story/shopping/remote.json" >
           <script type="application/json">
             {
-                "items" : []
-              }
+              "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-img layout="fill" src="https://source.unsplash.com/_HqHX3LBN18/1000x2000"></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-shopping-tag data-tag-id="art" ></amp-story-shopping-tag>
         </amp-story-grid-layer>
         <amp-story-shopping-attachment theme="dark"></amp-story-shopping-attachment>
       </amp-story-page>
@@ -144,38 +153,53 @@
           <script type="application/json">
             {
               "items" : [
-                 {
-                  "product-tag-id": "hat-rtl",
-                  "product-title": "Hootenanny Hat",
+                {
+                  "product-tag-id": "lamp-rtl",
+                  "product-title": "Brass Lamp",
+                  "product-brand": "Lamp Co",
                   "product-price": 799.00,
+                  "product-price-currency": "AED",
                   "product-tag-text": " حبا حبا حبا سعادةا سعادة",
-                  "product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png"
-                 },
-                 {
-                  "product-tag-id": "sunglasses-rtl",
-                  "product-title": "Spectacular Spectacles",
-                  "product-price": 400.00,
+                  "product-images": ["https://source.unsplash.com/Ry9WBo3qmoc/500x500"]
+                },
+                {
+                  "product-tag-id": "art-rtl",
+                  "product-title": "Abstract Art",
+                  "product-brand": "V. Artsy",
+                  "product-price-currency": "AED",
+                  "product-price": 1200.00,
                   "product-tag-text": "حبا حب سعادة قط حبا حب سعادة قط ",
-                  "product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png"
+                  "product-images": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"]
+                },
+                {
+                  "product-tag-id": "chair-rtl",
+                  "product-title": "Yellow chair",
+                  "product-brand": "Chair Co.",
+                  "product-price": 1000.00,
+                  "product-price-currency": "AED",
+                  "product-images": ["https://source.unsplash.com/DgQGKKLaVhY/500x500"]
                  },
                  {
-                  "product-tag-id": "backpack-rtl",
-                  "product-title": "Beastly Backpack",
-                  "product-price": 500.00,
+                  "product-tag-id": "flowers-rtl",
+                  "product-title": "Flowers",
+                  "product-brand": "Very Long Flower Company Name",
+                  "product-price": 10.00,
                   "product-price-currency": "AED",
-                  "product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png"
+                  "product-icon": "/examples/visual-tests/amp-story/img/shopping/icon.png",
+                  "product-images": ["https://source.unsplash.com/SavQfLRm4Do/500x500"]
                  }
               ]
             }
           </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-img layout="fill" src="https://source.unsplash.com/_HqHX3LBN18/1000x2000"></amp-img>
         </amp-story-grid-layer>
         <amp-story-grid-layer template="vertical">
-          <amp-story-shopping-tag data-tag-id="hat-rtl" ></amp-story-shopping-tag>
-          <amp-story-shopping-tag data-tag-id="sunglasses-rtl" ></amp-story-shopping-tag>
-          <amp-story-shopping-tag data-tag-id="backpack-rtl" ></amp-story-shopping-tag>
+          <amp-story-shopping-tag data-tag-id="lamp-rtl" ></amp-story-shopping-tag>
+          <amp-story-shopping-tag data-tag-id="art-rtl" ></amp-story-shopping-tag>
+          <amp-story-shopping-tag data-tag-id="chair-rtl" ></amp-story-shopping-tag>
+          <amp-story-shopping-tag data-tag-id="flowers-rtl" ></amp-story-shopping-tag>
         </amp-story-grid-layer>
         <amp-story-shopping-attachment></amp-story-shopping-attachment>
       </amp-story-page>
@@ -193,7 +217,7 @@
       </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-img layout="fill" src="https://source.unsplash.com/_HqHX3LBN18/1000x2000"></amp-img>
       </amp-story-grid-layer>
       <amp-story-shopping-attachment></amp-story-shopping-attachment>
       </amp-story-page>

diff --git a/examples/amp-story/shopping/remote.json b/examples/amp-story/shopping/remote.json
@@ -1,10 +1,12 @@
 {
   "items": [
     {
-      "product-tag-id": "city-pop",
-      "product-title": "Plastic Love",
-      "product-price": 19,
-      "product-price-currency": "JPY"
+      "product-tag-id": "art",
+      "product-title": "Abstract Art",
+      "product-brand": "V. Artsy",
+      "product-price": 1200.0,
+      "product-price-currency": "JPY",
+      "product-images": ["https://source.unsplash.com/BdVQU-NDtA8/500x500"]
     }
   ]
 }