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

Add promoted card to in-App marketplace page #31090

Merged
merged 2 commits into from
Nov 9, 2021
Merged

Add promoted card to in-App marketplace page #31090

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ca0c355
Add promoted card to in-App marketplace page
Konamiman Nov 5, 2021
d83ae98
Change name of transient
Konamiman Nov 5, 2021
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
56 changes: 56 additions & 0 deletions plugins/woocommerce/assets/css/admin.scss
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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