Własny widget grid w Magento 1.x

Jeśli potrzebujesz szybko i czytelnie wyświetlić dane w panelu administratora Magento, z pomocą przychodzi widget grid! Zaprezentuję krok po kroku proces implementacji tego rozwiązania, które nie tylko idealnie nadaje się do wyświetlania danych, ale również do ich zarządzania (dodawanie/usuwanie/edycja).

Artykuł podzieliłem na części:

• Deklaracja modułu;
• Dodanie odnośnika (tab) w panelu admina;
• Przygotowanie akcji kontrolera;
• Przygotowanie pliku xml widoku;
• Blok widget container;
• Blok widget grid;

Deklaracja modułu

app\etc\modules\Xcoding_Grid.xml

<?xml version="1.0"?>
    <!--
      ~    @category  Xcoding_Grid
      ~    @package   Xcoding_Grid
      ~    @author    X-Coding IT Studio (http://www.x-coding.pl/)
      -->
    <config>
        <modules>
            <Xcoding_Grid>
                <active>true</active>
                <codePool>local</codePool>
            </Xcoding_Grid>
        </modules>
    </config>

Dodanie odnośnika w panelu admina

app\code\local\Xcoding\Grid\etc\adminhtml.xml

<!--
  ~    @category  Xcoding_Grid
  ~    @package   Xcoding_Grid
  ~    @author    X-Coding IT Studio (http://www.x-coding.pl/)
  -->
    <config>
        <menu>
            <xcoding_grid module="xcoding_grid" translate="title">
                <title>Testowy grid magento</title>
                <sort_order>999</sort_order>
                <action>adminhtml/mygrid/index</action>
            </xcoding_grid>
        </menu>
        <acl>
            <resources>
                <!-- prawa dostępu -->
                <all>
                    <title>Allow Everything</title>
                </all>
                <admin>
                    <children>
                        <xcoding_grid translate="title" module="xcoding_grid">
                            <title>Widok testowego grida</title>
                            <sort_order>1</sort_order>
                        </xcoding_grid>
                    </children>
                </admin>
            </resources>
        </acl>
    </config>

app\code\local\Xcoding\Grid\etc\config.xml

<?xml version="1.0"?>

    <!--
      ~    @category  Xcoding_Grid
      ~    @package   Xcoding_Grid
      ~    @author    X-Coding IT Studio (http://www.x-coding.pl/)
      -->

    <config>
        <modules>
            <Xcoding_Grid>
                <version>0.0.1</version>
            </Xcoding_Grid>
        </modules>
        <global>
            <blocks>
                <!-- deklaracja bloku -->
                <xcoding_grid>
                    <class>Xcoding_Grid_Block</class>
                </xcoding_grid>
            </blocks>
            <helpers>
                <!-- deklaracja helpera -->
                <xcoding_grid>
                    <class>Xcoding_Grid_Helper</class>
                </xcoding_grid>
            </helpers>
        </global>
        <admin>
            <routers>
                <!-- deklaracja controllera admina korzystającego z adminhtml -->
                <adminhtml>
                    <args>
                        <modules>
                            <xcoding_grid before="Mage_Adminhtml">Xcoding_Grid_Adminhtml</xcoding_grid>
                        </modules>
                    </args>
                </adminhtml>
            </routers>
        </admin>
        <adminhtml>
            <layout>
                <updates>
                    <!-- deklaracja widoku admina xml -->
                    <xcoding_reports>
                        <file>xcoding/grid.xml</file>
                    </xcoding_reports>
                </updates>
            </layout>
        </adminhtml>
    </config>

Przy takiej konfiguracji można utworzyć rolę użytkownika z dostępem tylko do tego wybranego widoku.

Takiego efektu powinieneś się spodziewać

Przygotowanie akcji kontrolera

app\code\local\Xcoding\Grid\controllers\Adminhtml\MygridController.php

<?php
    /**
     *    @category  Xcoding_Grid
     *    @package   Xcoding_Grid
     *    @author    X-Coding IT Studio (http://www.x-coding.pl/)
     */

    class Xcoding_Grid_Adminhtml_MygridController extends Mage_Adminhtml_Controller_Action
    {
        /**
         * index/default action
         */
        public function indexAction()
        {
            $this->loadLayout();
            $this->renderLayout();
        }

        /**
         * ajax grid action
         */
        public function gridAction()
        {
            $this->loadLayout(false);
            $this->renderLayout();
        }

        /**
         * Check current user permission on resource and privilege
         *
         * @return  boolean
         */
        public function _isAllowed()
        {
            return Mage::getSingleton('admin/session')->isAllowed('xcoding_grid');
        }
    }

Przygotowanie widoku pliku XML

app\design\adminhtml\default\default\layout\xcoding\grid.xml

<?xml version="1.0"?>
    <!--
      ~    @category  Xcoding_Grid
      ~    @package   Xcoding_Grid
      ~    @author    X-Coding IT Studio (http://www.x-coding.pl/)
      -->
    <layout>
        <adminhtml_mygrid_index>
            <reference name="content">
                <block type="xcoding_grid/adminhtml_test" name="test.container" />
            </reference>
        </adminhtml_mygrid_index>

        <adminhtml_mygrid_grid>
            <!-- przeładowanie form key -->
            <update handle="formkey" />
            <block type="xcoding_grid/adminhtml_mygrid_grid" name="adminhtml_mygrid.grid" output="toHtml" />
        </adminhtml_mygrid_grid>
    </layout>

Blok widget container

app\code\local\Xcoding\Grid\Block\Adminhtml\Test.php

<?php
    /**
     *    @category  Xcoding_Grid
     *    @package   Xcoding_Grid
     *    @author    X-Coding IT Studio (http://www.x-coding.pl/)
     */
    class Xcoding_Grid_Block_Adminhtml_Test extends Mage_Adminhtml_Block_Widget_Grid_Container
    {
        /** @var string */
        protected $_blockGroup = 'xcoding_grid';

        /**
         * constructor.
         */
        public function __construct()
        {
            $this->_controller = 'adminhtml_mygrid';
            $this->_headerText = $this->__('Testowy grid');
            parent::__construct();
            $this->_removeButton('add');
        }
    }

Blok widget grid

app\code\local\Xcoding\Grid\Block\Adminhtml\Mygrid\Grid.php

<?php
    /**
     *    @category  Xcoding_Grid
     *    @package   Xcoding_Grid
     *    @author    X-Coding IT Studio (http://www.x-coding.pl/)
     */
    class Xcoding_Grid_Block_Adminhtml_Mygrid_Grid extends Mage_Adminhtml_Block_Widget_Grid
    {
        /**
         * constructor.
         */
        public function __construct()
        {
            parent::__construct();
            // ustawiamy unikalne ID grida
            $this->setId('xcoding_grid');
            // ustawiamy domyslne sortowanie podając jako parametr nazwę kolumny (z metody _prepareColumns)
            $this->setDefaultSort('ID');
            // ustawiamy domyślne sortowanie
            $this->setDefaultDir('DESC');
            $this->setSaveParametersInSession(true);
            $this->setUseAjax(true);
        }

        /**
         * prepare collection
         *
         * @return $this
         */
        protected function _prepareCollection()
        {
            // w tej metodzie tworzymy i przypisujemy kolekcję, którą chcemy obsłużyć
            /** @var Mage_Catalog_Model_Resource_Product_Collection $collection */
            $collection = Mage::getResourceModel('catalog/product_collection');
            $collection->addAttributeToSelect('name');
            $this->setCollection($collection);

            return parent::_prepareCollection();
        }

        /**
         * prepare columns grid
         *
         * @return $this
         * @throws Exception
         */
        protected function _prepareColumns()
        {
            // dodajemy kolumnę ( Mage_Adminhtml_Block_Widget_Grid_Column )
            $this->addColumn('ID', array(
                'header'    => $this->__('ID'),
                'type' => 'number',    // typ danych
                'index' => 'entity_id' // nazwa pola z kolekcji - taka wartość odczytywana jest jako main_table.entity_id
            ));

            $this->addColumn('SKU', array(
                'header'    => $this->__('SKU'),
                'type' => 'text',
                'index' => 'sku'
            ));

            $this->addColumn('Name', array(
                'header'    => $this->__('Name'),
                'type' => 'text',
                'index' => 'name'
            ));

            return parent::_prepareColumns();
        }

        /**
         * get row url
         *
         * @param $item
         * @return string
         *
         */
        public function getRowUrl($item)
        {
            return $this->getUrl('*/catalog_product/edit', array('id' => $item->getId()));
        }

        /**
         * get grid url
         *
         * @return string
         */
        public function getGridUrl()
        {
            return $this->getUrl('*/*/grid', array('_current' => true));
        }
    }

Efekt końcowy

Tym szybkim sposobem otrzymaliśmy dynamiczny widok produktów. W razie potrzeby w każdym momencie w równie łatwy sposób dodając zaledwie kilka linii kodu możemy rozbudować nasz widok o kolejne funkcjonalności i kolumny do prezentacji danych.

Świetnie Ci poszło!