-
Notifications
You must be signed in to change notification settings - Fork 3.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
✨ amp-story-shopping Updated currency with product price and correct …
…Localized currency (#37249) * updated PR with localization service that fetches the correct lanaguage ISO code, updated the visual diff test * fixed a few typos * added dependency * added ecimal exmaples * added localization langauge code * added in i18n visual diff test, changen strings to numbers * deleted duplicate test * deleted duplicate test * removed shopping tag span - will meo it to another PR when ready * added correct types for parameters * udpated price in visual diff test * udtaed unit test * updated product price * added localization service stub to unit tests * added localization service variable * removed unused allowlist entry * created a class method, followed pattern * added back code * added back code * added onclick fix * removed tag data from onclcik method * removed duplicate page id
- Loading branch information
Showing
9 changed files
with
260 additions
and
57 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
165 changes: 165 additions & 0 deletions
165
examples/visual-tests/amp-story/amp-story-shopping-lang-de.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,165 @@ | ||
| <!doctype html> | ||
| <!-- This tests the internationalization number formatting for the German Euro (the positioning of commas and decimal points), see | ||
| https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat for more info --> | ||
| <html amp lang="de"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>Shopping</title> | ||
| <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> | ||
| <style amp-custom> | ||
| [data-tag-id="hat"] { | ||
| top: 33%; | ||
| left: 7%; | ||
| } | ||
| [data-tag-id="sunglasses"] { | ||
| top: 28%; | ||
| left: 43%; | ||
| } | ||
| [data-tag-id="backpack"] { | ||
| top: 33%; | ||
| left: 80%; | ||
| } | ||
| [data-tag-id=city-pop] { | ||
| top: 33%; | ||
| left: 7%; | ||
| } | ||
| [data-tag-id=euro-dance] { | ||
| top: 43%; | ||
| left: 57%; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <amp-story | ||
| standalone | ||
| title="Story Shopping Component" | ||
| 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"> | ||
| <!-- | ||
| Example of | ||
| Inline config. | ||
| Multiple product tags with icon defined. | ||
| --> | ||
| <amp-story-shopping-config layout="nodisplay"> | ||
| <script type="application/json"> | ||
| { | ||
| "items" : [ | ||
| { | ||
| "product-tag-id": "hat", | ||
| "product-title": "Hootenanny Hat", | ||
| "product-price": 123456.789, | ||
| "product-price-currency": "USD", | ||
| "product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-mini-icon.png" | ||
| }, | ||
| { | ||
| "product-tag-id": "sunglasses", | ||
| "product-title": "Spectacular Spectacles", | ||
| "product-price": 123456.789, | ||
| "product-price-currency": "INR", | ||
| "product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-audio-icon.png" | ||
| }, | ||
| { | ||
| "product-tag-id": "backpack", | ||
| "product-title": "Beastly Backpack", | ||
| "product-price": 123456.789, | ||
| "product-price-currency": "BRL", | ||
| "product-tag-text": "Beastly Backpack", | ||
| "product-icon": "/examples/visual-tests/amp-story/img/shopping/nest-home-icon.png" | ||
| }, | ||
| { | ||
| "product-tag-id": "euro-dance", | ||
| "product-title": "Dolphin Dance", | ||
| "product-price": 123456.789, | ||
| "product-price-currency": "EUR" | ||
| } | ||
| ] | ||
| } | ||
| </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-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="euro-dance" ></amp-story-shopping-tag> | ||
| </amp-story-grid-layer> | ||
| <amp-story-shopping-attachment></amp-story-shopping-attachment> | ||
| </amp-story-page> | ||
| <amp-story-page id="remote-dark-theme"> | ||
| <!-- | ||
| Example of: | ||
| Remote JSON with inline fallback. | ||
| Single product tag without icon. | ||
| --> | ||
| <amp-story-shopping-config layout="nodisplay" src="/examples/amp-story/shopping/remote.json" > | ||
| <script type="application/json"> | ||
| { | ||
| "items" : [ | ||
| { | ||
| "product-tag-id": "city-pop", | ||
| "product-title": "Plastic Love", | ||
| "product-price": 19, | ||
| "product-price-currency": "JPY", | ||
| } | ||
| ] | ||
| } | ||
| </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-story-grid-layer> | ||
| <amp-story-grid-layer template="vertical"> | ||
| <amp-story-shopping-tag data-tag-id="city-pop" ></amp-story-shopping-tag> | ||
| </amp-story-grid-layer> | ||
| <amp-story-shopping-attachment theme="dark"></amp-story-shopping-attachment> | ||
| </amp-story-page> | ||
| <amp-story-page id="inline-no-product"> | ||
| <!-- | ||
| Example of: | ||
| CTA Button not rendering due to no product tags. | ||
| --> | ||
| <amp-story-shopping-config layout="nodisplay"> | ||
| <script type="application/json"> | ||
| { | ||
| "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-story-grid-layer> | ||
| <amp-story-grid-layer template="vertical"> | ||
| </amp-story-grid-layer> | ||
| <amp-story-shopping-attachment></amp-story-shopping-attachment> | ||
| </amp-story-page> | ||
| <amp-story-page id="remote-with-product"> | ||
| <!-- | ||
| Example of: | ||
| CTA Button rendering due to remote product tag existing, but no inline. | ||
| --> | ||
| <amp-story-shopping-config layout="nodisplay" src="/examples/amp-story/shopping/remote.json" > | ||
| <script type="application/json"> | ||
| { | ||
| "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-story-grid-layer> | ||
| <amp-story-grid-layer template="vertical"> | ||
| <amp-story-shopping-tag data-tag-id="city-pop" ></amp-story-shopping-tag> | ||
| </amp-story-grid-layer> | ||
| <amp-story-shopping-attachment theme="dark"></amp-story-shopping-attachment> | ||
| </amp-story-page> | ||
| </amp-story> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.