Skip to content

Commit da30db0

Browse files
omiroshnichenkoomiroshnichenko
committed
PB-77: Product Carousel Appearance
- add breakpoints for widgetInitializer - create carousel widget - fix block preview content-type - create default configuration for carousel appearance - fix styles for product carousel
1 parent e38698b commit da30db0

File tree

22 files changed

+398
-26
lines changed

22 files changed

+398
-26
lines changed

‎app/code/Magento/PageBuilder/Block/WidgetInitializer.php

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,4 +54,14 @@ public function getConfig() : string
5454
{
5555
return $this->jsonSerializer->serialize($this->config->getConfig());
5656
}
57+
58+
/**
59+
* Returns breakpoints for widgets initializer component.
60+
*
61+
* @return string
62+
*/
63+
public function getBreakpoints() : string
64+
{
65+
return $this->jsonSerializer->serialize($this->config->getBreakpoints());
66+
}
5767
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,7 @@ public function getConfig()
141141
'column_grid_max' => $this->scopeConfig->getValue(self::XML_PATH_COLUMN_GRID_MAX),
142142
'can_use_inline_editing_on_stage' => $this->isWysiwygProvisionedForEditingOnStage(),
143143
'widgets' => $this->widgetInitializerConfig->getConfig(),
144+
'breakpoints' => $this->widgetInitializerConfig->getBreakpoints()
144145
];
145146
}
146147

‎app/code/Magento/PageBuilder/Model/WidgetInitializerConfig.php

Lines changed: 27 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@
88

99
namespace Magento\PageBuilder\Model;
1010

11+
use Magento\Framework\App\ObjectManager;
12+
use Magento\Framework\View\ConfigInterface;
13+
1114
/**
1215
* Container for the configuration related to the widget initializer mechanism
1316
*/
@@ -18,12 +21,21 @@ class WidgetInitializerConfig
1821
*/
1922
private $config;
2023

24+
/**
25+
* @var ConfigInterface
26+
*/
27+
private $viewConfig;
28+
2129
/**
2230
* @param array $config
31+
* @param ConfigInterface|null $viewConfig
2332
*/
24-
public function __construct(array $config)
25-
{
33+
public function __construct(
34+
array $config,
35+
ConfigInterface $viewConfig = null
36+
) {
2637
$this->config = $config;
38+
$this->viewConfig = $viewConfig ?: ObjectManager::getInstance()->get(ConfigInterface::class);
2739
}
2840

2941
/**
@@ -43,10 +55,22 @@ public function getConfig(): array
4355
if (isset($item['appearance'])) {
4456
$selector .= sprintf('[data-appearance="%s"]', $item['appearance']);
4557
}
46-
$componentConfig = isset($item['config']) ? $item['config'] : '{}';
58+
$componentConfig = isset($item['config']) ? $item['config'] : false;
4759
$resultConfig[$selector][$item['component']] = $componentConfig;
4860
}
4961
}
5062
return $resultConfig;
5163
}
64+
65+
/**
66+
* Returns breakpoint for widgets initializer component.
67+
*
68+
* @return array
69+
*/
70+
public function getBreakpoints(): array {
71+
return $this->viewConfig->getViewConfig()->getVarValue(
72+
'Magento_PageBuilder',
73+
'breakpoints'
74+
);
75+
}
5276
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,12 @@
9999
<item name="component" xsi:type="string">Magento_PageBuilder/js/content-type/buttons/appearance/inline/widget</item>
100100
</item>
101101
</item>
102+
<item name="products" xsi:type="array">
103+
<item name="default" xsi:type="array">
104+
<item name="component" xsi:type="string">Magento_PageBuilder/js/content-type/products/appearance/carousel/widget</item>
105+
<item name="appearance" xsi:type="string">carousel</item>
106+
</item>
107+
</item>
102108
</argument>
103109
</arguments>
104110
</type>

‎app/code/Magento/PageBuilder/etc/view.xml

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,46 @@
2424
</media>
2525
<vars module="Magento_PageBuilder">
2626
<var name="breakpoints">
27+
<var name="desktop">
28+
<var name="conditions">
29+
<var name="min-width">1024px</var>
30+
</var>
31+
<var name="options">
32+
<var name="products">
33+
<var name="slidesToShow">5</var>
34+
</var>
35+
</var>
36+
</var>
37+
<var name="tablet">
38+
<var name="conditions">
39+
<var name="max-width">1024px</var>
40+
<var name="min-width">768px</var>
41+
</var>
42+
<var name="options">
43+
<var name="products">
44+
<var name="slidesToShow">4</var>
45+
</var>
46+
</var>
47+
</var>
2748
<var name="mobile">
2849
<var name="conditions">
2950
<var name="max-width">768px</var>
51+
<var name="min-width">640px</var>
52+
</var>
53+
<var name="options">
54+
<var name="products">
55+
<var name="slidesToShow">3</var>
56+
</var>
57+
</var>
58+
</var>
59+
<var name="mobile-small">
60+
<var name="conditions">
61+
<var name="max-width">640px</var>
62+
</var>
63+
<var name="options">
64+
<var name="products">
65+
<var name="slidesToShow">2</var>
66+
</var>
3067
</var>
3168
</var>
3269
</var>

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,13 @@
6363
<style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings"/>
6464
<attribute source="data-content-type" name="name"/>
6565
<attribute source="data-appearance" name="appearance"/>
66+
<static_attribute source="data-autoplay" value="false"/>
67+
<static_attribute source="data-autoplay-speed" value="4000"/>
68+
<static_attribute source="data-slide-all" value="true"/>
69+
<static_attribute source="data-center-mode" value="false"/>
70+
<static_attribute source="data-infinite-loop" value="false"/>
71+
<static_attribute source="data-show-arrows" value="false"/>
72+
<static_attribute source="data-show-dots" value="true"/>
6673
<html name="html" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/store-id"/>
6774
<css name="css_classes"/>
6875
</element>

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

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,58 @@
1111
.product-item {
1212
padding-left: 0;
1313
}
14+
15+
.slick-slide {
16+
> div {
17+
width: 100%;
18+
}
19+
}
20+
21+
.slick-dots {
22+
display: block;
23+
list-style: none;
24+
margin: 0;
25+
padding: 15px 0;
26+
text-align: center;
27+
width: 100%;
28+
li {
29+
cursor: pointer;
30+
display: inline-block;
31+
height: 14px;
32+
margin: 0 5px;
33+
padding: 0;
34+
position: relative;
35+
vertical-align: middle;
36+
width: 14px;
37+
button {
38+
background: @color-white;
39+
border: 1px solid @color-gray80;
40+
border-radius: 10px;
41+
box-shadow: none;
42+
cursor: pointer;
43+
display: block;
44+
height: 14px;
45+
padding: 0;
46+
text-indent: -99999px;
47+
transition: .3s;
48+
width: 14px;
49+
50+
&:hover {
51+
border: 1px solid @b3;
52+
}
53+
54+
&:active,
55+
&:focus,
56+
&:not(.primary) {
57+
box-shadow: none;
58+
}
59+
}
60+
61+
&.slick-active {
62+
button {
63+
background: @color-pagebuilder-darkest-gray;
64+
}
65+
}
66+
}
67+
}
1468
}

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

Lines changed: 2 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/products/mass-converter/carousel-widget-directive.js

Lines changed: 100 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/products/preview.js

Lines changed: 9 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)