Magento2 theme development process step by step

As we know that magento2 had released and first step every developer try to read and search, is, How to implement/create theme in magento2.

In this article I am going to explain step by step process of how to develop theme in magento2 and how to modify/extend magento style sheet or add new custom style (style sheet).

 

How to develop new theme

  1. Create theme directory app/design/frontend/MySite/MyTheme
  2. Create theme.xml file under app/design/frontend/MySite/MyTheme and configure it using following content:
  1. Add registration.php file in theme directory (MyTheme) and content of this would be
  2. Login to admin panel, Go to Store->Configuration->design. Select your theme and save it.
  3. Refresh magento cache, it will work.

 

How to override/modify css file

You can modify the style(css) of your theme by 2 ways. Method 1 – By overriding _theme.less file in your theme. Method 2 – By including custom css file in your theme.

Method 1 – To overriding _theme.less file in your theme, you need to copy _theme.less file of your parent theme. Then add your style or override class/id of style sheet. Path of _theme.less file in your theme should be app/design/frontend/MySite/MyTheme/web/css/source/_theme.less.

Method 2 – Create new custom css file (mystyle.css) in your theme (app/design/frontend/MySite/MyTheme/web/css/mystyle.css). Then to include it in all pages, you need to modify default_head_blocks.xml file of Magento_Theme module. Extend the Magento_Theme module in your theme, and including the required stylesheets in this file. Your custom default_head_blocks.xml file path should be app/design/frontend/MySite/MyTheme/Magento_Theme/layout/default_head_blocks.xml. Content of your default_head_blocks.xml file should be like: –

Note: Clear your magento cache (Flush Magento Cache)

How to create a custom widget in Yii2 Framework

Some time there is a need to reuse your logic and design. So to do this, widget is the best solution. Widgets are reusable building blocks. The main concept and advantage of widgets is that you can build your code once, and reuse it wherever you need it in your view.  Here I am going to describe the steps, how you can create simple MyWidget.

 

Step1

First create a folder named “components” in the project root directory. Create a MyWidget file and class in components folder. Override the int() and run() method of  Widget class as

<?php
namespace app\components;

use yii\base\Widget;
use yii\helpers\Html;

class RecentPostWidget extends Widget{
    public function init(){
            // add your logic here
    }
    public function run(){
            return $this->render(‘myWidget’);
    }
}
?>

Step2

Create a views folder inside components  folder. Create a view file named myWidget.php in components/views folder and put your content in it.

Step3

Call to MyWidget class as

<?php echo \app\components\MyWidget::widget() ?>

 

 

Exmaple: how you can create recent post widget.

Create your RecentPostWidget class in componets folder.

<?php
namespace app\components;
use yii\base\Widget;
use yii\helpers\Html;

class RecentPostWidget extends Widget{
    public $limit=5;
    public $posts;
    public function init(){
            parent::init();
            $this->posts = \app\models\Post::find()->limit($this->limit)->all();
    }
    
    public function run(){
            return $this->render(‘recentPostWidget’,[‘posts’=>$this->posts]);
    }
}
?>

 

Put the content into your recentPostWidget view file under componets/views folder.

<ul>
      <?php foreach ($posts as $postData){ ?>
      <li>
           <?php echo $postData->title; ?>
      </li>
      <?php } ?>
</ul>

 

Final step call to your RecentPostWidget

<?php echo \app\components\RecentPostWidget::widget([‘limit’ => 5]) ?>

 

 

Yii2: How to setup pagination style and other labels

In Yii2 some time we need to setup pagination style according to our need or according to our theme. So setup style of pagination in Yii2 is very easy. Its same as in Yii.

 

<?= ListView::widget([
    ‘dataProvider’ => $dataProvider,
    ‘itemView’ => ‘_view’,
    ‘pager’ => [
        ‘options’=>[‘class’=>’pagination’],   // set clas name used in ui list of pagination
        ‘prevPageLabel’ => ‘Previous’,   // Set the label for the “previous” page button
        ‘nextPageLabel’ => ‘Next’,   // Set the label for the “next” page button
        ‘firstPageLabel’=>’First’,   // Set the label for the “first” page button
        ‘lastPageLabel’=>’Last’,    // Set the label for the “last” page button
        ‘nextPageCssClass’=>’next’,    // Set CSS class for the “next” page button
        ‘prevPageCssClass’=>’prev’,    // Set CSS class for the “previous” page button
        ‘firstPageCssClass’=>’first’,    // Set CSS class for the “first” page button
        ‘lastPageCssClass’=>’last’,    // Set CSS class for the “last” page button
        ‘maxButtonCount’=>10,    // Set maximum number of page buttons that can be displayed
        ],
]); ?>

 

Thats it. You can use pager parameter in ListView and in GridView as well. Now you can write css of paginationClassName according to your requirement.

How to use calendar to filter list data in CGridView

Some time there is need to filter data in CGridView list in Yii framework. So fill date by required format is not a good choice. So use CJuiDatePiker widget of Yii to select date and filter list. So How to add a calendar in filter area, see sample code.

Sample Code

<?php
$this->widget(‘zii.widgets.grid.CGridView’, array(
    ‘id’ => ‘result-grid’,
    ‘dataProvider’ => $model->search(),
    ‘filter’ => $model,
    ‘afterAjaxUpdate’ => ‘reinstallDatePicker’, //call function to reinstall date picker after filter result
    ‘columns’ => array(
        ‘id’,
      ………..
        array(
            ‘name’ => ‘date’,
            ‘value’=>’$data->date’,
            ‘filter’ => $this->widget(‘zii.widgets.jui.CJuiDatePicker’, array(
            ‘model’ => $model,
            ‘attribute’ => ‘date’,
            ‘options’=>array(
            ‘dateFormat’=>’mm/dd/yy’,
            ‘changeYear’=>’true’,
            ‘changeMonth’=>’true’,
            ‘showAnim’ =>’slide’,
            ‘yearRange’=>’2000:’.(date(‘Y’)+1),
            ),
            ‘htmlOptions’=>array(
            ‘id’=>’date’,
            ),

            ),
            true),

            ),
       ………..
    ),
 
));
?>

<?php
/* function to re install date picker after filter the result. if you don’t use it then after filter the result calendar will not shown in filter box */
Yii::app()->clientScript->registerScript(‘re-install-date-picker’, “
function reinstallDatePicker(id, data) {
    jQuery(‘#date’).datepicker({
        changeMonth: true,
        changeYear: true,
    });
}
“);
?>

And result is

How to setup drop down for page size in CGridView in Yii Framework

I needed to create drop down for page size in CGridView. So I decided to share this code with all of you.  Here is the view of drop down in CGridView.

 

So to create drop down as shown above, Below is the code inserted in admin.php where CGridView is used.
code in view/category/admin.php
<?php
$pageSize=Yii::app()->user->getState(‘pageSize’,Yii::app()->params[‘defaultPageSize’]);

 $this->widget(‘bootstrap.widgets.TbGridView’,array(
‘id’=>’category-grid’,
‘dataProvider’=>$model->search(),
‘filter’=>$model,
‘summaryText’=>’Displaying {start}-{end} of {count} result(s). ‘ .
    CHtml::dropDownList(
        ‘pageSize’,
        $pageSize,
        Yii::app()->params[‘pageSizeOptions’],
        array(‘class’=>’change-pageSize’)) .
    ‘ rows per page’,
‘columns’=>array(
‘id’,
               …….

),
));

<script type=”text/javascript”>
jQuery(function($) {
$(‘.change-pageSize’).live(‘change’, function() {
        $.fn.yiiGridView.update(‘category-grid’,{ data:{ pageSize: $(this).val() }})
    });
</script>


and in controllers under actionAdmin(), i added this code on top of action

if (isset($_GET[‘pageSize’])) {
                    Yii::app()->user->setState(‘pageSize’,(int)$_GET[‘pageSize’]);
   }



and in the model (e.g. model/Category) the data provider in search() i added
$pageSize=Yii::app()->user->getState(‘pageSize’,Yii::app()->params[‘defaultPageSize’]);
             
return new CActiveDataProvider($this, array(
‘criteria’=>$criteria,
                        ‘sort’=>$sort,
                         ‘pagination’ => array(‘pageSize’ => $pageSize),
));

And finally don’t forgot to set default params value in config/main.php as

‘params’=>array(
‘adminEmail’=>’[email protected]’,
                ‘defaultPageSize’=>20,
                ‘pageSizeOptions’=>array(10=>10,20=>20,50=>50,100=>100),
           
),

By adding this code you can setup dynamic pagination for CGridView as shown below.

 
    
 
 

How to create listview page in Yii2

In Yii2 there no default listview page. So if you need to create list view page, then its not a difficult task. It is very easy. You need to do following steps.

Step 1

First of all create your list action like

public function actionList()
    {
        $dataProvider = new ActiveDataProvider([
            ‘query’ => YourModelName::find();,
         ]);
        return $this->render(‘list’, [
            ‘dataProvider’ => $dataProvider
        ]);
    }

 

Step 2

Create you list.php page in your view directory

<?php
use yii\widgets\ListView;
?>
<?= ListView::widget([
    ‘dataProvider’ => $dataProvider,
    ‘itemView’ => ‘_item’,
]); ?>

 

Step 3

Last step, create _item.php page in your view directory. This page will contain the design of your list row. You can get data like

<h1><?= $model->title; ?></h1>

etc

 

 

How to manage website/application name in Yii2

If your are looking for “How to manage website/application name in Yii2” or you want to manage your web application name from one place, then you need to do following configuration in your yii2 application,

You need to update web.php config file

$config = [
‘id’ => ‘basic’,
‘name’=>’My Application’,

 

Then you can use it wherever with

Yii::$app->name

  Read more

How to change default ‘No result found’ text in Yii framework

Some time there is need to change the default “No result found” text by your own text, to provide more deep information to the front user. So in Yii framework we can set our custom text message in CGridList and CListView by simply set the value of “emptyText” property. For example to show “We have not found anything related to your query instead of “No result found” text, see code below

Read more