Skip to content

Customize upsell #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
asheshmagar wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Customize upsell #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f7db7f7
Tweak - enhance customize upsell section
asheshmagar Jun 3, 2020
8f20ac3
Style - Upsell section
asheshmagar Jun 3, 2020
fa71a6a
Tweak - update upsell features
asheshmagar Jun 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 100 additions & 0 deletions inc/customize-controls/assets/css/customizer-upsell.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
li#accordion-section-radiate_upsell_section h3.accordion-section-title {
background-color: #6E3EA0 !important;
border-left-color: #42235e;
color: #fff !important;
}

#accordion-section-radiate_upsell_section h3 a:after {
color: #fff;
}

li#accordion-section-radiate_upsell_section h3.accordion-section-title a {
color: #fff;
}

li#accordion-section-radiate_upsell_section h3.accordion-section-title:after {
color: #fff !important;
}

li.customize-control-radiate-upsell-control .radiate-upsell-wrapper {
background-color: #fff;
margin-left: -12px;
margin-right: -12px;
color: #464646;
}

li.customize-control-radiate-upsell-control .upsell-features,
li.customize-control-radiate-upsell-control .launch-offer {
padding: 25px;
}


li.customize-control-radiate-upsell-control .upsell-heading {
font-size: 16px !important;
text-transform: uppercase;
margin: 0 0 15px 0;
line-height: 1.5;
color: #464646;
font-weight: bold;
}

li.customize-control-radiate-upsell-control .upsell-features {
font-size: 14px;
}

li.customize-control-radiate-upsell-control .upsell-feature .dashicons {
color: #6E3EA0;
margin-right: 8px;
width: 14px;
}

li.customize-control-radiate-upsell-control .upsell-feature {
padding: 0 0 8px 0;
margin: 0 0 8px 0;
}

li.customize-control-radiate-upsell-control .upsell-feature:last-child {
margin: 0;
padding: 0;
}

li.customize-control-radiate-upsell-control .launch-offer {
color: #0C5460;
background-color: #D1ECF1;
padding: 15px 25px;
font-size: 14px;
line-height: 1.8;
}

li.customize-control-radiate-upsell-control .launch-offer strong {
text-transform: uppercase;
font-size: 14px;
}

li.customize-control-radiate-upsell-control .coupon-code {
display: inline-block;
}

li.customize-control-radiate-upsell-control .upsell-cta {
background-color: #6E3EA0;
color: #fff;
padding: 14px;
margin: 30px 0;
border-radius: 4px;
text-decoration: none;
display: block;
font-size: 16px;
transition: 0.3s all;
text-transform: uppercase;
text-align: center;
}

li.customize-control-radiate-upsell-control .upsell-cta:hover {
background-color: #6E3EA0;
box-shadow: 0 2px 10px 5px #46464633;
}

li#accordion-section-radiate_upsell_section h3.accordion-section-title:hover {
background-color: rgba(110, 62, 160, 0.5) !important;
border-left-color: rgba(66, 35, 94, 0.5) !important;
}
81 changes: 50 additions & 31 deletions inc/customize-controls/class-radiate-upsell-section.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,57 @@
<?php
/**
* Class to include upsell link campaign for theme.
*
* Class RADIATE_Upsell_Section
*
* @since 1.3.1
*/

class RADIATE_Upsell_Section extends WP_Customize_Section {
public $type = 'radiate-upsell-section';
public $url = '';
public $id = '';

/**
* Gather the parameters passed to client JavaScript via JSON.
*
* @return array The array to be exported to the client as JSON.
*/
public function json() {
$json = parent::json();
$json['url'] = esc_url( $this->url );
$json['id'] = $this->id;

return $json;

class Radiate_Upsell_Custom_Control extends WP_Customize_Control {

public $type = "radiate-upsell-control";

public function enqueue() {
wp_enqueue_style( 'radiate-customizer', get_template_directory_uri() . '/inc/customize-controls/assets/css/customizer-upsell.css', array(), RADIATE_THEME_VERSION );
}

/**
* An Underscore (JS) template for rendering this section.
*/
protected function render_template() {
public function render_content() {
?>
<li id="accordion-section-{{ data.id }}" class="radiate-upsell-accordion-section control-section-{{ data.type }} cannot-expand accordion-section">
<h3 class="accordion-section-title"><a href="{{{ data.url }}}" target="_blank">{{ data.title }}</a></h3>
</li>
<div class="radiate-upsell-wrapper">
<ul class="upsell-features">
<h3 class="upsell-heading"><?php esc_html_e( 'More Awesome Features', 'radiate' ); ?></h3>
<li class="upsell-feature"><span
class="dashicons dashicons-yes"></span><?php esc_html_e( 'Advanced Header Options', 'radiate' ); ?>
</li>
<li class="upsell-feature"><span
class="dashicons dashicons-yes"></span><?php esc_html_e( 'Advanced Footer Options', 'radiate' ); ?>
</li>
<li class="upsell-feature"><span
class="dashicons dashicons-yes"></span><?php esc_html_e( 'More Blog Layout', 'radiate' ); ?>
</li>
<li class="upsell-feature"><span
class="dashicons dashicons-yes"></span><?php esc_html_e( 'Advanced Typography Options', 'radiate' ); ?>
</li>
<li class="upsell-feature"><span
class="dashicons dashicons-yes"></span><?php esc_html_e( '100+ Customizer Options', 'radiate' ); ?>
</li>
<li class="upsell-feature"><span
class="dashicons dashicons-yes"></span><?php esc_html_e( 'More WooCommerce Features', 'radiate' ); ?>
</li>
<li class="upsell-feature"><span
class="dashicons dashicons-yes"></span><?php esc_html_e( 'Page Settings', 'radiate' ); ?>
</li>
</ul>

<div class="launch-offer">
<?php
printf(
/* translators: %1$s discount coupon code., %2$s discount percentage */
esc_html__( 'Use the coupon code %1$s to get %2$s discount (limited time offer). Enjoy!', 'radiate' ),
'<span class="coupon-code">save10</span>',
'10%'
);
?>
</div>
</div> <!-- /.radiate-upsell-wrapper -->

<a class="upsell-cta" target="_blank"
href="<?php echo esc_url( 'https://themegrill.com/radiate-pricing/?utm_source=radiate-customizer&utm_medium=view-pricing-link&utm_campaign=upgrade' ); ?>"><?php esc_html_e( 'View Pricing', 'radiate' ); ?></a>
<?php
}

}

30 changes: 17 additions & 13 deletions inc/customizer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,20 +39,24 @@ function radiate_register_theme_customizer( $wp_customize ) {
// remove control
$wp_customize->remove_control( 'blogdescription' );

// Register `RADIATE_Upsell_Section` type section.
$wp_customize->register_section_type( 'RADIATE_Upsell_Section' );
/**
* Upsell.
*/
$wp_customize->add_section( 'radiate_upsell_section', array(
'priority' => 1,
'title' => __( 'View Pro Version', 'radiate' ),
) );

// Add `RADIATE_Upsell_Section` to display pro link.
$wp_customize->add_section(
new RADIATE_Upsell_Section( $wp_customize, 'radiate_upsell_section',
array(
'title' => esc_html__( 'View PRO version', 'radiate' ),
'url' => 'https://themegrill.com/themes/radiate/?utm_source=radiate-customizer&utm_medium=view-pro-link&utm_campaign=view-pro#free-vs-pro',
'capability' => 'edit_theme_options',
'priority' => 1,
)
)
);
$wp_customize->add_setting( 'radiate_upsell', array(
'default' => '',
'capability' => 'edit_theme_options',
'sanitize_callback' => 'radiate_false_sanitize',
) );

$wp_customize->add_control( new Radiate_Upsell_Custom_Control( $wp_customize, 'radiate_upsell', array(
'section' => 'radiate_upsell_section',
'setting' => 'radiate_upsell',
) ) );

// rename existing section
$wp_customize->add_section( 'title_tagline', array(
Expand Down