Cherry pick 51499 into release/9.4 (#52035)
* Show correct decimals on product price and show the sale price of products (#51499) * add regular price and sale price flag to product apis and types * add sale price and screen reader text for prices on product cards * fix typo on sale flag * add regular price and sale price flag to product apis and types * add sale price and screen reader text for prices on product cards * fix typo on sale flag * Changelog. * address feedback on sale price VO text --------- Co-authored-by: Herman <KokkieH@users.noreply.github.com> Co-authored-by: And Finally <andfinally@users.noreply.github.com> * Prep for cherry pick 51499 --------- Co-authored-by: Raja sekar <raja.sekar.manimaran@automattic.com> Co-authored-by: Herman <KokkieH@users.noreply.github.com> Co-authored-by: And Finally <andfinally@users.noreply.github.com> Co-authored-by: WooCommerce Bot <no-reply@woocommerce.com>
This commit is contained in:
github-actions[bot]
GitHub
parent
4298800971
commit
602642f38c
|
|
@ -144,6 +144,35 @@ function ProductCardFooter( props: { product: Product } ) {
|
|||
return '';
|
||||
}
|
||||
|
||||
const getReaderPriceLabel = () => {
|
||||
if ( product.isOnSale ) {
|
||||
return sprintf(
|
||||
//translators: %1$s is the sale price of the product, %2$s is the regular price of the product, %3$s is the billing period
|
||||
__(
|
||||
'Sale Price %1$s %3$s, regular price %2$s %3$s',
|
||||
'woocommerce'
|
||||
),
|
||||
getPriceLabel(),
|
||||
sprintf(
|
||||
getCurrencyFormat( product.currency ),
|
||||
product.regularPrice
|
||||
),
|
||||
getBillingText()
|
||||
);
|
||||
}
|
||||
|
||||
if ( product.price !== 0 && product.freemium_type !== 'primary' ) {
|
||||
return sprintf(
|
||||
//translators: %1$s is the price of the product, %2$s is the billing period
|
||||
__( ' %1$s, %2$s ', 'woocommerce' ),
|
||||
getPriceLabel(),
|
||||
getBillingText()
|
||||
);
|
||||
}
|
||||
|
||||
return getPriceLabel();
|
||||
};
|
||||
|
||||
if ( shouldShowAddToStore( product ) ) {
|
||||
return (
|
||||
<>
|
||||
|
|
@ -160,9 +189,28 @@ function ProductCardFooter( props: { product: Product } ) {
|
|||
<>
|
||||
<div className="woocommerce-marketplace__product-card__price">
|
||||
<span className="woocommerce-marketplace__product-card__price-label">
|
||||
{ getPriceLabel() }
|
||||
<span className="screen-reader-text">
|
||||
{ getReaderPriceLabel() }
|
||||
</span>
|
||||
<span className="woocommerce-marketplace__product-card__price-billing">
|
||||
<span aria-hidden>{ getPriceLabel() }</span>
|
||||
</span>
|
||||
|
||||
{ product.isOnSale && (
|
||||
<span
|
||||
className="woocommerce-marketplace__product-card__on-sale"
|
||||
aria-hidden
|
||||
>
|
||||
{ sprintf(
|
||||
getCurrencyFormat( product.currency ),
|
||||
product.regularPrice
|
||||
) }
|
||||
</span>
|
||||
) }
|
||||
|
||||
<span
|
||||
className="woocommerce-marketplace__product-card__price-billing"
|
||||
aria-hidden
|
||||
>
|
||||
{ getBillingText() }
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -217,6 +217,12 @@
|
|||
line-height: $medium-gap;
|
||||
}
|
||||
|
||||
&__on-sale {
|
||||
color: $gray-600;
|
||||
font-weight: 400;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
&__price-billing {
|
||||
color: $gray-600;
|
||||
font-size: $default-font-size;
|
||||
|
|
|
|||
|
|
@ -51,6 +51,8 @@ function ProductCard( props: ProductCardProps ): JSX.Element {
|
|||
billingPeriod: '',
|
||||
billingPeriodInterval: 0,
|
||||
currency: '',
|
||||
isOnSale: false,
|
||||
regularPrice: 0,
|
||||
};
|
||||
|
||||
function isSponsored(): boolean {
|
||||
|
|
|
|||
|
|
@ -109,6 +109,8 @@ export default function ProductListContent( props: {
|
|||
billingPeriodInterval:
|
||||
product.billingPeriodInterval,
|
||||
currency: product.currency,
|
||||
isOnSale: product.isOnSale,
|
||||
regularPrice: product.regularPrice,
|
||||
} }
|
||||
tracksData={ {
|
||||
position: index + 1,
|
||||
|
|
|
|||
|
|
@ -29,6 +29,8 @@ export type SearchAPIProductType = {
|
|||
billing_period: string;
|
||||
billing_period_interval: number;
|
||||
currency: string;
|
||||
is_on_sale: boolean;
|
||||
regular_price: number;
|
||||
};
|
||||
|
||||
export interface Product {
|
||||
|
|
@ -60,6 +62,8 @@ export interface Product {
|
|||
billingPeriod?: string;
|
||||
billingPeriodInterval?: number;
|
||||
currency: string;
|
||||
isOnSale: boolean;
|
||||
regularPrice: number;
|
||||
}
|
||||
|
||||
export interface ProductTracksData {
|
||||
|
|
|
|||
|
|
@ -142,6 +142,8 @@ async function fetchSearchResults(
|
|||
url: product.link,
|
||||
// Due to backwards compatibility, raw_price is from search API, price is from featured API
|
||||
price: product.raw_price ?? product.price,
|
||||
regularPrice: product.regular_price,
|
||||
isOnSale: product.is_on_sale,
|
||||
averageRating: product.rating ?? null,
|
||||
reviewsCount: product.reviews_count ?? null,
|
||||
isInstallable: product.is_installable,
|
||||
|
|
@ -426,6 +428,8 @@ const subscriptionToProduct = ( subscription: Subscription ): Product => {
|
|||
icon: subscription.product_icon,
|
||||
url: subscription.product_url,
|
||||
price: -1,
|
||||
regularPrice: -1,
|
||||
isOnSale: false,
|
||||
averageRating: null,
|
||||
reviewsCount: null,
|
||||
isInstallable: false,
|
||||
|
|
|
|||
Loading…
Reference in New Issue