Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

display icon images in suggestions + styling tweaks for header/footer

This commit is contained in:
haszari 2019-02-20 11:46:06 +13:00
parent 42e026140a
commit 4c1caf9171
5 changed files with 90 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/marketplace-suggestions-rtl.css
View File

File diff suppressed because one or more lines are too long

2
assets/css/marketplace-suggestions.css
View File

File diff suppressed because one or more lines are too long

71
assets/css/marketplace-suggestions.scss
View File

@ -26,19 +26,6 @@ a.suggestion-dismiss::before {
font-size: 1.5em;
}
.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context="products-list-empty-header"],
.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context="products-list-empty-footer"] {
.marketplace-suggestion-container-content {
h4 {
font-size: 1.1em;
margin: 0;
margin-bottom: 0;
}
}
}
.marketplace-suggestions-container.showing-suggestion {
text-align: left;
@ -47,11 +34,19 @@ a.suggestion-dismiss::before {
display: flex;
flex-direction: column;
// Allows us to position the dismiss x button relative to container on mobile.
// Allows us to position the dismiss x button
// relative to container on mobile.
position: relative;
img.marketplace-suggestion-icon {
height: 40px;
margin-right: 1.5em;
margin-bottom: 1em;
flex: 0 0 40px;
}
.marketplace-suggestion-container-content {
flex: 1 0 70%;
flex: 1 1 60%;
h4 {
margin: 0;
@ -84,6 +79,39 @@ a.suggestion-dismiss::before {
align-items: center;
flex-direction: row;
img.marketplace-suggestion-icon {
// display: inline-block;
}
}
}
}
.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context="products-list-empty-header"],
.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context="products-list-empty-footer"] {
.marketplace-suggestion-container {
.marketplace-suggestion-container-content {
h4 {
font-size: 1.1em;
margin: 0;
margin-bottom: 0;
}
}
}
}
// Optimise footer suggestion layout for left-aligned CTA link button only.
.marketplace-suggestions-container.showing-suggestion[data-marketplace-suggestions-context="products-list-empty-footer"] {
.marketplace-suggestion-container {
flex-direction: row-reverse;
.marketplace-suggestion-container-cta {
text-align: left;
}
}
}
@ -100,9 +128,16 @@ a.suggestion-dismiss::before {
.marketplace-suggestion-container {
padding: 0.5em 0 0.5em 1em;
h4 {
margin: 0;
font-size: 1.2em;
img.marketplace-suggestion-icon {
margin-bottom: 0;
}
.marketplace-suggestion-container-content {
h4 {
margin: 0;
font-size: 1.2em;
}
}
.marketplace-suggestion-container-cta {

27
assets/js/admin/marketplace-suggestions.js
View File

@ -54,6 +54,18 @@
return linkoutButton;
}
function renderSuggestionIcon( slug, iconUrl ) {
if ( !iconUrl ) {
return null;
}
var image = document.createElement( 'img' );
image.src = iconUrl;
image.classList.add( 'marketplace-suggestion-icon' );
return image;
}
function renderSuggestionContent( slug, title, copy ) {
var left = document.createElement( 'div' );
@ -90,7 +102,7 @@
return right;
}
function renderTableBanner( slug, title, copy, url, buttonText, allowDismiss ) {
function renderTableBanner( slug, iconUrl, title, copy, url, buttonText, allowDismiss ) {
if ( ! title || ! url ) {
return;
}
@ -113,7 +125,10 @@
container.classList.add( 'marketplace-suggestion-container' );
container.dataset.suggestionSlug = slug;
var icon = renderSuggestionIcon( slug, iconUrl );
if ( icon ) {
container.appendChild( icon );
}
container.appendChild(
renderSuggestionContent( slug, title, copy )
);
@ -127,11 +142,15 @@
return row;
}
function renderListItem( slug, title, copy, url, linkText, linkIsButton, allowDismiss ) {
function renderListItem( slug, iconUrl, title, copy, url, linkText, linkIsButton, allowDismiss ) {
var container = document.createElement( 'div' );
container.classList.add( 'marketplace-suggestion-container' );
container.dataset.suggestionSlug = slug;
var icon = renderSuggestionIcon( slug, iconUrl );
if ( icon ) {
container.appendChild( icon );
}
container.appendChild(
renderSuggestionContent( slug, title, copy )
);
@ -213,6 +232,7 @@
var content = renderListItem(
promos[ i ].slug,
promos[ i ].icon,
promos[ i ].title,
promos[ i ].copy,
promos[ i ].url,
@ -245,6 +265,7 @@
// render first promo
var content = renderTableBanner(
promos[ 0 ].slug,
promos[ 0 ].icon,
promos[ 0 ].title,
promos[ 0 ].copy,
promos[ 0 ].url,

12
includes/marketplace-suggestions/class-wc-marketplace-suggestions-api.php
View File

@ -69,6 +69,7 @@ function wc_marketplace_suggestions_ajax_handler() {
},
{
"slug": "products-empty-memberships",
"icon": "https://woocommerce.com/wp-content/uploads/2018/06/icon.png",
"context": "products-list-empty-body",
"hide-if-installed": "woocommerce-memberships",
"title": "Memberships",
@ -90,6 +91,7 @@ function wc_marketplace_suggestions_ajax_handler() {
},
{
"slug": "products-empty-product-bundles",
"icon": "https://woocommerce.com/wp-content/uploads/2018/06/icon.png",
"context": "products-list-empty-body",
"hide-if-installed": "woocommerce-product-bundles",
"title": "Product Bundles",
@ -105,8 +107,16 @@ function wc_marketplace_suggestions_ajax_handler() {
"button-text": "From $79",
"url": "https://woocommerce.com/products/composite-products/"
},
{
{
"slug": "products-list-enhancements-category",
"icon": "https://woocommerce.com/wp-content/uploads/2018/06/icon.png",
"context": "products-list-inline",
"title": "Looking to optimize your product pages?",
"button-text": "Explore enhancements",
"url": "https://woocommerce.com/product-category/woocommerce-extensions/product-extensions/"
},
{
"slug": "products-list-enhancements-category-noimage",
"context": "products-list-inline",
"title": "Looking to optimize your product pages?",
"button-text": "Explore enhancements",