0

I try to override the list.phtml in Magento 2.4 but it's not working. Here is the path to my new file :

app/design/frontend/Magento/timeote/Magento_Catalog/templates/product/list.phtml

All the other phtml that I edit in the same path are working, such as this one :

app/design/frontend/Magento/timeote/Magento_Catalog/templates/product/image_with_borders.phtml

Am I missing something with list.phtml ? Thank you for your answers because I'm stuck with this ...

1
  • Perhaps list.phtml is already being extended by a custom module. – paj Feb 18 at 10:45
0

1)Create a layout file catalog_category_view.xml:

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="category.products.list">
            <action method="setTemplate">
                <argument name="template" xsi:type="string">vendor_module::product/list.phtml</argument>
            </action>
        </referenceBlock>
    </body>
</page>

2)Create templte file:

<?php 
use Magento\Framework\App\Action\Action; 
?>
<?php
$_productCollection = $block->getLoadedProductCollection();
$_helper = $block->getData('outputHelper');
?>
<?php if (!$_productCollection->count()):?>
    <div class="message info empty">
    <div><?= $escaper->escapeHtml(__('We can\'t find products matching the selection.')) ?></div>
    </div>
<?php else:?>
    <?= $block->getToolbarHtml() ?>
    <?= $block->getAdditionalHtml() ?>
    <?php
    if ($block->getMode() == 'grid') {
        $viewMode = 'grid';
        $imageDisplayArea = 'category_page_grid';
        $showDescription = false;
        $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::SHORT_VIEW;
    } else {
        $viewMode = 'list';
        $imageDisplayArea = 'category_page_list';
        $showDescription = true;
        $templateType = \Magento\Catalog\Block\Product\ReviewRendererInterface::FULL_VIEW;
    }
    $pos = $block->getPositioned();
    ?>
    <div class="products wrapper <?= $viewMode ?> products-<?= $viewMode ?>">
        <ol class="products list items product-items">
            <?php /** @var $_product \Magento\Catalog\Model\Product */ ?>
            <script> var obj={};</script>
            <?php foreach ($_productCollection as $_product):?>
            <li class="item product product-item">
                <div class="product-item-info"
                     id="product-item-info_<?= $_product->getId() ?>"
                     data-container="product-<?= $viewMode ?>">
                    <?php
                    $productImage = $block->getImage($_product, $imageDisplayArea);
                    if ($pos != null) {
                        $position = 'left:' . $productImage->getWidth() . 'px;'
                            . 'top:' . $productImage->getHeight() . 'px;';
                    }
                    ?>
                    <a href="<?= $escaper->escapeUrl($_product->getProductUrl()) ?>"
                       class="product photo product-item-photo"
                       tabindex="-1">
                        <?= $productImage->toHtml() ?>
                    </a>
                    <div class="product details product-item-details">
                        <?php
                            $_productNameStripped = $block->stripTags($_product->getName(), null, true);
                        ?>
                        <strong class="product name product-item-name">
                            <a class="product-item-link"
                               href="<?= $escaper->escapeUrl($_product->getProductUrl()) ?>">
                                <?= $_helper->productAttribute($_product, $_product->getName(), 'name')?>
                            </a>
                        </strong>
                        <?= $block->getReviewsSummaryHtml($_product, $templateType) ?>
                        <?= $block->getProductPrice($_product) ?>
                        <?php if ($_product->isAvailable()):?>
                            <?= $block->getProductDetailsHtml($_product) ?>
                        <?php endif; ?>
                        <div class="product-item-inner">
                            <div class="product actions product-item-actions">
                            
                                    <script>
                                        id=<?= $id?>;
                                        obj["<?= $id?>"] = 0;
                                    </script>
                                <div class="box-tocart">
                                <div class="field qty">
                                
                                <label class="label" for="<?= $id ?>"><span><?php echo __('Qty') ?></span></label>
                                <div class="control" data-bind="scope: 'qty_change'">
                                <span class="minus"><button type="button" style="background-color:#<?= $helper->buttonColor();?>;color:#<?= $helper->signColor();?>;"
                                onclick="
                                var result = document.getElementById('<?= 'qty_'.$id ?>');
                                var qty = result.value;
                                var custom = [<?php echo $helper->changeQtyStep()[0];?>];
                                var custom1 = <?php echo $helper->changeQtyStep()[1];?>;
                                if (custom1 == 0 || custom1 == '0')
                                {
                                    qty = --qty;
                                    if(qty>=1){
                                    document.getElementById('<?= 'qty_'.$id?>').value = parseInt(qty);
                                    document.getElementById('<?= $id.'_qty'?>').value = parseInt(qty);
                                    }
                                }else if (custom1 == 1 || custom1 == '1')
                                {
                                    qty = parseInt(qty) - parseInt(custom);
                                    if(qty>=parseInt(custom[0])){
                                    document.getElementById('<?= 'qty_'.$id?>').value = parseInt(qty);
                                    document.getElementById('<?= $id.'_qty'?>').value = parseInt(qty);
                                }}
                                else if (custom1 == 2 || custom1 == '2')
                                {
                                    var len=custom.length;
                                    --obj['<?= $id?>'];
                                    var temp=parseInt(qty) - parseInt(custom[obj['<?= $id?>']]);
                                    if(!(temp>=parseInt(custom[0])))
                                    {
                                        document.getElementById('<?= 'qty_'.$id?>').value = parseInt(qty);
                                        document.getElementById('<?= $id.'_qty'?>').value = parseInt(qty);
                                    }
                                    else {
                                        document.getElementById('<?= 'qty_'.$id?>').value = temp;
                                        document.getElementById('<?= $id.'_qty'?>').value = temp;
                                    }
                                }
                                ">-</button>
                                </span>
                                <input 
                                    type="text"
                                    name="qty"
                                    id="<?= 'qty_'.$id ?>"
                                    value="<?php echo $block->getProductDefaultQty() * 1 ?>"
                                    class="input-text qty"
                                    title="<?= __('Qty') ?>"
                                    readOnly/>
                                <span class="plus">
                                <button type="button" style="background-color:#<?= $helper->buttonColor();?>;color:#<?= $helper->signColor();?>;" 
                                onclick="
                                var result = document.getElementById('<?= 'qty_'.$id ?>');
                                var qty = result.value;
                                var stock=<?php echo $helper->stockQty( (int)$childIds, $websiteId )?>;
                                var custom = [<?php echo $helper->changeQtyStep()[0];?>];
                                var custom1 = <?php echo $helper->changeQtyStep()[1];?>;
                                
                                if (custom1 == 0 || custom1 == '0')
                                {
                                    qty = ++qty;
                                    if(!(parseInt(qty)>stock)){
                                    document.getElementById('<?= 'qty_'.$id?>').value = parseInt(qty);
                                    document.getElementById('<?= $id.'_qty'?>').value = parseInt(qty);
                                    }
                                }else if (custom1 == 1 || custom1 == '1')
                                {
                                    qty = parseInt(qty) + parseInt(custom);
                                    if(!(parseInt(qty)>stock)){
                                    document.getElementById('<?= 'qty_'.$id?>').value = parseInt(qty);
                                    document.getElementById('<?= $id.'_qty'?>').value = parseInt(qty);
                                    }
                                }
                                else if (custom1 == 2 || custom1 == '2')
                                {
                                    var len=custom.length;
                                    if (obj['<?= $id?>'] < 0 || obj['<?= $id?>'] < '0' )
                                    {
                                        obj['<?= $id?>'] = 1;
                                    }
                                    var temp = parseInt(qty) + parseInt(custom[obj['<?= $id?>']]);
                                    if(!(parseInt(temp)>stock)){
                                    if (obj['<?= $id?>'] == len )
                                    {
                                        document.getElementById('<?= 'qty_'.$id?>').value = parseInt(qty);
                                        document.getElementById('<?= $id.'_qty'?>').value = parseInt(qty);
                                    }
                                    else {
                                        document.getElementById('<?= 'qty_'.$id?>').value = temp;
                                        document.getElementById('<?= $id.'_qty'?>').value = temp;
                                        ++obj['<?= $id?>'];
                                    }
                                }}
                                ">+</button></span>
                                </div>
                                </div>
                                </div>
                                <div class="actions-primary">
                                    <?php if ($_product->isSaleable()):?>
                                        <?php $postParams = $block->getAddToCartPostParams($_product); ?>
                                        <?php $id = $_product->getId(); ?>
                                        <form data-role="tocart-form"
                                              data-product-sku="<?= $escaper->escapeHtml($_product->getSku()) ?>"
                                              action="<?= $escaper->escapeUrl($postParams['action']) ?>"
                                              method="post">
                                            <input type="hidden"
                                                   name="product"
                                                   value="<?= $postParams['data']['product'] ?>"
                                                   >
                                            <input type="hidden"
                                                   id="<?= $id.'_qty'?>"
                                                   name="qty"
                                                   value="qty"
                                                   >
                                            <input type="hidden"
                                                   name="<?= Action::PARAM_NAME_URL_ENCODED ?>"
                                                   value="<?=
                                                   $postParams['data'][Action::PARAM_NAME_URL_ENCODED] ?>"
                                                    >
                                            <?= $block->getBlockHtml('formkey') ?>
                                            <button type="submit"
                                                    title="<?= $escaper->escapeHtmlAttr(__('Add to Cart')) ?>"
                                                    class="action tocart primary">
                                                <span><?= $escaper->escapeHtml(__('Add to Cart')) ?></span>
                                            </button>
                                        </form>
                                    <?php else:?>
                                        <?php if ($_product->isAvailable()):?>
                                            <div class="stock available">
                                                <span><?= $escaper->escapeHtml(__('In stock')) ?></span></div>
                                        <?php else:?>
                                            <div class="stock unavailable">
                                                <span><?= $escaper->escapeHtml(__('Out of stock')) ?></span></div>
                                        <?php endif; ?>
                                    <?php endif; ?>
                                </div>
                                <?= strpos($pos, $viewMode . '-primary') ?
                                    $secureRenderer->renderStyleAsTag(
                                        $position,
                                        'product-item-info_' . $_product->getId() . ' div.actions-primary'
                                    ) : '' ?>
                                <div data-role="add-to-links" class="actions-secondary">
                                    <?php if ($addToBlock = $block->getChildBlock('addto')):?>
                                        <?= $addToBlock->setProduct($_product)->getChildHtml() ?>
                                    <?php endif; ?>
                                </div>
                                <?= strpos($pos, $viewMode . '-secondary') ?
                                    $secureRenderer->renderStyleAsTag(
                                        $position,
                                        'product-item-info_' . $_product->getId() . ' div.actions-secondary'
                                    ) : '' ?>
                            </div>
                            <?php if ($showDescription):?>
                                <div class="product description product-item-description">
                                    <?= $_helper->productAttribute(
                                        $_product,
                                        $_product->getShortDescription(),
                                        'short_description'
                                    ) ?>
                                    <a href="<?= $escaper->escapeUrl($_product->getProductUrl()) ?>"
                                       title="<?= $_productNameStripped ?>"
                                       class="action more"><?= $escaper->escapeHtml(__('Learn More')) ?></a>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
                <?= strpos($pos, $viewMode . '-actions') ?
                $secureRenderer->renderStyleAsTag(
                    $position,
                    'product-item-info_' . $_product->getId() . ' div.product-item-actions'
                ) : '' ?>
            </li>
            <?php endforeach; ?>
            <!-- <script>
            obj['2'] = 10;
            alert(obj['2']);
            console.log(obj);
            </script> -->
        </ol>
    </div>
    <?= $block->getToolbarHtml() ?>
    <?php if (!$block->isRedirectToCartEnabled()):?>
        <script type="text/x-magento-init">
        {
            "[data-role=tocart-form], .form.map.checkout": {
                "catalogAddToCart": {
                    "product_sku": "<?= $escaper->escapeJs($_product->getSku()) ?>"
                }
            }
        }
        </script>
        <?php endif; ?>    
<?php endif; ?>
0

Try the below code.

  1. Override file in your theme

app/design/frontend/vendor_namespace/theme_name/Magento_Catalog/templates/product/list.phtml

  1. using setTemplate method in your catalog_category_view.xml

     <?xml version="1.0"?><page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
     <body>
         <referenceBlock name="category.products.list">
             <action method="setTemplate">
                 <argument name="template" xsi:type="string">vendor_module::product/list.phtml</argument>
             </action>
         </referenceBlock
     ></body>
    

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.