Skip to content

Commit e38698b

Browse files
omiroshnichenkoomiroshnichenko
committed
PB-77: Product Carousel Appearance
- create carousel appearance for product content type - fix form fields per appearance - remove deprecated previewData from Preview class and previewData usages
1 parent a80fe04 commit e38698b

File tree

30 files changed

+652
-132
lines changed

30 files changed

+652
-132
lines changed

‎app/code/Magento/PageBuilder/Model/Stage/Config.php

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -190,13 +190,15 @@ private function getContentTypes()
190190
*/
191191
private function flattenContentTypeData(string $name, array $contentType)
192192
{
193-
return [
193+
$result = [
194194
'name' => $name,
195195
'label' => $contentType['label'],
196196
'icon' => isset($contentType['icon']) ? $contentType['icon'] : '',
197197
'form' => isset($contentType['form']) ? $contentType['form'] : '',
198198
'menu_section' => $contentType['menu_section'] ?? 'general',
199-
'fields' => isset($contentType['form']) ? $this->uiComponentConfig->getFields($contentType['form']) : [],
199+
'fields' => isset($contentType['form'])
200+
? ['default' => $this->uiComponentConfig->getFields($contentType['form'])]
201+
: [],
200202
'component' => $contentType['component'],
201203
'preview_component' => $contentType['preview_component'] ?? self::DEFAULT_PREVIEW_COMPONENT,
202204
'master_component' => $contentType['master_component'] ?? self::DEFAULT_MASTER_COMPONENT,
@@ -207,6 +209,14 @@ private function flattenContentTypeData(string $name, array $contentType)
207209
: [],
208210
'is_system' => isset($contentType['is_system']) && $contentType['is_system'] === 'false' ? false : true
209211
];
212+
213+
foreach ($result['appearances'] as $key => $appearance) {
214+
if (isset($appearance['form'])) {
215+
$result['fields'][$key . '-appearance'] = $this->uiComponentConfig->getFields($appearance['form']);
216+
}
217+
}
218+
219+
return $result;
210220
}
211221

212222
/**

‎app/code/Magento/PageBuilder/etc/adminhtml/di.xml

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -358,9 +358,14 @@
358358
<argument name="optionsData" xsi:type="array">
359359
<item name="0" xsi:type="array">
360360
<item name="value" xsi:type="string">grid</item>
361-
<item name="title" xsi:type="string" translate="true">Grid</item>
361+
<item name="title" xsi:type="string" translate="true">Product Grid</item>
362362
<item name="icon" xsi:type="string">Magento_PageBuilder/css/images/content-type/products/appearance/grid.svg</item>
363363
</item>
364+
<item name="1" xsi:type="array">
365+
<item name="value" xsi:type="string">carousel</item>
366+
<item name="title" xsi:type="string" translate="true">Product Carousel</item>
367+
<item name="icon" xsi:type="string">Magento_PageBuilder/css/images/content-type/products/appearance/carousel.svg</item>
368+
</item>
364369
</argument>
365370
</arguments>
366371
</virtualType>

‎app/code/Magento/PageBuilder/view/adminhtml/layout/pagebuilder_products_carousel_form.xml

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<?xml version="1.0"?>
2+
<!--
3+
/**
4+
* Copyright © Magento, Inc. All rights reserved.
5+
* See COPYING.txt for license details.
6+
*/
7+
-->
8+
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
9+
<update handle="styles"/>
10+
<body>
11+
<referenceContainer name="content">
12+
<uiComponent name="pagebuilder_products_carousel_form"/>
13+
</referenceContainer>
14+
</body>
15+
</page>

‎app/code/Magento/PageBuilder/view/adminhtml/pagebuilder/content_type/products.xml

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,35 @@
4646
</converter>
4747
</converters>
4848
</appearance>
49+
<appearance name="carousel"
50+
preview_template="Magento_PageBuilder/content-type/products/grid/preview"
51+
master_template="Magento_PageBuilder/content-type/products/grid/master"
52+
reader="Magento_PageBuilder/js/master-format/read/configurable">
53+
<form>pagebuilder_products_carousel_form</form>
54+
<elements>
55+
<element name="main">
56+
<style name="text_align" source="text_align"/>
57+
<style converter="Magento_PageBuilder/js/converter/style/border-style" name="border" source="border_style"/>
58+
<style converter="Magento_PageBuilder/js/converter/style/color" name="border_color" source="border_color"/>
59+
<style converter="Magento_PageBuilder/js/converter/style/border-width" name="border_width" source="border_width"/>
60+
<style converter="Magento_PageBuilder/js/converter/style/remove-px" name="border_radius" source="border_radius"/>
61+
<style name="display" source="display" converter="Magento_PageBuilder/js/converter/style/display" preview_converter="Magento_PageBuilder/js/converter/style/preview/display"/>
62+
<style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
63+
<style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings"/>
64+
<attribute source="data-content-type" name="name"/>
65+
<attribute source="data-appearance" name="appearance"/>
66+
<html name="html" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/store-id"/>
67+
<css name="css_classes"/>
68+
</element>
69+
</elements>
70+
<converters>
71+
<converter component="Magento_PageBuilder/js/content-type/products/mass-converter/carousel-widget-directive" name="widget_directive">
72+
<config>
73+
<item name="html_variable" value="html"/>
74+
</config>
75+
</converter>
76+
</converters>
77+
</appearance>
4978
</appearances>
5079
</type>
5180
</config>

‎app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_products_carousel_form.xml

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<!--
3+
/**
4+
* Copyright © Magento, Inc. All rights reserved.
5+
* See COPYING.txt for license details.
6+
*/
7+
-->
8+
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
9+
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd" extends="pagebuilder_base_form">
10+
<argument name="data" xsi:type="array">
11+
<item name="js_config" xsi:type="array">
12+
<item name="provider" xsi:type="string">pagebuilder_products_carousel_form.pagebuilder_products_carousel_form_data_source</item>
13+
</item>
14+
<item name="label" xsi:type="string" translate="true">Products</item>
15+
</argument>
16+
<settings>
17+
<deps>
18+
<dep>pagebuilder_products_carousel_form.pagebuilder_products_carousel_form_data_source</dep>
19+
</deps>
20+
<namespace>pagebuilder_products_carousel_form</namespace>
21+
</settings>
22+
<dataSource name="pagebuilder_products_carousel_form_data_source">
23+
<argument name="data" xsi:type="array">
24+
<item name="js_config" xsi:type="array">
25+
<item name="component" xsi:type="string">Magento_PageBuilder/js/content-type/products/form/provider</item>
26+
</item>
27+
</argument>
28+
<dataProvider name="pagebuilder_products_carousel_form_data_source" class="Magento\PageBuilder\Model\ContentType\DataProvider">
29+
<settings>
30+
<requestFieldName/>
31+
<primaryFieldName/>
32+
</settings>
33+
</dataProvider>
34+
</dataSource>
35+
<fieldset name="appearance_fieldset" sortOrder="10" component="Magento_PageBuilder/js/form/element/dependent-fieldset">
36+
<settings>
37+
<label translate="true">Appearance</label>
38+
<additionalClasses>
39+
<class name="admin__fieldset-visual-select-large">true</class>
40+
</additionalClasses>
41+
<collapsible>false</collapsible>
42+
<opened>true</opened>
43+
<imports>
44+
<link name="hideFieldset">${$.name}.appearance:options</link>
45+
<link name="hideLabel">${$.name}.appearance:options</link>
46+
</imports>
47+
</settings>
48+
<field name="appearance" formElement="select" sortOrder="10" component="Magento_PageBuilder/js/form/element/dependent-visual-select">
49+
<argument name="data" xsi:type="array">
50+
<item name="config" xsi:type="array">
51+
<item name="default" xsi:type="string">carousel</item>
52+
</item>
53+
</argument>
54+
<settings>
55+
<additionalClasses>
56+
<class name="admin__field-wide">true</class>
57+
<class name="admin__field-visual-select-container">true</class>
58+
</additionalClasses>
59+
<dataType>text</dataType>
60+
<validation>
61+
<rule name="required-entry" xsi:type="boolean">true</rule>
62+
</validation>
63+
<elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
64+
</settings>
65+
<formElements>
66+
<select>
67+
<settings>
68+
<options class="AppearanceSourceProducts" />
69+
</settings>
70+
</select>
71+
</formElements>
72+
</field>
73+
</fieldset>
74+
<fieldset name="general" sortOrder="20">
75+
<settings>
76+
<label />
77+
</settings>
78+
<field name="condition_option" sortOrder="0" formElement="select" component="Magento_PageBuilder/js/form/element/condition-options">
79+
<settings>
80+
<dataType>text</dataType>
81+
<label translate="true">Select Products By</label>
82+
<elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
83+
<exports>
84+
<link name="category_idsVisible">${$.parentName}.category_ids:visible</link>
85+
<link name="conditionVisible">${$.parentName}.conditions_form:visible</link>
86+
<link name="value">${$.parentName}.sort_order:filter</link>
87+
</exports>
88+
<dataScope>condition_option</dataScope>
89+
</settings>
90+
<formElements>
91+
<select>
92+
<settings>
93+
<options>
94+
<option name="0" xsi:type="array">
95+
<item name="size" xsi:type="string">small</item>
96+
<item name="value" xsi:type="string">category_ids</item>
97+
<item name="title" xsi:type="string" translate="true">Category</item>
98+
</option>
99+
<option name="1" xsi:type="array">
100+
<item name="size" xsi:type="string">small</item>
101+
<item name="value" xsi:type="string">condition</item>
102+
<item name="title" xsi:type="string" translate="true">Condition</item>
103+
</option>
104+
</options>
105+
</settings>
106+
</select>
107+
</formElements>
108+
</field>
109+
<field name="category_ids" component="Magento_Catalog/js/components/new-category" sortOrder="5" formElement="select">
110+
<argument name="data" xsi:type="array">
111+
<item name="config" xsi:type="array">
112+
<item name="filterOptions" xsi:type="boolean">true</item>
113+
<item name="multiple" xsi:type="boolean">false</item>
114+
<item name="showCheckbox" xsi:type="boolean">false</item>
115+
<item name="disableLabel" xsi:type="boolean">true</item>
116+
<item name="levelsVisibility" xsi:type="number">1</item>
117+
</item>
118+
</argument>
119+
<settings>
120+
<elementTmpl>ui/grid/filters/elements/ui-select</elementTmpl>
121+
<label translate="true">Category</label>
122+
<dataScope>category_ids</dataScope>
123+
<componentType>field</componentType>
124+
<visible>false</visible>
125+
<listens>
126+
<link name="${ $.namespace }.${ $.namespace }:responseData">setParsed</link>
127+
</listens>
128+
</settings>
129+
<formElements>
130+
<select>
131+
<settings>
132+
<options class="Magento\Catalog\Ui\Component\Product\Form\Categories\Options"/>
133+
</settings>
134+
</select>
135+
</formElements>
136+
</field>
137+
<htmlContent name="conditions_form" sortOrder="5" template="Magento_PageBuilder/form/element/widget-conditions">
138+
<settings>
139+
<visible>false</visible>
140+
<additionalClasses>
141+
<class name="admin__field">true</class>
142+
</additionalClasses>
143+
</settings>
144+
<block name="conditions_form" class="Magento\PageBuilder\Block\Adminhtml\Form\Element\ProductConditions">
145+
<arguments>
146+
<argument name="formNamespace" xsi:type="string">pagebuilder_products_carousel_form</argument>
147+
<argument name="attribute" xsi:type="string">condition_source</argument>
148+
<argument name="label" xsi:type="string" translate="true">Condition</argument>
149+
</arguments>
150+
</block>
151+
</htmlContent>
152+
<field name="sort_order" sortOrder="10" formElement="select" component="Magento_PageBuilder/js/form/element/select-filtered-options">
153+
<argument name="data" xsi:type="array">
154+
<item name="config" xsi:type="array">
155+
<item name="default" xsi:type="string">position</item>
156+
<item name="excludeOptions" xsi:type="array">
157+
<item name="condition" xsi:type="string">position</item>
158+
</item>
159+
</item>
160+
</argument>
161+
<settings>
162+
<dataType>text</dataType>
163+
<label translate="true">Sort By</label>
164+
<dataScope>sort_order</dataScope>
165+
</settings>
166+
<formElements>
167+
<select>
168+
<settings>
169+
<options class="Magento\PageBuilder\Model\Catalog\Sorting\Options"/>
170+
</settings>
171+
</select>
172+
</formElements>
173+
</field>
174+
<field name="carousel_products_count" sortOrder="20" formElement="input">
175+
<argument name="data" xsi:type="array">
176+
<item name="config" xsi:type="array">
177+
<item name="default" xsi:type="number">20</item>
178+
</item>
179+
</argument>
180+
<settings>
181+
<dataType>number</dataType>
182+
<label translate="true">Number of Products to Display</label>
183+
<additionalClasses>
184+
<class name="admin__field-small">true</class>
185+
</additionalClasses>
186+
<dataScope>carousel_products_count</dataScope>
187+
<validation>
188+
<rule name="required-entry" xsi:type="boolean">true</rule>
189+
<rule name="validate-number" xsi:type="boolean">true</rule>
190+
<rule name="less-than-equals-to" xsi:type="number">999</rule>
191+
<rule name="greater-than-equals-to" xsi:type="number">1</rule>
192+
</validation>
193+
</settings>
194+
</field>
195+
</fieldset>
196+
</form>

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/images/content-type/products/appearance/carousel.svg

Lines changed: 3 additions & 0 deletions
Loading

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/products/_carousel.less

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/**
2+
* Copyright © Magento, Inc. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
6+
//
7+
// Carousel appearance styles
8+
// _____________________________________________
9+
10+
[data-content-type='products'][data-appearance='carousel'] {
11+
.product-item {
12+
padding-left: 0;
13+
}
14+
}

‎app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/products/_import.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,4 @@
88
// _____________________________________________
99

1010
@import './_default.less';
11+
@import './_carousel.less';

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type-factory.js

Lines changed: 3 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type-toolbar.js

Lines changed: 3 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)