first commit
This commit is contained in:
@@ -0,0 +1,450 @@
|
||||
/* 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',
|
||||
'products-list-empty-footer'
|
||||
];
|
||||
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 );
|
||||
Reference in New Issue
Block a user