Skip to content

Commit

Permalink
Merge pull request #3634 from magento-arcticfoxes/MC-5648
Browse files Browse the repository at this point in the history 
[arcticfoxes] MC-5648: Catalog product list widget Viewport Issues: Add to cart buttons are hidden on mobile & Review Links Clash With Other Elements
  • Loading branch information
@rganin
rganin authored Jan 30, 2019
2 parents beb0274 + 4addde1 commit 2abb4fb
Show file tree
Hide file tree
Showing 4 changed files with 179 additions and 88 deletions.
88 changes: 43 additions & 45 deletions app/code/Magento/CatalogWidget/view/frontend/templates/product/widget/content/grid.phtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
$showWishlist = true;
$showCompare = true;
$showCart = true;
$templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::DEFAULT_VIEW;
$templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
$description = false;
?>
<div class="block widget block-products-list <?= /* @noEscape */ $mode ?>">
Expand Down Expand Up @@ -48,57 +48,55 @@
<?= $block->escapeHtml($_item->getName()) ?>
</a>
</strong>
<?php
echo $block->getProductPriceHtml($_item, $type);
?>

<?php if ($templateType): ?>
<?= $block->getReviewsSummaryHtml($_item, $templateType) ?>
<?php endif; ?>

<?php echo $block->getProductPriceHtml($_item, $type); ?>
<?php if ($showWishlist || $showCompare || $showCart): ?>
<div class="product-item-actions">
<?php if ($showCart): ?>
<div class="actions-primary">
<?php if ($_item->isSaleable()): ?>
<?php if (!$_item->getTypeInstance()->isPossibleBuyFromList($_item)): ?>
<button class="action tocart primary" data-mage-init='{"redirectUrl":{"url":"<?= $block->escapeUrl($block->getAddToCartUrl($_item)) ?>"}}' type="button" title="<?= $block->escapeHtmlAttr(__('Add to Cart')) ?>">
<span><?= $block->escapeHtml(__('Add to Cart')) ?></span>
</button>
<div class="product-item-inner">
<div class="product-item-actions">
<?php if ($showCart): ?>
<div class="actions-primary">
<?php if ($_item->isSaleable()): ?>
<?php if (!$_item->getTypeInstance()->isPossibleBuyFromList($_item)): ?>
<button class="action tocart primary" data-mage-init='{"redirectUrl":{"url":"<?= $block->escapeUrl($block->getAddToCartUrl($_item)) ?>"}}' type="button" title="<?= $block->escapeHtmlAttr(__('Add to Cart')) ?>">
<span><?= $block->escapeHtml(__('Add to Cart')) ?></span>
</button>
<?php else: ?>
<?php
$postDataHelper = $this->helper('Magento\Framework\Data\Helper\PostHelper');
$postData = $postDataHelper->getPostData($block->getAddToCartUrl($_item), ['product' => $_item->getEntityId()])
?>
<button class="action tocart primary" data-post='<?= /* @noEscape */ $postData ?>' type="button" title="<?= $block->escapeHtmlAttr(__('Add to Cart')) ?>">
<span><?= $block->escapeHtml(__('Add to Cart')) ?></span>
</button>
<?php endif; ?>
<?php else: ?>
<?php
$postDataHelper = $this->helper('Magento\Framework\Data\Helper\PostHelper');
$postData = $postDataHelper->getPostData($block->getAddToCartUrl($_item), ['product' => $_item->getEntityId()])
?>
<button class="action tocart primary" data-post='<?= /* @noEscape */ $postData ?>' type="button" title="<?= $block->escapeHtmlAttr(__('Add to Cart')) ?>">
<span><?= $block->escapeHtml(__('Add to Cart')) ?></span>
</button>
<?php if ($_item->getIsSalable()): ?>
<div class="stock available"><span><?= $block->escapeHtml(__('In stock')) ?></span></div>
<?php else: ?>
<div class="stock unavailable"><span><?= $block->escapeHtml(__('Out of stock')) ?></span></div>
<?php endif; ?>
<?php endif; ?>
<?php else: ?>
<?php if ($_item->getIsSalable()): ?>
<div class="stock available"><span><?= $block->escapeHtml(__('In stock')) ?></span></div>
<?php else: ?>
<div class="stock unavailable"><span><?= $block->escapeHtml(__('Out of stock')) ?></span></div>
</div>
<?php endif; ?>
<?php if ($showWishlist || $showCompare): ?>
<div class="actions-secondary" data-role="add-to-links">
<?php if ($this->helper('Magento\Wishlist\Helper\Data')->isAllow() && $showWishlist): ?>
<a href="#"
data-post='<?= /* @noEscape */ $block->getAddToWishlistParams($_item) ?>' class="action towishlist" data-action="add-to-wishlist" title="<?= $block->escapeHtmlAttr(__('Add to Wish List')) ?>">
<span><?= $block->escapeHtml(__('Add to Wish List')) ?></span>
</a>
<?php endif; ?>
<?php if ($block->getAddToCompareUrl() && $showCompare): ?>
<?php $compareHelper = $this->helper('Magento\Catalog\Helper\Product\Compare');?>
<a href="#" class="action tocompare" data-post='<?= /* @noEscape */ $compareHelper->getPostDataParams($_item) ?>' title="<?= $block->escapeHtmlAttr(__('Add to Compare')) ?>">
<span><?= $block->escapeHtml(__('Add to Compare')) ?></span>
</a>
<?php endif; ?>
<?php endif; ?>
</div>
<?php endif; ?>
<?php if ($showWishlist || $showCompare): ?>
<div class="actions-secondary" data-role="add-to-links">
<?php if ($this->helper('Magento\Wishlist\Helper\Data')->isAllow() && $showWishlist): ?>
<a href="#"
data-post='<?= /* @noEscape */ $block->getAddToWishlistParams($_item) ?>' class="action towishlist" data-action="add-to-wishlist" title="<?= $block->escapeHtmlAttr(__('Add to Wish List')) ?>">
<span><?= $block->escapeHtml(__('Add to Wish List')) ?></span>
</a>
<?php endif; ?>
<?php if ($block->getAddToCompareUrl() && $showCompare): ?>
<?php $compareHelper = $this->helper('Magento\Catalog\Helper\Product\Compare');?>
<a href="#" class="action tocompare" data-post='<?= /* @noEscape */ $compareHelper->getPostDataParams($_item) ?>' title="<?= $block->escapeHtmlAttr(__('Add to Compare')) ?>">
<span><?= $block->escapeHtml(__('Add to Compare')) ?></span>
</a>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
<?php endif; ?>
</div>
</div>
<?php endif; ?>
</div>
Expand Down
35 changes: 31 additions & 4 deletions app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/_widgets.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,15 @@
}

.block.widget {
.products-grid .product-item {
margin-left: 2%;
width: calc(~'(100% - 2%)/2');

&:nth-child(2n + 1) {
margin-left: 0;
}
}

.product-item-info {
width: auto;
}
Expand Down Expand Up @@ -60,6 +69,15 @@
.page-layout-3columns .block.widget .products-grid .product-item {
width: 100%/3;
}

.page-layout-1column .block.widget .products-grid .product-item {
margin-left: 2%;
width: calc(~'(100% - 4%)/3');

&:nth-child(3n + 1) {
margin-left: 0;
}
}
}

//
Expand All @@ -82,7 +100,16 @@
}

.page-layout-1column .block.widget .products-grid .product-item {
width: 100%/4;
margin-left: 2%;
width: calc(~'(100% - 6%)/4');

&:nth-child(3n + 1) {
margin-left: 2%;
}

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

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

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

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

&:nth-child(5n + 1) {
Expand Down
72 changes: 46 additions & 26 deletions app/design/frontend/Magento/blank/Magento_Catalog/web/css/source/module/_listings.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,23 @@

.product {
&-items {
font-size: 0;
&:extend(.abs-reset-list all);
}

&-item {
font-size: 1.4rem;
vertical-align: top;

.products-grid & {
display: inline-block;
width: 100%/2;
margin-left: 2%;
padding: 0;
width: calc(~'(100% - 2%) / 2');
}

&:nth-child(2n + 1) {
margin-left: 0;
}

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

&-actions {
font-size: 0;

> * {
font-size: 1.4rem;
}

.actions-secondary {
display: inline-block;
font-size: 1.4rem;
vertical-align: middle;
white-space: nowrap;
> button.action {
.lib-button-reset();
}

> .action {
line-height: 35px;
text-align: center;
width: 35px;

&:extend(.abs-actions-addto-gridlist all);
&:before {
margin: 0;
Expand All @@ -80,6 +101,10 @@
}
}
}

.actions-primary {
display: inline-block;
}
}

&-description {
Expand Down Expand Up @@ -191,19 +216,6 @@
}
}

.column.main {
.product {
&-items {
margin-left: -@indent__base;
}

&-item {
padding-left: @indent__base;
}
}

}

.price-container {
.price {
.lib-font-size(14);
Expand Down Expand Up @@ -302,18 +314,10 @@
}

.actions-primary + .actions-secondary {
display: table-cell;
padding-left: 5px;
white-space: nowrap;
width: 50%;
> * {
white-space: normal;
}
}

.actions-primary {
display: table-cell;
}
}
}
}
Expand All @@ -329,7 +333,13 @@
.page-products.page-layout-3columns {
.products-grid {
.product-item {
width: 100%/3;
margin-left: 2%;
padding: 0;
width: calc(~'(100% - 4%) / 3');

&:nth-child(3n + 1) {
margin-left: 0;
}
}
}
}
Expand All @@ -343,7 +353,13 @@
.page-products {
.products-grid {
.product-item {
width: 100%/3;
margin-left: 2%;
padding: 0;
width: calc(~'(100% - 4%) / 3');

&:nth-child(3n + 1) {
margin-left: 0;
}
}
}
}
Expand Down Expand Up @@ -394,9 +410,13 @@
}

.product-item {
margin-left: calc(~'(100% - 4 * 23.233%) / 3');
margin-left: 2%;
padding: 0;
width: 23.233%;
width: calc(~'(100% - 6%) / 4');

&:nth-child(3n + 1) {
margin-left: 2%;
}

&:nth-child(4n + 1) {
margin-left: 0;
Expand Down
Loading

0 comments on commit 2abb4fb

Please sign in to comment.