Skip to content

✨added camelCase to amp-story-shoppping component #37533

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
processprocess merged 4 commits into from
Feb 1, 2022
Merged

✨added camelCase to amp-story-shoppping component #37533

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1d74eaa
added camelCase
jshamble Feb 1, 2022
9efa362
fixed find and replace bugs
jshamble Feb 1, 2022
fc0605d
fixed find and replace bugs
jshamble Feb 1, 2022
dce556e
added correct class
jshamble Feb 1, 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
Prev Previous commit
Next Next commit
fixed find and replace bugs
  • Loading branch information
@jshamble
jshamble committed Feb 1, 2022
commit 9efa362b39247d1eaa6698f84badc01fd1b22e52
12 changes: 6 additions & 6 deletions 3p/yotpo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ function getBottomLineContainer(global, data) {

const bottomLine = global.document.createElement('div');
bottomLine.className = 'yotpo bottomLine';
bottomLine.setAttribute('data-productId', data.productId);
bottomLine.setAttribute('data-product-id', data.productId);

childDiv.appendChild(bottomLine);

Expand All @@ -56,7 +56,7 @@ function getBottomLineContainer(global, data) {
function getMainWidgetContainer(global, data) {
const container = global.document.createElement('div');
container.className = 'yotpo yotpo-main-widget';
container.setAttribute('data-productId', data.productId);
container.setAttribute('data-product-id', data.productId);
container.setAttribute('data-name', data.name);
container.setAttribute('data-url', data.url);
container.setAttribute('data-image-url', data.imageUrl);
Expand Down Expand Up @@ -141,7 +141,7 @@ function getProductGalleryContainer(global, data) {
const container = global.document.createElement('div');
container.className =
'yotpo yotpo-pictures-gallery yotpo-product-gallery yotpo-size-6';
container.setAttribute('data-productId', data.productId);
container.setAttribute('data-product-id', data.productId);
container.setAttribute('data-demo', data.demo);
container.setAttribute('data-layout-rows', data.layoutRows);
container.setAttribute('data-layout-scroll', data.layoutScroll);
Expand Down Expand Up @@ -191,7 +191,7 @@ function getEmbeddedWidgetContainer(global, data) {
embeddedWidget.className = 'yotpo embedded-widget';
cellCentered.appendChild(embeddedWidget);

embeddedWidget.setAttribute('data-productId', data.productId);
embeddedWidget.setAttribute('data-product-id', data.productId);
embeddedWidget.setAttribute('data-demo', data.demo);
embeddedWidget.setAttribute('data-layout', data.layout);
embeddedWidget.setAttribute('data-width', data.width);
Expand Down Expand Up @@ -226,7 +226,7 @@ function getPhotosCarouselContainer(global, data) {
photosCarousel.className = 'yotpo yotpo-slider';
container.appendChild(photosCarousel);

photosCarousel.setAttribute('data-productId', data.productId);
photosCarousel.setAttribute('data-product-id', data.productId);
photosCarousel.setAttribute('data-demo', data.demo);

return container;
Expand All @@ -246,7 +246,7 @@ function getPromotedProductsContainer(global, data) {

container.setAttribute('id', 'widget-div-id');
container.setAttribute('data-demo', data.demo);
container.setAttribute('data-productId', data.productId);
container.setAttribute('data-product-id', data.productId);

return container;
}
Expand Down
36 changes: 18 additions & 18 deletions examples/amp-story/amp-story-shopping.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,23 +10,23 @@
<script async custom-element="amp-story-page-attachment" src="https://cdn.ampproject.org/v0/amp-story-page-attachment-0.1.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-productId="lamp"],
[data-productId="lamp-rtl"] {
[data-product-id="lamp"],
[data-product-id="lamp-rtl"] {
top: 31%;
left: 1%;
}
[data-productId="art"],
[data-productId="art-rtl"] {
[data-product-id="art"],
[data-product-id="art-rtl"] {
top: 15%;
left: 40%;
}
[data-productId="chair"],
[data-productId="chair-rtl"] {
[data-product-id="chair"],
[data-product-id="chair-rtl"] {
top: 53%;
left: 30%;
}
[data-productId="flowers"],
[data-productId="flowers-rtl"] {
[data-product-id="flowers"],
[data-product-id="flowers-rtl"] {
top: 46%;
left: 83%;
}
Expand Down Expand Up @@ -89,10 +89,10 @@
<amp-img layout="fill" src="https://source.unsplash.com/_HqHX3LBN18/1000x2000"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<amp-story-shopping-tag data-productId="lamp" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-productId="art" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-productId="chair" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-productId="flowers" ></amp-story-shopping-tag>
<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-tag data-product-id="chair" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-product-id="flowers" ></amp-story-shopping-tag>
</amp-story-grid-layer>
<amp-story-shopping-attachment></amp-story-shopping-attachment>
</amp-story-page>
Expand Down Expand Up @@ -121,7 +121,7 @@
<amp-img layout="fill" src="https://source.unsplash.com/_HqHX3LBN18/1000x2000"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<amp-story-shopping-tag data-productId="art" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-product-id="art" ></amp-story-shopping-tag>
</amp-story-grid-layer>
<amp-story-shopping-attachment theme="dark"></amp-story-shopping-attachment>
</amp-story-page>
Expand All @@ -141,7 +141,7 @@
<amp-img layout="fill" src="https://source.unsplash.com/_HqHX3LBN18/1000x2000"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<amp-story-shopping-tag data-productId="art" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-product-id="art" ></amp-story-shopping-tag>
</amp-story-grid-layer>
<amp-story-shopping-attachment theme="dark"></amp-story-shopping-attachment>
</amp-story-page>
Expand Down Expand Up @@ -196,10 +196,10 @@
<amp-img layout="fill" src="https://source.unsplash.com/_HqHX3LBN18/1000x2000"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<amp-story-shopping-tag data-productId="lamp-rtl" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-productId="art-rtl" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-productId="chair-rtl" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-productId="flowers-rtl" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-product-id="lamp-rtl" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-product-id="art-rtl" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-product-id="chair-rtl" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-product-id="flowers-rtl" ></amp-story-shopping-tag>
</amp-story-grid-layer>
<amp-story-shopping-attachment></amp-story-shopping-attachment>
</amp-story-page>
Expand Down
2 changes: 1 addition & 1 deletion examples/amp-yotpo.amp.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
layout="responsive"
data-app-key="yuwGJ8nUAzlSmOqFwFB5lQeQEjqF6B028jMc1Pek"
data-widget-type="MainWidget"
data-productId="7451812161"
data-product-id="7451812161"
data-name="iPad 4 mini"
data-url="https://yotpos-demo-store-2.myshopify.com/products/ipad-4-mini"
data-image-url="//cdn.shopify.com/s/files/1/1438/6792/products/28baa67f-7a5a-48d1-a0fc-6d5305924039_1.ebdff582719ea3a94a302c79e6213250_large.jpg%3Fv=1471341736"
Expand Down
36 changes: 18 additions & 18 deletions examples/visual-tests/amp-story/amp-story-shopping-lang-de.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,23 +11,23 @@
<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-productId="lamp"],
[data-productId="lamp-rtl"] {
[data-product-id="lamp"],
[data-product-id="lamp-rtl"] {
top: 31%;
left: 1%;
}
[data-productId="art"],
[data-productId="art-rtl"] {
[data-product-id="art"],
[data-product-id="art-rtl"] {
top: 15%;
left: 40%;
}
[data-productId="chair"],
[data-productId="chair-rtl"] {
[data-product-id="chair"],
[data-product-id="chair-rtl"] {
top: 53%;
left: 30%;
}
[data-productId="flowers"],
[data-productId="flowers-rtl"] {
[data-product-id="flowers"],
[data-product-id="flowers-rtl"] {
top: 46%;
left: 83%;
}
Expand Down Expand Up @@ -90,10 +90,10 @@
<amp-img layout="fill" src="https://source.unsplash.com/_HqHX3LBN18/1000x2000"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<amp-story-shopping-tag data-productId="lamp" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-productId="art" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-productId="chair" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-productId="flowers" ></amp-story-shopping-tag>
<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-tag data-product-id="chair" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-product-id="flowers" ></amp-story-shopping-tag>
</amp-story-grid-layer>
<amp-story-shopping-attachment></amp-story-shopping-attachment>
</amp-story-page>
Expand Down Expand Up @@ -122,7 +122,7 @@
<amp-img layout="fill" src="https://source.unsplash.com/_HqHX3LBN18/1000x2000"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<amp-story-shopping-tag data-productId="art" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-product-id="art" ></amp-story-shopping-tag>
</amp-story-grid-layer>
<amp-story-shopping-attachment theme="dark"></amp-story-shopping-attachment>
</amp-story-page>
Expand All @@ -142,7 +142,7 @@
<amp-img layout="fill" src="https://source.unsplash.com/_HqHX3LBN18/1000x2000"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<amp-story-shopping-tag data-productId="art" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-product-id="art" ></amp-story-shopping-tag>
</amp-story-grid-layer>
<amp-story-shopping-attachment theme="dark"></amp-story-shopping-attachment>
</amp-story-page>
Expand Down Expand Up @@ -198,10 +198,10 @@
<amp-img layout="fill" src="https://source.unsplash.com/_HqHX3LBN18/1000x2000"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<amp-story-shopping-tag data-productId="lamp-rtl" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-productId="art-rtl" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-productId="chair-rtl" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-productId="flowers-rtl" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-product-id="lamp-rtl" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-product-id="art-rtl" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-product-id="chair-rtl" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-product-id="flowers-rtl" ></amp-story-shopping-tag>
</amp-story-grid-layer>
<amp-story-shopping-attachment></amp-story-shopping-attachment>
</amp-story-page>
Expand Down
36 changes: 18 additions & 18 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 @@ -9,23 +9,23 @@
<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-productId="lamp"],
[data-productId="lamp-rtl"] {
[data-product-id="lamp"],
[data-product-id="lamp-rtl"] {
top: 31%;
left: 1%;
}
[data-productId="art"],
[data-productId="art-rtl"] {
[data-product-id="art"],
[data-product-id="art-rtl"] {
top: 15%;
left: 40%;
}
[data-productId="chair"],
[data-productId="chair-rtl"] {
[data-product-id="chair"],
[data-product-id="chair-rtl"] {
top: 53%;
left: 30%;
}
[data-productId="flowers"],
[data-productId="flowers-rtl"] {
[data-product-id="flowers"],
[data-product-id="flowers-rtl"] {
top: 46%;
left: 83%;
}
Expand Down Expand Up @@ -88,10 +88,10 @@
<amp-img layout="fill" src="https://source.unsplash.com/_HqHX3LBN18/1000x2000"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<amp-story-shopping-tag data-productId="lamp" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-productId="art" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-productId="chair" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-productId="flowers" ></amp-story-shopping-tag>
<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-tag data-product-id="chair" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-product-id="flowers" ></amp-story-shopping-tag>
</amp-story-grid-layer>
<amp-story-shopping-attachment></amp-story-shopping-attachment>
</amp-story-page>
Expand Down Expand Up @@ -120,7 +120,7 @@
<amp-img layout="fill" src="https://source.unsplash.com/_HqHX3LBN18/1000x2000"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<amp-story-shopping-tag data-productId="art" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-product-id="art" ></amp-story-shopping-tag>
</amp-story-grid-layer>
<amp-story-shopping-attachment theme="dark"></amp-story-shopping-attachment>
</amp-story-page>
Expand All @@ -140,7 +140,7 @@
<amp-img layout="fill" src="https://source.unsplash.com/_HqHX3LBN18/1000x2000"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<amp-story-shopping-tag data-productId="art" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-product-id="art" ></amp-story-shopping-tag>
</amp-story-grid-layer>
<amp-story-shopping-attachment theme="dark"></amp-story-shopping-attachment>
</amp-story-page>
Expand Down Expand Up @@ -196,10 +196,10 @@
<amp-img layout="fill" src="https://source.unsplash.com/_HqHX3LBN18/1000x2000"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<amp-story-shopping-tag data-productId="lamp-rtl" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-productId="art-rtl" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-productId="chair-rtl" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-productId="flowers-rtl" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-product-id="lamp-rtl" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-product-id="art-rtl" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-product-id="chair-rtl" ></amp-story-shopping-tag>
<amp-story-shopping-tag data-product-id="flowers-rtl" ></amp-story-shopping-tag>
</amp-story-grid-layer>
<amp-story-shopping-attachment></amp-story-shopping-attachment>
</amp-story-page>
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 @@ -108,7 +108,7 @@ export class AmpStoryShoppingAttachment extends AMP.BaseElement {
}
const shoppingData = this.storeService_.get(StateProperty.SHOPPING_DATA);
const shoppingDataForPage = this.shoppingTags_.map(
(shoppingTag) => shoppingData[shoppingTag.getAttribute('data-productId')]
(shoppingTag) => shoppingData[shoppingTag.getAttribute('data-product-id')]
);

const plp = this.renderPlpTemplate_(shoppingDataForPage);
Expand Down
2 changes: 1 addition & 1 deletion extensions/amp-story-shopping/0.1/amp-story-shopping-tag.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ export class AmpStoryShoppingTag extends AMP.BaseElement {
* @private
*/
createAndAppendInnerShoppingTagEl_(shoppingData) {
this.tagData_ = shoppingData[this.element.getAttribute('data-productId')];
this.tagData_ = shoppingData[this.element.getAttribute('data-product-id')];
if (this.hasAppendedInnerShoppingTagEl_ || !this.tagData_) {
return;
}
Expand Down
2 changes: 1 addition & 1 deletion 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 @@ -55,7 +55,7 @@ describes.realWin(
'amp-story-shopping-tag',
{
'layout': 'container',
'data-productId': 'lamp',
'data-product-id': 'lamp',
}
);
pageEl.appendChild(tagEl);
Expand Down
4 changes: 2 additions & 2 deletions extensions/amp-story-shopping/0.1/test/test-amp-story-shopping-tag.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ describes.realWin(
});

it('should process config data and set text container content if data not null', async () => {
shoppingTag.element.setAttribute('data-productId', 'sunglasses');
shoppingTag.element.setAttribute('data-product-id', 'sunglasses');
await shoppingDataDispatchStoreService();
env.sandbox.stub(shoppingTag, 'measureMutateElement').callsFake(() => {
expect(shoppingTag.element.textContent).to.equal(
Expand All @@ -78,7 +78,7 @@ describes.realWin(
});

it('should not process config data and set text container content if id not found', async () => {
shoppingTag.element.setAttribute('data-productId', 'hat');
shoppingTag.element.setAttribute('data-product-id', 'hat');
await shoppingDataDispatchStoreService();
expect(shoppingTag.element.textContent).to.be.empty;
expect(shoppingTag.isLayoutSupported(Layout_Enum.CONTAINER)).to.be.true;
Expand Down
6 changes: 3 additions & 3 deletions extensions/amp-yotpo/amp-yotpo.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ _Example: Display the Yotpo bottom line widget_
height="100"
data-app-key="liSBkl621ZZsb88tsckAs6Bzx6jQeTJTv8CDf8y5"
data-widget-type="BottomLine"
data-productId="9408616206"
data-product-id="9408616206"
>
</amp-yotpo>
```
Expand All @@ -34,7 +34,7 @@ _Example: Display the reviews widget_
layout="responsive"
data-app-key="liSBkl621ZZsb88tsckAs6Bzx6jQeTJTv8CDf8y5"
data-widget-type="MainWidget"
data-productId="9408616206"
data-product-id="9408616206"
data-name="hockey skates"
data-url="https://ranabram.myshopify.com/products/hockey-skates"
data-image-url="https://ichef.bbci.co.uk/news/320/media/images/83351000/jpg/_83351965_explorer273lincolnshirewoldssouthpicturebynicholassilkstone.jpg"
Expand All @@ -54,7 +54,7 @@ _Example: Display the reviews widget_
<tr>
<td width="40%"><strong>data-** (optional)</strong></td>
<td>Each Yotpo widget has optional data attributes. For example, the reviews widget has an optional attribute named <code>productId</code>. Refer to <a href="https://support.yotpo.com/en/on-site">Yottpo's documentation</a> for which attributes to specify.<br>
When using the <code>amp-yotpo</code> extension, for each corresponding Yotpo attribute prepend <code>data</code> to the attribute. For example, the <code>productId</code> attribute becomes <code>data-productId</code>.</td>
When using the <code>amp-yotpo</code> extension, for each corresponding Yotpo attribute prepend <code>data</code> to the attribute. For example, the <code>productId</code> attribute becomes <code>data-product-id</code>.</td>
</tr>
<tr>
<td width="40%"><strong>title (optional)</strong></td>
Expand Down
2 changes: 1 addition & 1 deletion third_party/subscriptions-project/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -792,7 +792,7 @@ class MetaParser {
// Try to find product id.
const productId = getMetaTag(
this.doc_.getRootNode(),
'subscriptions-productId'
'subscriptions-product-id'
);
if (!productId) {
return null;
Expand Down