✨ amp-story-shopping-config data json handle get and set config data

build-system/test-configs/dep-check-config.js

@@ -265,6 +265,8 @@ exports.rules = [
 
       // Story Shopping
       'extensions/amp-story-shopping/0.1/amp-story-shopping-attachment.js->extensions/amp-story/1.0/amp-story-page-attachment.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-tag.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',

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

@@ -17,21 +17,65 @@
         publisher="AMP Story Shopping"
         publisher-logo-src="example.com/logo.png"
         poster-portrait-src="example.com/poster.jpg">
-      <amp-story-page id="default">
-        <amp-story-shopping-config layout='nodisplay'></amp-story-shopping-config>
+      <amp-story-page id="example">
+        <!--
+          This is an example of a JSON config retrieved from a source file.
+          To use the inline JSON config, remove the src attribute.
+        -->
+        <amp-story-shopping-config layout='nodisplay' src="/examples/amp-story/shopping/remote.json" >
+          <script type="application/json">
+            {
+                "items" : [
+                   {
+                    "product-tag-id": "hat",
+                    "brand-label": "...",
+                    "brand-favicon": "...",
+                    "product-title": "Hootenanny Hat",
+                    "product-price": "...",
+                    "product-images": "...",
+                    "product-details": "...",
+                    "reviews-page": "...",
+                    "reviews-data": "...",
+                    "cta-text": 1,
+                    "shipping-text": 1
+                   },
+                   {
+                    "product-tag-id": "sunglasses",
+                    "brand-label": "...",
+                    "brand-favicon": "...",
+                    "product-title": "Spectacular Spectacles",
+                    "product-price": "...",
+                    "product-images": "...",
+                    "product-details": "...",
+                    "reviews-page": "...",
+                    "reviews-data": "...",
+                    "cta-text": 1,
+                    "shipping-text": 1
+                   },
+                   {
+                    "product-tag-id": "backpack",
+                    "brand-label": "...",
+                    "brand-favicon": "...",
+                    "product-title": "Beastly Backpack",
+                    "product-price": "...",
+                    "product-images": "...",
+                    "product-details": "...",
+                    "reviews-page": "...",
+                    "reviews-data": "...",
+                    "cta-text": 1,
+                    "shipping-text": 1
+                   }
+                ]
+              }
+          </script>
+        </amp-story-shopping-config>
         <amp-story-grid-layer template="vertical">
-          <amp-story-shopping-tag></amp-story-shopping-tag>
+          <amp-story-shopping-tag tag-data-id="hat" ></amp-story-shopping-tag>
+          <amp-story-shopping-tag tag-data-id="sunglasses" ></amp-story-shopping-tag>
+          <amp-story-shopping-tag tag-data-id="backpack" ></amp-story-shopping-tag>
         </amp-story-grid-layer>
         <amp-story-shopping-attachment layout='nodisplay'></amp-story-shopping-attachment>
       </amp-story-page>
-
-      <amp-story-page id="dark-theme">
-        <amp-story-shopping-config layout='nodisplay'></amp-story-shopping-config>
-        <amp-story-grid-layer template="vertical">
-          <amp-story-shopping-tag></amp-story-shopping-tag>
-        </amp-story-grid-layer>
-        <amp-story-shopping-attachment layout='nodisplay' theme="dark"></amp-story-shopping-attachment>
-      </amp-story-page>
     </amp-story>
   </body>
 </html>

examples/amp-story/shopping/remote.json

@@ -0,0 +1,43 @@
+{
+  "items": [
+    {
+      "product-tag-id": "hat",
+      "brand-label": "...",
+      "brand-favicon": "...",
+      "product-title": "Hootenanny Hat",
+      "product-price": "...",
+      "product-images": "...",
+      "product-details": "...",
+      "reviews-page": "...",
+      "reviews-data": "...",
+      "cta-text": 1,
+      "shipping-text": 1
+    },
+    {
+      "product-tag-id": "sunglasses",
+      "brand-label": "...",
+      "brand-favicon": "...",
+      "product-title": "Spectacular Spectacles",
+      "product-price": "...",
+      "product-images": "...",
+      "product-details": "...",
+      "reviews-page": "...",
+      "reviews-data": "...",
+      "cta-text": 1,
+      "shipping-text": 1
+    },
+    {
+      "product-tag-id": "backpack",
+      "brand-label": "...",
+      "brand-favicon": "...",
+      "product-title": "Beastly Backpack",
+      "product-price": "...",
+      "product-images": "...",
+      "product-details": "...",
+      "reviews-page": "...",
+      "reviews-data": "...",
+      "cta-text": 1,
+      "shipping-text": 1
+    }
+  ]
+}

extensions/amp-story-shopping/0.1/amp-story-shopping-config.js

@@ -1,4 +1,12 @@
-import {Layout, applyFillContent} from '#core/dom/layout';
+import {isJsonScriptTag} from '#core/dom';
+import {Layout} from '#core/dom/layout';
+import {parseJson} from '#core/types/object/json';
+
+import {Services} from '#service';
+
+import {devAssert, user, userAssert} from '#utils/log';
+
+import {Action} from '../../amp-story/1.0/amp-story-store-service';
 
 const TAG = 'amp-story-shopping-config';
 
@@ -8,23 +16,99 @@ export class AmpStoryShoppingConfig extends AMP.BaseElement {
     super(element);
 
     /** @private {string} */
-    this.myText_ = TAG;
+    this.element_ = element;
+
+    /** @private @const {!./amp-story-store-service.AmpStoryStoreService} */
+    this.storeService_ = null;
+  }
 
-    /** @private {?Element} */
-    this.container_ = null;
+  /**
+   * Keys product data to product-ids and adds them to the store service.
+   * @private
+   * @param {!JsonObject} storyConfig
+   */
+  dispatchConfig_(storyConfig) {
+    const productIDtoProduct = {};
+
+    for (const item of storyConfig['items']) {
+      productIDtoProduct[item['product-tag-id']] = item;
+    }
+
+    this.storeService_.dispatch(Action.ADD_SHOPPING_STATE, productIDtoProduct);
+
+    //TODO: add call to validate config here. See validation I2I #36412 for implementation details
   }
 
   /** @override */
   buildCallback() {
     super.buildCallback();
-    this.container_ = this.element.ownerDocument.createElement('div');
-    this.container_.textContent = this.myText_;
-    this.element.appendChild(this.container_);
-    applyFillContent(this.container_, /* replacedContent */ true);
+    return Services.storyStoreServiceForOrNull(this.win).then(
+      (storeService) => {
+        devAssert(storeService, 'Could not retrieve AmpStoryStoreService');
+
+        this.storeService_ = storeService;
+
+        this.getConfig().then((storyConfig) => {
+          //if remote config is not valid, try using the inline config
+          if (storyConfig == null && this.element_.hasAttribute('src')) {
+            this.getInlineConfig_(this.element_.firstElementChild).then(
+              (storyInlineconfig) => {
+                this.dispatchConfig_(storyInlineconfig);
+              }
+            );
+          } else {
+            this.dispatchConfig_(storyConfig);
+          }
+        });
+      }
+    );
   }
 
   /** @override */
   isLayoutSupported(layout) {
     return layout === Layout.NODISPLAY;
   }
+
+  /**
+   * @return {!JsonObject}
+   */
+  getConfig() {
+    const configData = this.element_.hasAttribute('src')
+      ? this.getRemoteConfig_()
+      : this.getInlineConfig_(this.element_.firstElementChild);
+
+    return configData;
+  }
+
+  /**
+   * @param {!Element} child
+   * @return {!JsonObject}
+   */
+  getInlineConfig_(child) {
+    userAssert(
+      child && isJsonScriptTag(child),
+      `The ${TAG} should ` +
+        'be inside a <script> tag with type="application/json"'
+    );
+
+    const inlineJSONConfig = parseJson(child.textContent);
+
+    return Promise.resolve(inlineJSONConfig);
+  }
+
+  /**
+   * @return {!JsonObject}
+   */
+  getRemoteConfig_() {
+    return Services.xhrFor(this.win)
+      .fetchJson(this.element_.getAttribute('src'))
+      .then((response) => response.json())
+      .catch((err) => {
+        user().error(
+          TAG,
+          'error determining if remote config is valid json: bad url or bad json',
+          err
+        );
+      });
+  }
 }

extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js

@@ -1,30 +1,49 @@
 import {Layout, applyFillContent} from '#core/dom/layout';
 
+import {Services} from '#service';
+
+import {StateProperty} from '../../amp-story/1.0/amp-story-store-service';
+
 const TAG = 'amp-story-shopping-tag';
 
 export class AmpStoryShoppingTag extends AMP.BaseElement {
   /** @param {!AmpElement} element */
   constructor(element) {
     super(element);
 
-    /** @private {string} */
-    this.myText_ = TAG;
-
-    /** @private {?Element} */
-    this.container_ = null;
+    /** @private @const {!./amp-story-store-service.AmpStoryStoreService} */
+    this.storeService_ = null;
   }
 
   /** @override */
   buildCallback() {
     super.buildCallback();
-    this.container_ = this.element.ownerDocument.createElement('div');
-    this.container_.textContent = this.myText_;
-    this.element.appendChild(this.container_);
-    applyFillContent(this.container_, /* replacedContent */ true);
+    this.element.textContent = this.myText_;
+    applyFillContent(this.element, /* replacedContent */ true);
+    return Promise.all([
+      Services.storyStoreServiceForOrNull(this.win).then((storeService) => {
+        this.storeService_ = storeService;
+        this.storeService_.subscribe(
+          StateProperty.SHOPPING_STATE,
+          (shoppingState) => this.updateShoppingTag_(shoppingState)
+        );
+      }),
+    ]);
   }
 
   /** @override */
   isLayoutSupported(layout) {
     return layout === Layout.CONTAINER;
   }
+
+  /**
+   * @param {Object} shoppingState
+   * @private
+   */
+  updateShoppingTag_(shoppingState) {
+    const tagData = shoppingState[this.element.getAttribute('tag-data-id')];
+    if (tagData != null) {
+      this.element.textContent = tagData['product-title'];
+    }
+  }
 }

extensions/amp-story-shopping/0.1/amp-story-shopping.js

@@ -5,6 +5,7 @@ import {AmpStoryShoppingTag} from './amp-story-shopping-tag';
 import {CSS as shoppingCSS} from '../../../build/amp-story-shopping-0.1.css';
 
 AMP.extension('amp-story-shopping', '0.1', (AMP) => {
+  AMP.registerElement('amp-story-shopping-config', AmpStoryShoppingConfig);
   AMP.registerElement(
     'amp-story-shopping-tag',
     AmpStoryShoppingTag,
@@ -14,5 +15,4 @@ AMP.extension('amp-story-shopping', '0.1', (AMP) => {
     'amp-story-shopping-attachment',
     AmpStoryShoppingAttachment
   );
-  AMP.registerElement('amp-story-shopping-config', AmpStoryShoppingConfig);
 });