PMPro Level selection popup shortcode

pmpro-level-selection-popup.php

<?php // do no include in Customizaations Plugin
/**
 * Plugin Name: PMPro Levels Popup
 * Description: Add Level selection to a popup
 */

add_shortcode( 'pmpro-levels2-popup', 'pmpro_levels_select_shortcode2' );
function pmpro_levels_select_shortcode2() {
	global $wpdb, $pmpro_msg, $pmpro_msgt, $current_user;

	$pmpro_levels = pmpro_getAllLevels( false, true );
	$pmpro_level_order = pmpro_getOption( 'level_order' );

	if ( ! empty( $pmpro_level_order ) ) {
		$order = explode( ',', $pmpro_level_order );

		// reorder array
		$reordered_levels = array();
		foreach ( $order as $level_id ) {
			foreach ( $pmpro_levels as $key => $level ) {
				if ( $level_id == $level->id ) {
					$reordered_levels[] = $pmpro_levels[ $key ];
				}
			}
		}

		$pmpro_levels = $reordered_levels;
	}

	$output .= '
<style>

.grid-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  grid-gap: 3px;
  background-color: #fff;
  color: #444;
}

.grid-cell {
  border: 2px solid rgba(67, 71, 164, .4);
  border-radius: 5px;
  padding: 2rem;
}

.outer {
	width: 40%;
	margin: 0 auto;
	background: rgba(255,255,255,0.2);
	padding: 35px;
	border: 2px solid #fff;
	border-radius: 20px/50px;
	background-clip: padding-box;
	text-align: center;
}

.button {
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s ease-out;
}
.button:hover {
	background: #06D85F;
}

.overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.7);
	transition: opacity 500ms;
	visibility: hidden;
	opacity: 0;
}
.overlay:target {
	visibility: visible;
	opacity: 1;
}

.popup {
	margin: 20% auto;
	padding: 20px;
	background: #fff;
	border-radius: 5px;
	width: 60%;
	position: relative;
	transition: all 5s ease-in-out;
}

.popup h2 {
	margin-top: 0;
}
.popup .close {
	position: absolute;
	top: 20px;
	right: 30px;
	transition: all 200ms;
	font-size: 30px;
	font-weight: bold;
	text-decoration: none;
	color: #333;
}
.popup .close:hover {
	color: #06D85F;
}
.popup .content {
	max-height: 40%;
	overflow: auto;
}

@media screen and (max-width: 700px){
	.outer {
		width: 70%;
	}
	.popup{
		width: 70%;
	}
}
</style>


	<div class="outer">
		<a class="button" href="#levels-popup">' . __( 'Sign Up!!', 'paid-memberships-pro' ) . '</a>
	</div>

	<div id="levels-popup" class="overlay">
		<div class="popup">
			<h2>' . __( 'Select a level', 'paid-memberships-pro' ) . '</h2>
			<a class="close" href="#">&times;</a>
			<div class="content">';

	// $pmpro_levels = apply_filters( 'pmpro_levels_array', $pmpro_levels );
	if ( $pmpro_msg ) {
		$output = '<div class="pmpro_message ' . $pmpro_msgt . '">' . $pmpro_msg . '</div>';
	}

	$output .= '<div id="pmpro_levels_table" class="grid-wrapper pmpro_checkout" style="display:grid;grid-template-columns: 1fr 4fr 1fr;">';
	$output .= '

	<div class="grid-cell">' . __( 'Level', 'paid-memberships-pro' ) . '</div>
	<div class="grid-cell">' . __( 'Price', 'paid-memberships-pro' ) . '</div>	
	<div class="grid-cell">' . __( 'Choice', 'paid-memberships-pro' ) . '</div>';
	// $output .= '<div>';
	$count = 0;
	foreach ( $pmpro_levels as $level ) {
		if ( isset( $current_user->membership_level->ID ) ) {
			$current_level = ( $current_user->membership_level->ID == $level->id );
		} else {
			$current_level = false;
		}

		$output .= '<div class="grid-cell ';

		if ( $count++ % 2 == 0 ) {
			$output .= 'odd';
		}

		if ( $current_level == $level ) {
			$output .= 'active';
		}
		$output .= '">';
		if ( $current_level ) {
			$levelname = '<strong>' . $level->name . '</strong>';
		} else {
			$levelname = $level->name;
		}
		$output .= ' ' . $levelname . '</div>';
		$output .= '<div class="grid-cell ">';

		if ( pmpro_isLevelFree( $level ) ) {
			$cost_text = '<strong>' . __( 'Free', 'paid-memberships-pro' ) . '</strong>';
		} else {
			$cost_text = pmpro_getLevelCost( $level, true, true );
		}

		$expiration_text = pmpro_getLevelExpiration( $level );

		if ( ! empty( $cost_text ) && ! empty( $expiration_text ) ) {
			$output .= $cost_text . '<br />' . $expiration_text;
		} elseif ( ! empty( $cost_text ) ) {
			$output .= $cost_text;
		} elseif ( ! empty( $expiration_text ) ) {
			$output .= $expiration_text;
		}

		$output .= '</div>';

		$output .= '<div class="grid-cell pmp-button">';
		if ( empty( $current_user->membership_level->ID ) ) {
			$output .= '<a class="pmpro_btn pmpro_btn-select" href="' . pmpro_url( 'checkout', '?level=' . $level->id, 'https' ) . '">' . __( 'Select', 'paid-memberships-pro' ) . '</a>';
		} elseif ( ! $current_level ) {
			$output .= '<a class="pmpro_btn pmpro_btn-select" href="' . pmpro_url( 'checkout', '?level=' . $level->id, 'https' ) . '">' . __( 'Select', 'paid-memberships-pro' ) . '</a>';
		} elseif ( $current_level ) {
			// if it's a one-time-payment level, offer a link to renew
			if ( pmpro_isLevelExpiringSoon( $current_user->membership_level ) && $current_user->membership_level->allow_signups ) {
				$output .= '<a class="pmpro_btn pmpro_btn-select" href="' . pmpro_url( 'checkout', '?level=' . $level->id, 'https' ) . '">' . __( 'Renew', 'paid-memberships-pro' ) . '</a>';
			} else {
				$output .= '<a class="pmpro_btn disabled" href="' . pmpro_url( 'account' ) . '">' . __( 'Your&nbsp;Level', 'paid-memberships-pro' ) . '</a>';

			}
		}
		$output .= '</div>';
	}
	$output .= '</div>

</div>';

			$output .= '</div>
		</div>
	</div>';
	return $output;
}