Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 57 commits into from
Nov 18, 2021
Merged

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

Show file tree
Hide file tree
Changes from 43 commits
Commits
Show all changes
57 commits
Select commit Hold shift + click to select a range
f34a46c
Added examples for inline and remote config loading of json files.
jshamble Nov 3, 2021
087b53f
finished tests for shopping config
jshamble Nov 4, 2021
e490dad
removed unnescessary function call
jshamble Nov 4, 2021
8e0502f
fixed merge conflict dleeting base shopping file
jshamble Nov 4, 2021
593250b
removed chai import
jshamble Nov 4, 2021
03879e9
removed unnesc assignment
jshamble Nov 4, 2021
aa5eb26
fixed prettier lint warnings
jshamble Nov 4, 2021
2ec626a
added dependencies for store service
jshamble Nov 4, 2021
87835e6
cleanup up code and tests to optmize code flow
jshamble Nov 4, 2021
5328ecd
cleaned up config files and test files
jshamble Nov 5, 2021
4993c22
added more refactoring of shopping story
jshamble Nov 5, 2021
dcd51d4
Updated test code with new tag id
jshamble Nov 5, 2021
58aa953
fixed formatting of remote file
jshamble Nov 5, 2021
dbef7ff
added remote config fiel formatting fix
jshamble Nov 5, 2021
5a67a03
added visual diff test
jshamble Nov 5, 2021
e711b93
updated visual diff test
jshamble Nov 6, 2021
fed6aab
updated unit tests to use public facing apis, removed dead code
jshamble Nov 9, 2021
c4baea7
updated unit tests to use public facing apis, removed dead code
jshamble Nov 9, 2021
8e0c94b
updated unit tests to use public facing apis, removed dead code
jshamble Nov 9, 2021
33d72d2
added page id
jshamble Nov 9, 2021
35bacc3
added load config impl (both solutions: one exposed export public met…
jshamble Nov 10, 2021
f7627d4
removed export ()may need to put back if want to use public facing apit
jshamble Nov 10, 2021
97f38e0
modified laodconfig to handle 404 errors
jshamble Nov 10, 2021
d555d92
removed unused var
jshamble Nov 10, 2021
6805ccb
added dependency for request service
jshamble Nov 10, 2021
606f109
Merge branch 'main' into shopDataJsonHandle
jshamble Nov 10, 2021
1508aa2
added a few recotoring shareconfig menthod
jshamble Nov 10, 2021
172c6a7
refactored code to use new request service.
jshamble Nov 10, 2021
194effe
Merge branch 'main' into shopDataJsonHandle
jshamble Nov 10, 2021
72e64a6
removed unused allow list entry
jshamble Nov 10, 2021
b8bf02a
added buidlcallback resolve
jshamble Nov 11, 2021
c0278c6
added implicit return
jshamble Nov 11, 2021
988ad88
added in code refactos
jshamble Nov 11, 2021
4c6283f
updated shoo[[ing state to shopping data
jshamble Nov 11, 2021
e2284fc
removed promise.resolve
jshamble Nov 11, 2021
0821aba
recatored shopping and shared config unit test code
jshamble Nov 11, 2021
152d97f
added in config refactor logic
jshamble Nov 11, 2021
0ba6f8c
streamlined commens and code
jshamble Nov 12, 2021
0120f15
fixed comment for circleci
jshamble Nov 12, 2021
517e53d
optmized code and unit tests
jshamble Nov 12, 2021
6371fd2
added shared config code
jshamble Nov 12, 2021
6a75291
refactored dead code
jshamble Nov 12, 2021
af5fdf4
added typedefs
jshamble Nov 15, 2021
cf5d899
added in refactor of social share widget
jshamble Nov 16, 2021
3e0c132
added shopping story test features
jshamble Nov 16, 2021
0599a2d
removed unnneded export
jshamble Nov 16, 2021
e0bb71b
udpated product images array
jshamble Nov 16, 2021
fbf7464
Merge branch 'main' into shopDataJsonHandle
jshamble Nov 16, 2021
f53685c
removed trailign whitespace
jshamble Nov 16, 2021
fe86615
removed unused vars
jshamble Nov 16, 2021
0184f18
removed unused config for now
jshamble Nov 17, 2021
fafa4a9
added back in dev asserts
jshamble Nov 17, 2021
d70055e
code compactification
jshamble Nov 17, 2021
732f9ab
Merge branch 'main' into shopDataJsonHandle
jshamble Nov 17, 2021
fde3e0d
stripped dev assert
jshamble Nov 17, 2021
793ccfd
fixed social share config
jshamble Nov 18, 2021
d86af91
Merge branch 'main' into shopDataJsonHandle
jshamble Nov 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions build-system/test-configs/dep-check-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,6 +266,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',
Expand Down
122 changes: 112 additions & 10 deletions examples/amp-story/amp-story-shopping.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html>
<html ⚡>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Shopping</title>
Expand All @@ -17,20 +17,122 @@
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="inline-light-theme">
<!--
Inline Shopping Component Config
-->
<amp-story-shopping-config layout="nodisplay">
<script type="application/json">
jshamble marked this conversation as resolved.
Show resolved Hide resolved
{
"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 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 layout='nodisplay'></amp-story-shopping-attachment>
<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-page id="remote-dark-theme">
<!--
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">
{
"items" : [
{
"product-tag-id": "city-pop",
"brand-label": "...",
"brand-favicon": "...",
"product-title": "Plastic Love",
"product-price": "...",
"product-images": "...",
"product-details": "...",
"reviews-page": "...",
"reviews-data": "...",
"cta-text": 1,
"shipping-text": 1
},
{
"product-tag-id": "k-pop",
"brand-label": "...",
"brand-favicon": "...",
"product-title": "Gangnam Style",
"product-price": "...",
"product-images": "...",
"product-details": "...",
"reviews-page": "...",
"reviews-data": "...",
"cta-text": 1,
"shipping-text": 1
},
{
"product-tag-id": "eurodance",
"brand-label": "...",
"brand-favicon": "...",
"product-title": "Crystal King Battle",
"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 data-tag-id="city-pop" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-tag-id="k-pop" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-tag-id="eurodance" ></amp-story-shopping-tag>
</amp-story-grid-layer>
<amp-story-shopping-attachment layout='nodisplay' theme="dark"></amp-story-shopping-attachment>
<amp-story-shopping-attachment layout="nodisplay" theme="dark"></amp-story-shopping-attachment>
</amp-story-page>
</amp-story>
</body>
Expand Down
43 changes: 43 additions & 0 deletions examples/amp-story/shopping/remote.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
{
"items": [
{
"product-tag-id": "city-pop",
"brand-label": "...",
"brand-favicon": "...",
"product-title": "Plastic Love",
"product-price": "...",
"product-images": "...",
"product-details": "...",
"reviews-page": "...",
"reviews-data": "...",
"cta-text": 1,
"shipping-text": 1
},
{
"product-tag-id": "k-pop",
"brand-label": "...",
"brand-favicon": "...",
"product-title": "Gangnam Style",
"product-price": "...",
"product-images": "...",
"product-details": "...",
"reviews-page": "...",
"reviews-data": "...",
"cta-text": 1,
"shipping-text": 1
},
{
"product-tag-id": "eurodance",
"brand-label": "...",
"brand-favicon": "...",
"product-title": "Crystal King Battle",
"product-price": "...",
"product-images": "...",
"product-details": "...",
"reviews-page": "...",
"reviews-data": "...",
"cta-text": 1,
"shipping-text": 1
}
]
}
147 changes: 121 additions & 26 deletions examples/visual-tests/amp-story/amp-story-shopping.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,42 +2,137 @@
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Shopping</title>
<link rel="canonical" href="amp-story-codelab.html">
jshamble marked this conversation as resolved.
Show resolved Hide resolved
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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-shopping" src="https://cdn.ampproject.org/v0/amp-story-shopping-0.1.js"></script>
<title>AMP Story Shopping</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="index.html">
<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>
<style amp-custom>
.i-amphtml-story-spinner-container {
/* Hide the spinner for loading pages, since this causes flakes */
display: none;
}
</style>
</head>

<body>
<amp-story standalone publisher="AMP Team" title="Visual Diff Test"
publisher-logo-src="/examples/visual-tests/photos/120.png"
poster-portrait-src="/examples/visual-tests/picsum.photos/image981_900x1600.jpg"
poster-landscape-src="/examples/visual-tests/picsum.photos/image981_1600x900.jpg"
poster-square-src="/examples/visual-tests/picsum.photos/image981_1600x1600.jpg"
supports-landscape>
<amp-story-page id="default">
<amp-story-shopping-config layout='nodisplay'></amp-story-shopping-config>
<amp-story
standalone
title="New Story Shopping Component Visual Diff Test"
publisher="AMP Story Shopping"
publisher-logo-src="example.com/logo.png"
poster-portrait-src="example.com/poster.jpg">
<amp-story-page id="inline-light-theme">
<!--
Inline Shopping Component Config
-->
<amp-story-shopping-config layout="nodisplay">
<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 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 layout='nodisplay'></amp-story-shopping-attachment>
<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-page id="remote-dark-theme">
jshamble marked this conversation as resolved.
Show resolved Hide resolved
<!--
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">
{
"items" : [
{
"product-tag-id": "city-pop",
"brand-label": "...",
"brand-favicon": "...",
"product-title": "Plastic Love",
"product-price": "...",
"product-images": "...",
"product-details": "...",
"reviews-page": "...",
"reviews-data": "...",
"cta-text": 1,
"shipping-text": 1
},
{
"product-tag-id": "k-pop",
"brand-label": "...",
"brand-favicon": "...",
"product-title": "Gangnam Style",
"product-price": "...",
"product-images": "...",
"product-details": "...",
"reviews-page": "...",
"reviews-data": "...",
"cta-text": 1,
"shipping-text": 1
},
{
"product-tag-id": "eurodance",
"brand-label": "...",
"brand-favicon": "...",
"product-title": "Crystal King Battle",
"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 data-tag-id="city-pop" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-tag-id="k-pop" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-tag-id="eurodance" ></amp-story-shopping-tag>
</amp-story-grid-layer>
<amp-story-shopping-attachment layout='nodisplay' theme="dark"></amp-story-shopping-attachment>
<amp-story-shopping-attachment layout="nodisplay" theme="dark"></amp-story-shopping-attachment>
</amp-story-page>
</amp-story>
</body>
Expand Down
2 changes: 1 addition & 1 deletion examples/visual-tests/amp-story/amp-story-shopping.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ const {

module.exports = {
'dark theme - shopping CTA UI should display': async (page, name) => {
const pageID = 'dark-theme';
const pageID = 'remote-dark-theme';
const url = await page.url();
await page.goto(`${url}#page=${pageID}`);
await page.waitForSelector(
Expand Down
Loading