enhance: implement-cart-cta-button-for-free-shipping-bar

getdokan · Feb 12, 2024 · fdc8180 · fdc8180
1 parent e1bc5b1
commit fdc8180
Show file tree

Hide file tree

Showing 8 changed files with 136 additions and 13 deletions.
diff --git a/Includes/Modules/ProgressiveDiscountBanner/Includes/EnqueueScript.php b/Includes/Modules/ProgressiveDiscountBanner/Includes/EnqueueScript.php
@@ -81,6 +81,11 @@ public function admin_enqueue_scripts( $hook ) {
 				$settings_file['version'],
 				false
 			);
+
+            // Pass the Cart URL to the JavaScript file
+            wp_localize_script('sgsb-pd-banner-settings', 'sgsbFsbData', array(
+                'cartUrl' => wc_get_cart_url(), // WooCommerce Cart URL
+            ));
 		}
 	}
 

diff --git a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DesignTab.js b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DesignTab.js
@@ -77,6 +77,24 @@ function DesignTab(props) {
                     fieldValue={formData.close_icon_color}
                     title={__('Close Button Color', 'storegrowth-sales-booster')}
                 />
+                { Boolean( formData.btn_style ) && (
+                    <Fragment>
+                        <ColourPicker
+                            colSpan={12}
+                            name={'btn_color'}
+                            fieldValue={formData.btn_color}
+                            changeHandler={onFieldChange}
+                            title={__('CTA Background', 'storegrowth-sales-booster')}
+                        />
+                        <ColourPicker
+                            colSpan={12}
+                            name={'btn_text_color'}
+                            changeHandler={onFieldChange}
+                            fieldValue={formData.btn_text_color}
+                            title={__( 'CTA Text Color', 'storegrowth-sales-booster')}
+                        />
+                    </Fragment>
+                ) }
             </SettingsSection>
 
             <Templates formData={ formData } setFormData={ setFormData } />

diff --git a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DiscountBanner.js b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/DiscountBanner.js
@@ -7,6 +7,8 @@ import TextAreaBox from "../../../../../../assets/src/components/settings/Panels
 import SettingsSection from "../../../../../../assets/src/components/settings/Panels/PanelSettings/SettingsSection";
 import BarIcon from "./BarIcon";
 import SettingInstruction from "./SettingInstruction";
+import Switcher from "sales-booster/src/components/settings/Panels/PanelSettings/Fields/Switcher";
+import TextInput from "sales-booster/src/components/settings/Panels/PanelSettings/Fields/TextInput";
 
 function DiscountBanner(props) {
     const { formData, setFormData, setShowUndo, onFieldChange } = props;
@@ -181,6 +183,49 @@ function DiscountBanner(props) {
                         "storegrowth-sales-booster"
                     )}
                 />
+
+                <Switcher
+                    name={ 'btn_style' }
+                    changeHandler={ onFieldChange }
+                    isEnable={ Boolean( formData.btn_style ) }
+                    title={ __( 'Display CTA Button', 'storegrowth-sales-booster' ) }
+                    tooltip={ __( 'Will be able to achieve the control call to action button.', 'storegrowth-sales-booster' ) }
+                />
+
+                { Boolean( formData.btn_style ) && (
+                    <Fragment>
+                        <TextInput
+                            name={ 'btn_text' }
+                            placeHolderText={ __(
+                                'Write CTA button text',
+                                'storegrowth-sales-booster'
+                            ) }
+                            fieldValue={ formData.btn_text }
+                            className={ `settings-field input-field` }
+                            changeHandler={ onFieldChange }
+                            title={ __( 'CTA Name', 'storegrowth-sales-booster' ) }
+                            tooltip={ __(
+                                'The name of call to action button',
+                                'storegrowth-sales-booster'
+                            ) }
+                        />
+                        <TextInput
+                            name={ 'btn_target' }
+                            placeHolderText={ __(
+                                'Write CTA button target url',
+                                'storegrowth-sales-booster'
+                            ) }
+                            fieldValue={ formData.btn_target }
+                            className={ `settings-field input-field` }
+                            changeHandler={ onFieldChange }
+                            title={ __( 'CTA Target URI', 'storegrowth-sales-booster' ) }
+                            tooltip={ __(
+                                'The target/redirect url for call to action button',
+                                'storegrowth-sales-booster'
+                            ) }
+                        />
+                    </Fragment>
+                ) }
             </SettingsSection>
             <SettingsSection>
                 { applyFilters(

diff --git a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/FreeShippingBarLayout.js b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/FreeShippingBarLayout.js
@@ -24,17 +24,22 @@ function FreeShippingBarLayout({ outlet: Outlet, navigate, useSearchParams , mod
   let [searchParams, setSearchParams] = useSearchParams("general");
   const tabName = searchParams.get("tab_name") || "general";
   const initialShipData = {
+    btn_text                       : 'Cart',
     bar_type                       : "normal",
     user_type                      : "both",
     font_size                      : 20,
+    btn_style                      : true,
+    btn_color                      : "#ffffff",
     text_color                     : "#ffffff",
     icon_color                     : "#ffffff",
+    btn_target                     : sgsbFsbData?.cartUrl,
     font_family                    : "poppins",
     banner_delay                   : 7,
     bar_position                   : "top",
     bar_template                   : 'shipping_bar_one',
     discount_type                  : "free-shipping",
     banner_height                  : 60,
+    btn_text_color                 : "#073b4c",
     banner_trigger                 : "after-few-seconds",
     close_icon_color               : "#ffffff",
     background_color               : "#0875FF",

diff --git a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/Preview.js b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/Preview.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import BarIcon from "./BarIcon";
 import {__} from "@wordpress/i18n";
+import {extractedTitle} from "sales-booster/src/utils/helper";
 
 const Preview = ( { isProActive, formData, fontFamily } ) => {
     const bannerStyle = {
@@ -59,8 +60,24 @@ const Preview = ( { isProActive, formData, fontFamily } ) => {
                         fontSize: formData.font_size,
                     }}
                 >
-                    {dynamicText}
+                    { Boolean( formData.btn_style ) ? extractedTitle( dynamicText, 19 ) : dynamicText }
                 </span>
+                { Boolean( formData.btn_style ) && (
+                    <span
+                        className='fs-bar-action-button'
+                        style={ {
+                            color           : formData?.btn_text_color,
+                            padding         : '5px 15px',
+                            fontSize        : 14,
+                            fontWeight      : 600,
+                            fontFamily      : 'Poppins',
+                            borderRadius    : '5px',
+                            backgroundColor : formData?.btn_color,
+                        } }
+                    >
+                        { extractedTitle( formData?.btn_text, 15 ) }
+                    </span>
+                ) }
                 <div
                     className='sgsb-pd-banner-bar-remove'
                     style={{

diff --git a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/Templates.js b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/Templates.js
@@ -19,12 +19,17 @@ const Templates = ( { formData, setFormData } ) => {
 
     let templateStyles = {
         shipping_bar_one: {
+            btn_text                       : __( 'Cart', 'storegrowth-sales-booster' ),
             font_size                      : 20,
+            btn_style                      : true,
+            btn_color                      : "#ffffff",
             text_color                     : "#ffffff",
             icon_color                     : "#ffffff",
+            btn_target                     : sgsbFsbData?.cartUrl,
             font_family                    : "poppins",
             bar_template                   : 'shipping_bar_one',
             banner_height                  : 60,
+            btn_text_color                 : "#073b4c",
             close_icon_color               : "#ffffff",
             background_color               : "#0875FF",
             cart_minimum_amount            : 10,

diff --git a/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/Templates/ShippingBarOne.js b/Includes/Modules/ProgressiveDiscountBanner/assets/src/components/Templates/ShippingBarOne.js
diff --git a/Includes/Modules/ProgressiveDiscountBanner/templates/bar.php b/Includes/Modules/ProgressiveDiscountBanner/templates/bar.php
@@ -7,9 +7,14 @@
 
 use STOREGROWTH\SPSB\Modules\ProgressiveDiscountBanner\Includes\Helper;
 
-$settings    = Helper::sgsb_pd_banner_get_settings();
-$banner_text = Helper::sgsb_pd_banner_get_banner_text( $settings );
-$banner_icon = Helper::sgsb_pd_banner_get_banner_icon( $settings );
+$settings          = Helper::sgsb_pd_banner_get_settings();
+$banner_text       = Helper::sgsb_pd_banner_get_banner_text( $settings );
+$banner_icon       = Helper::sgsb_pd_banner_get_banner_icon( $settings );
+$button_style      = sgsb_find_option_setting( $settings, 'btn_style', true );
+$button_bg         = sgsb_find_option_setting( $settings, 'btn_color', '#fff' );
+$button_text       = sgsb_find_option_setting( $settings, 'btn_text', __( 'Cart', 'storegrowth-sales-booster' ) );
+$redirect_url      = sgsb_find_option_setting( $settings, 'btn_target', wc_get_cart_url() );
+$button_text_color = sgsb_find_option_setting( $settings, 'btn_text_color', '#073b4c' );
 ?>
 <div class='sgsb-pd-banner-bar-wrapper'>
 	<div class='sgsb-pd-banner-bar'>
@@ -59,16 +64,24 @@
 				</svg>
 			<?php endif; ?>
 		</div>
-		<span class='sgsb-pd-banner-text'>
+        <div class="sgsb-fn-bar-data-content">
+            <span class='sgsb-pd-banner-text'>
 			<?php
-			/**
-			 * Banner text filter.
-			 *
-			 * @since 1.0.0
-			 */
-			echo wp_kses_post( apply_filters( 'sales_boster_pd_banner_text', $banner_text ) );
-			?>
+            /**
+             * Banner text filter.
+             *
+             * @since 1.0.0
+             */
+            echo wp_kses_post( apply_filters( 'sales_boster_pd_banner_text', $banner_text ) );
+            ?>
 		</span>
+            <?php if ( $button_style ) : ?>
+                <a href="<?php echo esc_url( $redirect_url ); ?>" target="_blank" class="fn-bar-action-button"
+                   style="background: <?php echo esc_attr( $button_bg ); ?>; color: <?php echo esc_attr( $button_text_color ); ?>">
+                    <?php echo wp_kses_post( $button_text ); ?>
+                </a>
+            <?php endif; ?>
+        </div>
 		<div class='sgsb-pd-banner-bar-remove'>
 			<svg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'>
 				<g clip-path='url(#clip0_205_1006)'>