Skip to content

Commit

Permalink
Add promoted card to in-App marketplace page (#31090)
Browse files Browse the repository at this point in the history 
* Add promoted card to in-App marketplace page

* Change name of transient

Changed name of transient for v2.0 of in-app marketplace featured page
content, so sites upgrading to WooCommerce 5.9 will get the correct
data for the new version of the page.
  • Loading branch information
@Konamiman
Konamiman committed Nov 9, 2021
1 parent 80ba82a commit d64c449
Show file tree
Hide file tree
Showing 3 changed files with 127 additions and 15 deletions.
56 changes: 56 additions & 0 deletions plugins/woocommerce/assets/css/admin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -366,6 +366,17 @@
color: #fff;
}

.addons-button-promoted {
float: right;
width: auto;
padding: 0 20px;
margin-top: 0;
}

.addons-button-promoted:hover {
opacity: 0.8;
}

.addons-button-expandable {
display: inline-block;
padding: 0 16px;
Expand Down Expand Up @@ -504,6 +515,10 @@
padding: 0;
vertical-align: top;

&.addons-full-width {
max-width: 100%;
}

@media only screen and ( max-width: 768px ) {
max-width: none;
width: 100%;
Expand Down Expand Up @@ -567,6 +582,35 @@
color: #1d2327; // Gray / Gray 90
}

&.featured,
&.promoted {

.label {
align-items: center;
border-radius: 2px;
background: #dcdcde;
display: flex;
flex-direction: row;
height: 20px;
justify-content: flex-end;
margin-bottom: 8px;
max-width: 52px;
padding: 3px 12px;
top: 28px;
right: 24px;
text-align: center;

&.promoted {
float: right;
max-width: 58px;
}
}

h2 {
color: #2c3338;
}
}

p {
color: #2c3338;
font-size: 14px;
Expand Down Expand Up @@ -670,6 +714,18 @@
}
}

.product-footer-promoted {
align-items: flex-end;
display: flex;
justify-content: space-between;
padding: 24px;

.icon img {
border-radius: 4px;
width: 80px;
}
}

.addons-buttons-banner {
display: flex;
flex-direction: row;
Expand Down
83 changes: 69 additions & 14 deletions plugins/woocommerce/includes/admin/class-wc-admin-addons.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ class WC_Admin_Addons {
* @return array of objects
*/
public static function get_featured() {
$featured = get_transient( 'wc_addons_featured' );
$featured = get_transient( 'wc_addons_featured_2' );
if ( false === $featured ) {
$headers = array();
$auth = WC_Helper_Options::get( 'auth' );
Expand All @@ -46,7 +46,7 @@ public static function get_featured() {
if ( ! is_wp_error( $raw_featured ) ) {
$featured = json_decode( wp_remote_retrieve_body( $raw_featured ) );
if ( $featured ) {
set_transient( 'wc_addons_featured', $featured, DAY_IN_SECONDS );
set_transient( 'wc_addons_featured_2', $featured, DAY_IN_SECONDS );
}
}
}
Expand Down Expand Up @@ -891,6 +891,7 @@ class="addons-button <?php echo esc_attr( $style ); ?>"
* Output HTML for a promotion action.
*
* @param array $action Array of action properties.
*
* @return void
*/
public static function output_promotion_action( array $action ) {
Expand Down Expand Up @@ -1056,7 +1057,7 @@ public static function get_star_class( $rating, $index ) {
if ( $rating >= $index ) {
// Rating more that current star to show.
return 'fill';
} else if (
} elseif (
abs( $index - 1 - floor( $rating ) ) < 0.0000001 &&
0 < ( $rating - floor( $rating ) )
) {
Expand Down Expand Up @@ -1206,6 +1207,15 @@ public static function map_product_card_data( $data ) {
if ( null === $mapped->reviews_count ) {
$mapped->reviews_count = $data->reviewsCount ?? null; // phpcs:ignore WordPress.NamingConventions.ValidVariableName.UsedPropertyNotSnakeCase
}
// Featured & Promoted product card.
// Label.
$mapped->label = $data->label ?? null;
// Primary color.
$mapped->primary_color = $data->primary_color ?? null;
// Text color.
$mapped->text_color = $data->text_color ?? null;
// Button text.
$mapped->button = $data->button ?? null;

return $mapped;
}
Expand Down Expand Up @@ -1234,25 +1244,69 @@ public static function render_product_card( $data, $block_type = null ) {
if ( 'banner' === $block_type ) {
$product_details_classes .= ' addon-product-banner-details';
}
?>

if ( isset( $mapped->label ) && 'promoted' === $mapped->label ) {
$product_details_classes .= ' promoted';
} elseif ( isset( $mapped->label ) && 'featured' === $mapped->label ) {
$product_details_classes .= ' featured';
}

if ( 'promoted' === $mapped->label
&& ! empty( $mapped->primary_color )
&& ! empty( $mapped->text_color )
&& ! empty( $mapped->button ) ) {
// Promoted product card.
?>
<li class="product">
<div class="<?php echo esc_attr( $product_details_classes ); ?>" style="border-top: 5px solid <?php echo esc_html( $mapped->primary_color ); ?>;">
<span class="label promoted"><?php esc_attr_e( 'Promoted', 'woocommerce' ); ?></span>
<a href="<?php echo esc_url( $product_url ); ?>">
<h2><?php echo esc_html( $mapped->title ); ?></h2>
</a>
<p><?php echo wp_kses_post( $mapped->description ); ?></p>
</div>
<div class="product-footer-promoted">
<span class="icon"><img src="<?php echo esc_url( $mapped->icon ); ?>" /></span>
<a class="addons-button addons-button-promoted" style="background: <?php echo esc_html( $mapped->primary_color ); ?>; color: <?php echo esc_html( $mapped->text_color ); ?>;" href="<?php echo esc_url( $product_url ); ?>">
<?php echo esc_html( $mapped->button ); ?>
</a>
</div>
</li>
<?php
} else {
// Normal or "featured" product card.
?>
<li class="<?php echo esc_attr( implode( ' ', $class_names ) ); ?>">
<div class="<?php echo esc_attr( $product_details_classes ); ?>">
<div class="product-text-container">
<?php if ( isset( $mapped->label ) && 'featured' === $mapped->label ) { ?>
<span class="label featured"><?php esc_attr_e( 'Featured', 'woocommerce' ); ?></span>
<?php } ?>
<a href="<?php echo esc_url( $product_url ); ?>">
<h2><?php echo esc_html( $mapped->title ); ?></h2>
</a>
<?php if ( ! empty( $mapped->vendor_name ) && ! empty( $mapped->vendor_url ) ) : ?>
<div class="product-developed-by">
<?php
printf(
/* translators: %s vendor link */
esc_html__( 'Developed by %s', 'woocommerce' ),
sprintf(
'<a class="product-vendor-link" href="%1$s" target="_blank">%2$s</a>',
esc_url_raw( $mapped->vendor_url ),
esc_html( $mapped->vendor_name )
)
);
$vendor_url = add_query_arg(
array(
'utm_source' => 'extensionsscreen',
'utm_medium' => 'product',
'utm_campaign' => 'wcaddons',
'utm_content' => 'devpartner',
),
$mapped->vendor_url
);

printf(
/* translators: %s vendor link */
esc_html__( 'Developed by %s', 'woocommerce' ),
sprintf(
'<a class="product-vendor-link" href="%1$s" target="_blank">%2$s</a>',
esc_url_raw( $vendor_url ),
esc_html( $mapped->vendor_name )
)
);
?>
</div>
<?php endif; ?>
Expand Down Expand Up @@ -1303,6 +1357,7 @@ public static function render_product_card( $data, $block_type = null ) {
</a>
</div>
</li>
<?php
<?php
}
}
}
3 changes: 2 additions & 1 deletion plugins/woocommerce/includes/admin/views/html-admin-page-addons.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,8 +112,9 @@ class="<?php echo $current_section === $section->slug ? 'current' : ''; ?>"
continue;
}
}

WC_Admin_Addons::render_product_card( $addon );
?>
<?php WC_Admin_Addons::render_product_card( $addon ); ?>
<?php endforeach; ?>
</ul>
<?php endif; ?>
Expand Down

0 comments on commit d64c449

Please sign in to comment.