Magento 2 – How to Add Block into PHTML File

blocksmagento2

I'm using Magento 2 and I want to add block to all my category pages , by directly writing it into the code in the app/design/frontend/Venustheme/yume/Magento_Catalog/templates/product/list.phtml page , there is any way to call the block there, and not through the admin panel?

Best Answer

In your theme folder, add a Magento_Catalog/layout/catalog_category_view.xml layout file. Load your block into the parent block with the following:

<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">
            <block name="your.cms.block" as="something" class="Magento\Cms\Block\Block">
                <arguments>
                    <argument name="block_id" xsi:type="string">[put your block ID here]</argument>
                </arguments>
            </block>
        </referenceBlock>
    </body>
</page>

In your list.phtml simply call <?php echo $block->getChildHtml('something') ?>. Of course you should name your blocks differently, but I hope you got the general idea.

Related Solutions

Magento 2 – How to Include JS on Product Page

For example, We have our folder structure of current theme:

We should focus four files:

Magento_Catalog/layout/catalog_product_view.xml Magento_Catalog/templates/product/js.phtml

Add new template to call our jQuery plugin. That helps us to include our js on product detail page only.

Layout

#app/design/frontend/Boolfly/yume/Magento_Catalog/layout/catalog_product_view.xml

<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\Template"
               name="custom.js" as="custom.js" template="Magento_Catalog::product/js.phtml"/>
    </referenceContainer>
</page>

Template:

#app/design/frontend/Boolfly/yume/Magento_Catalog/templates/product/js.phtml

    <script>// <![CDATA[
        require([
            'jquery',
            'hello'
        ], function ($) {
            $('.product-info-main').HelloWorld();
        });
        // ]]>
    </script>

app/design/frontend/Boolfly/yume/web/js/custom.js

We can create our own custom jQuery plugin.

define('jquery', function($) {

    $.fn.HelloWorld = function() {
        alert('Here');
    }

    }(jQuery)
);

app/design/frontend/Boolfly/yume/requirejs-config.js

Create a RequireJS configuration file.

var config = {
    map: {
        '*' : {
            'hello' : 'js/custom'
        }
    }
};

Clear Magento Cache and run static content deploy:

php bin/magento setup:static-content:deploy
php bin/magento cache:clean

We can read more here how to create custom Javascript: http://devdocs.magento.com/guides/v2.0/javascript-dev-guide/javascript/custom_js.html

Magento – Problem overrding .phtml file: Magento 2 Catalog module

It seems you have to set pager and sorting in your custom phtml file.

I have followed below steps pr add pagination and sorting.

In your block file add below code for add pagination:

public function __construct(
    \Magento\Catalog\Block\Product\Context $context,
    \Magento\Catalog\Model\ProductFactory $productFactory,
    \Magento\Framework\Url\Helper\Data $urlHelper,
    array $data = []
) {
    $this->_productFactory = $productFactory;
    $this->urlHelper = $urlHelper;
    parent::__construct($context, $data);

    // Get your custom collection here

    $collection = $this->getCustomCollection();

    $this->setCollection($collection);
}

public function _prepareLayout()
{

    parent::_prepareLayout();
    if ($this->getCollection()) {

        // create pager block for collection 

        $toolbar = $this->getToolbarBlock();

        $pager = $this->getLayout()->createBlock(
            'Magento\Theme\Block\Html\Pager', 'list.pager'
        )->setCollection(
            $this->getCollection() // assign collection to pager
        );
        $toolbar->setChild('product_list_toolbar_pager', $pager); // set pager block in layout
        // called prepare sortable parameters
        $collection = $this->getCollection();

        // use sortable parameters
        $orders = $this->getAvailableOrders();

        if ($orders) {
            $toolbar->setAvailableOrders($orders);
        }
        $sort = $this->getSortBy();
        if ($sort) {
            $toolbar->setDefaultOrder($sort);
        }
        $dir = $this->getDefaultDirection();
        if ($dir) {
            $toolbar->setDefaultDirection($dir);
        }
        $modes = $this->getModes();
        if ($modes) {
            $toolbar->setModes($modes);
        }
        $toolbar->setCollection($collection);

        $this->setChild('toolbar', $toolbar);
        $this->getCollection()->load();
    }

    return $this;
}

public function getToolbarHtml()
{
    return $this->getChildHtml('toolbar');
}

public function getToolbarBlock()
{
    $blockName = $this->getToolbarBlockName();
    if ($blockName) {
        $block = $this->getLayout()->getBlock($blockName);
        if ($block) {
            return $block;
        }
    }
    $block = $this->getLayout()->createBlock($this->_defaultToolbarBlock, uniqid(microtime()));

    return $block;
}

public function getMode()
{
    return $this->getChildBlock('toolbar')->getCurrentMode();
}

Also define below property:

protected $_defaultToolbarBlock = 'Magento\Catalog\Block\Product\ProductList\Toolbar';

In phtml file add below code before and after listing:

<?php echo $block->getToolbarHtml() ?>

Best Answer

Related Solutions

Magento 2 – How to Include JS on Product Page

Magento – Problem overrding .phtml file: Magento 2 Catalog module

Related Topic