assets/js/admin/marketplace-suggestions.js
/* global marketplace_suggestions, ajaxurl, Cookies */
( function( $, marketplace_suggestions, ajaxurl ) {
$( function() {
if ( 'undefined' === typeof marketplace_suggestions ) {
return;
}
// Stand-in wcTracks.recordEvent in case tracks is not available (for any reason).
window.wcTracks = window.wcTracks || {};
window.wcTracks.recordEvent = window.wcTracks.recordEvent || function() { };
// Tracks events sent in this file:
// - marketplace_suggestion_displayed
// - marketplace_suggestion_clicked
// - marketplace_suggestion_dismissed
// All are prefixed by {WC_Tracks::PREFIX}.
// All have one property for `suggestionSlug`, to identify the specific suggestion message.
// Dismiss the specified suggestion from the UI, and save the dismissal in settings.
function dismissSuggestion( context, product, promoted, url, suggestionSlug ) {
// hide the suggestion in the UI
var selector = '[data-suggestion-slug=' + suggestionSlug + ']';
$( selector ).fadeOut( function() {
$( this ).remove();
tidyProductEditMetabox();
} );
// save dismissal in user settings
jQuery.post(
ajaxurl,
{
'action': 'woocommerce_add_dismissed_marketplace_suggestion',
'_wpnonce': marketplace_suggestions.dismiss_suggestion_nonce,
'slug': suggestionSlug
}
);
// if this is a high-use area, delay new suggestion that area for a short while
var highUseSuggestionContexts = [ 'products-list-inline' ];
if ( _.contains( highUseSuggestionContexts, context ) ) {
// snooze suggestions in that area for 2 days
var contextSnoozeCookie = 'woocommerce_snooze_suggestions__' + context;
Cookies.set( contextSnoozeCookie, 'true', { expires: 2 } );
// keep track of how often this area gets dismissed in a cookie
var contextDismissalCountCookie = 'woocommerce_dismissed_suggestions__' + context;
var previousDismissalsInThisContext = parseInt( Cookies.get( contextDismissalCountCookie ), 10 ) || 0;
Cookies.set( contextDismissalCountCookie, previousDismissalsInThisContext + 1, { expires: 31 } );
}
window.wcTracks.recordEvent( 'marketplace_suggestion_dismissed', {
suggestion_slug: suggestionSlug,
context: context,
product: product || '',
promoted: promoted || '',
target: url || ''
} );
}
// Render DOM element for suggestion dismiss button.
function renderDismissButton( context, product, promoted, url, suggestionSlug ) {
var dismissButton = document.createElement( 'a' );
dismissButton.classList.add( 'suggestion-dismiss' );
dismissButton.setAttribute( 'title', marketplace_suggestions.i18n_marketplace_suggestions_dismiss_tooltip );
dismissButton.setAttribute( 'href', '#' );
dismissButton.onclick = function( event ) {
event.preventDefault();
dismissSuggestion( context, product, promoted, url, suggestionSlug );
};
return dismissButton;
}
function addURLParameters( context, url ) {
var urlParams = marketplace_suggestions.in_app_purchase_params;
urlParams.utm_source = 'unknown';
urlParams.utm_campaign = 'marketplacesuggestions';
urlParams.utm_medium = 'product';
var sourceContextMap = {
'productstable': [
'products-list-inline'
],
'productsempty': [
'products-list-empty-header',
'products-list-empty-footer',
'products-list-empty-body'
],
'ordersempty': [
'orders-list-empty-header',
'orders-list-empty-footer',
'orders-list-empty-body'
],
'editproduct': [
'product-edit-meta-tab-header',
'product-edit-meta-tab-footer',
'product-edit-meta-tab-body'
]
};
var utmSource = _.findKey( sourceContextMap, function( sourceInfo ) {
return _.contains( sourceInfo, context );
} );
if ( utmSource ) {
urlParams.utm_source = utmSource;
}
return url + '?' + jQuery.param( urlParams );
}
// Render DOM element for suggestion linkout, optionally with button style.
function renderLinkout( context, product, promoted, slug, url, text, isButton ) {
var linkoutButton = document.createElement( 'a' );
var utmUrl = addURLParameters( context, url );
linkoutButton.setAttribute( 'href', utmUrl );
// By default, CTA links should open in same tab (and feel integrated with Woo).
// Exception: when editing products, use new tab. User may have product edits
// that need to be saved.
var newTabContexts = [
'product-edit-meta-tab-header',
'product-edit-meta-tab-footer',
'product-edit-meta-tab-body'
];
if ( _.includes( newTabContexts, context ) ) {
linkoutButton.setAttribute( 'target', 'blank' );
}
linkoutButton.textContent = text;
linkoutButton.onclick = function() {
window.wcTracks.recordEvent( 'marketplace_suggestion_clicked', {
suggestion_slug: slug,
context: context,
product: product || '',
promoted: promoted || '',
target: url || ''
} );
};
if ( isButton ) {
linkoutButton.classList.add( 'button' );
} else {
linkoutButton.classList.add( 'linkout' );
var linkoutIcon = document.createElement( 'span' );
linkoutIcon.classList.add( 'dashicons', 'dashicons-external' );
linkoutButton.appendChild( linkoutIcon );
}
return linkoutButton;
}
// Render DOM element for suggestion icon image.
function renderSuggestionIcon( iconUrl ) {
if ( ! iconUrl ) {
return null;
}
var image = document.createElement( 'img' );
image.src = iconUrl;
image.classList.add( 'marketplace-suggestion-icon' );
return image;
}
// Render DOM elements for suggestion content.
function renderSuggestionContent( slug, title, copy ) {
var container = document.createElement( 'div' );
container.classList.add( 'marketplace-suggestion-container-content' );
if ( title ) {
var titleHeading = document.createElement( 'h4' );
titleHeading.textContent = title;
container.appendChild( titleHeading );
}
if ( copy ) {
var body = document.createElement( 'p' );
body.textContent = copy;
container.appendChild( body );
}
// Conditionally add in a Manage suggestions link to product edit
// metabox footer (based on suggestion slug).
var slugsWithManage = [
'product-edit-empty-footer-browse-all',
'product-edit-meta-tab-footer-browse-all'
];
if ( -1 !== slugsWithManage.indexOf( slug ) ) {
container.classList.add( 'has-manage-link' );
var manageSuggestionsLink = document.createElement( 'a' );
manageSuggestionsLink.classList.add( 'marketplace-suggestion-manage-link', 'linkout' );
manageSuggestionsLink.setAttribute(
'href',
marketplace_suggestions.manage_suggestions_url
);
manageSuggestionsLink.textContent = marketplace_suggestions.i18n_marketplace_suggestions_manage_suggestions;
container.appendChild( manageSuggestionsLink );
}
return container;
}
// Render DOM elements for suggestion call-to-action – button or link with dismiss 'x'.
function renderSuggestionCTA( context, product, promoted, slug, url, linkText, linkIsButton, allowDismiss ) {
var container = document.createElement( 'div' );
if ( ! linkText ) {
linkText = marketplace_suggestions.i18n_marketplace_suggestions_default_cta;
}
container.classList.add( 'marketplace-suggestion-container-cta' );
if ( url && linkText ) {
var linkoutElement = renderLinkout( context, product, promoted, slug, url, linkText, linkIsButton );
container.appendChild( linkoutElement );
}
if ( allowDismiss ) {
container.appendChild( renderDismissButton( context, product, promoted, url, slug ) );
}
return container;
}
// Render a "list item" style suggestion.
// These are used in onboarding style contexts, e.g. products list empty state.
function renderListItem( context, product, promoted, 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( iconUrl );
if ( icon ) {
container.appendChild( icon );
}
container.appendChild(
renderSuggestionContent( slug, title, copy )
);
container.appendChild(
renderSuggestionCTA( context, product, promoted, slug, url, linkText, linkIsButton, allowDismiss )
);
return container;
}
// Filter suggestion data to remove less-relevant suggestions.
function getRelevantPromotions( marketplaceSuggestionsApiData, displayContext ) {
// select based on display context
var promos = _.filter( marketplaceSuggestionsApiData, function( promo ) {
if ( _.isArray( promo.context ) ) {
return _.contains( promo.context, displayContext );
}
return ( displayContext === promo.context );
} );
// hide promos the user has dismissed
promos = _.filter( promos, function( promo ) {
return ! _.contains( marketplace_suggestions.dismissed_suggestions, promo.slug );
} );
// hide promos for things the user already has installed
promos = _.filter( promos, function( promo ) {
return ! _.contains( marketplace_suggestions.active_plugins, promo.product );
} );
// hide promos that are not applicable based on user's installed extensions
promos = _.filter( promos, function( promo ) {
if ( ! promo['show-if-active'] ) {
// this promotion is relevant to all
return true;
}
// if the user has any of the prerequisites, show the promo
return ( _.intersection( marketplace_suggestions.active_plugins, promo['show-if-active'] ).length > 0 );
} );
return promos;
}
// Show and hide page elements dependent on suggestion state.
function hidePageElementsForSuggestionState( usedSuggestionsContexts ) {
var showingEmptyStateSuggestions = _.intersection(
usedSuggestionsContexts,
[ 'products-list-empty-body', 'orders-list-empty-body' ]
).length > 0;
// Streamline onboarding UI if we're in 'empty state' welcome mode.
if ( showingEmptyStateSuggestions ) {
$( '#screen-meta-links' ).hide();
$( '#wpfooter' ).hide();
}
// Hide the header & footer, they don't make sense without specific promotion content
if ( ! showingEmptyStateSuggestions ) {
$( '.marketplace-suggestions-container[data-marketplace-suggestions-context="products-list-empty-header"]' ).hide();
$( '.marketplace-suggestions-container[data-marketplace-suggestions-context="products-list-empty-footer"]' ).hide();
$( '.marketplace-suggestions-container[data-marketplace-suggestions-context="orders-list-empty-header"]' ).hide();
$( '.marketplace-suggestions-container[data-marketplace-suggestions-context="orders-list-empty-footer"]' ).hide();
}
}
// Streamline the product edit suggestions tab dependent on what's visible.
function tidyProductEditMetabox() {
var productMetaboxSuggestions = $(
'.marketplace-suggestions-container[data-marketplace-suggestions-context="product-edit-meta-tab-body"]'
).children();
if ( 0 >= productMetaboxSuggestions.length ) {
var metaboxSuggestionsUISelector =
'.marketplace-suggestions-container[data-marketplace-suggestions-context="product-edit-meta-tab-body"]';
metaboxSuggestionsUISelector +=
', .marketplace-suggestions-container[data-marketplace-suggestions-context="product-edit-meta-tab-header"]';
metaboxSuggestionsUISelector +=
', .marketplace-suggestions-container[data-marketplace-suggestions-context="product-edit-meta-tab-footer"]';
$( metaboxSuggestionsUISelector ).fadeOut( {
complete: function() {
$( '.marketplace-suggestions-metabox-nosuggestions-placeholder' ).fadeIn();
}
} );
}
}
function addManageSuggestionsTracksHandler() {
$( 'a.marketplace-suggestion-manage-link' ).on( 'click', function() {
window.wcTracks.recordEvent( 'marketplace_suggestions_manage_clicked' );
} );
}
function isContextHiddenOnPageLoad( context ) {
// Some suggestions are not visible on page load;
// e.g. the user reveals them by selecting a tab.
var revealableSuggestionsContexts = [
'product-edit-meta-tab-header',
'product-edit-meta-tab-body',
'product-edit-meta-tab-footer'
];
return _.includes( revealableSuggestionsContexts, context );
}
// track the current product data tab to avoid over-tracking suggestions
var currentTab = false;
// Render suggestion data in appropriate places in UI.
function displaySuggestions( marketplaceSuggestionsApiData ) {
var usedSuggestionsContexts = [];
// iterate over all suggestions containers, rendering promos
$( '.marketplace-suggestions-container' ).each( function() {
// determine the context / placement we're populating
var context = this.dataset.marketplaceSuggestionsContext;
// find promotions that target this context
var promos = getRelevantPromotions( marketplaceSuggestionsApiData, context );
// shuffle/randomly select five suggestions to display
var suggestionsToDisplay = _.sample( promos, 5 );
// render the promo content
for ( var i in suggestionsToDisplay ) {
var linkText = suggestionsToDisplay[ i ]['link-text'];
var linkoutIsButton = true;
if ( suggestionsToDisplay[ i ]['link-text'] ) {
linkText = suggestionsToDisplay[ i ]['link-text'];
linkoutIsButton = false;
}
// dismiss is allowed by default
var allowDismiss = true;
if ( suggestionsToDisplay[ i ]['allow-dismiss'] === false ) {
allowDismiss = false;
}
var content = renderListItem(
context,
suggestionsToDisplay[ i ].product,
suggestionsToDisplay[ i ].promoted,
suggestionsToDisplay[ i ].slug,
suggestionsToDisplay[ i ].icon,
suggestionsToDisplay[ i ].title,
suggestionsToDisplay[ i ].copy,
suggestionsToDisplay[ i ].url,
linkText,
linkoutIsButton,
allowDismiss
);
$( this ).append( content );
$( this ).addClass( 'showing-suggestion' );
usedSuggestionsContexts.push( context );
if ( ! isContextHiddenOnPageLoad( context ) ) {
// Fire 'displayed' tracks events for immediately visible suggestions.
window.wcTracks.recordEvent( 'marketplace_suggestion_displayed', {
suggestion_slug: suggestionsToDisplay[ i ].slug,
context: context,
product: suggestionsToDisplay[ i ].product || '',
promoted: suggestionsToDisplay[ i ].promoted || '',
target: suggestionsToDisplay[ i ].url || ''
} );
}
}
// Track when suggestions are displayed (and not already visible).
$( 'ul.product_data_tabs li.marketplace-suggestions_options a' ).on( 'click', function( e ) {
e.preventDefault();
if ( '#marketplace_suggestions' === currentTab ) {
return;
}
if ( ! isContextHiddenOnPageLoad( context ) ) {
// We've already fired 'displayed' event above.
return;
}
for ( var i in suggestionsToDisplay ) {
window.wcTracks.recordEvent( 'marketplace_suggestion_displayed', {
suggestion_slug: suggestionsToDisplay[ i ].slug,
context: context,
product: suggestionsToDisplay[ i ].product || '',
promoted: suggestionsToDisplay[ i ].promoted || '',
target: suggestionsToDisplay[ i ].url || ''
} );
}
} );
} );
hidePageElementsForSuggestionState( usedSuggestionsContexts );
tidyProductEditMetabox();
}
if ( marketplace_suggestions.suggestions_data ) {
displaySuggestions( marketplace_suggestions.suggestions_data );
// track the current product data tab to avoid over-reporting suggestion views
$( 'ul.product_data_tabs' ).on( 'click', 'li a', function( e ) {
e.preventDefault();
currentTab = $( this ).attr( 'href' );
} );
}
addManageSuggestionsTracksHandler();
});
})( jQuery, marketplace_suggestions, ajaxurl );