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

cards: Update all product cards to use new/updated fields #411

Merged
merged 16 commits into from
Nov 16, 2020
Merged

cards: Update all product cards to use new/updated fields #411

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
30016c3
cards: Update all product cards to use new/updated fields
creotutar Oct 23, 2020
261f7bc
product-prominentimage: add tag as stock status
creotutar Oct 26, 2020
158c930
Hide show more details by default, because rich text description
creotutar Oct 26, 2020
a633a0b
Tag should be commented out by default
creotutar Oct 26, 2020
9ee9e7c
Keep the way we comment things out consistent
creotutar Oct 26, 2020
4ad353c
Fix consistent comment change for multilang cards
creotutar Oct 26, 2020
dd4fd23
Null-check description so decription can be null as before
creotutar Oct 26, 2020
490ecbb
Use fieldName richTextDescription and target top
creotutar Oct 26, 2020
be5b431
Add $ for regular product cards, default strings to empty
creotutar Oct 27, 2020
972a7d5
Add clickable card
creotutar Nov 13, 2020
15a4c1d
Add variables to the default file
creotutar Nov 13, 2020
4222a34
Use new alt text field
creotutar Nov 13, 2020
ce75b9c
Remove special stock status logic as request from PM
creotutar Nov 13, 2020
4221af7
Remove $ for multilang clickable card
creotutar Nov 13, 2020
6be8299
Add comment for rtf showMoreDetails, remove interpolated string
creotutar Nov 13, 2020
62a137e
Use new price field, not c_price
creotutar Nov 13, 2020
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
16 changes: 12 additions & 4 deletions cards/multilang-product-prominentimage-clickable/component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,23 @@ class multilang_product_prominentimage_clickableCardComponent
cardUrl = profile.landingPageUrl;
}

let imageUrl = '';
let alternateText = '';
if (profile.photoGallery && profile.photoGallery[0]) {
imageUrl = Formatter.image(profile.photoGallery[0]).url;
alternateText = Formatter.image(profile.photoGallery[0]).alternateText;
}

return {
title: profile.name, // The header text of the card
url: cardUrl, // If the card is a clickable link, set URL here
target: '_top', // If the card URL should open in a new tab, etc.
titleEventOptions: this.addDefaultEventOptions(),
subtitle: profile.c_price ? `$${profile.c_price}` : '', // The sub-header text of the card
image: Formatter.image(profile.c_photo).url, // The URL of the image to display on the card
altText: Formatter.image(profile.c_photo).alternateText, // The alternate text for the image
details: profile.description, // The text in the body of the card
subtitle: profile.price && profile.price.value ? profile.price.value : '', // The sub-header text of the card
image: imageUrl, // The URL of the image to display on the card
altText: alternateText, // The alternate text for the image
details: profile.richTextDescription ? ANSWERS.formatRichText(profile.richTextDescription, 'richTextDescription', '_top') : null, // The text in the body of the card, Warning: cannot contain links
// tag: profile.stockStatus ? profile.stockStatus : '', // The tag text for the card
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want this commented out by default? Do we need weight in the card(s)?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

re: Commented out, yes according to spec
What do you mean by weight?

};
}

Expand Down
19 changes: 15 additions & 4 deletions cards/multilang-product-prominentimage-clickable/template.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,20 @@
</div>

{{#*inline 'image'}}
{{#if card.image}}
<div class="HitchhikerProductProminentImage-imgWrapper">
<img class="HitchhikerProductProminentImage-img" src="{{#unless (matches card.image '//' )}}{{relativePath}}/{{/unless}}{{card.image}}" alt="{{#if card.altText}}{{card.altText}}{{/if}}" />
{{#if card.tag}}
<div class="HitchhikerProductProminentImage-imageAndTagWrapper">
<div class="HitchhikerProductProminentImage-tagWrapper">
<div class="HitchhikerProductProminentImage-tag">
{{card.tag}}
</div>
</div>
{{/if}}
{{#if card.image}}
<div class="HitchhikerProductProminentImage-imgWrapper">
<img class="HitchhikerProductProminentImage-img" src="{{#unless (matches card.image '//' )}}{{relativePath}}/{{/unless}}{{card.image}}" alt="{{#if card.altText}}{{card.altText}}{{/if}}" />
</div>
{{/if}}
{{#if card.tag}}
</div>
{{/if}}
{{/inline}}
Expand All @@ -47,7 +58,7 @@
{{#if card.details}}
<div class="HitchhikerProductProminentImage-cardDetails">
<div class="HitchhikerProductProminentImage-detailsText js-HitchhikerCard-detailsText{{#if showExcessDetailsToggle}} js-hidden{{/if}}">
{{card.details}}
{{{card.details}}}
</div>
</div>
{{/if}}
Expand Down
27 changes: 18 additions & 9 deletions cards/multilang-product-prominentimage/component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,31 @@ class multilang_product_prominentimageCardComponent extends BaseCard['multilang-
* @param profile profile of the entity in the card
*/
dataForRender(profile) {
let imageUrl = '';
let alternateText = '';
if (profile.photoGallery && profile.photoGallery[0]) {
imageUrl = Formatter.image(profile.photoGallery[0]).url;
alternateText = Formatter.image(profile.photoGallery[0]).alternateText;
}

return {
title: profile.name, // The header text of the card
url: profile.landingPageUrl, // If the card title is a clickable link, set URL here
target: '_top', // If the title's URL should open in a new tab, etc.
titleEventOptions: this.addDefaultEventOptions(),
subtitle: profile.c_price ? `$${profile.c_price}` : '', // The sub-header text of the card
image: Formatter.image(profile.c_photo).url, // The URL of the image to display on the card
altText: Formatter.image(profile.c_photo).alternateText, // The alternate text for the image
details: profile.description, // The text in the body of the card
subtitle: profile.price && profile.price.value ? profile.price.value : '', // The sub-header text of the card
image: imageUrl, // The URL of the image to display on the card
altText: alternateText, // The alternate text for the image
details: profile.richTextDescription ? ANSWERS.formatRichText(profile.richTextDescription, 'richTextDescription', '_top') : null, // The text in the body of the card
// tag: profile.stockStatus ? profile.stockStatus : '', // The tag text for the card
// If the card's details are longer than a certain character count, you can truncate the
// text. A toggle will be supplied that can show or hide the truncated text.
showMoreDetails: {
showMoreLimit: 350, // Character count limit
showMoreText: {{ translateJS phrase='Show more' }}, // Label when toggle will show truncated text
showLessText: {{ translateJS phrase='Show less' }} // Label when toggle will hide truncated text
},
// Note: If you are using rich text for the details, you should not enable this feature.
// showMoreDetails: {
alexisgrow marked this conversation as resolved.
Show resolved Hide resolved
// showMoreLimit: 350, // Character count limit
// showMoreText: {{ translateJS phrase='Show more' }}, // Label when toggle will show truncated text
// showLessText: {{ translateJS phrase='Show less' }} // Label when toggle will hide truncated text
// },
// The primary CTA of the card
CTA1: {
label: profile.c_primaryCTA ? profile.c_primaryCTA.label : null, // The CTA's label
Expand Down
23 changes: 17 additions & 6 deletions cards/multilang-product-prominentimage/template.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,20 @@
</div>

{{#*inline 'image'}}
{{#if card.image}}
<div class="HitchhikerProductProminentImage-imgWrapper">
<img class="HitchhikerProductProminentImage-img" src="{{#unless (matches card.image '//' )}}{{relativePath}}/{{/unless}}{{card.image}}" alt="{{#if card.altText}}{{card.altText}}{{/if}}" />
{{#if card.tag}}
<div class="HitchhikerProductProminentImage-imageAndTagWrapper">
<div class="HitchhikerProductProminentImage-tagWrapper">
<div class="HitchhikerProductProminentImage-tag">
{{card.tag}}
</div>
</div>
{{/if}}
{{#if card.image}}
alexisgrow marked this conversation as resolved.
Show resolved Hide resolved
<div class="HitchhikerProductProminentImage-imgWrapper">
<img class="HitchhikerProductProminentImage-img" src="{{#unless (matches card.image '//' )}}{{relativePath}}/{{/unless}}{{card.image}}" alt="{{#if card.altText}}{{card.altText}}{{/if}}" />
</div>
{{/if}}
{{#if card.tag}}
</div>
{{/if}}
{{/inline}}
Expand Down Expand Up @@ -54,11 +65,11 @@
<div class="HitchhikerProductProminentImage-cardDetails">
{{#if showExcessDetailsToggle}}
<div class="HitchhikerProductProminentImage-detailsText js-HitchhikerCard-detailsText">
{{truncatedDetails}}
{{{truncatedDetails}}}
</div>
{{/if}}
<div class="HitchhikerProductProminentImage-detailsText js-HitchhikerCard-detailsText{{#if showExcessDetailsToggle}} js-hidden{{/if}}">
{{card.details}}
{{{card.details}}}
</div>
{{#if showExcessDetailsToggle}}
<button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
Expand Down Expand Up @@ -108,4 +119,4 @@
</a>
</div>
{{/if}}
{{/inline}}
{{/inline}}
27 changes: 15 additions & 12 deletions cards/multilang-product-standard/component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,27 +12,30 @@ class multilang_product_standardCardComponent extends BaseCard['multilang-produc
* @param profile profile of the entity in the card
*/
dataForRender(profile) {
let price = '';
if (profile.c_price) {
price = `$${profile.c_price}`;
let imageUrl = '';
let alternateText = '';
if (profile.photoGallery && profile.photoGallery[0]) {
imageUrl = Formatter.image(profile.photoGallery[0]).url;
alternateText = Formatter.image(profile.photoGallery[0]).alternateText;
}

return {
title: profile.name, // The header text of the card
url: profile.landingPageUrl, // If the card title is a clickable link, set URL here
target: '_top', // If the title's URL should open in a new tab, etc.
image: Formatter.image(profile.c_photo).url, // The URL of the image to display on the card
altText: Formatter.image(profile.c_photo).alternateText, // The alt text of the image to display on the card
image: imageUrl, // The URL of the image to display on the card
altText: alternateText, // The alternate text for the image
titleEventOptions: this.addDefaultEventOptions(),
subtitle: price, // The sub-header text of the card
details: profile.description, // The text in the body of the card
subtitle: profile.price && profile.price.value ? profile.price.value : '', // The sub-header text of the card
details: profile.richTextDescription ? ANSWERS.formatRichText(profile.richTextDescription, 'richTextDescription', '_top') : null, // The text in the body of the card
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this card need a tag (and weight) placeholder?

// If the card's details are longer than a certain character count, you can truncate the
// text. A toggle will be supplied that can show or hide the truncated text.
showMoreDetails: {
showMoreLimit: 350, // Character count limit
showMoreText: {{ translateJS phrase='Show more' }}, // Label when toggle will show truncated text
showLessText: {{ translateJS phrase='Show less' }} // Label when toggle will hide truncated text
},
// Note: If you are using rich text for the details, you should not enable this feature.
// showMoreDetails: {
// showMoreLimit: 350, // Character count limit
// showMoreText: {{ translateJS phrase='Show more' }}, // Label when toggle will show truncated text
// showLessText: {{ translateJS phrase='Show less' }} // Label when toggle will hide truncated text
// },
// The primary CTA of the card
CTA1: {
label: profile.c_primaryCTA ? profile.c_primaryCTA.label : null, // The CTA's label
Expand Down
6 changes: 3 additions & 3 deletions cards/multilang-product-standard/template.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,11 +61,11 @@
<div class="HitchhikerProductStandard-cardDetails">
{{#if showExcessDetailsToggle}}
<div class="HitchhikerProductStandard-detailsText js-HitchhikerCard-detailsText">
{{truncatedDetails}}
{{{truncatedDetails}}}
</div>
{{/if}}
<div class="HitchhikerProductStandard-detailsText js-HitchhikerCard-detailsText{{#if showExcessDetailsToggle}} js-hidden{{/if}}">
{{card.details}}
{{{card.details}}}
</div>
{{#if showExcessDetailsToggle}}
<button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
Expand Down Expand Up @@ -105,4 +105,4 @@
</a>
</div>
{{/if}}
{{/inline}}
{{/inline}}
18 changes: 13 additions & 5 deletions cards/product-prominentimage-clickable/component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,23 @@ class product_prominentimage_clickableCardComponent
cardUrl = profile.landingPageUrl;
}

let imageUrl = '';
let alternateText = '';
if (profile.photoGallery && profile.photoGallery[0]) {
imageUrl = Formatter.image(profile.photoGallery[0]).url;
alternateText = Formatter.image(profile.photoGallery[0]).alternateText;
}

return {
title: profile.name, // The header text of the card
url: cardUrl, // If the card a clickable link, set URL here
url: cardUrl, // If the card is a clickable link, set URL here
target: '_top', // If the card URL should open in a new tab, etc.
titleEventOptions: this.addDefaultEventOptions(),
subtitle: profile.c_price ? `$${profile.c_price}` : '', // The sub-header text of the card
image: Formatter.image(profile.c_photo).url, // The URL of the image to display on the card
altText: Formatter.image(profile.c_photo).alternateText, // The alternate text for the image
details: profile.description, // The text in the body of the card
subtitle: profile.price && profile.price.value ? `$${profile.price.value}` : '', // The sub-header text of the card
image: imageUrl, // The URL of the image to display on the card
altText: alternateText, // The alternate text for the image
details: profile.richTextDescription ? ANSWERS.formatRichText(profile.richTextDescription, 'richTextDescription', '_top') : null, // The text in the body of the card, Warning: cannot contain links
// tag: profile.stockStatus ? profile.stockStatus : '', // The tag text for the card
};
}

Expand Down
19 changes: 15 additions & 4 deletions cards/product-prominentimage-clickable/template.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,20 @@
</div>

{{#*inline 'image'}}
{{#if card.image}}
<div class="HitchhikerProductProminentImageClickable-imgWrapper">
<img class="HitchhikerProductProminentImageClickable-img" src="{{#unless (matches card.image '//' )}}{{relativePath}}/{{/unless}}{{card.image}}" alt="{{#if card.altText}}{{card.altText}}{{/if}}" />
{{#if card.tag}}
<div class="HitchhikerProductProminentImage-imageAndTagWrapper">
<div class="HitchhikerProductProminentImage-tagWrapper">
<div class="HitchhikerProductProminentImage-tag">
{{card.tag}}
</div>
</div>
{{/if}}
{{#if card.image}}
<div class="HitchhikerProductProminentImage-imgWrapper">
<img class="HitchhikerProductProminentImage-img" src="{{#unless (matches card.image '//' )}}{{relativePath}}/{{/unless}}{{card.image}}" alt="{{#if card.altText}}{{card.altText}}{{/if}}" />
</div>
{{/if}}
{{#if card.tag}}
</div>
{{/if}}
{{/inline}}
Expand All @@ -47,7 +58,7 @@
{{#if card.details}}
<div class="HitchhikerProductProminentImageClickable-cardDetails">
<div class="HitchhikerProductProminentImageClickable-detailsText js-HitchhikerCard-detailsText{{#if showExcessDetailsToggle}} js-hidden{{/if}}">
{{card.details}}
{{{card.details}}}
</div>
</div>
{{/if}}
Expand Down
27 changes: 18 additions & 9 deletions cards/product-prominentimage/component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,31 @@ class product_prominentimageCardComponent extends BaseCard['product-prominentima
* @param profile profile of the entity in the card
*/
dataForRender(profile) {
let imageUrl = '';
let alternateText = '';
if (profile.photoGallery && profile.photoGallery[0]) {
imageUrl = Formatter.image(profile.photoGallery[0]).url;
alternateText = Formatter.image(profile.photoGallery[0]).alternateText;
}

return {
title: profile.name, // The header text of the card
url: profile.landingPageUrl, // If the card title is a clickable link, set URL here
target: '_top', // If the title's URL should open in a new tab, etc.
titleEventOptions: this.addDefaultEventOptions(),
subtitle: profile.c_price ? `$${profile.c_price}` : '', // The sub-header text of the card
image: Formatter.image(profile.c_photo).url, // The URL of the image to display on the card
altText: Formatter.image(profile.c_photo).alternateText, // The alternate text for the image
details: profile.description, // The text in the body of the card
subtitle: profile.price && profile.price.value ? `$${profile.price.value}` : '', // The sub-header text of the card
image: imageUrl, // The URL of the image to display on the card
altText: alternateText, // The alternate text for the image
details: profile.richTextDescription ? ANSWERS.formatRichText(profile.richTextDescription, 'richTextDescription', '_top') : null, // The text in the body of the card
// tag: profile.stockStatus ? profile.stockStatus : '', // The tag text for the card
// If the card's details are longer than a certain character count, you can truncate the
// text. A toggle will be supplied that can show or hide the truncated text.
showMoreDetails: {
showMoreLimit: 350, // Character count limit
showMoreText: 'Show more', // Label when toggle will show truncated text
showLessText: 'Show less' // Label when toggle will hide truncated text
},
// Note: If you are using rich text for the details, you should not enable this feature.
// showMoreDetails: {
// showMoreLimit: 350, // Character count limit
// showMoreText: 'Show more', // Label when toggle will show truncated text
// showLessText: 'Show less' // Label when toggle will hide truncated text
// },
// The primary CTA of the card
CTA1: {
label: profile.c_primaryCTA ? profile.c_primaryCTA.label : null, // The CTA's label
Expand Down
23 changes: 17 additions & 6 deletions cards/product-prominentimage/template.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,20 @@
</div>

{{#*inline 'image'}}
{{#if card.image}}
<div class="HitchhikerProductProminentImage-imgWrapper">
<img class="HitchhikerProductProminentImage-img" src="{{#unless (matches card.image '//' )}}{{relativePath}}/{{/unless}}{{card.image}}" alt="{{#if card.altText}}{{card.altText}}{{/if}}" />
{{#if card.tag}}
<div class="HitchhikerProductProminentImage-imageAndTagWrapper">
<div class="HitchhikerProductProminentImage-tagWrapper">
<div class="HitchhikerProductProminentImage-tag">
{{card.tag}}
</div>
</div>
{{/if}}
{{#if card.image}}
<div class="HitchhikerProductProminentImage-imgWrapper">
<img class="HitchhikerProductProminentImage-img" src="{{#unless (matches card.image '//' )}}{{relativePath}}/{{/unless}}{{card.image}}" alt="{{#if card.altText}}{{card.altText}}{{/if}}" />
</div>
{{/if}}
{{#if card.tag}}
</div>
{{/if}}
{{/inline}}
Expand Down Expand Up @@ -54,11 +65,11 @@
<div class="HitchhikerProductProminentImage-cardDetails">
{{#if showExcessDetailsToggle}}
<div class="HitchhikerProductProminentImage-detailsText js-HitchhikerCard-detailsText">
{{truncatedDetails}}
{{{truncatedDetails}}}
</div>
{{/if}}
<div class="HitchhikerProductProminentImage-detailsText js-HitchhikerCard-detailsText{{#if showExcessDetailsToggle}} js-hidden{{/if}}">
{{card.details}}
{{{card.details}}}
</div>
{{#if showExcessDetailsToggle}}
<button class="HitchhikerCard-detailsToggle js-HitchhikerCard-detailsToggle">
Expand Down Expand Up @@ -108,4 +119,4 @@
</a>
</div>
{{/if}}
{{/inline}}
{{/inline}}
Loading