feat: footer Improvements (#4360)

Codeinwp · Jan 28, 2025 · 7b64269 · 7b64269
1 parent f500e3c
commit 7b64269
Show file tree

Hide file tree

Showing 7 changed files with 356 additions and 126 deletions.
diff --git a/assets/apps/customizer-controls/src/builder/scss/_customizer-adjustments.scss b/assets/apps/customizer-controls/src/builder/scss/_customizer-adjustments.scss
@@ -1,13 +1,17 @@
 ul[id^="sub-accordion-panel-hfg_"] {
   .control-subsection {
-	display: none !important;
+    display: none !important;
+  }
+
+  .control-subsection:has(.nv-upsell-feat-container) {
+    display: block !important;
   }
 
   li[id*="accordion-section-hfg_"] {
-	display: block !important;
+	  display: block !important;
   }
 
   #accordion-section-neve_header_presets {
-	margin-top: 20px;
+	  margin-top: 20px;
   }
 }
diff --git a/assets/customizer/css/_generic.css b/assets/customizer/css/_generic.css
@@ -16,4 +16,54 @@
 }
 #customize-theme-controls .accordion-section-title button.accordion-trigger {
     max-height: fit-content;
+}
+
+.nv-upsell-feat-container {
+	font-family: sans-serif;
+	display: flex;
+	flex-direction: column;
+}
+
+.nv-upsell-feat-container a:is(.button-primary, .button-link) {
+	text-align: center;
+	font-size: 16px;
+}
+
+.nv-upsell-feat-container a.button-link {
+	text-decoration: none;
+	margin-top: 10px;
+}
+
+.nv-upsell-feat-heading {
+	color: #2e4a62;
+	font-size: 1.25rem;
+	margin-bottom: 8px;
+}
+
+.nv-upsell-feat-description {
+	font-size: 16px;
+	color: #455a69;
+	margin-top: 2px;
+	margin-bottom: 16px;
+}
+
+.nv-upsell-feat-list {
+	list-style: none;
+	margin: 0;
+	padding: 10px;
+	background-color: white;
+	border-radius: 10px;
+	margin-bottom: 16px;
+}
+
+.nv-upsell-feat-item {
+	display: flex;
+	font-size: 16px;
+	align-items: flex-end;
+	margin: 8px 0;
+}
+
+.nv-upsell-feat-lock-icon {
+	margin-right: 8px;
+	color: #2271b1;
 }
diff --git a/header-footer-grid/Core/Builder/Footer.php b/header-footer-grid/Core/Builder/Footer.php
@@ -242,4 +242,30 @@ protected function get_rows() {
 			),
 		];
 	}
+
+	/**
+	 * Get upsell components.
+	 *
+	 * @return array
+	 */
+	protected function get_upsell_components() {
+		if ( $this->has_valid_addons() ) {
+			return [];
+		}
+
+		return [
+			[
+				'icon' => 'email',
+				'name' => __( 'Contact', 'neve' ),
+			],
+			[
+				'icon' => 'images-alt',
+				'name' => __( 'Payment icons', 'neve' ),
+			],
+			[
+				'icon' => 'share',
+				'name' => __( 'Social Icons', 'neve' ),
+			],
+		];
+	}
 }
diff --git a/inc/customizer/controls/simple_upsell.php b/inc/customizer/controls/simple_upsell.php
@@ -7,13 +7,16 @@
 
 namespace Neve\Customizer\Controls;
 
+use Neve\Customizer\Traits\Features_Upsell;
+
 /**
  * Simple Upsell Control.
  *
  * @since  2.8.3
  * @access public
  */
 class Simple_Upsell extends \WP_Customize_Control {
+	use Features_Upsell;
 
 	/**
 	 * The type of customize control being rendered.
@@ -69,6 +72,12 @@ class Simple_Upsell extends \WP_Customize_Control {
 	 * @return void
 	 */
 	public function render_content() {
+
+		if ( ! empty( $this->features_list ) ) {
+			$this->render_features_body();
+			return;
+		}
+
 		$base_class   = 'nv-simple-upsell';
 		$class        = ( ! empty( $this->class ) ) ? $base_class . ' ' . $this->class : $base_class;
 		$button_class = ( ! empty( $this->use_primary ) ) ? 'button-primary' : 'button-secondary';

diff --git a/inc/customizer/controls/simple_upsell_section.php b/inc/customizer/controls/simple_upsell_section.php
@@ -7,13 +7,17 @@
 
 namespace Neve\Customizer\Controls;
 
+use Neve\Customizer\Traits\Features_Upsell;
+
 /**
  * Customizer section.
  *
  * @since  2.8.3
  * @see        WP_Customize_Section
  */
 class Simple_Upsell_Section extends \WP_Customize_Section {
+	use Features_Upsell;
+
 	/**
 	 * Type of this section.
 	 *
@@ -55,7 +59,7 @@ class Simple_Upsell_Section extends \WP_Customize_Section {
 	 * @return array The array to be exported to the client as JSON.
 	 */
 	public function json() {
-		$json                  = parent::json();
+		$json                  = array_merge( parent::json(), $this->to_json_features() );
 		$json['button_text']   = $this->button_text;
 		$json['link']          = $this->link;
 		$json['text']          = $this->text;
@@ -70,17 +74,21 @@ public function json() {
 	protected function render_template() {
 		?>
 		<li id="accordion-section-{{ data.id }}" class="control-section-{{ data.type }}">
-			<div class="nv-simple-upsell">
-				<# if( data.text ) { #>
-					<p>{{data.text}}</p>
-				<# } #>
-				<# if( data.link && data.button_text ) { #>
-					<a rel="external noreferrer noopener" target="_blank" href="{{data.link}}" class='button button-secondary'>
-						{{data.button_text}}
-						<span class="components-visually-hidden">{{data.screen_reader}}</span>
-					</a>
-				<# } #>
-			</div>
+			<# if ( data.features_list ) { #>
+				<?php $this->render_features_body_template(); ?>
+			<# } else { #>
+				<div class="nv-simple-upsell">
+					<# if( data.text ) { #>
+						<p>{{data.text}}</p>
+					<# } #>
+					<# if( data.link && data.button_text ) { #>
+						<a rel="external noreferrer noopener" target="_blank" href="{{data.link}}" class='button button-secondary'>
+							{{data.button_text}}
+							<span class="components-visually-hidden">{{data.screen_reader}}</span>
+						</a>
+					<# } #>
+				</div>
+			<# } #>
 		</li>
 		<?php
 	}