Skip to content

Commit acaeb5c

Browse files
omiroshnichenkoomiroshnichenko
committed
PB-77: Product Carousel Appearance
- add carousel form extend - fix carousel preview issue on hiding - fix mobile background image - fixes after CR
1 parent ae71547 commit acaeb5c

File tree

7 files changed

+37
-125
lines changed

7 files changed

+37
-125
lines changed

‎app/code/Magento/PageBuilder/Model/Filter/Template.php

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -272,8 +272,13 @@ private function generateCssFromImages(string $elementClass, array $images) : st
272272
'background-image' => 'url(' . $images['desktop_image'] . ')',
273273
];
274274
}
275-
if (isset($images['mobile_image']) && $this->getMobileMediaQuery()) {
276-
$css[$this->getMobileMediaQuery()]['.' . $elementClass] = [
275+
if (isset($images['mobile_image']) && $this->getMediaQuery('mobile')) {
276+
$css[$this->getMediaQuery('mobile')]['.' . $elementClass] = [
277+
'background-image' => 'url(' . $images['mobile_image'] . ')',
278+
];
279+
}
280+
if (isset($images['mobile_image']) && $this->getMediaQuery('mobile-small')) {
281+
$css[$this->getMediaQuery('mobile-small')]['.' . $elementClass] = [
277282
'background-image' => 'url(' . $images['mobile_image'] . ')',
278283
];
279284
}
@@ -305,13 +310,14 @@ private function cssFromArray(array $css) : string
305310
/**
306311
* Generate the mobile media query from view configuration
307312
*
313+
* @param string $view
308314
* @return null|string
309315
*/
310-
private function getMobileMediaQuery() : ?string
316+
private function getMediaQuery(string $view) : ?string
311317
{
312318
$breakpoints = $this->viewConfig->getViewConfig()->getVarValue(
313319
'Magento_PageBuilder',
314-
'breakpoints/mobile/conditions'
320+
'breakpoints/' . $view . '/conditions'
315321
);
316322
if ($breakpoints && count($breakpoints) > 0) {
317323
$mobileBreakpoint = '@media only screen ';

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,10 @@ public function getFields($componentName) : array
4848
$componentConfig,
4949
function ($item, $key) {
5050
// Determine if this item has a formElement key
51-
if (isset($item[Converter::DATA_ARGUMENTS_KEY]['data']['config']['formElement'])) {
51+
if (isset($item[Converter::DATA_ARGUMENTS_KEY]['data']['config']['formElement'])
52+
&& !(isset($item[Converter::DATA_ARGUMENTS_KEY]['data']['config']['componentDisabled'])
53+
&& $item[Converter::DATA_ARGUMENTS_KEY]['data']['config']['componentDisabled'] === true)
54+
) {
5255
$elementConfig = $item[Converter::DATA_ARGUMENTS_KEY]['data']['config'];
5356
// If the field has a dataScope use that for the key instead of the name
5457
if (isset($elementConfig['dataScope'])) {

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

Lines changed: 3 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,11 @@
66
*/
77
-->
88
<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">
9+
xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd" extends="pagebuilder_products_form">
1010
<argument name="data" xsi:type="array">
1111
<item name="js_config" xsi:type="array">
1212
<item name="provider" xsi:type="string">pagebuilder_products_carousel_form.pagebuilder_products_carousel_form_data_source</item>
1313
</item>
14-
<item name="label" xsi:type="string" translate="true">Products</item>
1514
</argument>
1615
<settings>
1716
<deps>
@@ -33,114 +32,23 @@
3332
</dataProvider>
3433
</dataSource>
3534
<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>
4835
<field name="appearance" formElement="select" sortOrder="10" component="Magento_PageBuilder/js/form/element/dependent-visual-select">
4936
<argument name="data" xsi:type="array">
5037
<item name="config" xsi:type="array">
5138
<item name="default" xsi:type="string">carousel</item>
5239
</item>
5340
</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>
7241
</field>
7342
</fieldset>
7443
<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">
44+
<field name="products_count" sortOrder="20" formElement="input">
11045
<argument name="data" xsi:type="array">
11146
<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>
47+
<item name="componentDisabled" xsi:type="boolean">true</item>
11748
</item>
11849
</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>
13650
</field>
13751
<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>
14452
<block name="conditions_form" class="Magento\PageBuilder\Block\Adminhtml\Form\Element\ProductConditions">
14553
<arguments>
14654
<argument name="formNamespace" xsi:type="string">pagebuilder_products_carousel_form</argument>
@@ -149,28 +57,6 @@
14957
</arguments>
15058
</block>
15159
</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>
17460
<field name="carousel_products_count" sortOrder="20" formElement="input">
17561
<argument name="data" xsi:type="array">
17662
<item name="config" xsi:type="array">

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

Lines changed: 11 additions & 0 deletions
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/slide/preview.js

Lines changed: 0 additions & 2 deletions
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/ts/js/content-type/products/preview.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,15 @@ export default class Preview extends BasePreview {
7272
this.initSlider();
7373
}
7474

75+
/**
76+
* @inheritDoc
77+
*/
78+
public onOptionVisibilityToggle(): void {
79+
this.element = undefined;
80+
this.sliderReady = false;
81+
super.onOptionVisibilityToggle();
82+
}
83+
7584
/**
7685
* @inheritdoc
7786
*/

‎app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/slide/preview.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -331,7 +331,6 @@ export default class Preview extends BasePreview {
331331

332332
this.contentType.dataStore.subscribe(
333333
(data: DataObject) => {
334-
console.log(data.slide_name);
335334
this.slideName(data.slide_name);
336335
},
337336
);

0 commit comments

Comments
 (0)