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

✨ Render page level CTA when amp-story-shopping-attachment exists #36721

Merged
merged 11 commits into from
Nov 3, 2021
Merged

✨ Render page level CTA when amp-story-shopping-attachment exists #36721

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
115a091
Add shopping attachment to list of attachment elements with CTA UI.
processprocess Nov 2, 2021
75192c7
Add visual test
processprocess Nov 2, 2021
5293a00
Remove whitespace
processprocess Nov 2, 2021
67490b9
Use amp-story-draggable-drawer-root
processprocess Nov 3, 2021
71e023e
Add dark theme page to example.
processprocess Nov 3, 2021
aef35c3
Update ID
processprocess Nov 3, 2021
25f51d1
use shopping attachment.
processprocess Nov 3, 2021
5916274
remove empty space
processprocess Nov 3, 2021
db34888
Merge branch 'ampproject:main' into shopping-attachment-cta
processprocess Nov 3, 2021
108dc57
Update diff path.
processprocess Nov 3, 2021
a320970
Merge branch 'ampproject:main' into shopping-attachment-cta
processprocess Nov 3, 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
10 changes: 9 additions & 1 deletion examples/amp-story/amp-story-shopping.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,21 @@
publisher="AMP Story Shopping"
publisher-logo-src="example.com/logo.png"
poster-portrait-src="example.com/poster.jpg">
<amp-story-page id="example">
<amp-story-page id="default">
<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'></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>
44 changes: 44 additions & 0 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
@@ -0,0 +1,44 @@
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<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-grid-layer template="vertical">
<amp-story-shopping-tag></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>
19 changes: 19 additions & 0 deletions examples/visual-tests/amp-story/amp-story-shopping.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
'use strict';

const {
verifySelectorsVisible,
} = require('../../../build-system/tasks/visual-diff/helpers');

module.exports = {
'dark theme - shopping CTA UI should display': async (page, name) => {
const pageID = 'dark-theme';
const url = await page.url();
await page.goto(`${url}#page=${pageID}`);
await page.waitForSelector(
`amp-story-page#${pageID}[active][distance="0"]`
);
await verifySelectorsVisible(page, name, [
'.i-amphtml-story-page-open-attachment[active]',
]);
},
};
6 changes: 3 additions & 3 deletions extensions/amp-story/1.0/amp-story-page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1706,9 +1706,9 @@ export class AmpStoryPage extends AMP.BaseElement {
* @private
*/
renderOpenAttachmentUI_() {
// AttachmentEl can be either amp-story-page-attachment or amp-story-page-outlink
// AttachmentEl can be any component that extends draggable drawer.
const attachmentEl = this.element.querySelector(
'amp-story-page-attachment, amp-story-page-outlink'
'amp-story-page-attachment, amp-story-page-outlink, amp-story-shopping-attachment'
processprocess marked this conversation as resolved.
Show resolved Hide resolved
);
if (!attachmentEl) {
return;
Expand Down Expand Up @@ -1762,7 +1762,7 @@ export class AmpStoryPage extends AMP.BaseElement {
*/
openAttachment(shouldAnimate = true) {
const attachmentEl = this.element.querySelector(
'amp-story-page-attachment, amp-story-page-outlink'
'amp-story-page-attachment, amp-story-page-outlink, amp-story-shopping-attachment'
);

if (!attachmentEl) {
Expand Down
9 changes: 8 additions & 1 deletion test/visual-diff/visual-tests.jsonc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -809,6 +809,13 @@
"viewport": {"width": 1440, "height": 900},
"loading_complete_selectors": [".i-amphtml-story-loaded"],
"interactive_tests": "examples/visual-tests/amp-story/amp-story-page-attachment.js"
}
},
{
"url": "examples/visual-tests/amp-story/amp-story-shopping.html",
"name": "amp-story-shopping UI",
"viewport": {"width": 320, "height": 480},
"loading_complete_selectors": [".i-amphtml-story-loaded"],
"interactive_tests": "examples/visual-tests/amp-story/amp-story-shopping.js"
}
]
}