fluent-cart / app / Modules / Templating / Bricks / Elements / ProductGallery.php

ProductGallery.php in FluentCart A New Era of eCommerce – Faster, Lighter, and Simpler 1.3.26, at app/Modules/Templating/Bricks/Elements/ProductGallery.php

243 lines 8.6 KB

Raw Download Zip

1	<?php
2
3	namespace FluentCart\App\Modules\Templating\Bricks\Elements;
4
5	use Bricks\Database;
6	use Bricks\Element;
7	use Bricks\Setup;
8	//use FluentCart\App\Hooks\Handlers\ShortCodes\Buttons\AddToCartShortcode;
9	use FluentCart\App\Hooks\Handlers\ShortCodes\SingleProductShortCode;
10	use FluentCart\App\Modules\Data\ProductDataSetup;
11	use FluentCart\App\Modules\Templating\AssetLoader;
12	use FluentCart\App\Services\Renderer\ProductRenderer;
13	use FluentCart\App\Vite;
14
15	if (!defined('ABSPATH')) exit; // Exit if accessed directly
16
17	class ProductGallery extends Element
18	{
19	public $category = 'fluent_cart_product';
20	public $name = 'fct-product-gallery';
21	public $icon = 'ti-gallery';
22
23	public function enqueue_scripts()
24	{
25	AssetLoader::loadSingleProductAssets();
26	}
27
28	public function get_label()
29	{
30	return esc_html__('Product gallery', 'fluent-cart');
31	}
32
33	public function set_controls()
34	{
35	$this->controls['_width']['rerender'] = true;
36	$this->controls['_widthMin']['rerender'] = true;
37	$this->controls['_widthMax']['rerender'] = true;
38
39	$this->controls['productImageSize'] = [
40	'tab' => 'content',
41	'label' => esc_html__('Product', 'fluent-cart') . ': ' . esc_html__('Image size', 'fluent-cart'),
42	'type' => 'select',
43	'options' => Setup::get_image_sizes_options(),
44	'placeholder' => 'image_size',
45	];
46
47	$this->controls['thumbnailImageSize'] = [
48	'tab' => 'content',
49	'label' => esc_html__('Thumbnail', 'fluent-cart') . ': ' . esc_html__('Image size', 'fluent-cart'),
50	'type' => 'select',
51	'options' => Setup::get_image_sizes_options(),
52	'placeholder' => 'thumbnail',
53	];
54
55	$this->controls['lightboxImageSize'] = [
56	'tab' => 'content',
57	'label' => esc_html__('Lightbox', 'fluent-cart') . ': ' . esc_html__('Image size', 'fluent-cart'),
58	'type' => 'select',
59	'options' => Setup::get_image_sizes_options(),
60	'placeholder' => 'full',
61	];
62
63	// THUMBNAILS
64
65	$this->controls['thumbnailSep'] = [
66	'tab' => 'content',
67	'label' => esc_html__('Thumbnail navigation', 'fluent-cart'),
68	'type' => 'separator',
69	];
70
71	$this->controls['thumbnailPosition'] = [
72	'tab' => 'content',
73	'label' => esc_html__('Position', 'fluent-cart'),
74	'type' => 'select',
75	'inline' => true,
76	'options' => [
77	'top' => esc_html__('Top', 'fluent-cart'),
78	'right' => esc_html__('Right', 'fluent-cart'),
79	'bottom' => esc_html__('Bottom', 'fluent-cart'),
80	'left' => esc_html__('Left', 'fluent-cart'),
81	],
82	'placeholder' => esc_html__('Bottom', 'fluent-cart'),
83	'rerender' => true,
84	];
85
86	$this->controls['scrollableThumbs'] = [
87	'tab' => 'content',
88	'label' => esc_html__('Scrollable thumbnails', 'fluent-cart'),
89	'type' => 'checkbox',
90	'inline' => true,
91	'rerender' => true,
92	];
93
94	$this->controls['maxThumbnails'] = [
95	'tab' => 'content',
96	'label' => esc_html__('Max thumbnails', 'fluent-cart'),
97	'type' => 'number',
98	'min' => 1,
99	'max' => 50,
100	'placeholder' => esc_html__('No limit', 'fluent-cart'),
101	'rerender' => true,
102	];
103
104	$this->controls['itemWidth'] = [
105	'tab' => 'content',
106	'label' => esc_html__('Item width', 'fluent-cart') . ' (px)',
107	'type' => 'number',
108	'units' => true,
109	'css' => [
110	[
111	'selector' => '.fct-gallery-thumb-controls .fct-gallery-thumb-control-button',
112	'property' => 'width',
113	]
114	],
115	'placeholder' => '70px',
116	'rerender' => true
117	];
118	$this->controls['itemHeight'] = [
119	'tab' => 'content',
120	'label' => esc_html__('Item Height', 'fluent-cart') . ' (px)',
121	'type' => 'number',
122	'units' => true,
123	'css' => [
124	[
125	'selector' => '.fct-gallery-thumb-controls .fct-gallery-thumb-control-button',
126	'property' => 'height',
127	]
128	],
129	'placeholder' => '70px',
130	'rerender' => true
131	];
132
133	$this->controls['gap'] = [
134	'tab' => 'content',
135	'label' => esc_html__('Gap', 'fluent-cart'),
136	'type' => 'number',
137	'units' => true,
138	'css' => [
139	[
140
141	'selector' => '.fct-gallery-thumb-controls',
142	'property' => 'gap',
143	]
144	],
145	'placeholder' => '30px',
146	];
147
148	$this->controls['thumbnailOpacity'] = [
149	'tab' => 'content',
150	'label' => esc_html__('Opacity', 'fluent-cart'),
151	'type' => 'number',
152	'step' => 0.1,
153	'css' => [
154	[
155	'selector' => '.fct-gallery-thumb-controls .fct-gallery-thumb-control-button:not(.active) img',
156	'property' => 'opacity',
157	]
158	],
159	'placeholder' => '0.3',
160	];
161
162	$this->controls['thumbnailActiveOpacity'] = [
163	'tab' => 'content',
164	'label' => esc_html__('Opacity', 'fluent-cart') . ' (' . esc_html__('Active', 'fluent-cart') . ')',
165	'type' => 'number',
166	'step' => 0.1,
167	'css' => [
168	[
169	'selector' => '.fct-gallery-thumb-controls .fct-gallery-thumb-control-button.active',
170	'property' => 'opacity',
171	]
172	],
173	];
174
175	$this->controls['thumbnailBorder'] = [
176	'tab' => 'content',
177	'label' => esc_html__('Border', 'fluent-cart'),
178	'type' => 'border',
179	'css' => [
180	[
181	'selector' => '.fct-gallery-thumb-controls .fct-gallery-thumb-control-button',
182	'property' => 'border',
183	]
184	],
185	];
186
187	$this->controls['thumbnailActiveBorder'] = [
188	'tab' => 'content',
189	'label' => esc_html__('Border', 'fluent-cart') . ' (' . esc_html__('Active', 'fluent-cart') . ')',
190	'type' => 'border',
191	'css' => [
192	[
193	'selector' => '.fct-gallery-thumb-controls .fct-gallery-thumb-control-button.active',
194	'property' => 'border',
195	]
196	],
197	];
198	}
199
200	public function render()
201	{
202	$product = ProductDataSetup::getProductModel($this->post_id);
203
204	if (empty($product)) {
205	return $this->render_element_placeholder(
206	[
207	'title' => esc_html__('For better preview select content to show.', 'fluent-cart'),
208	'description' => esc_html__('Go to: Settings > Template Settings > Populate Content', 'fluent-cart'),
209	]
210	);
211	}
212
213	$settings = $this->settings;
214
215	// Thumbnail position
216	$thumbnail_position = !empty($settings['thumbnailPosition']) ? $settings['thumbnailPosition'] : 'bottom';
217	if (!in_array($thumbnail_position, ['bottom', 'top', 'left', 'right'], true)) {
218	$thumbnail_position = 'bottom';
219	}
220	$this->set_attribute('_root', 'data-pos', esc_attr($thumbnail_position));
221
222	$scrollable_thumbs = !empty($settings['scrollableThumbs']) ? 'yes' : 'no';
223
224	$max_thumbnails = !empty($settings['maxThumbnails']) ? (int) $settings['maxThumbnails'] : null;
225	if ($max_thumbnails !== null && $max_thumbnails <= 0) {
226	$max_thumbnails = null;
227	}
228
229	// STEP: Render
230	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- render_attributes() handles escaping
231	echo "<div {$this->render_attributes( '_root' )}>";
232
233	(new ProductRenderer($product))->renderGallery([
234	'thumb_position' => $thumbnail_position,
235	'scrollable_thumbs' => $scrollable_thumbs,
236	'max_thumbnails' => $max_thumbnails,
237	]);
238
239	echo '</div>';
240	}
241
242	}
243