Skip to content

Commit 55ab26c

Browse files
omiroshnichenkoomiroshnichenko
committed
PB-107: Display total number of products matched into ProductsList
- implement product totals component - implement html component to collect all data from data-form-part fields
1 parent 5c43245 commit 55ab26c

File tree

3 files changed

+160
-18
lines changed

3 files changed

+160
-18
lines changed

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

Lines changed: 42 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@
158158
<elementTmpl>Magento_PageBuilder/form/element/input-no-maxlength</elementTmpl>
159159
</settings>
160160
</field>
161-
<htmlContent name="conditions_form" sortOrder="5" template="Magento_PageBuilder/form/element/widget-conditions">
161+
<htmlContent name="conditions_form" sortOrder="5" template="Magento_PageBuilder/form/element/widget-conditions" component="Magento_PageBuilder/js/form/element/html">
162162
<settings>
163163
<visible>false</visible>
164164
<additionalClasses>
@@ -197,26 +197,50 @@
197197
</select>
198198
</formElements>
199199
</field>
200-
<field name="products_count" sortOrder="20" formElement="input">
200+
<container name="product_count_group" component="Magento_Ui/js/form/components/group" sortOrder="20">
201201
<argument name="data" xsi:type="array">
202202
<item name="config" xsi:type="array">
203-
<item name="default" xsi:type="number">5</item>
203+
<item name="breakLine" xsi:type="boolean">false</item>
204204
</item>
205205
</argument>
206-
<settings>
207-
<dataType>number</dataType>
208-
<label translate="true">Number of Products to Display</label>
209-
<additionalClasses>
210-
<class name="admin__field-small">true</class>
211-
</additionalClasses>
212-
<dataScope>products_count</dataScope>
213-
<validation>
214-
<rule name="required-entry" xsi:type="boolean">true</rule>
215-
<rule name="validate-number" xsi:type="boolean">true</rule>
216-
<rule name="less-than-equals-to" xsi:type="number">999</rule>
217-
<rule name="greater-than-equals-to" xsi:type="number">1</rule>
218-
</validation>
219-
</settings>
220-
</field>
206+
<field name="products_count" sortOrder="10" formElement="input">
207+
<argument name="data" xsi:type="array">
208+
<item name="config" xsi:type="array">
209+
<item name="default" xsi:type="number">5</item>
210+
</item>
211+
</argument>
212+
<settings>
213+
<dataType>number</dataType>
214+
<label translate="true">Number of Products to Display</label>
215+
<additionalClasses>
216+
<class name="admin__field-small">true</class>
217+
</additionalClasses>
218+
<dataScope>products_count</dataScope>
219+
<validation>
220+
<rule name="required-entry" xsi:type="boolean">true</rule>
221+
<rule name="validate-number" xsi:type="boolean">true</rule>
222+
<rule name="less-than-equals-to" xsi:type="number">999</rule>
223+
<rule name="greater-than-equals-to" xsi:type="number">1</rule>
224+
</validation>
225+
</settings>
226+
</field>
227+
<field name="product_totals" sortOrder="20" formElement="input" component="Magento_PageBuilder/js/form/element/product-totals">
228+
<argument name="data" xsi:type="array">
229+
<item name="config" xsi:type="array">
230+
<item name="default" xsi:type="string">of ${ $.totalProductCount }</item>
231+
</item>
232+
</argument>
233+
<settings>
234+
<elementTmpl>ui/form/element/text</elementTmpl>
235+
<dataType>text</dataType>
236+
<imports>
237+
<link name="conditionOption">ns = ${ $.ns }, index = condition_option:value</link>
238+
<link name="conditionValues.category_ids">ns = ${ $.ns }, index = category_ids:value</link>
239+
<link name="conditionValues.sku">ns = ${ $.ns }, index = sku:value</link>
240+
<link name="conditionValues.condition">ns = ${ $.ns }, index = conditions_form:value</link>
241+
</imports>
242+
</settings>
243+
</field>
244+
</container>
221245
</fieldset>
222246
</form>

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/html.js

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
/**
2+
* Copyright © Magento, Inc. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
6+
define(['Magento_Ui/js/form/components/html', 'jquery'], function (Html, $) {
7+
'use strict';
8+
9+
return Html.extend({
10+
defaults: {
11+
inputSelector: '[data-form-part=${ $.ns }]',
12+
elements: [],
13+
value: {}
14+
},
15+
16+
/** @inheritdoc */
17+
initialize: function () {
18+
this._super();
19+
this.initInputListener();
20+
21+
return this;
22+
},
23+
24+
/** @inheritdoc */
25+
initObservable: function () {
26+
return this._super()
27+
.observe('value');
28+
},
29+
30+
/**
31+
* Listen for value change on each field that has been added.
32+
*/
33+
initInputListener: function () {
34+
$.async({
35+
component: this,
36+
selector: this.inputSelector
37+
}, function (el) {
38+
this.elements.push(el);
39+
$(el).on('change', this.updateValue.bind(this));
40+
this.updateValue(this);
41+
}.bind(this));
42+
},
43+
44+
/**
45+
* Collect data and update value.
46+
*/
47+
updateValue: function () {
48+
var result = {},
49+
name;
50+
51+
this.elements.forEach(function (item) {
52+
switch (item.type) {
53+
case 'checkbox':
54+
result[item.name] = +!!item.checked;
55+
break;
56+
57+
case 'radio':
58+
if (item.checked) {
59+
result[item.name] = item.value;
60+
}
61+
break;
62+
63+
case 'select-multiple':
64+
name = item.name.substring(0, item.name.length - 2); //remove [] from the name ending
65+
result[name] = _.pluck(item.selectedOptions, 'value');
66+
break;
67+
68+
default:
69+
result[item.name] = item.value;
70+
}
71+
});
72+
73+
this.value(result);
74+
}
75+
});
76+
});

‎app/code/Magento/PageBuilder/view/adminhtml/web/js/form/element/product-totals.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
/**
2+
* Copyright © Magento, Inc. All rights reserved.
3+
* See COPYING.txt for license details.
4+
*/
5+
6+
define(['Magento_Ui/js/form/element/abstract'], function (Abstract) {
7+
'use strict';
8+
9+
return Abstract.extend({
10+
defaults: {
11+
conditionOption: '',
12+
conditionValues: {},
13+
totalProductCount: 0,
14+
disabledProductCount: 0,
15+
listens: {
16+
conditionOption: 'updateProductsCount',
17+
conditionValues: 'updateProductsCount'
18+
},
19+
links: {
20+
value: false
21+
}
22+
},
23+
24+
/** @inheritdoc */
25+
initObservable: function () {
26+
return this._super()
27+
.observe('totalProductCount disabledProductCount');
28+
},
29+
30+
/**
31+
* Update product count.
32+
*
33+
*/
34+
updateProductsCount: function () {
35+
if (!this.conditionOption || !this.conditionValues.hasOwnProperty(this.conditionOption)) {
36+
return;
37+
}
38+
39+
//perform request here;
40+
}
41+
});
42+
});

0 commit comments

Comments
 (0)