2
<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
use Magento\Framework\App\Action\Action;

// @codingStandardsIgnoreFile

?><?php
/**
 * Product list template
 *
 * @var $block \Magento\Catalog\Block\Product\ListProduct
 */
?><?php
$_productCollection = $block->getLoadedProductCollection();
$_helper = $this->helper('Magento\Catalog\Helper\Output');
$_aloHelper = $this->helper('Magiccart\Alothemes\Helper\Data');
?><?php if (!$_productCollection->count()): ?>
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div class="message info empty">
        <div>
            <?php /* @escapeNotVerified */ echo __('We can\'t find products matching the selection.') ?>
        </div>
    </div><?php else: ?>
    <div class="toolbar-top">
        <?php echo $block->getToolbarHtml() ?>
    </div><?php echo $block->getAdditionalHtml() ?><?php
        if ($block->getMode() == 'grid') {
            $viewMode = 'grid';
            $image = 'category_page_grid';
            $showDescription = true;
            $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;

            echo $_aloHelper->getGridStyle('.product-items .product-item'); // Config Product Grid
        } else {
            $viewMode = 'list';
            $image = 'category_page_list';
            $showDescription = true;
            $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::FULL_VIEW;
        }
        /**
         * Position for actions regarding image size changing in vde if needed
         */
        $pos = $block->getPositioned();
        ?>
    <div class="products wrapper <?php /* @escapeNotVerified */ echo $viewMode; ?> products-<?php echo $viewMode; ?> category-product-<?php echo $viewMode; ?>">
        <?php $iterator = 1; ?>
        <ol class="products list items product-items">
            <?php /** @var $_product \Magento\Catalog\Model\Product */ ?><?php foreach ($_productCollection as $_product): ?><?php /* @escapeNotVerified */ echo($iterator++ == 1) ? '<li class="item product product-item">' : '</li><li class="item product product-item">' ?><!-- mode view grid -->
            <?php if ($viewMode == 'grid'):?>
            <li style="list-style: none; display: inline">
                <div class="product-item-info" data-container="product-grid">
                    <div class="images-container">
                        <?php
                                                        $_productNameStripped = $block->stripTags($_product->getName(), null, true);
                                                    ?>
                        <h2 class="product-name product-item-name"><a class="product-item-link" href="%3C?php%20/*%20@escapeNotVerified%20*/%20echo%20$_product-%3EgetProductUrl()%20?%3E"><?php /* @escapeNotVerified */ echo $_helper->productAttribute($_product, $_product->getName(), 'name'); ?></a></h2>
                        <div class="product-hover">
                            <?php
                                                        $productImage = $block->getImage($_product, $image);
                                                        if ($pos != null) {
                                                            $position = ' style="left:' . $productImage->getWidth() . 'px;'
                                                                . 'top:' . $productImage->getHeight() . 'px;"';
                                                        }
                                                        ?><?php // Product Image ?><?php echo $_aloHelper->getLabels($_product); ?> <a class="product photo product-item-photo" href="%3C?php%20/*%20@escapeNotVerified%20*/%20echo%20$_product-%3EgetProductUrl()%20?%3E" tabindex="-1"><?php echo $productImage->toHtml(); ?></a>
                        </div>
                        <div class="hover-box">
                            <div class="rating">
                                <?php echo $block->getReviewsSummaryHtml($_product, $templateType); ?>
                            </div><?php if ($showDescription):?>
                            <div class="short-desc">
                                <div class="product description product-item-description">
                                    <?php /* @escapeNotVerified */ echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?><!--<a href="<?php /* @escapeNotVerified */ //echo $_product->getProductUrl() ?>" title="<?php /* @escapeNotVerified */ //echo $_productNameStripped ?>"
                                           class="action more"><?php /* @escapeNotVerified */ //echo __('Learn More') ?></a>-->
                                </div>
                            </div><?php endif; ?>
                            <div class="sku">
                                <label><?php /* @escapeNotVerified */ echo __('Sku:') ?></label> <?php echo $_helper->productAttribute($_product, $_product->getSku(), 'sku') ?>
                            </div>
                            <div class="product details product-item-details">
                                <?php echo $block->getProductDetailsHtml($_product); ?>
                                <div class="product actions product-item-actions">
                                    <?php /* @escapeNotVerified */ echo $block->getProductPrice($_product) ?>
                                    <div class="actions-primary">
                                        <?php if ($_product->isSaleable()): ?><?php $postParams = $block->getAddToCartPostParams($_product); ?>
                                        <form action="%3C?php%20/*%20@escapeNotVerified%20*/%20echo%20$postParams['action'];%20?%3E" data-role="tocart-form" method="post">
                                            <input name="product" type="hidden" value="<?php /* @escapeNotVerified */ echo $postParams['data']['product']; ?>"> <input name="<?php /* @escapeNotVerified */ echo Action::PARAM_NAME_URL_ENCODED; ?>" type="hidden" value="<?php /* @escapeNotVerified */ echo $postParams['data'][Action::PARAM_NAME_URL_ENCODED]; ?>"> <?php echo $block->getBlockHtml('formkey')?> <button class="action button tocart primary" title="<?php echo $block->escapeHtml(__('Add to Cart')); ?>" type="submit"><i class="icon icon-add-to-cart"></i> <span><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span></button>
                                        </form><?php else: ?><?php if ($_product->getIsSalable()): ?>
                                        <div class="stock available">
                                            <span><?php /* @escapeNotVerified */ echo __('In stock') ?></span>
                                        </div><?php else: ?>
                                        <div class="stock unavailable">
                                            <span><?php /* @escapeNotVerified */ echo __('Out of stock') ?></span>
                                        </div><?php endif; ?><?php endif; ?>
                                    </div>
                                    <div class="actions-secondary add-to-links" data-role="add-to-links">
                                        <?php if ($this->helper('Magento\Wishlist\Helper\Data')->isAllow()): ?> <a aria-label="<?php echo $block->escapeHtml(__('Add to Wish List')); ?>" class="action towishlist" data-action="add-to-wishlist" data-post='<?php /* @escapeNotVerified */ echo $block->getAddToWishlistParams($_product); ?>' href="#" role="button" title="<?php echo $block->escapeHtml(__('Add to Wish List')); ?>"><i class="icon icon-favorites"></i><?php /* @escapeNotVerified */ echo __('Wishlist') ?></a> <?php endif; ?> <?php
                                                                                $compareHelper = $this->helper('Magento\Catalog\Helper\Product\Compare');
                                                                                ?> <a aria-label="<?php echo $block->escapeHtml(__('Add to Compare')); ?>" class="action tocompare" data-post='<?php /* @escapeNotVerified */ echo $compareHelper->getPostDataParams($_product); ?>' href="#" role="button" title="<?php echo $block->escapeHtml(__('Add to Compare')); ?>"><i class="icon icon-compare"></i><?php /* @escapeNotVerified */ echo __('Compare') ?></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><?php endif; ?><!-- mode view list -->
                <?php if ($viewMode == 'list'):?>
                <div class="product-item-info" data-container="product-grid">
                    <?php
                                        $productImage = $block->getImage($_product, $image);
                                        if ($pos != null) {
                                            $position = ' style="left:' . $productImage->getWidth() . 'px;'
                                                . 'top:' . $productImage->getHeight() . 'px;"';
                                        }
                                        ?><?php // Product Image ?>
                    <div class="images-container">
                        <div class="product-hover">
                            <?php echo $_aloHelper->getLabels($_product); ?> <a class="product photo product-item-photo" href="%3C?php%20echo%20$_product-%3EgetProductUrl()%20?%3E" tabindex="-1"><?php echo $productImage->toHtml(); ?></a>
                        </div>
                        <div class="hover-box">
                            <?php
                                                            $_productNameStripped = $block->stripTags($_product->getName(), null, true);
                                                        ?>
                            <h2 class="product-name product-item-name"><a class="product-item-link" href="%3C?php%20echo%20$_product-%3EgetProductUrl()%20?%3E"><?php  echo $_helper->productAttribute($_product, $_product->getName(), 'name'); ?></a></h2>
                            <div class="rating">
                                <?php echo $block->getReviewsSummaryHtml($_product, $templateType); ?>
                            </div>
                            <div class="product product-swatch details product-item-details">
                                <?php echo $block->getProductDetailsHtml($_product); ?><?php echo $block->getProductPrice($_product) ?>
                            </div><?php if ($showDescription):?>
                            <div class="short-desc">
                                <div class="product description product-item-description">
                                    <?php echo $_helper->productAttribute($_product, $_product->getShortDescription(), 'short_description') ?><a class="action more" href="%3C?php%20echo%20$_product-%3EgetProductUrl()%20?%3E" title="<?php echo $_productNameStripped ?>"><?php  echo __('Learn More') ?></a>
                                </div>
                            </div><?php endif; ?>
                        </div>
                        <div class="product details product-item-details products-textlink">
                            <?php //echo $block->getProductDetailsHtml($_product); ?>
                            <div class="product actions product-item-actions">
                                <?php if ($_product->getIsSalable()): ?>
                                <div class="stock available">
                                    <label><?php /* @escapeNotVerified */ echo __('Availability:') ?></label> <span><?php /* @escapeNotVerified */ echo __('In stock') ?></span>
                                </div><?php else: ?>
                                <div class="stock unavailable">
                                    <label><?php /* @escapeNotVerified */ echo __('Availability:') ?></label> <span><?php /* @escapeNotVerified */ echo __('Out of stock') ?></span>
                                </div><?php endif; ?><?php  echo $block->getProductPrice($_product) ?>
                                <div class="actions-primary">
                                    <?php if ($_product->isSaleable()): ?><?php $postParams = $block->getAddToCartPostParams($_product); ?>
                                    <form action="%3C?php%20echo%20$postParams['action'];%20?%3E" data-role="tocart-form" method="post">
                                        <input name="product" type="hidden" value="<?php echo $postParams['data']['product']; ?>"> <input name="<?php echo Action::PARAM_NAME_URL_ENCODED; ?>" type="hidden" value="<?php echo $postParams['data'][Action::PARAM_NAME_URL_ENCODED]; ?>"> <?php echo $block->getBlockHtml('formkey')?> <button class="action button tocart primary" title="<?php echo $block->escapeHtml(__('Add to Cart')); ?>" type="submit"><!-- <span> -->
                                         <i class="icon icon-add-to-cart"></i> <span><?php echo __('Add to Cart') ?></span> <!-- </span> --></button>
                                    </form><?php else: ?><?php if ($_product->getIsSalable()): ?>
                                    <div class="stock available">
                                        <span><?php /* @escapeNotVerified */ echo __('In stock') ?></span>
                                    </div><?php else: ?>
                                    <div class="stock unavailable">
                                        <span><?php /* @escapeNotVerified */ echo __('Out of stock') ?></span>
                                    </div><?php endif; ?><?php endif; ?>
                                </div>
                                <div class="actions-secondary add-to-links" data-role="add-to-links">
                                    <?php if ($this->helper('Magento\Wishlist\Helper\Data')->isAllow()): ?> <a aria-label="<?php echo $block->escapeHtml(__('Add to Wish List')); ?>" class="action towishlist" data-action="add-to-wishlist" data-post='<?php /* @escapeNotVerified */ echo $block->getAddToWishlistParams($_product); ?>' href="#" role="button" title="<?php echo $block->escapeHtml(__('Add to Wish List')); ?>"><i class="icon icon-favorites"></i><?php echo __('Wishlist') ?></a> <?php endif; ?> <?php
                                                                        $compareHelper = $this->helper('Magento\Catalog\Helper\Product\Compare');
                                                                        ?> <a aria-label="<?php echo $block->escapeHtml(__('Add to Compare')); ?>" class="action tocompare" data-post='<?php /* @escapeNotVerified */ echo $compareHelper->getPostDataParams($_product); ?>' href="#" role="button" title="<?php echo $block->escapeHtml(__('Add to Compare')); ?>"><i class="icon icon-compare"></i><?php echo __('Compare') ?></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><?php endif; ?><?php echo($iterator == count($_productCollection)+1) ? '</li>' : '' ?><?php endforeach; ?>
            </li>
        </ol>
    </div>
    <div class="toolbar-bottom toolbar-view-<?php echo $viewMode;?>">
        <?php echo $block->getToolbarHtml() ?>
    </div><?php if (!$block->isRedirectToCartEnabled()) : ?>
    <script type="text/x-magento-init">
           {
               "[data-role=tocart-form], .form.map.checkout": {
                   "catalogAddToCart": {}
               }
           }
    </script> <?php endif; ?> <?php endif; ?>
</body>
</html>
  • I saw that you had a comment that you tried to get through. You should be able to edit your original post will more information and i will try and help out. If you are using this theme (alothemes.com/demo/electro/index.php/cameras/cameras/…) the code i provided will work for you. If you need more help getting the .less working, there are a ton of post around about that. – circlesix Nov 17 '16 at 17:32
1

There isn't too much info to go off of here, but if you are using the luma theme, or extending your theme from luma, the rows for the product list view are controlled by the styles, and not in the phtml.

So you need to create a less file (or css if you want to) with this override:

.catalog-category-view,
.catalogsearch-result-index {
    .products-grid {
        .product-item {
            clear: left;
            margin-left: calc(~"(100% - 4 * 24.439%) / 3");
            padding: 0;
            width: 24.439%;

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

This will give you a grid with 5 products per row.

I would recommend that you place with is a media query for desktop use and have different styles for mobile. The final code would look like this:

//
//    Desktop
//--------------------------------------

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .catalog-category-view,
    .catalogsearch-result-index {
        .products-grid {
            .product-item {
                clear: left;
                margin-left: calc(~"(100% - 4 * 24.439%) / 3");
                padding: 0;
                width: 24.439%;

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

//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .catalog-category-view,
    .catalogsearch-result-index {
        .products-grid {
                .product-item {
                    clear: left;
                    padding-left: 20px;
                    width: 33.33333333%;

                    &:nth-child(3n+1) {
                        clear: none;
                        margin-left: 0;
                    }
                }
            }
        }
    }
}
1
  1. Go to your theme's layout folder and open calalog.xml
  2. search for <action method="setColumnCount"><count>4</count></action>set <count>5</count> and save page.
  3. Refresh your browser.

It will work if your template code is not customised.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.