woocommerce/assets/js/admin/marketplace-suggestions.js

/* global installed_woo_plugins */
( function( $, installed_woo_plugins ) {
	$( function() {
		if ( 'undefined' === typeof installed_woo_plugins ) {
			return;
		}

		var marketplaceSuggestionsApiData = [
			{
				slug: 'products-empty-header',
				context: 'products-list-empty-header',
				content: '<h1>Selling something different?</h1><p>You can install extensions to sell all kinds of things!</p>'
			},
			{
				slug: 'products-empty-memberships',
				context: 'products-list-empty-body',
				'show-if-installed': [ 'woocommerce-subscriptions' ],
				content: '<div class="marketplace-card">' +
						'<h2>Memberships</h2>' +
						'<p>Give members access to restricted content or products</p>' +
						'<a class="button" href="https://woocommerce.com/products/woocommerce-memberships/">From $149</a>' +
					'</div>'
			},
			{
				slug: 'products-empty-addons',
				context: 'products-list-empty-body',
				'show-if-installed': [
					'woocommerce-subscriptions',
					'woocommerce-memberships'
				],
				content: '<div class="marketplace-card">' +
						'<h2>Product Add-Ons</h2>' +
						'<p>Offer add-ons like gift wrapping, special messages or other special options for your products.</p>' +
						'<a class="button" href="https://woocommerce.com/products/product-add-ons/">From $149</a>' +
					'</div>'
			},
			{
				slug: 'products-empty-product-bundles',
				context: 'products-list-empty-body',
				'hide-if-installed': 'woocommerce-product-bundles',
				content: '<div class="marketplace-card">' +
						'<h2>Product Bundles</h2>' +
						'<p>Offer customizable bundles and assembled products</p>' +
						'<a class="button" href="https://woocommerce.com/products/product-bundles/">From $49</a>' +
					'</div>'
			},
			{
				slug: 'products-empty-composite-products',
				context: 'products-list-empty-body',
				content: '<div class="marketplace-card">' +
						'<h2>Composite Products</h2>' +
						'<p>Create and offer product kits with configurable components</p>' +
						'<a class="button" href=https://woocommerce.com/products/composite-products/">From $79</a>' +
					'</div>'
			},
			{
				slug: 'products-empty-more',
				context: 'products-list-empty-body',
				content: '<div class="marketplace-card"><h2>More Extensions</h2></div>'
			},
			{
				slug: 'products-list-enhancements-category',
				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/',
			}
		];

		function renderTableBanner( title, url, buttonText ) {
			if ( ! title || ! url ) {
				return;
			}

			if ( ! buttonText ) {
				buttonText = 'Go';
			}

			var row = document.createElement( 'tr' );
			row.classList.add( 'marketplace-list-banner' );

			var titleColumn = document.createElement( 'td' );
			titleColumn.setAttribute( 'colspan', 5 );
			titleColumn.classList.add( 'marketplace-list-title' );
			var titleHeading = document.createElement( 'h2' );
			titleColumn.append( titleHeading );
			titleHeading.textContent = title;

			row.appendChild( titleColumn );

			var linkoutColumn = document.createElement( 'td' );
			linkoutColumn.setAttribute( 'colspan', 4 );
			linkoutColumn.classList.add( 'marketplace-list-linkout' );
			var linkoutButton = document.createElement( 'a' );
			linkoutColumn.append( linkoutButton );
			linkoutButton.classList.add( 'button' );
			linkoutButton.setAttribute( 'href', url );
			linkoutButton.textContent = buttonText;

			row.appendChild( linkoutColumn );

			return row;
		}

		var visibleSuggestions = [];

		function getRelevantPromotions( displayContext ) {
			// select based on display context
			var promos = _.filter( marketplaceSuggestionsApiData, function( promo ) {
				return ( displayContext === promo.context );
			} );

			// hide promos for things the user already has installed
			promos = _.filter( promos, function( promo ) {
				return ! _.contains( installed_woo_plugins, promo['hide-if-installed'] );
			} );

			// hide promos that are not applicable based on user's installed extensions
			promos = _.filter( promos, function( promo ) {
				if ( ! promo['show-if-installed'] ) {
					// this promotion is relevant to all
					return true;
				}

				// if the user has any of the prerequisites, show the promo
				return ( _.intersection( installed_woo_plugins, promo['show-if-installed'] ).length > 0 );
			} );

			return promos;
		}

		// 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( context );

			// render the promo content
			for ( var i in promos ) {
				$( this ).append( promos[ i ].content );
				visibleSuggestions.push( promos[i].context );
			}
		} );

		// render inline promos in products list
		$( '.wp-admin.admin-bar.edit-php.post-type-product table.wp-list-table.posts tbody').first().each( function() {
			var context = 'products-list-inline';

			// find promotions that target this context
			var promos = getRelevantPromotions( context );
			if ( ! promos || ! promos.length ) {
				return;
			}

			// render first promo
			var content = renderTableBanner(
				promos[ 0 ].title,
				promos[ 0 ].url,
				promos[ 0 ]['button-text']
			);

			if ( content ) {
				// where should we put it in the list?
				var rows = $( this ).children();
				var minRow = 3;

				if ( rows.length <= minRow ) {
					// if small number of rows, append at end
					$( this ).append( content );
				}
				else {
					// for more rows, append
					$( rows[ minRow - 1 ] ).after( content );
				}

				visibleSuggestions.push( context );
			}
		} );

		// streamline layout if we're showing empty product list promos
		if ( _.contains( visibleSuggestions, 'products-list-empty-body' ) ) {
			$('#wpfooter').hide();
		}

	});

})( jQuery, installed_woo_plugins );