| @@ -1,330 +1,338 @@ | ||
| 1 | -<?php | |
| 2 | - | |
| 3 | -/** | |
| 4 | - * Size Chart | |
| 5 | - * | |
| 6 | - * @package Merchant | |
| 7 | - */ | |
| 8 | - | |
| 9 | -if ( ! defined( 'ABSPATH' ) ) { | |
| 10 | - exit; // Exit if accessed directly | |
| 11 | -} | |
| 12 | - | |
| 13 | -/** | |
| 14 | - * Size Chart class. | |
| 15 | - * | |
| 16 | - */ | |
| 17 | -class Merchant_Size_Chart extends Merchant_Add_Module { | |
| 18 | - | |
| 19 | - /** | |
| 20 | - * Module ID. | |
| 21 | - * | |
| 22 | - */ | |
| 23 | - const MODULE_ID = 'size-chart'; | |
| 24 | - | |
| 25 | - /** | |
| 26 | - * Is module preview. | |
| 27 | - * | |
| 28 | - */ | |
| 29 | - public static $is_module_preview = false; | |
| 30 | - | |
| 31 | - /** | |
| 32 | - * Constructor. | |
| 33 | - * | |
| 34 | - */ | |
| 35 | - public function __construct() { | |
| 36 | - // Module id. | |
| 37 | - $this->module_id = self::MODULE_ID; | |
| 38 | - | |
| 39 | - // WooCommerce only. | |
| 40 | - $this->wc_only = true; | |
| 41 | - | |
| 42 | - // Parent construct. | |
| 43 | - parent::__construct(); | |
| 44 | - | |
| 45 | - // Module section. | |
| 46 | - $this->module_section = 'improve-experience'; | |
| 47 | - | |
| 48 | - // Module default settings. | |
| 49 | - $this->module_default_settings = array( | |
| 50 | - 'global_size_chart' => '', | |
| 51 | - 'text' => __( 'Size Chart', 'merchant' ), | |
| 52 | - 'icon' => 'icon-size-chart' | |
| 53 | - ); | |
| 54 | - | |
| 55 | - // Mount preview url. | |
| 56 | - $preview_url = site_url( '/' ); | |
| 57 | - | |
| 58 | - if ( function_exists( 'wc_get_products' ) ) { | |
| 59 | - $products = wc_get_products( array( 'limit' => 1 ) ); | |
| 60 | - | |
| 61 | - if ( ! empty( $products ) && ! empty( $products[0] ) ) { | |
| 62 | - $preview_url = get_permalink( $products[0]->get_id() ); | |
| 63 | - } | |
| 64 | - } | |
| 65 | - | |
| 66 | - // Module data. | |
| 67 | - $this->module_data = Merchant_Admin_Modules::$modules_data[ self::MODULE_ID ]; | |
| 68 | - $this->module_data['preview_url'] = $preview_url; | |
| 69 | - | |
| 70 | - // Module options path. | |
| 71 | - $this->module_options_path = MERCHANT_DIR . 'inc/modules/' . self::MODULE_ID . '/admin/options.php'; | |
| 72 | - | |
| 73 | - // Is module preview page. | |
| 74 | - if ( is_admin() && parent::is_module_settings_page() ) { | |
| 75 | - self::$is_module_preview = true; | |
| 76 | - | |
| 77 | - // Enqueue admin styles. | |
| 78 | - add_action( 'admin_enqueue_scripts', array( $this, 'admin_enqueue_css' ) ); | |
| 79 | - | |
| 80 | - // Enqueue admin scripts. | |
| 81 | - add_action( 'admin_enqueue_scripts', array( $this, 'admin_enqueue_scripts' ) ); | |
| 82 | - | |
| 83 | - // Render module essencial instructions before the module page body content. | |
| 84 | - add_action( 'merchant_admin_after_module_page_page_header', array( $this, 'admin_module_essencial_instructions' ) ); | |
| 85 | - | |
| 86 | - // Admin preview box. | |
| 87 | - add_filter( 'merchant_module_preview', array( $this, 'render_admin_preview' ), 10, 2 ); | |
| 88 | - | |
| 89 | - // Custom CSS. | |
| 90 | - // The custom CSS should be added here as well due to ensure preview box works properly. | |
| 91 | - add_filter( 'merchant_custom_css', array( $this, 'admin_custom_css' ) ); | |
| 92 | - } | |
| 93 | - | |
| 94 | - if ( Merchant_Modules::is_module_active( self::MODULE_ID ) && is_admin() ) { | |
| 95 | - // Init translations. | |
| 96 | - $this->init_translations(); | |
| 97 | - } | |
| 98 | - } | |
| 99 | - | |
| 100 | - /** | |
| 101 | - * Init translations. | |
| 102 | - * | |
| 103 | - * @return void | |
| 104 | - */ | |
| 105 | - public function init_translations() { | |
| 106 | - $settings = $this->get_module_settings(); | |
| 107 | - if ( ! empty( $settings['text'] ) ) { | |
| 108 | - Merchant_Translator::register_string( $settings['text'], esc_html__( 'Size chart: label text', 'merchant' ) ); | |
| 109 | - } | |
| 110 | - } | |
| 111 | - | |
| 112 | - /** | |
| 113 | - * Admin enqueue CSS. | |
| 114 | - * | |
| 115 | - * @return void | |
| 116 | - */ | |
| 117 | - public function admin_enqueue_css() { | |
| 118 | - if ( parent::is_module_settings_page() ) { | |
| 119 | - wp_enqueue_style( 'merchant-' . self::MODULE_ID, MERCHANT_URI . 'assets/css/modules/' . self::MODULE_ID . '/size-chart.min.css', [], MERCHANT_VERSION ); | |
| 120 | - wp_enqueue_style( 'merchant-admin-' . self::MODULE_ID, MERCHANT_URI . 'assets/css/modules/' . self::MODULE_ID . '/admin/preview.min.css', array(), MERCHANT_VERSION ); | |
| 121 | - } | |
| 122 | - } | |
| 123 | - | |
| 124 | - /** | |
| 125 | - * Admin Enqueue scripts. | |
| 126 | - * | |
| 127 | - * @return void | |
| 128 | - */ | |
| 129 | - public function admin_enqueue_scripts() { | |
| 130 | - // Register and enqueue the main module script. | |
| 131 | - wp_enqueue_script( 'merchant-' . self::MODULE_ID, MERCHANT_URI . 'assets/js/modules/' . self::MODULE_ID . '/size-chart.min.js', array(), MERCHANT_VERSION, true ); | |
| 132 | - } | |
| 133 | - | |
| 134 | - /** | |
| 135 | - * Render module essencial instructions. | |
| 136 | - * | |
| 137 | - * @return void | |
| 138 | - */ | |
| 139 | - public function admin_module_essencial_instructions() { ?> | |
| 140 | - <div class="merchant-module-page-settings"> | |
| 141 | - <div class="merchant-module-page-setting-box merchant-module-page-setting-box-style-2"> | |
| 142 | - <div class="merchant-module-page-setting-fields"> | |
| 143 | - <div class="merchant-module-page-setting-field merchant-module-page-setting-field-content"> | |
| 144 | - <div class="merchant-module-page-setting-field-inner"> | |
| 145 | - <div class="merchant-tag-pre-orders"> | |
| 146 | - <i class="dashicons dashicons-info"></i> | |
| 147 | - <p><?php echo esc_html__( 'You can have as many size charts you want and either specify in which product you want to add them or simply enable one globally to be displayed in all products. But if you want to display different size charts for each product, that\'s possible from admin product edit page.', | |
| 148 | - 'merchant' ); ?><?php echo sprintf( '<a href="%s" target="_blank">%s</a>', | |
| 149 | - esc_url( admin_url( 'edit.php?post_type=product' ) ), | |
| 150 | - esc_html__( 'View All Products', 'merchant' ) ); ?></p> | |
| 151 | - </div> | |
| 152 | - </div> | |
| 153 | - </div> | |
| 154 | - </div> | |
| 155 | - </div> | |
| 156 | - </div> | |
| 157 | - | |
| 158 | - <?php | |
| 159 | - } | |
| 160 | - | |
| 161 | - /** | |
| 162 | - * Render admin preview | |
| 163 | - * | |
| 164 | - * @param Merchant_Admin_Preview $preview | |
| 165 | - * @param string $module | |
| 166 | - * | |
| 167 | - * @return Merchant_Admin_Preview | |
| 168 | - */ | |
| 169 | - public function render_admin_preview( $preview, $module ) { | |
| 170 | - if ( self::MODULE_ID === $module ) { | |
| 171 | - ob_start(); | |
| 172 | - self::admin_preview_content(); | |
| 173 | - $content = ob_get_clean(); | |
| 174 | - | |
| 175 | - // HTML. | |
| 176 | - $preview->set_html( $content ); | |
| 177 | - | |
| 178 | - // Label Text. | |
| 179 | - $preview->set_text( 'text', '.merchant-product-size-chart-button span' ); | |
| 180 | - | |
| 181 | - // Icon. | |
| 182 | - $preview->set_svg_icon( 'icon', '.size-chart-icon' ); | |
| 183 | - } | |
| 184 | - | |
| 185 | - return $preview; | |
| 186 | - } | |
| 187 | - | |
| 188 | - /** | |
| 189 | - * Admin preview content. | |
| 190 | - * | |
| 191 | - * @return void | |
| 192 | - */ | |
| 193 | - public function admin_preview_content() { | |
| 194 | - $settings = $this->get_module_settings(); | |
| 195 | - | |
| 196 | - ?> | |
| 197 | - | |
| 198 | - <div class="mrc-preview-single-product-elements"> | |
| 199 | - <div class="mrc-preview-left-column"> | |
| 200 | - <div class="mrc-preview-product-image-wrapper"> | |
| 201 | - <div class="mrc-preview-product-image"></div> | |
| 202 | - <div class="mrc-preview-product-image-thumbs"> | |
| 203 | - <div class="mrc-preview-product-image-thumb"></div> | |
| 204 | - <div class="mrc-preview-product-image-thumb"></div> | |
| 205 | - <div class="mrc-preview-product-image-thumb"></div> | |
| 206 | - </div> | |
| 207 | - </div> | |
| 208 | - </div> | |
| 209 | - <div class="mrc-preview-right-column"> | |
| 210 | - <div class="mrc-preview-text-placeholder"></div> | |
| 211 | - <div class="mrc-preview-text-placeholder mrc-mw-70"></div> | |
| 212 | - <div class="mrc-preview-text-placeholder mrc-mw-30"></div> | |
| 213 | - <div class="merchant-product-size-chart"> | |
| 214 | - <div class="merchant-product-size-chart-button"> | |
| 215 | - <a href="#"> | |
| 216 | - <div class="size-chart-icon"> | |
| 217 | - <?php echo wp_kses( Merchant_SVG_Icons::get_svg_icon( $settings['icon'] ), merchant_kses_allowed_tags( [], false ) ); ?> | |
| 218 | - </div> | |
| 219 | - <span><?php echo esc_html( $settings['text'] ); ?></span> | |
| 220 | - </a> | |
| 221 | - </div> | |
| 222 | - <div class="merchant-product-size-chart-modal"> | |
| 223 | - <div class="merchant-product-size-chart-modal-inner"> | |
| 224 | - <div class="merchant-product-size-chart-modal-close"> | |
| 225 | - <?php echo wp_kses( Merchant_SVG_Icons::get_svg_icon( 'icon-close' ), merchant_kses_allowed_tags( [], false ) ); ?> | |
| 226 | - </div> | |
| 227 | - <div class="merchant-product-size-chart-modal-title"> | |
| 228 | - <?php echo esc_html__( 'Size Chart Modal Title', 'merchant' ); ?> | |
| 229 | - </div> | |
| 230 | - <div class="merchant-product-size-chart-modal-tables"> | |
| 231 | - <table class="merchant-product-size-chart-modal-table active"> | |
| 232 | - <thead> | |
| 233 | - <tr> | |
| 234 | - <th><?php echo esc_html__( 'US', 'merchant' ); ?></th> | |
| 235 | - <th><?php echo esc_html__( 'EU', 'merchant' ); ?></th> | |
| 236 | - <th><?php echo esc_html__( 'UK', 'merchant' ); ?></th> | |
| 237 | - </tr> | |
| 238 | - </thead> | |
| 239 | - <tbody> | |
| 240 | - <tr> | |
| 241 | - <td>3</td> | |
| 242 | - <td>35</td> | |
| 243 | - <td>5</td> | |
| 244 | - </tr> | |
| 245 | - <tr> | |
| 246 | - <td>4</td> | |
| 247 | - <td>36</td> | |
| 248 | - <td>6</td> | |
| 249 | - </tr> | |
| 250 | - <tr> | |
| 251 | - <td>5</td> | |
| 252 | - <td>37</td> | |
| 253 | - <td>7</td> | |
| 254 | - </tr> | |
| 255 | - <tr> | |
| 256 | - <td>6</td> | |
| 257 | - <td>38</td> | |
| 258 | - <td>8</td> | |
| 259 | - </tr> | |
| 260 | - <tr> | |
| 261 | - <td>7</td> | |
| 262 | - <td>39</td> | |
| 263 | - <td>9</td> | |
| 264 | - </tr> | |
| 265 | - </tbody> | |
| 266 | - </table> | |
| 267 | - </div> | |
| 268 | - <div class="merchant-product-size-chart-modal-content"> | |
| 269 | - <p>Lorem ipsum dolor sit a met, dont dolor sit a la quat. </p> | |
| 270 | - </div> | |
| 271 | - </div> | |
| 272 | - </div> | |
| 273 | - </div> | |
| 274 | - <div class="mrc-preview-addtocart-placeholder"></div> | |
| 275 | - </div> | |
| 276 | - </div> | |
| 277 | - | |
| 278 | - <?php | |
| 279 | - } | |
| 280 | - | |
| 281 | - /** | |
| 282 | - * Custom CSS. | |
| 283 | - * | |
| 284 | - * @return string | |
| 285 | - */ | |
| 286 | - public function get_module_custom_css() { | |
| 287 | - $css = ''; | |
| 288 | - | |
| 289 | - $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'icon-size', 24, '.merchant-product-size-chart', '--mrc-sc-icon-size', 'px' ); | |
| 290 | - $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'title-text-color', '#212121', '.merchant-product-size-chart', '--mrc-sc-title-text-color' ); | |
| 291 | - $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'title-text-color-hover', '#757575', '.merchant-product-size-chart', '--mrc-sc-title-text-color-hover' ); | |
| 292 | - $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'icon-color', '#212121', '.merchant-product-size-chart', '--mrc-sc-icon-color' ); | |
| 293 | - $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'icon-color-hover', '#757575', '.merchant-product-size-chart', '--mrc-sc-icon-color-hover' ); | |
| 294 | - | |
| 295 | - $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'popup-width', 750, '.merchant-product-size-chart', '--mrc-sc-popup-width', 'px' ); | |
| 296 | - $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'background-color', '#f2f2f2', '.merchant-product-size-chart', '--mrc-sc-background-color' ); | |
| 297 | - $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'close-icon-color', '#212121', '.merchant-product-size-chart', '--mrc-sc-close-icon-color' ); | |
| 298 | - $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'close-icon-color-hover', '#757575', '.merchant-product-size-chart', '--mrc-sc-close-icon-color-hover' ); | |
| 299 | - $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'title-color', '#212121', '.merchant-product-size-chart', '--mrc-sc-title-color' ); | |
| 300 | - $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'tabs-color', '#757575', '.merchant-product-size-chart', '--mrc-sc-tabs-color' ); | |
| 301 | - $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'tabs-color-active', '#212121', '.merchant-product-size-chart', '--mrc-sc-tabs-color-active' ); | |
| 302 | - $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'table-headings-background-color', '#212121', '.merchant-product-size-chart', '--mrc-sc-table-headings-background-color' ); | |
| 303 | - $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'table-headings-text-color', '#ffffff', '.merchant-product-size-chart', '--mrc-sc-table-headings-text-color' ); | |
| 304 | - $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'table-body-background-color', '#ffffff', '.merchant-product-size-chart', '--mrc-sc-table-body-background-color' ); | |
| 305 | - $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'table-body-text-color', '#212121', '.merchant-product-size-chart', '--mrc-sc-table-body-text-color' ); | |
| 306 | - $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'description-text-color', '#212121', '.merchant-product-size-chart', '--mrc-sc-description-text-color' ); | |
| 307 | - $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'description-link-color', '#212121', '.merchant-product-size-chart', '--mrc-sc-description-link-color' ); | |
| 308 | - $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'description-link-color-hover', '#757575', '.merchant-product-size-chart', '--mrc-sc-description-link-color-hover' ); | |
| 309 | - | |
| 310 | - return $css; | |
| 311 | - } | |
| 312 | - | |
| 313 | - /** | |
| 314 | - * Admin custom CSS. | |
| 315 | - * | |
| 316 | - * @param string $css The custom CSS. | |
| 317 | - * | |
| 318 | - * @return string $css The custom CSS. | |
| 319 | - */ | |
| 320 | - public function admin_custom_css( $css ) { | |
| 321 | - $css .= $this->get_module_custom_css(); | |
| 322 | - | |
| 323 | - return $css; | |
| 324 | - } | |
| 325 | -} | |
| 326 | - | |
| 327 | -// Initialize the module. | |
| 328 | -add_action( 'init', function () { | |
| 329 | - Merchant_Modules::create_module( new Merchant_Size_Chart() ); | |
| 330 | -} ); | |
| 1 | +<?php | |
| 2 | + | |
| 3 | +/** | |
| 4 | + * Size Chart | |
| 5 | + * | |
| 6 | + * @package Merchant | |
| 7 | + */ | |
| 8 | + | |
| 9 | +if ( ! defined( 'ABSPATH' ) ) { | |
| 10 | + exit; // Exit if accessed directly | |
| 11 | +} | |
| 12 | + | |
| 13 | +/** | |
| 14 | + * Size Chart class. | |
| 15 | + * | |
| 16 | + */ | |
| 17 | +class Merchant_Size_Chart extends Merchant_Add_Module { | |
| 18 | + | |
| 19 | + /** | |
| 20 | + * Module ID. | |
| 21 | + * | |
| 22 | + */ | |
| 23 | + const MODULE_ID = 'size-chart'; | |
| 24 | + | |
| 25 | + /** | |
| 26 | + * Is module preview. | |
| 27 | + * | |
| 28 | + */ | |
| 29 | + public static $is_module_preview = false; | |
| 30 | + | |
| 31 | + /** | |
| 32 | + * Initialize the module's option group definitions. | |
| 33 | + * | |
| 34 | + * @return array<int, array<string, mixed>> Array of option group arrays. | |
| 35 | + */ | |
| 36 | + protected function init_option_groups() { | |
| 37 | + return require MERCHANT_DIR . 'inc/modules/' . self::MODULE_ID . '/admin/options.php'; | |
| 38 | + } | |
| 39 | + | |
| 40 | + /** | |
| 41 | + * Constructor. | |
| 42 | + * | |
| 43 | + */ | |
| 44 | + public function __construct() { | |
| 45 | + // Module id. | |
| 46 | + $this->module_id = self::MODULE_ID; | |
| 47 | + | |
| 48 | + // WooCommerce only. | |
| 49 | + $this->wc_only = true; | |
| 50 | + | |
| 51 | + // Parent construct. | |
| 52 | + parent::__construct(); | |
| 53 | + | |
| 54 | + // Module section. | |
| 55 | + $this->module_section = 'improve-experience'; | |
| 56 | + | |
| 57 | + // Module default settings. | |
| 58 | + $this->module_default_settings = array( | |
| 59 | + 'global_size_chart' => '', | |
| 60 | + 'text' => __( 'Size Chart', 'merchant' ), | |
| 61 | + 'icon' => 'icon-size-chart', | |
| 62 | + ); | |
| 63 | + | |
| 64 | + // Module data. | |
| 65 | + $this->module_data = Merchant_Admin_Modules::$modules_data[ self::MODULE_ID ]; | |
| 66 | + | |
| 67 | + // AI prompt examples. | |
| 68 | + $this->ai_examples = array( | |
| 69 | + 'blurb' => esc_html__( 'See what AI can do for your size charts, from building a new one to assigning it to the right products and categories.', 'merchant' ), | |
| 70 | + 'prompts' => array( | |
| 71 | + esc_html__( 'Explore the abilities WPVibe gives you access to, then create a Footwear size chart with US, EU, and UK columns covering shoe sizes 5 through 12', 'merchant' ), | |
| 72 | + esc_html__( 'Check what abilities you have available through WPVibe, then add a Women\'s Sizing tab to the Footwear size chart and a short fit-guide description below it', 'merchant' ), | |
| 73 | + esc_html__( 'Look at your available WPVibe abilities, then assign the Footwear size chart to every product in the Shoes category', 'merchant' ), | |
| 74 | + esc_html__( 'See what abilities WPVibe exposes, then change the size chart button label from \'Size Chart\' to \'Find My Fit\'', 'merchant' ), | |
| 75 | + ), | |
| 76 | + ); | |
| 77 | + | |
| 78 | + // Module options path. | |
| 79 | + $this->module_options_path = MERCHANT_DIR . 'inc/modules/' . self::MODULE_ID . '/admin/options.php'; | |
| 80 | + | |
| 81 | + // Is module preview page. | |
| 82 | + if ( is_admin() && parent::is_module_settings_page() ) { | |
| 83 | + self::$is_module_preview = true; | |
| 84 | + | |
| 85 | + // Enqueue admin styles. | |
| 86 | + add_action( 'admin_enqueue_scripts', array( $this, 'admin_enqueue_css' ) ); | |
| 87 | + | |
| 88 | + // Enqueue admin scripts. | |
| 89 | + add_action( 'admin_enqueue_scripts', array( $this, 'admin_enqueue_scripts' ) ); | |
| 90 | + | |
| 91 | + // Render module essencial instructions before the module page body content. | |
| 92 | + add_action( 'merchant_admin_after_module_page_page_header', array( $this, 'admin_module_essencial_instructions' ) ); | |
| 93 | + | |
| 94 | + // Admin preview box. | |
| 95 | + add_filter( 'merchant_module_preview', array( $this, 'render_admin_preview' ), 10, 2 ); | |
| 96 | + | |
| 97 | + // Custom CSS. | |
| 98 | + // The custom CSS should be added here as well due to ensure preview box works properly. | |
| 99 | + add_filter( 'merchant_custom_css', array( $this, 'admin_custom_css' ) ); | |
| 100 | + } | |
| 101 | + | |
| 102 | + if ( Merchant_Modules::is_module_active( self::MODULE_ID ) && is_admin() ) { | |
| 103 | + // Init translations. | |
| 104 | + $this->init_translations(); | |
| 105 | + } | |
| 106 | + } | |
| 107 | + | |
| 108 | + /** | |
| 109 | + * Init translations. | |
| 110 | + * | |
| 111 | + * @return void | |
| 112 | + */ | |
| 113 | + public function init_translations() { | |
| 114 | + $settings = $this->get_module_settings(); | |
| 115 | + if ( ! empty( $settings['text'] ) ) { | |
| 116 | + Merchant_Translator::register_string( $settings['text'], esc_html__( 'Size chart: label text', 'merchant' ) ); | |
| 117 | + } | |
| 118 | + } | |
| 119 | + | |
| 120 | + /** | |
| 121 | + * Admin enqueue CSS. | |
| 122 | + * | |
| 123 | + * @return void | |
| 124 | + */ | |
| 125 | + public function admin_enqueue_css() { | |
| 126 | + if ( parent::is_module_settings_page() ) { | |
| 127 | + wp_enqueue_style( 'merchant-' . self::MODULE_ID, MERCHANT_URI . 'assets/css/modules/' . self::MODULE_ID . '/size-chart.min.css', array(), MERCHANT_VERSION ); | |
| 128 | + wp_enqueue_style( 'merchant-admin-' . self::MODULE_ID, MERCHANT_URI . 'assets/css/modules/' . self::MODULE_ID . '/admin/preview.min.css', array(), MERCHANT_VERSION ); | |
| 129 | + } | |
| 130 | + } | |
| 131 | + | |
| 132 | + /** | |
| 133 | + * Admin Enqueue scripts. | |
| 134 | + * | |
| 135 | + * @return void | |
| 136 | + */ | |
| 137 | + public function admin_enqueue_scripts() { | |
| 138 | + // Register and enqueue the main module script. | |
| 139 | + wp_enqueue_script( 'merchant-' . self::MODULE_ID, MERCHANT_URI . 'assets/js/modules/' . self::MODULE_ID . '/size-chart.min.js', array(), MERCHANT_VERSION, true ); | |
| 140 | + } | |
| 141 | + | |
| 142 | + /** | |
| 143 | + * Render module essencial instructions. | |
| 144 | + * | |
| 145 | + * @return void | |
| 146 | + */ | |
| 147 | + public function admin_module_essencial_instructions() { ?> | |
| 148 | + <div class="merchant-module-page-settings"> | |
| 149 | + <div class="merchant-module-page-setting-box merchant-module-page-setting-box-style-2"> | |
| 150 | + <div class="merchant-module-page-setting-fields"> | |
| 151 | + <div class="merchant-module-page-setting-field merchant-module-page-setting-field-content"> | |
| 152 | + <div class="merchant-module-page-setting-field-inner"> | |
| 153 | + <div class="merchant-tag-pre-orders"> | |
| 154 | + <i class="dashicons dashicons-info"></i> | |
| 155 | + <p><?php echo esc_html__( 'You can have as many size charts you want and either specify in which product you want to add them or simply enable one globally to be displayed in all products. But if you want to display different size charts for each product, that\'s possible from admin product edit page.', | |
| 156 | + 'merchant' ); ?><?php printf( '<a href="%s" target="_blank">%s</a>', | |
| 157 | + esc_url( admin_url( 'edit.php?post_type=product' ) ), | |
| 158 | + esc_html__( 'View All Products', 'merchant' ) ); ?></p> | |
| 159 | + </div> | |
| 160 | + </div> | |
| 161 | + </div> | |
| 162 | + </div> | |
| 163 | + </div> | |
| 164 | + </div> | |
| 165 | + | |
| 166 | + <?php | |
| 167 | + } | |
| 168 | + | |
| 169 | + /** | |
| 170 | + * Render admin preview | |
| 171 | + * | |
| 172 | + * @param Merchant_Admin_Preview $preview | |
| 173 | + * @param string $module | |
| 174 | + * | |
| 175 | + * @return Merchant_Admin_Preview | |
| 176 | + */ | |
| 177 | + public function render_admin_preview( $preview, $module ) { | |
| 178 | + if ( self::MODULE_ID === $module ) { | |
| 179 | + ob_start(); | |
| 180 | + self::admin_preview_content(); | |
| 181 | + $content = ob_get_clean(); | |
| 182 | + | |
| 183 | + // HTML. | |
| 184 | + $preview->set_html( $content ); | |
| 185 | + | |
| 186 | + // Label Text. | |
| 187 | + $preview->set_text( 'text', '.merchant-product-size-chart-button span' ); | |
| 188 | + | |
| 189 | + // Icon. | |
| 190 | + $preview->set_svg_icon( 'icon', '.size-chart-icon' ); | |
| 191 | + } | |
| 192 | + | |
| 193 | + return $preview; | |
| 194 | + } | |
| 195 | + | |
| 196 | + /** | |
| 197 | + * Admin preview content. | |
| 198 | + * | |
| 199 | + * @return void | |
| 200 | + */ | |
| 201 | + public function admin_preview_content() { | |
| 202 | + $settings = $this->get_module_settings(); | |
| 203 | + | |
| 204 | + ?> | |
| 205 | + | |
| 206 | + <div class="mrc-preview-single-product-elements"> | |
| 207 | + <div class="mrc-preview-left-column"> | |
| 208 | + <div class="mrc-preview-product-image-wrapper"> | |
| 209 | + <div class="mrc-preview-product-image"></div> | |
| 210 | + <div class="mrc-preview-product-image-thumbs"> | |
| 211 | + <div class="mrc-preview-product-image-thumb"></div> | |
| 212 | + <div class="mrc-preview-product-image-thumb"></div> | |
| 213 | + <div class="mrc-preview-product-image-thumb"></div> | |
| 214 | + </div> | |
| 215 | + </div> | |
| 216 | + </div> | |
| 217 | + <div class="mrc-preview-right-column"> | |
| 218 | + <div class="mrc-preview-text-placeholder"></div> | |
| 219 | + <div class="mrc-preview-text-placeholder mrc-mw-70"></div> | |
| 220 | + <div class="mrc-preview-text-placeholder mrc-mw-30"></div> | |
| 221 | + <div class="merchant-product-size-chart"> | |
| 222 | + <div class="merchant-product-size-chart-button"> | |
| 223 | + <a href="#"> | |
| 224 | + <div class="size-chart-icon"> | |
| 225 | + <?php echo wp_kses( Merchant_SVG_Icons::get_svg_icon( $settings['icon'] ), merchant_kses_allowed_tags( array(), false ) ); ?> | |
| 226 | + </div> | |
| 227 | + <span><?php echo esc_html( $settings['text'] ); ?></span> | |
| 228 | + </a> | |
| 229 | + </div> | |
| 230 | + <div class="merchant-product-size-chart-modal"> | |
| 231 | + <div class="merchant-product-size-chart-modal-inner"> | |
| 232 | + <div class="merchant-product-size-chart-modal-close"> | |
| 233 | + <?php echo wp_kses( Merchant_SVG_Icons::get_svg_icon( 'icon-close' ), merchant_kses_allowed_tags( array(), false ) ); ?> | |
| 234 | + </div> | |
| 235 | + <div class="merchant-product-size-chart-modal-title"> | |
| 236 | + <?php echo esc_html__( 'Size Chart Modal Title', 'merchant' ); ?> | |
| 237 | + </div> | |
| 238 | + <div class="merchant-product-size-chart-modal-tables"> | |
| 239 | + <table class="merchant-product-size-chart-modal-table active"> | |
| 240 | + <thead> | |
| 241 | + <tr> | |
| 242 | + <th><?php echo esc_html__( 'US', 'merchant' ); ?></th> | |
| 243 | + <th><?php echo esc_html__( 'EU', 'merchant' ); ?></th> | |
| 244 | + <th><?php echo esc_html__( 'UK', 'merchant' ); ?></th> | |
| 245 | + </tr> | |
| 246 | + </thead> | |
| 247 | + <tbody> | |
| 248 | + <tr> | |
| 249 | + <td>3</td> | |
| 250 | + <td>35</td> | |
| 251 | + <td>5</td> | |
| 252 | + </tr> | |
| 253 | + <tr> | |
| 254 | + <td>4</td> | |
| 255 | + <td>36</td> | |
| 256 | + <td>6</td> | |
| 257 | + </tr> | |
| 258 | + <tr> | |
| 259 | + <td>5</td> | |
| 260 | + <td>37</td> | |
| 261 | + <td>7</td> | |
| 262 | + </tr> | |
| 263 | + <tr> | |
| 264 | + <td>6</td> | |
| 265 | + <td>38</td> | |
| 266 | + <td>8</td> | |
| 267 | + </tr> | |
| 268 | + <tr> | |
| 269 | + <td>7</td> | |
| 270 | + <td>39</td> | |
| 271 | + <td>9</td> | |
| 272 | + </tr> | |
| 273 | + </tbody> | |
| 274 | + </table> | |
| 275 | + </div> | |
| 276 | + <div class="merchant-product-size-chart-modal-content"> | |
| 277 | + <p>Lorem ipsum dolor sit a met, dont dolor sit a la quat. </p> | |
| 278 | + </div> | |
| 279 | + </div> | |
| 280 | + </div> | |
| 281 | + </div> | |
| 282 | + <div class="mrc-preview-addtocart-placeholder"></div> | |
| 283 | + </div> | |
| 284 | + </div> | |
| 285 | + | |
| 286 | + <?php | |
| 287 | + } | |
| 288 | + | |
| 289 | + /** | |
| 290 | + * Custom CSS. | |
| 291 | + * | |
| 292 | + * @return string | |
| 293 | + */ | |
| 294 | + public function get_module_custom_css() { | |
| 295 | + $css = ''; | |
| 296 | + | |
| 297 | + $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'icon-size', 24, '.merchant-product-size-chart', '--mrc-sc-icon-size', 'px' ); | |
| 298 | + $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'title-text-color', '#212121', '.merchant-product-size-chart', '--mrc-sc-title-text-color' ); | |
| 299 | + $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'title-text-color-hover', '#757575', '.merchant-product-size-chart', '--mrc-sc-title-text-color-hover' ); | |
| 300 | + $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'icon-color', '#212121', '.merchant-product-size-chart', '--mrc-sc-icon-color' ); | |
| 301 | + $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'icon-color-hover', '#757575', '.merchant-product-size-chart', '--mrc-sc-icon-color-hover' ); | |
| 302 | + | |
| 303 | + $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'popup-width', 750, '.merchant-product-size-chart', '--mrc-sc-popup-width', 'px' ); | |
| 304 | + $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'background-color', '#f2f2f2', '.merchant-product-size-chart', '--mrc-sc-background-color' ); | |
| 305 | + $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'close-icon-color', '#212121', '.merchant-product-size-chart', '--mrc-sc-close-icon-color' ); | |
| 306 | + $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'close-icon-color-hover', '#757575', '.merchant-product-size-chart', '--mrc-sc-close-icon-color-hover' ); | |
| 307 | + $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'title-color', '#212121', '.merchant-product-size-chart', '--mrc-sc-title-color' ); | |
| 308 | + $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'tabs-color', '#757575', '.merchant-product-size-chart', '--mrc-sc-tabs-color' ); | |
| 309 | + $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'tabs-color-active', '#212121', '.merchant-product-size-chart', '--mrc-sc-tabs-color-active' ); | |
| 310 | + $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'table-headings-background-color', '#212121', '.merchant-product-size-chart', '--mrc-sc-table-headings-background-color' ); | |
| 311 | + $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'table-headings-text-color', '#ffffff', '.merchant-product-size-chart', '--mrc-sc-table-headings-text-color' ); | |
| 312 | + $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'table-body-background-color', '#ffffff', '.merchant-product-size-chart', '--mrc-sc-table-body-background-color' ); | |
| 313 | + $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'table-body-text-color', '#212121', '.merchant-product-size-chart', '--mrc-sc-table-body-text-color' ); | |
| 314 | + $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'description-text-color', '#212121', '.merchant-product-size-chart', '--mrc-sc-description-text-color' ); | |
| 315 | + $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'description-link-color', '#212121', '.merchant-product-size-chart', '--mrc-sc-description-link-color' ); | |
| 316 | + $css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'description-link-color-hover', '#757575', '.merchant-product-size-chart', '--mrc-sc-description-link-color-hover' ); | |
| 317 | + | |
| 318 | + return $css; | |
| 319 | + } | |
| 320 | + | |
| 321 | + /** | |
| 322 | + * Admin custom CSS. | |
| 323 | + * | |
| 324 | + * @param string $css The custom CSS. | |
| 325 | + * | |
| 326 | + * @return string $css The custom CSS. | |
| 327 | + */ | |
| 328 | + public function admin_custom_css( $css ) { | |
| 329 | + $css .= $this->get_module_custom_css(); | |
| 330 | + | |
| 331 | + return $css; | |
| 332 | + } | |
| 333 | +} | |
| 334 | + | |
| 335 | +// Initialize the module. | |
| 336 | +add_action( 'init', function () { | |
| 337 | + Merchant_Modules::create_module( new Merchant_Size_Chart() ); | |
| 338 | +} ); | |
