Skip to content

Commit

Permalink
Add Premium Plugins Tab to plugin-install.php (#24)
Browse files Browse the repository at this point in the history 
* Add premium marketplace tab in plugins.php

* Add API calls and the functionality

* Minor card spacing fix for large screens
  • Loading branch information
@wpalani
wpalani authored Jan 31, 2023
1 parent e750d15 commit ee55e69
Show file tree
Hide file tree
Showing 5 changed files with 429 additions and 1 deletion.
10 changes: 9 additions & 1 deletion .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1 +1,9 @@
vendor
# Composer
/vendor

#node_modules
/node_modules

# System and IDE files
.DS_Store
.idea
1 change: 1 addition & 0 deletions includes/Marketplace.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ public function __construct( Container $container ) {
// Module functionality goes here
add_action( 'rest_api_init', array( MarketplaceApi::class, 'registerRoutes' ) );
add_action( 'wp_loaded', array( Themes::class, 'init' ) );
add_action( 'wp_loaded', array( PluginsMarketplace::class, 'init' ) );
}

}
105 changes: 105 additions & 0 deletions includes/PluginsMarketplace.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<?php

namespace NewFoldLabs\WP\Module\Marketplace;

use function NewfoldLabs\WP\ModuleLoader\container;

/**
* Class PluginsMarketplace
* Adds a Premium tab with Marketplace data in plugin-install.php
*/
class PluginsMarketplace {

/**
* Initialize.
*/
public static function init() {
// Filters wheather the premuim plugins tab is enabled or disabled. Default is enabled.
$enabled = apply_filters( 'nfd_enable_plugins_marketplace', true );

if ($enabled) {
add_action( 'admin_menu', array( __CLASS__, 'add_premuim_plugins_menu_link' ) );
add_filter( 'install_plugins_tabs', array( __CLASS__, 'add_premuim_plugins_tab' ) );
add_action( 'admin_head-plugin-install.php', array( __CLASS__, 'premuim_plugins_tab_enqueue_assets' ) );
}
}

/**
* Add "Premium" sub-link to admin menu.
*/
public static function add_premuim_plugins_menu_link() {
add_submenu_page(
'plugins.php',
'Premium Plugins',
'Premium',
'manage_options',
'plugin-install.php?tab=premium-marketplace',
);

// Add crown icon to menu and filter links
add_action(
'admin_footer',
function () { ?>
<style>
#nfd-premium-plugins-crown {
max-width: .85rem;
max-height: .85rem;
margin-left: 5px;
margin-bottom: -1.5px;
}
.plugin-install-premium-marketplace #nfd-premium-plugins-crown {
max-width: 1rem;
max-height: 1rem;
fill: #f19805;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', () => {
const crownSVG = `<svg id="nfd-premium-plugins-crown" width="24" height="24" viewBox="0 0 124 109" fill="#FBAA10" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M22.13 84.86H102.38L114.92 50.13C115.57 50.34 116.27 50.45 116.99 50.45C120.79 50.45 123.88 47.37 123.88 43.56C123.88 39.76 120.8 36.67 116.99 36.67C113.19 36.67 110.1 39.75 110.1 43.56C110.1 45.06 110.58 46.44 111.39 47.57L104.27 53.43C94.3 61.63 88.05 57.83 90 45.09L91.1 37.92C91.48 37.99 91.88 38.02 92.28 38.02C96.08 38.02 99.17 34.94 99.17 31.13C99.17 27.33 96.09 24.24 92.28 24.24C88.48 24.24 85.39 27.32 85.39 31.13C85.39 33.3 86.4 35.24 87.97 36.5L86.26 39.2C77.88 51.78 71.7 46.96 69.23 34.53L64.82 14.22C67.29 13.17 69.03 10.73 69.03 7.86998C69.03 4.06998 65.95 0.97998 62.14 0.97998C58.34 0.97998 55.25 4.05998 55.25 7.86998C55.25 11.05 57.4 13.72 60.32 14.52L57.46 26.1C54.98 36.71 52.01 57.85 38.58 39.83L36.39 36.85C38.12 35.6 39.25 33.56 39.25 31.26C39.25 27.46 36.17 24.37 32.36 24.37C28.56 24.37 25.47 27.45 25.47 31.26C25.47 35.06 28.55 38.15 32.36 38.15C32.89 38.15 33.41 38.09 33.91 37.97L34.37 42.65C35.27 49.04 36.42 57.69 29.08 57.28C25.44 57.08 24.07 55.84 21.29 53.86L13.35 48.23C14.24 47.07 14.77 45.62 14.77 44.04C14.77 40.24 11.69 37.15 7.87999 37.15C4.07999 37.15 0.98999 40.23 0.98999 44.04C0.98999 47.85 4.06999 50.93 7.87999 50.93C8.77999 50.93 9.62999 50.76 10.42 50.45L22.13 84.86ZM22.07 94.47H102.58V108.76H22.07V94.47Z" />
</svg>`;

const menuPremiumLink = document.querySelector('#menu-plugins a[href="plugin-install.php?tab=premium-marketplace"]');
menuPremiumLink.innerHTML += crownSVG;

const filterPremiumLink = document.querySelector('.plugin-install-premium-marketplace > a');
if (filterPremiumLink) {
filterPremiumLink.innerHTML += crownSVG;
}
});
</script> <?php
},
0 );
}

/**
* Add "Premium" tab to plugins install tabs.
*/
public static function add_Premuim_plugins_tab( $tabs ) {
$tabs['premium-marketplace'] = __( 'Premium', container()->plugin()->id . '-wordpress-plugin' );

return $tabs;
}

/**
* Enqueue assets and set locals.
*/
public static function premuim_plugins_tab_enqueue_assets() {
if ( false === ( isset($_GET['tab']) && $_GET['tab'] == 'premium-marketplace' ) ) {
return;
}

$assetsDir = container()->plugin()->url . 'vendor/newfold-labs/wp-module-marketplace/includes/assets/';

wp_enqueue_style( 'nfd_plugins_marketplace_css', $assetsDir . 'css/NFDPluginsMarketplace.css' );
wp_enqueue_script( 'nfd_plugins_marketplace_js', $assetsDir . 'js/NFDPluginsMarketplace.js' );

wp_localize_script('nfd_plugins_marketplace_js', 'nfdPremiumPluginsMarketplace',
array(
'restApiNonce' => wp_create_nonce('wp_rest'),
'marketplaceDescription' => __( "Unlock the full potential of your WordPress website with premium plugins from", container()->plugin()->id . '-wordpress-plugin' ) . " " . ucwords(container()->plugin()->id),
)
);
}
}
128 changes: 128 additions & 0 deletions includes/assets/css/NFDPluginsMarketplace.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
.nfd-plugin-card-content {
position: relative;
padding: 20px 20px 40px;
}

@media screen and (min-width: 1600px) {
.nfd-plugin-card-content {
padding-bottom: 20px;
}
}

.nfd-plugin-card-thumbnail {
position: absolute;
top: 20px;
left: 20px;
width: 128px;
height: 128px;
margin: 0 20px 20px 0;
background-color: rgba(160, 170, 192, 0.35);
}

.nfd-plugin-card-title {
margin-left: 148px;
margin-right: 128px;
}

.nfd-plugin-card-title h3 {
color: #3c434a;
font-size: .95rem;
}

.nfd-plugin-card-desc {
margin-left: 148px;
margin-right: 128px;
}

.nfd-plugin-card-desc p {
margin-bottom: 0;
}

.nfd-plugin-card-actions {
position: absolute;
top: 20px;
right: 20px;
width: 120px;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
gap: 10px;
}

@media screen and (max-width: 1100px) and (min-width: 782px), (max-width: 480px) {
.nfd-plugin-card-actions {
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
margin-bottom: 12px !important;
}

.nfd-plugin-card-desc p {
margin-top: 12px;
}
}

.nfd-plugin-card-actions .nfd-ctb-btn {
max-width: fit-content;
}

.nfd-skeleton {
position: relative;
background-color: rgba(160, 170, 192, .35);
overflow: hidden;
border-radius: 2px;
}

.nfd-skeleton::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateX(-100%);
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
animation: marketplace-skeleton 3s infinite;
content: '';
}

@keyframes marketplace-skeleton {
100% {
transform: translateX(100%);
}
}

.nfd-premium-marketplace-loading-error {
width: 100%;
margin-top: 20px;
display: flex;
justify-content: center;
}

.nfd-premium-marketplace-loading-error-content {
width: 425px;
max-width: 100%;
text-align: center;
}

.nfd-premium-marketplace-loading-error-content h2 {
font-size: 1.55rem;
margin-top: 1.6rem;
}

.nfd-premium-marketplace-loading-error-content p {
font-size: 1.1rem;
margin-bottom: 1.85rem;
}

.nfd-premium-marketplace-loading-error-content a.button-primary {
font-size: 1rem;
}

.nfd-premium-marketplace-loading-error-content img {
max-width: 100%;
}

.plugin-install-tab-premium-marketplace .search-plugins {
display: none;
}
Loading

0 comments on commit ee55e69

Please sign in to comment.