├── ProgrammingAtKstark
    └── CatewithimgWidget
    │   ├── Block
    │       └── Widget
    │       │   └── CatewithimgWidget.php
    │   ├── Model
    │       └── Config
    │       │   └── Source
    │       │       └── Categorylist.php
    │   ├── composer.json
    │   ├── etc
    │       ├── module.xml
    │       └── widget.xml
    │   ├── registration.php
    │   └── view
    │       └── frontend
    │           ├── layout
    │               └── default.xml
    │           ├── templates
    │               └── widget
    │               │   └── categorywidget.phtml
    │           └── web
    │               └── css
    │                   └── widget.css
└── README.md


/ProgrammingAtKstark/CatewithimgWidget/Block/Widget/CatewithimgWidget.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | namespace ProgrammingAtKstark\CatewithimgWidget\Block\Widget;
 3 | 
 4 | class CatewithimgWidget extends \Magento\Framework\View\Element\Template implements \Magento\Widget\Block\BlockInterface
 5 | {
 6 | 	protected $_template = 'widget/categorywidget.phtml';
 7 | 
 8 |     /**
 9 |      * Default value for products count that will be shown
10 |      */
11 |      protected $_categoryHelper;
12 |      protected $categoryFlatConfig;
13 | 
14 |      protected $topMenu;
15 |      protected $_categoryFactory;
16 | 
17 |      protected $mainTitle;
18 |      protected $tagLine;
19 | 
20 |     /**
21 |      * @param \Magento\Framework\View\Element\Template\Context $context
22 |      * @param \Magento\Catalog\Helper\Category $categoryHelper
23 |      * @param array $data
24 |      */
25 |     public function __construct(
26 |         \Magento\Framework\View\Element\Template\Context $context,
27 |         \Magento\Catalog\Helper\Category $categoryHelper,
28 |         \Magento\Catalog\Model\Indexer\Category\Flat\State $categoryFlatState,
29 |         \Magento\Catalog\Model\CategoryFactory $categoryFactory,
30 |         \Magento\Theme\Block\Html\Topmenu $topMenu
31 |     ) {
32 |         $this->_categoryHelper = $categoryHelper;
33 |         $this->categoryFlatConfig = $categoryFlatState;
34 |         $this->topMenu = $topMenu;
35 |         $this->_categoryFactory = $categoryFactory;
36 |         parent::__construct($context);
37 |     }
38 |     /**
39 |      * Return categories helper
40 |      */
41 |     public function getCategoryHelper()
42 |     {
43 |         return $this->_categoryHelper;
44 |     }
45 | 
46 |     public function getCategorymodel($id)
47 |     {
48 |          $_category = $this->_categoryFactory->create();
49 |             $_category->load($id);
50 |             return $_category;
51 |     }
52 |     /**
53 |      * Retrieve current store categories
54 |      *
55 |      * @param bool|string $sorted
56 |      * @param bool $asCollection
57 |      * @param bool $toLoad
58 |      * @return \Magento\Framework\Data\Tree\Node\Collection|\Magento\Catalog\Model\Resource\Category\Collection|array
59 |      */
60 | 
61 |     /**
62 |      * Retrieve collection of selected categories
63 |     */
64 |    public function getCategoryCollection()
65 |     {
66 |         $rootCat = $this->getData('parentcat');
67 | 
68 | 
69 |         $category = $this->_categoryFactory->create();
70 |         $collection = $category
71 |                       ->getCollection()
72 |                       ->addAttributeToSelect('image')
73 |                       ->addIdFilter($rootCat);
74 |         return $collection;
75 |     }
76 |     /**
77 |      * Retrieve tag line for widget
78 |     */
79 |     public function getTagLine()
80 |     {
81 |         $tagLine = $this->getData('tagline');
82 |         return $tagLine;
83 |     }
84 |     /**
85 |      * Retrieve main title for widget
86 |     */
87 |     public function getMainTitle()
88 |     {
89 |         $mainTitle = $this->getData('blocktitle');
90 |         return $mainTitle;
91 |     }
92 | }


--------------------------------------------------------------------------------
/ProgrammingAtKstark/CatewithimgWidget/Model/Config/Source/Categorylist.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | namespace ProgrammingAtKstark\CatewithimgWidget\Model\Config\Source;
 3 | 
 4 | use Magento\Framework\Option\ArrayInterface;
 5 | use Magento\Catalog\Helper\Category;
 6 | 
 7 | class Categorylist implements ArrayInterface
 8 | {
 9 |     protected $_categoryHelper;
10 | 
11 |     public function __construct(\Magento\Catalog\Helper\Category $catalogCategory)
12 |     {
13 |         $this->_categoryHelper = $catalogCategory;
14 |     }
15 | 
16 |     /*
17 |      * Return categories helper
18 |      */
19 | 
20 |     public function getStoreCategories($sorted = false, $asCollection = false, $toLoad = true)
21 |     {
22 |         return $this->_categoryHelper->getStoreCategories($sorted , $asCollection, $toLoad);
23 |     }
24 | 
25 |     /*
26 |      * Option getter
27 |      * @return array
28 |      */
29 |     public function toOptionArray()
30 |     {
31 | 
32 | 
33 |         $arr = $this->toArray();
34 |         $ret = [];
35 | 
36 |         foreach ($arr as $key => $value)
37 |         {
38 | 
39 |             $ret[] = [
40 |                 'value' => $key,
41 |                 'label' => $value
42 |             ];
43 |         }
44 | 
45 |         return $ret;
46 |     }
47 | 
48 |     /*
49 |      * Get options in "key-value" format
50 |      * @return array
51 |      */
52 |     public function toArray()
53 |     {
54 | 
55 |         $categories = $this->getStoreCategories(true,false,true);
56 | 
57 |         $catagoryList = array();
58 |         foreach ($categories as $category){
59 | 
60 |             $catagoryList[$category->getEntityId()] = __($category->getName());
61 |         }
62 | 
63 |         return $catagoryList;
64 |     }
65 | 
66 | }
67 | ?>


--------------------------------------------------------------------------------
/ProgrammingAtKstark/CatewithimgWidget/composer.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "ProgrammingAtKstark/CatewithimgWidget",
 3 |     "description": "ProgrammingAtKstark Category List Widget with images",
 4 |     "require": {
 5 |         "php": "7.0.2|7.0.4|~7.0.6|~7.1.0"
 6 |     },
 7 |     "type": "magento2-module",
 8 |     "version": "1.0.0",
 9 |     "license": [
10 |         "Commercial"
11 |     ],
12 |     "autoload": {
13 |         "files": [ "registration.php" ],
14 |         "psr-4": {
15 |             "ProgrammingAtKstark\\CatewithimgWidget\\": ""
16 |         }
17 |     }
18 | }
19 | 


--------------------------------------------------------------------------------
/ProgrammingAtKstark/CatewithimgWidget/etc/module.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0"?>
2 | <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
3 |     <module name="ProgrammingAtKstark_CatewithimgWidget" setup_version="1.0.0">
4 |     </module>
5 | </config>


--------------------------------------------------------------------------------
/ProgrammingAtKstark/CatewithimgWidget/etc/widget.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 3 |          xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
 4 | 	<widget id="programmingatkstark_catewithimgwidget" class="ProgrammingAtKstark\CatewithimgWidget\Block\Widget\CatewithimgWidget">
 5 | 		<label translate="true">Category List with image Widget</label>
 6 | 		<description>Store Default 1st level Category List Widget</description>
 7 | 		<parameters>
 8 |             <parameter name="blocktitle" xsi:type="text"  visible="true" required="true" sort_order="1">
 9 |                 <label translate="true">Block Title</label>
10 |             </parameter>
11 |             <parameter name="tagline" xsi:type="text"  visible="true" required="true" sort_order="2">
12 |                 <label translate="true">Tag Line</label>
13 |             </parameter>
14 | 			<parameter name="parentcat"  xsi:type="multiselect"  visible="true" sort_order="3" source_model="ProgrammingAtKstark\CatewithimgWidget\Model\Config\Source\Categorylist">
15 |                 <label translate="true">Select Categories (Any three) </label>
16 |                 <description translate="true">Category must have image uploaded</description>
17 |             </parameter>
18 | 		</parameters>
19 | 	</widget>
20 | </widgets>
21 | 


--------------------------------------------------------------------------------
/ProgrammingAtKstark/CatewithimgWidget/registration.php:
--------------------------------------------------------------------------------
1 | <?php
2 | \Magento\Framework\Component\ComponentRegistrar::register(
3 |     \Magento\Framework\Component\ComponentRegistrar::MODULE,
4 |     'ProgrammingAtKstark_CatewithimgWidget',
5 |     __DIR__
6 | );


--------------------------------------------------------------------------------
/ProgrammingAtKstark/CatewithimgWidget/view/frontend/layout/default.xml:
--------------------------------------------------------------------------------
1 | <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
2 |     <head>
3 |         <css src="ProgrammingAtKstark_CatewithimgWidget::css/widget.css" />
4 |     </head>
5 | </page>


--------------------------------------------------------------------------------
/ProgrammingAtKstark/CatewithimgWidget/view/frontend/templates/widget/categorywidget.phtml:
--------------------------------------------------------------------------------
 1 | <?php
 2 |     $categories = $this->getCategoryCollection();
 3 |     $categoryHelper = $this->getCategoryHelper();
 4 | ?>
 5 | <div class="widget block block-static-block cwiw" id="catewithimg">
 6 |     <div class="block-content">
 7 |         <div class="content-heading">
 8 |             <h2 class="title"><?php echo $this->getMainTitle(); ?></h2>
 9 |             <p class="info"><?php echo $this->getTagLine(); ?></p>
10 |         </div>
11 |         <div class="row">
12 |         <?php
13 |         foreach($categories as $category):
14 |             $cat = $this->getCategorymodel($category->getId());
15 |             $image = $cat->getImageUrl();
16 |         ?>
17 |             <?php if($image != null): ?>
18 |                 <div class="col-md-4">
19 |                     <a class="category_name" href="<?php echo $cat->getUrl(); ?>">
20 |                        <img src="<?php echo $image; ?>" class="img-responsive category_image" alt="<?php echo $cat->getName(); ?>" />
21 |                         <h3><span><?php echo $cat->getName(); ?></span></h3>
22 |                     </a>
23 |                 </div>
24 |             <?php endif; ?>
25 |         <?php endforeach; ?>
26 |         </div>
27 |     </div>
28 | </div>
29 | 


--------------------------------------------------------------------------------
/ProgrammingAtKstark/CatewithimgWidget/view/frontend/web/css/widget.css:
--------------------------------------------------------------------------------
 1 | .cwiw{
 2 |     width: 100%;
 3 |     clear: both;
 4 |     float: none;
 5 |     text-align: center;
 6 | }
 7 | .cwiw .row{
 8 |     margin-bottom: 20px;
 9 |     margin-right: -15px;
10 |     margin-left: -15px;
11 | }
12 | .cwiw .row:before,
13 | .cwiw .row:after{
14 |     display: table;
15 |     content: " ";
16 | }
17 | 
18 | .cwiw .row .col-md-4{
19 |     width: 33.33333333%;
20 |     float: left;
21 | }
22 | 
23 | .cwiw a:hover{
24 |     text-decoration: none;
25 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## Category with image widget for Magento 2
 2 | 
 3 | ###Features
 4 | <ul>
 5 | <li>Display category with images in any page</li>
 6 | <li>Only top level categories</li>
 7 | </ul>
 8 | 
 9 | ### How to use this widget
10 | Link : https://youtu.be/RLN1A200MII
11 | 
12 | [![ScreenShot](https://i.ytimg.com/vi/RLN1A200MII/hqdefault.jpg)](http://youtu.be/RLN1A200MII)
13 | 
14 | 
15 | ###Mannual Installation Instructions
16 | Go to Magento2 Project 
17 | <strong>root/app/code </strong> <em> (create <strong> code</strong> folder if not exist)</em>
18 | 
19 | Paste downloaded/cloned folder.
20 | 
21 | So folder strucuture will be as following
22 | 
23 | <pre>
24 | <code>
25 | Magento2
26 | └── app
27 |    └── code
28 |        └── ProgrammingAtKstark
29 |            └──CatewithimgWidget
30 |                ├──Block
31 |                ├──etc
32 |                ├──Model
33 |                ├──view
34 |                ├──composer.json
35 |                └──registration.php
36 | 
37 | </code>
38 | </pre>
39 | 
40 | 
41 | ###Enable this widget
42 | to Enable this widget simply follow these steps:
43 | <ul>
44 |     <li><code>php bin/magento setup:upgrade</code></li>
45 |     <li><code>php bin/magento cache:flush</code></li>
46 |     <li><strong>Re-Compile (in-case you have compilation enabled)</strong><br>
47 |         <code>bin/magento setup:di:compile</code>
48 |     </li>
49 | </ul>
50 | 
51 | ### Notes
52 | <ul>
53 |     <li>If you are selecting more then 3 categories then you need to make changes in <code>view/frontend/web/css/widget.css</code></li>
54 | </ul>
55 | 
56 | ### Contributing
57 | <ul>
58 |     <li>Fork it</li>
59 |     <li>Create your feature branch (git checkout -b my-new-feature)</li>
60 |     <li>Commit your changes (git commit -am 'Add some feature')</li>
61 |     <li>Push to the branch (git push origin my-new-feature)</li>
62 |         <li>Create new Pull Request</li>
63 | </ul>
64 | 
65 | ### License
66 | 
67 | By contributing your code, you agree to license your contribution under the MIT License.
68 | 
69 | 


--------------------------------------------------------------------------------