Added `output_ad_block` method to `WC_Admin_Addons` and CSS rules to render a WooCommerce Payments ad banner at the top of the "Featured" section of the WC Core addons page, `wp-admin/admin.php?page=wc-addons§ion=_featured`. This is to fulfil the requirements of WooCommerce.com issue https://github.com/Automattic/woocommerce.com/issues/9860.
We output the block if - The user has permissions to install plugins. - Their location is in one of the countries identified in a `geowhitelist`. - WooCommerce Payments is not already active.
This commit is contained in:
And Finally
parent
0d59195657
commit
3fa233872c
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
/**
|
||||
* admin.scss
|
||||
* General WooCommerce admin styles. Settings, product data tabs, reports, etc.
|
||||
|
|
@ -102,6 +101,43 @@
|
|||
height: 62px;
|
||||
}
|
||||
|
||||
.addons-ad-block {
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
|
||||
.addons-img {
|
||||
height: auto;
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.addons-ad-block-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.addons-ad-block-description {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.addons-ad-block-title {
|
||||
margin: 0 0 16px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.addons-ad-block-buttons {
|
||||
margin-top: auto;
|
||||
|
||||
.addons-button {
|
||||
margin-right: 8px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.addons-banner-block p {
|
||||
margin: 0 0 20px;
|
||||
}
|
||||
|
|
@ -364,6 +400,12 @@
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
.addons-button-expandable {
|
||||
display: inline-block;
|
||||
padding: 0 16px;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.addons-button-solid:hover {
|
||||
color: #fff;
|
||||
opacity: 0.8;
|
||||
|
|
@ -451,9 +493,8 @@
|
|||
flex: 1;
|
||||
overflow: hidden;
|
||||
background: #f5f5f5;
|
||||
box-shadow:
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
|
||||
inset 0 -1px 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
|
@ -645,7 +686,7 @@ mark.amount {
|
|||
|
||||
&::after {
|
||||
|
||||
@include icon_dashicons( "\f223" );
|
||||
@include icon_dashicons("\f223");
|
||||
cursor: help;
|
||||
}
|
||||
}
|
||||
|
|
@ -830,7 +871,7 @@ table.wc_status_table--tools {
|
|||
}
|
||||
|
||||
// Adjust log table columns only when table is not collapsed
|
||||
@media screen and ( min-width: 783px ) {
|
||||
@media screen and (min-width: 783px) {
|
||||
|
||||
.column-timestamp {
|
||||
width: 18%;
|
||||
|
|
@ -1021,7 +1062,7 @@ ul.wc_coupon_list {
|
|||
|
||||
&::before {
|
||||
|
||||
@include icon_dashicons( "\f158" );
|
||||
@include icon_dashicons("\f158");
|
||||
}
|
||||
|
||||
&:hover::before {
|
||||
|
|
@ -1065,7 +1106,7 @@ ul.wc_coupon_list_block {
|
|||
|
||||
&::after {
|
||||
|
||||
@include icon_dashicons( "\f345" );
|
||||
@include icon_dashicons("\f345");
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1589,7 +1630,7 @@ ul.wc_coupon_list_block {
|
|||
|
||||
&::before {
|
||||
|
||||
@include icon_dashicons( "\f128" );
|
||||
@include icon_dashicons("\f128");
|
||||
width: 38px;
|
||||
line-height: 38px;
|
||||
display: block;
|
||||
|
|
@ -1837,7 +1878,7 @@ ul.wc_coupon_list_block {
|
|||
|
||||
&::before {
|
||||
|
||||
@include icon( "\e007" );
|
||||
@include icon("\e007");
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
|
@ -1852,7 +1893,7 @@ ul.wc_coupon_list_block {
|
|||
|
||||
&::before {
|
||||
|
||||
@include icon( "\e014" );
|
||||
@include icon("\e014");
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
|
@ -1869,7 +1910,7 @@ ul.wc_coupon_list_block {
|
|||
|
||||
&::before {
|
||||
|
||||
@include icon( "\e01a" );
|
||||
@include icon("\e01a");
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
|
@ -1898,7 +1939,7 @@ ul.wc_coupon_list_block {
|
|||
|
||||
&::before {
|
||||
|
||||
@include icon_dashicons( "\f153" );
|
||||
@include icon_dashicons("\f153");
|
||||
color: #999;
|
||||
}
|
||||
|
||||
|
|
@ -1920,7 +1961,7 @@ ul.wc_coupon_list_block {
|
|||
|
||||
&::before {
|
||||
|
||||
@include icon_dashicons( "\f171" );
|
||||
@include icon_dashicons("\f171");
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
|
|
@ -1976,7 +2017,7 @@ ul.wc_coupon_list_block {
|
|||
|
||||
.edit-order-item::before {
|
||||
|
||||
@include icon_dashicons( "\f464" );
|
||||
@include icon_dashicons("\f464");
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -1985,7 +2026,7 @@ ul.wc_coupon_list_block {
|
|||
|
||||
&::before {
|
||||
|
||||
@include icon_dashicons( "\f158" );
|
||||
@include icon_dashicons("\f158");
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -2353,7 +2394,7 @@ ul.wc_coupon_list_block {
|
|||
|
||||
&::before {
|
||||
|
||||
@include icon( "\e010" );
|
||||
@include icon("\e010");
|
||||
line-height: 16px;
|
||||
font-size: 14px;
|
||||
vertical-align: middle;
|
||||
|
|
@ -2642,6 +2683,29 @@ ul.wc_coupon_list_block {
|
|||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.wc_addons_wrap {
|
||||
.addons-ad-block {
|
||||
flex-direction: column;
|
||||
padding: 24px;
|
||||
|
||||
.addons-img {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
max-width: 240px;
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.addons-ad-block-content {
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.addons-ad-block-title {
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.column-customer_message .note-on {
|
||||
|
|
@ -2652,7 +2716,7 @@ ul.wc_coupon_list_block {
|
|||
|
||||
&::after {
|
||||
|
||||
@include icon( "\e026" );
|
||||
@include icon("\e026");
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
|
@ -2665,7 +2729,7 @@ ul.wc_coupon_list_block {
|
|||
|
||||
&::after {
|
||||
|
||||
@include icon( "\e027" );
|
||||
@include icon("\e027");
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
|
|
@ -2902,7 +2966,7 @@ table.wp-list-table {
|
|||
|
||||
&::before {
|
||||
|
||||
@include icon_dashicons( "\f128" );
|
||||
@include icon_dashicons("\f128");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -3867,19 +3931,19 @@ img.help_tip {
|
|||
|
||||
.status-manual::before {
|
||||
|
||||
@include icon( "\e008" );
|
||||
@include icon("\e008");
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.status-enabled::before {
|
||||
|
||||
@include icon( "\e015" );
|
||||
@include icon("\e015");
|
||||
color: $woocommerce;
|
||||
}
|
||||
|
||||
.status-disabled::before {
|
||||
|
||||
@include icon( "\e013" );
|
||||
@include icon("\e013");
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
|
|
@ -4298,7 +4362,7 @@ img.help_tip {
|
|||
|
||||
&::after {
|
||||
|
||||
@include icon_dashicons( "\f161" );
|
||||
@include icon_dashicons("\f161");
|
||||
font-size: 2.618em;
|
||||
line-height: 72px;
|
||||
color: #ddd;
|
||||
|
|
@ -4340,7 +4404,7 @@ img.help_tip {
|
|||
|
||||
&::before {
|
||||
|
||||
@include icon_dashicons( "\f153" );
|
||||
@include icon_dashicons("\f153");
|
||||
color: #999;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
|
|
@ -4527,7 +4591,7 @@ img.help_tip {
|
|||
|
||||
&::before {
|
||||
|
||||
@include iconbeforedashicons( "\f107" );
|
||||
@include iconbeforedashicons("\f107");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -4611,7 +4675,7 @@ img.help_tip {
|
|||
|
||||
.add.button::before {
|
||||
|
||||
@include iconbefore( "\e007" );
|
||||
@include iconbefore("\e007");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -4727,7 +4791,7 @@ img.help_tip {
|
|||
|
||||
&::before {
|
||||
|
||||
@include icon_dashicons( "\f153" );
|
||||
@include icon_dashicons("\f153");
|
||||
color: #999;
|
||||
}
|
||||
|
||||
|
|
@ -5642,7 +5706,7 @@ img.ui-datepicker-trigger {
|
|||
|
||||
&::before {
|
||||
|
||||
@include iconbeforedashicons( "\f346" );
|
||||
@include iconbeforedashicons("\f346");
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
|
@ -5769,7 +5833,7 @@ img.ui-datepicker-trigger {
|
|||
|
||||
&::after {
|
||||
|
||||
@include iconafter( "\e035" );
|
||||
@include iconafter("\e035");
|
||||
float: right;
|
||||
font-size: 0.9em;
|
||||
line-height: 1.618;
|
||||
|
|
@ -5902,9 +5966,8 @@ img.ui-datepicker-trigger {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow:
|
||||
inset 0 -1px 0 0 #dfdfdf,
|
||||
inset 300px 0 0 rgba(156, 93, 144, 0.1);
|
||||
box-shadow: inset 0 -1px 0 0 #dfdfdf,
|
||||
inset 300px 0 0 rgba(156, 93, 144, 0.1);
|
||||
border-right: 5px solid #9c5d90 !important;
|
||||
padding-left: 1.5em;
|
||||
color: #9c5d90;
|
||||
|
|
@ -6104,27 +6167,27 @@ table.bar_chart {
|
|||
|
||||
.post-type-shop_order .woocommerce-BlankState-message::before {
|
||||
|
||||
@include icon( "\e01d" );
|
||||
@include icon("\e01d");
|
||||
}
|
||||
|
||||
.post-type-shop_coupon .woocommerce-BlankState-message::before {
|
||||
|
||||
@include icon( "\e600" );
|
||||
@include icon("\e600");
|
||||
}
|
||||
|
||||
.post-type-product .woocommerce-BlankState-message::before {
|
||||
|
||||
@include icon( "\e006" );
|
||||
@include icon("\e006");
|
||||
}
|
||||
|
||||
.woocommerce-BlankState--api .woocommerce-BlankState-message::before {
|
||||
|
||||
@include icon( "\e01c" );
|
||||
@include icon("\e01c");
|
||||
}
|
||||
|
||||
.woocommerce-BlankState--webhooks .woocommerce-BlankState-message::before {
|
||||
|
||||
@include icon( "\e01b" );
|
||||
@include icon("\e01b");
|
||||
}
|
||||
|
||||
.woocommerce-BlankState {
|
||||
|
|
@ -7298,7 +7361,7 @@ table.bar_chart {
|
|||
|
||||
&::before {
|
||||
|
||||
@include icon( "\e015" );
|
||||
@include icon("\e015");
|
||||
color: #a16696;
|
||||
position: static;
|
||||
font-size: 100px;
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@ class WC_Admin_Addons {
|
|||
|
||||
if ( is_object( $featured ) ) {
|
||||
self::output_featured_sections( $featured->sections );
|
||||
|
||||
return $featured;
|
||||
}
|
||||
}
|
||||
|
|
@ -57,9 +58,9 @@ class WC_Admin_Addons {
|
|||
/**
|
||||
* Build url parameter string
|
||||
*
|
||||
* @param string $category Addon (sub) category.
|
||||
* @param string $term Search terms.
|
||||
* @param string $country Store country.
|
||||
* @param string $category Addon (sub) category.
|
||||
* @param string $term Search terms.
|
||||
* @param string $country Store country.
|
||||
*
|
||||
* @return string url parameter string
|
||||
*/
|
||||
|
|
@ -77,14 +78,14 @@ class WC_Admin_Addons {
|
|||
/**
|
||||
* Call API to get extensions
|
||||
*
|
||||
* @param string $category Addon (sub) category.
|
||||
* @param string $term Search terms.
|
||||
* @param string $country Store country.
|
||||
* @param string $category Addon (sub) category.
|
||||
* @param string $term Search terms.
|
||||
* @param string $country Store country.
|
||||
*
|
||||
* @return array of extensions
|
||||
*/
|
||||
public static function get_extension_data( $category, $term, $country ) {
|
||||
$parameters = self::build_parameter_string( $category, $term, $country );
|
||||
$parameters = self::build_parameter_string( $category, $term, $country );
|
||||
|
||||
$headers = array();
|
||||
$auth = WC_Helper_Options::get( 'auth' );
|
||||
|
|
@ -101,6 +102,7 @@ class WC_Admin_Addons {
|
|||
if ( ! is_wp_error( $raw_extensions ) ) {
|
||||
$addons = json_decode( wp_remote_retrieve_body( $raw_extensions ) )->products;
|
||||
}
|
||||
|
||||
return $addons;
|
||||
}
|
||||
|
||||
|
|
@ -122,13 +124,14 @@ class WC_Admin_Addons {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
return apply_filters( 'woocommerce_addons_sections', $addon_sections );
|
||||
}
|
||||
|
||||
/**
|
||||
* Get section for the addons screen.
|
||||
*
|
||||
* @param string $section_id Required section ID.
|
||||
* @param string $section_id Required section ID.
|
||||
*
|
||||
* @return object|bool
|
||||
*/
|
||||
|
|
@ -137,13 +140,14 @@ class WC_Admin_Addons {
|
|||
if ( isset( $sections[ $section_id ] ) ) {
|
||||
return $sections[ $section_id ];
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get section content for the addons screen.
|
||||
*
|
||||
* @param string $section_id Required section ID.
|
||||
* @param string $section_id Required section ID.
|
||||
*
|
||||
* @return array
|
||||
*/
|
||||
|
|
@ -226,12 +230,12 @@ class WC_Admin_Addons {
|
|||
<h3><?php echo esc_html( $item->title ); ?></h3>
|
||||
<p><?php echo esc_html( $item->description ); ?></p>
|
||||
<?php
|
||||
self::output_button(
|
||||
$item->href,
|
||||
$item->button,
|
||||
'addons-button-solid',
|
||||
$item->plugin
|
||||
);
|
||||
self::output_button(
|
||||
$item->href,
|
||||
$item->button,
|
||||
'addons-button-solid',
|
||||
$item->plugin
|
||||
);
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -288,12 +292,12 @@ class WC_Admin_Addons {
|
|||
<div class="addons-column-block-item-content">
|
||||
<h2><?php echo esc_html( $item->title ); ?></h2>
|
||||
<?php
|
||||
self::output_button(
|
||||
$item->href,
|
||||
$item->button,
|
||||
'addons-button-solid',
|
||||
$item->plugin
|
||||
);
|
||||
self::output_button(
|
||||
$item->href,
|
||||
$item->button,
|
||||
'addons-button-solid',
|
||||
$item->plugin
|
||||
);
|
||||
?>
|
||||
<p><?php echo esc_html( $item->description ); ?></p>
|
||||
</div>
|
||||
|
|
@ -320,11 +324,11 @@ class WC_Admin_Addons {
|
|||
<div class="addons-small-light-block-buttons">
|
||||
<?php foreach ( $block->buttons as $button ) : ?>
|
||||
<?php
|
||||
self::output_button(
|
||||
$button->href,
|
||||
$button->text,
|
||||
'addons-button-solid'
|
||||
);
|
||||
self::output_button(
|
||||
$button->href,
|
||||
$button->text,
|
||||
'addons-button-solid'
|
||||
);
|
||||
?>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
|
@ -352,11 +356,11 @@ class WC_Admin_Addons {
|
|||
</div>
|
||||
<?php endif; ?>
|
||||
<?php
|
||||
self::output_button(
|
||||
$item->href,
|
||||
$item->button,
|
||||
'addons-button-outline-white'
|
||||
);
|
||||
self::output_button(
|
||||
$item->href,
|
||||
$item->button,
|
||||
'addons-button-outline-white'
|
||||
);
|
||||
?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
|
|
@ -461,11 +465,11 @@ class WC_Admin_Addons {
|
|||
<?php endforeach; ?>
|
||||
</ul>
|
||||
<?php
|
||||
self::output_button(
|
||||
$block_data['href'],
|
||||
$block_data['button'],
|
||||
'addons-button-outline-purple'
|
||||
);
|
||||
self::output_button(
|
||||
$block_data['href'],
|
||||
$block_data['button'],
|
||||
'addons-button-outline-purple'
|
||||
);
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -523,17 +527,75 @@ class WC_Admin_Addons {
|
|||
<h1><?php echo esc_html( $block_data['title'] ); ?></h1>
|
||||
<p><?php echo esc_html( $block_data['description'] ); ?></p>
|
||||
<?php
|
||||
self::output_button(
|
||||
$block_data['href'],
|
||||
$block_data['button'],
|
||||
'addons-button-outline-purple'
|
||||
);
|
||||
self::output_button(
|
||||
$block_data['href'],
|
||||
$block_data['button'],
|
||||
'addons-button-outline-purple'
|
||||
);
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
|
||||
public static function output_ad_block( $section ) {
|
||||
if (
|
||||
! current_user_can( 'install_plugins' ) ||
|
||||
! current_user_can( 'activate_plugins' )
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
$section_object = (object) $section;
|
||||
|
||||
if ( ! empty( $section_object->geowhitelist ) ) {
|
||||
$section_object->geowhitelist = explode( ',', $section_object->geowhitelist );
|
||||
}
|
||||
|
||||
if ( ! self::show_extension( $section_object ) ) {
|
||||
return;
|
||||
}
|
||||
|
||||
?>
|
||||
<div class="addons-banner-block addons-ad-block">
|
||||
<img
|
||||
class="addons-img"
|
||||
src="<?php echo esc_url( $section['image'] ); ?>"
|
||||
alt="<?php echo esc_attr( $section['image_alt'] ); ?>"
|
||||
/>
|
||||
<div class="addons-ad-block-content">
|
||||
<h1 class="addons-ad-block-title"><?php echo esc_html( $section['title'] ); ?></h1>
|
||||
<div class="addons-ad-block-description">
|
||||
<?php echo wp_kses_post( $section['description'] ); ?>
|
||||
</div>
|
||||
<div class="addons-ad-block-buttons">
|
||||
<?php
|
||||
|
||||
if ( $section['button_1'] ) {
|
||||
self::output_button(
|
||||
$section['button_1_href'],
|
||||
$section['button_1'],
|
||||
'addons-button-expandable addons-button-solid',
|
||||
$section['plugin']
|
||||
);
|
||||
}
|
||||
|
||||
if ( $section['button_2'] ) {
|
||||
self::output_button(
|
||||
$section['button_2_href'],
|
||||
$section['button_2'],
|
||||
'addons-button-expandable addons-button-outline-purple',
|
||||
$section['plugin']
|
||||
);
|
||||
}
|
||||
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the outputting of featured sections
|
||||
*
|
||||
|
|
@ -566,6 +628,9 @@ class WC_Admin_Addons {
|
|||
case 'wcpay_banner_block':
|
||||
self::output_wcpay_banner_block( (array) $section );
|
||||
break;
|
||||
case 'wcpay_global_banner_block':
|
||||
self::output_ad_block( (array) $section );
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -577,6 +642,7 @@ class WC_Admin_Addons {
|
|||
// Get url (from path onward) for the current page,
|
||||
// so WCCOM "back" link returns user to where they were.
|
||||
$back_admin_path = add_query_arg( array() );
|
||||
|
||||
return array(
|
||||
'wccom-site' => site_url(),
|
||||
'wccom-back' => rawurlencode( $back_admin_path ),
|
||||
|
|
@ -591,7 +657,7 @@ class WC_Admin_Addons {
|
|||
* Adds various url parameters to a url to support a streamlined
|
||||
* flow for obtaining and setting up WooCommerce extensons.
|
||||
*
|
||||
* @param string $url Destination URL.
|
||||
* @param string $url Destination URL.
|
||||
*/
|
||||
public static function add_in_app_purchase_url_params( $url ) {
|
||||
return add_query_arg(
|
||||
|
|
@ -632,6 +698,7 @@ class WC_Admin_Addons {
|
|||
|
||||
if ( isset( $_GET['section'] ) && 'helper' === $_GET['section'] ) {
|
||||
do_action( 'woocommerce_helper_output' );
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -718,6 +785,7 @@ class WC_Admin_Addons {
|
|||
* Should an extension be shown on the featured page.
|
||||
*
|
||||
* @param object $item Item data.
|
||||
*
|
||||
* @return boolean
|
||||
*/
|
||||
public static function show_extension( $item ) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue