Skip to content

Commit 2abb4fb

Browse files
rganinrganin
authored
Merge pull request #3634 from magento-arcticfoxes/MC-5648
[arcticfoxes] MC-5648: Catalog product list widget Viewport Issues: Add to cart buttons are hidden on mobile & Review Links Clash With Other Elements
2 parents beb0274 + 4addde1 commit 2abb4fb

File tree

4 files changed

+179
-88
lines changed

4 files changed

+179
-88
lines changed

‎app/code/Magento/CatalogWidget/view/frontend/templates/product/widget/content/grid.phtml‎

Lines changed: 43 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
$showWishlist = true;
2121
$showCompare = true;
2222
$showCart = true;
23-
$templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::DEFAULT_VIEW;
23+
$templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
2424
$description = false;
2525
?>
2626
<div class="block widget block-products-list <?= /* @noEscape */ $mode ?>">
@@ -48,57 +48,55 @@
4848
<?= $block->escapeHtml($_item->getName()) ?>
4949
</a>
5050
</strong>
51-
<?php
52-
echo $block->getProductPriceHtml($_item, $type);
53-
?>
54-
5551
<?php if ($templateType): ?>
5652
<?= $block->getReviewsSummaryHtml($_item, $templateType) ?>
5753
<?php endif; ?>
58-
54+
<?php echo $block->getProductPriceHtml($_item, $type); ?>
5955
<?php if ($showWishlist || $showCompare || $showCart): ?>
60-
<div class="product-item-actions">
61-
<?php if ($showCart): ?>
62-
<div class="actions-primary">
63-
<?php if ($_item->isSaleable()): ?>
64-
<?php if (!$_item->getTypeInstance()->isPossibleBuyFromList($_item)): ?>
65-
<button class="action tocart primary" data-mage-init='{"redirectUrl":{"url":"<?= $block->escapeUrl($block->getAddToCartUrl($_item)) ?>"}}' type="button" title="<?= $block->escapeHtmlAttr(__('Add to Cart')) ?>">
66-
<span><?= $block->escapeHtml(__('Add to Cart')) ?></span>
67-
</button>
56+
<div class="product-item-inner">
57+
<div class="product-item-actions">
58+
<?php if ($showCart): ?>
59+
<div class="actions-primary">
60+
<?php if ($_item->isSaleable()): ?>
61+
<?php if (!$_item->getTypeInstance()->isPossibleBuyFromList($_item)): ?>
62+
<button class="action tocart primary" data-mage-init='{"redirectUrl":{"url":"<?= $block->escapeUrl($block->getAddToCartUrl($_item)) ?>"}}' type="button" title="<?= $block->escapeHtmlAttr(__('Add to Cart')) ?>">
63+
<span><?= $block->escapeHtml(__('Add to Cart')) ?></span>
64+
</button>
65+
<?php else: ?>
66+
<?php
67+
$postDataHelper = $this->helper('Magento\Framework\Data\Helper\PostHelper');
68+
$postData = $postDataHelper->getPostData($block->getAddToCartUrl($_item), ['product' => $_item->getEntityId()])
69+
?>
70+
<button class="action tocart primary" data-post='<?= /* @noEscape */ $postData ?>' type="button" title="<?= $block->escapeHtmlAttr(__('Add to Cart')) ?>">
71+
<span><?= $block->escapeHtml(__('Add to Cart')) ?></span>
72+
</button>
73+
<?php endif; ?>
6874
<?php else: ?>
69-
<?php
70-
$postDataHelper = $this->helper('Magento\Framework\Data\Helper\PostHelper');
71-
$postData = $postDataHelper->getPostData($block->getAddToCartUrl($_item), ['product' => $_item->getEntityId()])
72-
?>
73-
<button class="action tocart primary" data-post='<?= /* @noEscape */ $postData ?>' type="button" title="<?= $block->escapeHtmlAttr(__('Add to Cart')) ?>">
74-
<span><?= $block->escapeHtml(__('Add to Cart')) ?></span>
75-
</button>
75+
<?php if ($_item->getIsSalable()): ?>
76+
<div class="stock available"><span><?= $block->escapeHtml(__('In stock')) ?></span></div>
77+
<?php else: ?>
78+
<div class="stock unavailable"><span><?= $block->escapeHtml(__('Out of stock')) ?></span></div>
79+
<?php endif; ?>
7680
<?php endif; ?>
77-
<?php else: ?>
78-
<?php if ($_item->getIsSalable()): ?>
79-
<div class="stock available"><span><?= $block->escapeHtml(__('In stock')) ?></span></div>
80-
<?php else: ?>
81-
<div class="stock unavailable"><span><?= $block->escapeHtml(__('Out of stock')) ?></span></div>
81+
</div>
82+
<?php endif; ?>
83+
<?php if ($showWishlist || $showCompare): ?>
84+
<div class="actions-secondary" data-role="add-to-links">
85+
<?php if ($this->helper('Magento\Wishlist\Helper\Data')->isAllow() && $showWishlist): ?>
86+
<a href="#"
87+
data-post='<?= /* @noEscape */ $block->getAddToWishlistParams($_item) ?>' class="action towishlist" data-action="add-to-wishlist" title="<?= $block->escapeHtmlAttr(__('Add to Wish List')) ?>">
88+
<span><?= $block->escapeHtml(__('Add to Wish List')) ?></span>
89+
</a>
90+
<?php endif; ?>
91+
<?php if ($block->getAddToCompareUrl() && $showCompare): ?>
92+
<?php $compareHelper = $this->helper('Magento\Catalog\Helper\Product\Compare');?>
93+
<a href="#" class="action tocompare" data-post='<?= /* @noEscape */ $compareHelper->getPostDataParams($_item) ?>' title="<?= $block->escapeHtmlAttr(__('Add to Compare')) ?>">
94+
<span><?= $block->escapeHtml(__('Add to Compare')) ?></span>
95+
</a>
8296
<?php endif; ?>
83-
<?php endif; ?>
84-
</div>
85-
<?php endif; ?>
86-
<?php if ($showWishlist || $showCompare): ?>
87-
<div class="actions-secondary" data-role="add-to-links">
88-
<?php if ($this->helper('Magento\Wishlist\Helper\Data')->isAllow() && $showWishlist): ?>
89-
<a href="#"
90-
data-post='<?= /* @noEscape */ $block->getAddToWishlistParams($_item) ?>' class="action towishlist" data-action="add-to-wishlist" title="<?= $block->escapeHtmlAttr(__('Add to Wish List')) ?>">
91-
<span><?= $block->escapeHtml(__('Add to Wish List')) ?></span>
92-
</a>
93-
<?php endif; ?>
94-
<?php if ($block->getAddToCompareUrl() && $showCompare): ?>
95-
<?php $compareHelper = $this->helper('Magento\Catalog\Helper\Product\Compare');?>
96-
<a href="#" class="action tocompare" data-post='<?= /* @noEscape */ $compareHelper->getPostDataParams($_item) ?>' title="<?= $block->escapeHtmlAttr(__('Add to Compare')) ?>">
97-
<span><?= $block->escapeHtml(__('Add to Compare')) ?></span>
98-
</a>
99-
<?php endif; ?>
100-
</div>
101-
<?php endif; ?>
97+
</div>
98+
<?php endif; ?>
99+
</div>
102100
</div>
103101
<?php endif; ?>
104102
</div>

‎app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/_widgets.less‎

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,15 @@
2323
}
2424

2525
.block.widget {
26+
.products-grid .product-item {
27+
margin-left: 2%;
28+
width: calc(~'(100% - 2%)/2');
29+
30+
&:nth-child(2n + 1) {
31+
margin-left: 0;
32+
}
33+
}
34+
2635
.product-item-info {
2736
width: auto;
2837
}
@@ -60,6 +69,15 @@
6069
.page-layout-3columns .block.widget .products-grid .product-item {
6170
width: 100%/3;
6271
}
72+
73+
.page-layout-1column .block.widget .products-grid .product-item {
74+
margin-left: 2%;
75+
width: calc(~'(100% - 4%)/3');
76+
77+
&:nth-child(3n + 1) {
78+
margin-left: 0;
79+
}
80+
}
6381
}
6482

6583
//
@@ -82,7 +100,16 @@
82100
}
83101

84102
.page-layout-1column .block.widget .products-grid .product-item {
85-
width: 100%/4;
103+
margin-left: 2%;
104+
width: calc(~'(100% - 6%)/4');
105+
106+
&:nth-child(3n + 1) {
107+
margin-left: 2%;
108+
}
109+
110+
&:nth-child(4n + 1) {
111+
margin-left: 0;
112+
}
86113
}
87114

88115
.page-layout-3columns .block.widget .products-grid .product-item {
@@ -96,11 +123,11 @@
96123
}
97124

98125
.page-layout-1column .block.widget .products-grid .product-item {
99-
margin-left: calc(~'(100% - 5 * (100%/6)) / 4');
100-
width: 100%/6;
126+
margin-left: 2%;
127+
width: calc(~'(100% - 8%)/5');
101128

102129
&:nth-child(4n + 1) {
103-
margin-left: calc(~'(100% - 5 * (100%/6)) / 4');
130+
margin-left: 2%;
104131
}
105132

106133
&:nth-child(5n + 1) {

‎app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/module/_listings.less‎

Lines changed: 46 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,23 @@
2929

3030
.product {
3131
&-items {
32+
font-size: 0;
3233
&:extend(.abs-reset-list all);
3334
}
3435

3536
&-item {
37+
font-size: 1.4rem;
3638
vertical-align: top;
3739

3840
.products-grid & {
3941
display: inline-block;
40-
width: 100%/2;
42+
margin-left: 2%;
43+
padding: 0;
44+
width: calc(~'(100% - 2%) / 2');
45+
}
46+
47+
&:nth-child(2n + 1) {
48+
margin-left: 0;
4149
}
4250

4351
&:extend(.abs-add-box-sizing all);
@@ -63,13 +71,26 @@
6371
}
6472

6573
&-actions {
74+
font-size: 0;
75+
76+
> * {
77+
font-size: 1.4rem;
78+
}
6679

6780
.actions-secondary {
81+
display: inline-block;
82+
font-size: 1.4rem;
83+
vertical-align: middle;
84+
white-space: nowrap;
6885
> button.action {
6986
.lib-button-reset();
7087
}
7188

7289
> .action {
90+
line-height: 35px;
91+
text-align: center;
92+
width: 35px;
93+
7394
&:extend(.abs-actions-addto-gridlist all);
7495
&:before {
7596
margin: 0;
@@ -80,6 +101,10 @@
80101
}
81102
}
82103
}
104+
105+
.actions-primary {
106+
display: inline-block;
107+
}
83108
}
84109

85110
&-description {
@@ -191,19 +216,6 @@
191216
}
192217
}
193218

194-
.column.main {
195-
.product {
196-
&-items {
197-
margin-left: -@indent__base;
198-
}
199-
200-
&-item {
201-
padding-left: @indent__base;
202-
}
203-
}
204-
205-
}
206-
207219
.price-container {
208220
.price {
209221
.lib-font-size(14);
@@ -302,18 +314,10 @@
302314
}
303315

304316
.actions-primary + .actions-secondary {
305-
display: table-cell;
306-
padding-left: 5px;
307-
white-space: nowrap;
308-
width: 50%;
309317
> * {
310318
white-space: normal;
311319
}
312320
}
313-
314-
.actions-primary {
315-
display: table-cell;
316-
}
317321
}
318322
}
319323
}
@@ -329,7 +333,13 @@
329333
.page-products.page-layout-3columns {
330334
.products-grid {
331335
.product-item {
332-
width: 100%/3;
336+
margin-left: 2%;
337+
padding: 0;
338+
width: calc(~'(100% - 4%) / 3');
339+
340+
&:nth-child(3n + 1) {
341+
margin-left: 0;
342+
}
333343
}
334344
}
335345
}
@@ -343,7 +353,13 @@
343353
.page-products {
344354
.products-grid {
345355
.product-item {
346-
width: 100%/3;
356+
margin-left: 2%;
357+
padding: 0;
358+
width: calc(~'(100% - 4%) / 3');
359+
360+
&:nth-child(3n + 1) {
361+
margin-left: 0;
362+
}
347363
}
348364
}
349365
}
@@ -394,9 +410,13 @@
394410
}
395411

396412
.product-item {
397-
margin-left: calc(~'(100% - 4 * 23.233%) / 3');
413+
margin-left: 2%;
398414
padding: 0;
399-
width: 23.233%;
415+
width: calc(~'(100% - 6%) / 4');
416+
417+
&:nth-child(3n + 1) {
418+
margin-left: 2%;
419+
}
400420

401421
&:nth-child(4n + 1) {
402422
margin-left: 0;

0 commit comments

Comments
 (0)