Skip to content

✨ amp-story-shopping Allow custom cta-text attribute #38101

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

Merged
jshamble merged 9 commits into from
Apr 16, 2022
Merged

✨ amp-story-shopping Allow custom cta-text attribute #38101

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
c62d520
set cta text done
jshamble Apr 14, 2022
0a1328b
set cta text done
jshamble Apr 14, 2022
2a929e1
update product descption and trim text
jshamble Apr 14, 2022
ce3acc5
update product descption and trim text
jshamble Apr 14, 2022
8287ebb
added null check
jshamble Apr 14, 2022
0e79eb4
updated shopping text
jshamble Apr 14, 2022
bb551ba
removed falsy value checks
jshamble Apr 14, 2022
d0fdc52
added unit test for custom cta
jshamble Apr 15, 2022
28ef487
Merge branch 'main' into customcta
jshamble Apr 15, 2022
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: 1 addition & 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 @@ -50,7 +50,7 @@
<!--
Example of Inline config. Multiple product tags with icon defined.
-->
<amp-story-shopping-attachment>
<amp-story-shopping-attachment cta-text="Shop Now!">
<script type="application/json">
{
"items" : [
Expand Down
6 changes: 3 additions & 3 deletions examples/amp-story/shopping/product.schema.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@
]
},
"productImages": {
"description": "A list of images for the product used in the carousel of the product page",
"description": "A list of images for the product used in the carousel of the product page.",
"type": "array",
"items": {
"required": ["url", "alt"],
Expand All @@ -225,7 +225,7 @@
}
},
"productDetails": {
"description": "Details about the product used in the product details page",
"description": "Details about the product used in the product details page.",
"type": "string"
},
"productBrand": {
Expand All @@ -237,7 +237,7 @@
"type": "string"
},
"productTagText": {
"description": "Text for the Prodcut tag. Supersedes productPrice",
"description": "Text for the Product tag. Supersedes productPrice.",
"type": "string"
},
"aggregateRating": {
Expand Down
2 changes: 1 addition & 1 deletion extensions/amp-story-shopping/0.1/amp-story-shopping-attachment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export class AmpStoryShoppingAttachment extends AMP.BaseElement {
<amp-story-page-attachment
layout="nodisplay"
theme={this.element.getAttribute('theme')}
cta-text={ctaText}
cta-text={this.element.getAttribute('cta-text')?.trim() || ctaText}
>
{this.templateContainer_}
</amp-story-page-attachment>
Expand Down
6 changes: 3 additions & 3 deletions extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-attachment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ describes.realWin(
<amp-story-page id="page1">
<amp-story-shopping-tag data-product-id="lamp"></amp-story-shopping-tag>
<amp-story-shopping-tag data-product-id="art"></amp-story-shopping-tag>
<amp-story-shopping-attachment>
<amp-story-shopping-attachment cta-text="Shop Now!">
<script type="application/json">
{JSON.stringify(shoppingData)}
</script>
Expand Down Expand Up @@ -159,8 +159,8 @@ describes.realWin(
expect(() => shoppingImpl.layoutCallback()).to.not.throw();
});

it('should build CTA with i18n shopping label text', () => {
expect(attachmentChildEl.getAttribute('cta-text')).to.equal('Shop Now');
it('should build CTA with custom i18n shopping label text', () => {
expect(attachmentChildEl.getAttribute('cta-text')).to.equal('Shop Now!');
});

it('should build PLP on attachment state open if no active product data', async () => {
Expand Down
4 changes: 4 additions & 0 deletions extensions/amp-story-shopping/amp-story-shopping.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,10 @@ Sets the color of the CTA button and drawer.
<img alt="theme" src="https://user-images.githubusercontent.com/3860311/161297644-f25837e0-82ec-4960-a219-edfaf7d09fd9.png"
layout="intrinsic" width="800" height="135">

#### `cta-text` {string} optional

String that customizes the call to action button text. The default is "Shop now".

### amp-story-shopping-attachment templates

Two types of templated pages render within the shopping attachment. They automatically populate with the product data from the configured JSON. the Product listing page (PLP) is a list of all products on the active story page. The Product details page (PDP) displays in-depth detail about the product such as images, text and a "Buy Now" button.
Expand Down
3 changes: 3 additions & 0 deletions extensions/amp-story-shopping/validator-amp-story-shopping.protoascii
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,9 @@ tags: { # <amp-story-shopping-attachment>
value: "dark"
value: "light"
}
attrs: {
name: "cta-text"
}
child_tags: {
child_tag_name_oneof: "SCRIPT"
mandatory_min_num_child_tags: 1
Expand Down