merchant / inc / modules / size-chart / class-size-chart.php

class-size-chart.php in Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant 2.2.7, at inc/modules/size-chart/class-size-chart.php

319 lines 13.0 KB

Raw Download Zip

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	// Module data.
56	$this->module_data = Merchant_Admin_Modules::$modules_data[ self::MODULE_ID ];
57
58	// Module options path.
59	$this->module_options_path = MERCHANT_DIR . 'inc/modules/' . self::MODULE_ID . '/admin/options.php';
60
61	// Is module preview page.
62	if ( is_admin() && parent::is_module_settings_page() ) {
63	self::$is_module_preview = true;
64
65	// Enqueue admin styles.
66	add_action( 'admin_enqueue_scripts', array( $this, 'admin_enqueue_css' ) );
67
68	// Enqueue admin scripts.
69	add_action( 'admin_enqueue_scripts', array( $this, 'admin_enqueue_scripts' ) );
70
71	// Render module essencial instructions before the module page body content.
72	add_action( 'merchant_admin_after_module_page_page_header', array( $this, 'admin_module_essencial_instructions' ) );
73
74	// Admin preview box.
75	add_filter( 'merchant_module_preview', array( $this, 'render_admin_preview' ), 10, 2 );
76
77	// Custom CSS.
78	// The custom CSS should be added here as well due to ensure preview box works properly.
79	add_filter( 'merchant_custom_css', array( $this, 'admin_custom_css' ) );
80	}
81
82	if ( Merchant_Modules::is_module_active( self::MODULE_ID ) && is_admin() ) {
83	// Init translations.
84	$this->init_translations();
85	}
86	}
87
88	/**
89	* Init translations.
90	*
91	* @return void
92	*/
93	public function init_translations() {
94	$settings = $this->get_module_settings();
95	if ( ! empty( $settings['text'] ) ) {
96	Merchant_Translator::register_string( $settings['text'], esc_html__( 'Size chart: label text', 'merchant' ) );
97	}
98	}
99
100	/**
101	* Admin enqueue CSS.
102	*
103	* @return void
104	*/
105	public function admin_enqueue_css() {
106	if ( parent::is_module_settings_page() ) {
107	wp_enqueue_style( 'merchant-' . self::MODULE_ID, MERCHANT_URI . 'assets/css/modules/' . self::MODULE_ID . '/size-chart.min.css', array(), MERCHANT_VERSION );
108	wp_enqueue_style( 'merchant-admin-' . self::MODULE_ID, MERCHANT_URI . 'assets/css/modules/' . self::MODULE_ID . '/admin/preview.min.css', array(), MERCHANT_VERSION );
109	}
110	}
111
112	/**
113	* Admin Enqueue scripts.
114	*
115	* @return void
116	*/
117	public function admin_enqueue_scripts() {
118	// Register and enqueue the main module script.
119	wp_enqueue_script( 'merchant-' . self::MODULE_ID, MERCHANT_URI . 'assets/js/modules/' . self::MODULE_ID . '/size-chart.min.js', array(), MERCHANT_VERSION, true );
120	}
121
122	/**
123	* Render module essencial instructions.
124	*
125	* @return void
126	*/
127	public function admin_module_essencial_instructions() { ?>
128	<div class="merchant-module-page-settings">
129	<div class="merchant-module-page-setting-box merchant-module-page-setting-box-style-2">
130	<div class="merchant-module-page-setting-fields">
131	<div class="merchant-module-page-setting-field merchant-module-page-setting-field-content">
132	<div class="merchant-module-page-setting-field-inner">
133	<div class="merchant-tag-pre-orders">
134	<i class="dashicons dashicons-info"></i>
135	<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.',
136	'merchant' ); ?><?php printf( '<a href="%s" target="_blank">%s</a>',
137	esc_url( admin_url( 'edit.php?post_type=product' ) ),
138	esc_html__( 'View All Products', 'merchant' ) ); ?></p>
139	</div>
140	</div>
141	</div>
142	</div>
143	</div>
144	</div>
145
146	<?php
147	}
148
149	/**
150	* Render admin preview
151	*
152	* @param Merchant_Admin_Preview $preview
153	* @param string $module
154	*
155	* @return Merchant_Admin_Preview
156	*/
157	public function render_admin_preview( $preview, $module ) {
158	if ( self::MODULE_ID === $module ) {
159	ob_start();
160	self::admin_preview_content();
161	$content = ob_get_clean();
162
163	// HTML.
164	$preview->set_html( $content );
165
166	// Label Text.
167	$preview->set_text( 'text', '.merchant-product-size-chart-button span' );
168
169	// Icon.
170	$preview->set_svg_icon( 'icon', '.size-chart-icon' );
171	}
172
173	return $preview;
174	}
175
176	/**
177	* Admin preview content.
178	*
179	* @return void
180	*/
181	public function admin_preview_content() {
182	$settings = $this->get_module_settings();
183
184	?>
185
186	<div class="mrc-preview-single-product-elements">
187	<div class="mrc-preview-left-column">
188	<div class="mrc-preview-product-image-wrapper">
189	<div class="mrc-preview-product-image"></div>
190	<div class="mrc-preview-product-image-thumbs">
191	<div class="mrc-preview-product-image-thumb"></div>
192	<div class="mrc-preview-product-image-thumb"></div>
193	<div class="mrc-preview-product-image-thumb"></div>
194	</div>
195	</div>
196	</div>
197	<div class="mrc-preview-right-column">
198	<div class="mrc-preview-text-placeholder"></div>
199	<div class="mrc-preview-text-placeholder mrc-mw-70"></div>
200	<div class="mrc-preview-text-placeholder mrc-mw-30"></div>
201	<div class="merchant-product-size-chart">
202	<div class="merchant-product-size-chart-button">
203	<a href="#">
204	<div class="size-chart-icon">
205	<?php echo wp_kses( Merchant_SVG_Icons::get_svg_icon( $settings['icon'] ), merchant_kses_allowed_tags( array(), false ) ); ?>
206	</div>
207	<span><?php echo esc_html( $settings['text'] ); ?></span>
208	</a>
209	</div>
210	<div class="merchant-product-size-chart-modal">
211	<div class="merchant-product-size-chart-modal-inner">
212	<div class="merchant-product-size-chart-modal-close">
213	<?php echo wp_kses( Merchant_SVG_Icons::get_svg_icon( 'icon-close' ), merchant_kses_allowed_tags( array(), false ) ); ?>
214	</div>
215	<div class="merchant-product-size-chart-modal-title">
216	<?php echo esc_html__( 'Size Chart Modal Title', 'merchant' ); ?>
217	</div>
218	<div class="merchant-product-size-chart-modal-tables">
219	<table class="merchant-product-size-chart-modal-table active">
220	<thead>
221	<tr>
222	<th><?php echo esc_html__( 'US', 'merchant' ); ?></th>
223	<th><?php echo esc_html__( 'EU', 'merchant' ); ?></th>
224	<th><?php echo esc_html__( 'UK', 'merchant' ); ?></th>
225	</tr>
226	</thead>
227	<tbody>
228	<tr>
229	<td>3</td>
230	<td>35</td>
231	<td>5</td>
232	</tr>
233	<tr>
234	<td>4</td>
235	<td>36</td>
236	<td>6</td>
237	</tr>
238	<tr>
239	<td>5</td>
240	<td>37</td>
241	<td>7</td>
242	</tr>
243	<tr>
244	<td>6</td>
245	<td>38</td>
246	<td>8</td>
247	</tr>
248	<tr>
249	<td>7</td>
250	<td>39</td>
251	<td>9</td>
252	</tr>
253	</tbody>
254	</table>
255	</div>
256	<div class="merchant-product-size-chart-modal-content">
257	<p>Lorem ipsum dolor sit a met, dont dolor sit a la quat. </p>
258	</div>
259	</div>
260	</div>
261	</div>
262	<div class="mrc-preview-addtocart-placeholder"></div>
263	</div>
264	</div>
265
266	<?php
267	}
268
269	/**
270	* Custom CSS.
271	*
272	* @return string
273	*/
274	public function get_module_custom_css() {
275	$css = '';
276
277	$css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'icon-size', 24, '.merchant-product-size-chart', '--mrc-sc-icon-size', 'px' );
278	$css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'title-text-color', '#212121', '.merchant-product-size-chart', '--mrc-sc-title-text-color' );
279	$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' );
280	$css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'icon-color', '#212121', '.merchant-product-size-chart', '--mrc-sc-icon-color' );
281	$css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'icon-color-hover', '#757575', '.merchant-product-size-chart', '--mrc-sc-icon-color-hover' );
282
283	$css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'popup-width', 750, '.merchant-product-size-chart', '--mrc-sc-popup-width', 'px' );
284	$css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'background-color', '#f2f2f2', '.merchant-product-size-chart', '--mrc-sc-background-color' );
285	$css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'close-icon-color', '#212121', '.merchant-product-size-chart', '--mrc-sc-close-icon-color' );
286	$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' );
287	$css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'title-color', '#212121', '.merchant-product-size-chart', '--mrc-sc-title-color' );
288	$css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'tabs-color', '#757575', '.merchant-product-size-chart', '--mrc-sc-tabs-color' );
289	$css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'tabs-color-active', '#212121', '.merchant-product-size-chart', '--mrc-sc-tabs-color-active' );
290	$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' );
291	$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' );
292	$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' );
293	$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' );
294	$css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'description-text-color', '#212121', '.merchant-product-size-chart', '--mrc-sc-description-text-color' );
295	$css .= Merchant_Custom_CSS::get_variable_css( self::MODULE_ID, 'description-link-color', '#212121', '.merchant-product-size-chart', '--mrc-sc-description-link-color' );
296	$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' );
297
298	return $css;
299	}
300
301	/**
302	* Admin custom CSS.
303	*
304	* @param string $css The custom CSS.
305	*
306	* @return string $css The custom CSS.
307	*/
308	public function admin_custom_css( $css ) {
309	$css .= $this->get_module_custom_css();
310
311	return $css;
312	}
313	}
314
315	// Initialize the module.
316	add_action( 'init', function () {
317	Merchant_Modules::create_module( new Merchant_Size_Chart() );
318	} );
319