As i'm new to module development within Magento this is propably going to be a stupid question.

But i'm trying to add a quantity selector to each product on the catalog pages. So customers can select how much they want to order and then add it to the cart.

I don't have much and its already breaking my website :


<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
    <event name="catalog_product_collection_load_after">
        <observer name="Designit_QuickQuantity_Quantity" instance="Designit\QuickQuantity\Observer\AddQuantityToCollectionObserver"/>



namespace Designit\QuickQuantity\Observer;

class AddQuantityToCollectionObserver implements ObserverInterface
     * Add information about product Quantity to collection
     * Used for product collection after load
     * @param EventObserver $observer
     * @return void
    public function execute(EventObserver $observer)

I bought a module to see how they were doing it (i want to code it myself to learn from it) but even with that code i'm just not getting it.

They don't even use events or observers.

  • Also note that i am trying to learn to develop within Magento. I do not search for modules to buy or anything – CompactCode May 17 '17 at 15:27

Yet again i will post my own answer.

The correct way to overwrite a front end block from a module is like this :

Step 1

Search for the corresponding file that is outputting that block. You are searching for an XML file. Mine is within vendor/magento/module-catalog/view/layout/catalog_category_view.xml

There i see the block responsible for showing the list :

<block class="Magento\Catalog\Block\Product\ListProduct" name="category.products.list" as="product_list" template="Magento_Catalog::product/list.phtml">

Remember the name

Step 2

Now make the next folder and fille under your module :


-> Use frontend/ for frontend and adminhtml/ for backend

-> the name of the xml is the same as the one you found with the information in it

Step 3

use this code within it :

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

-> the <page...> is the same as in the xml you found in step 1

-> the Reference block name is the same as the block name you found in step 1. It tells Magento which one to adjust

-> is necessary because if you use it will not overwrite blocks that have "template = ..."


-> xsi:type=string lets magento know you are going to replace the string of the template

-> Ive encountered Module/Name instead of Module_Name and its Module_name

-> If your phtml that you want to use instead is within a certain folder within the templates folder (so i have templates/product). Be sure to mention the "product/"

Step 4

Create the folder and file you just defined within your XML fille. So i have Designit/QuickQuantity/view/frontend/templates/product/list.phtml

You defined a template so use the templates folder within your frontend folder (because you want to adjust the front end)

You can write your own list.phtml now or just copy/paste it from the Magento vendor or your theme and it will load in.

Additional step

To make sure that everything loads as last you can add this to your module.xml :

        <module name="Magento_Catalog"/>

Like so :

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    <module name="Designit_QuickQuantity" setup_version="1.0.0">
        <module name="Magento_Catalog"/>

Be sure its within your <module></module>

So overall its very logical once you get it. You can also replace blocks , delete blocks and more doing it like this. More information you can find on the magento development page :

Link to magento block references

The code for adding qty field on product page :

                                        <form data-role="tocart-form" 

action="<?php /* @escapeNotVerified */ echo $postParams['action']; ?>" method="post">
                                                <input type="number" name="qty" id="qty" maxlength="12" value="<?php /* @escapeNotVerified */ echo '1' ?>" title="<?php /* @escapeNotVerified */ echo __('Qty') ?>" class="redtext input-text qty" />
                                                <input type="hidden" name="product" value="<?php /* @escapeNotVerified */ echo $postParams['data']['product']; ?>">
                                                <input type="hidden" name="<?php /* @escapeNotVerified */ echo Action::PARAM_NAME_URL_ENCODED; ?>" value="<?php /* @escapeNotVerified */ echo $postParams['data'][Action::PARAM_NAME_URL_ENCODED]; ?>">
                                                <?php echo $block->getBlockHtml('formkey')?>
                                                <button type="submit"
                                                        title="<?php echo $block->escapeHtml(__('Add to Cart')); ?>"
                                                        class="action tocart btn btn-primary btn-cart">
                                                    <i class="meigee-fa-shopping-cart"></i>
                                                    <span><?php /* @escapeNotVerified */ echo __('Add to Cart') ?></span>

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.