增加轮播图插件

增加cms首页模板文件

app/code/Rokanthemes/CustomMenu/Controller/Adminhtml/Category/Bgimage/Upload.php

+<?php
+namespace Rokanthemes\CustomMenu\Controller\Adminhtml\Category\Bgimage;
+
+use Magento\Framework\App\Action\HttpPostActionInterface;
+use Magento\Framework\Controller\ResultFactory;
+
+class Upload extends \Magento\Backend\App\Action implements HttpPostActionInterface
+{
+	
+	protected $imageUploader;
+
+    
+    public function __construct(
+        \Magento\Backend\App\Action\Context $context,
+        \Magento\Catalog\Model\ImageUploader $imageUploader
+    ) {
+        parent::__construct($context);
+        $this->imageUploader = $imageUploader;
+    }
+	
+	public function execute()
+    {
+        $imageId = $this->_request->getParam('param_name', 'rt_menu_bg_img');
+
+        try {
+            $result = $this->imageUploader->saveFileToTmpDir($imageId);
+        } catch (\Exception $e) {
+            $result = ['error' => $e->getMessage(), 'errorcode' => $e->getCode()];
+        }
+        return $this->resultFactory->create(ResultFactory::TYPE_JSON)->setData($result);
+    }
+}
\ No newline at end of file

app/code/Rokanthemes/CustomMenu/Controller/Adminhtml/Category/Iconimage/Upload.php

+<?php
+namespace Rokanthemes\CustomMenu\Controller\Adminhtml\Category\Iconimage;
+
+use Magento\Framework\App\Action\HttpPostActionInterface;
+use Magento\Framework\Controller\ResultFactory;
+
+class Upload extends \Magento\Backend\App\Action implements HttpPostActionInterface
+{
+	
+	protected $imageUploader;
+
+    
+    public function __construct(
+        \Magento\Backend\App\Action\Context $context,
+        \Magento\Catalog\Model\ImageUploader $imageUploader
+    ) {
+        parent::__construct($context);
+        $this->imageUploader = $imageUploader;
+    }
+	
+	public function execute()
+    {
+        $imageId = $this->_request->getParam('param_name', 'rt_menu_icon_img');
+
+        try {
+            $result = $this->imageUploader->saveFileToTmpDir($imageId);
+        } catch (\Exception $e) {
+            $result = ['error' => $e->getMessage(), 'errorcode' => $e->getCode()];
+        }
+        return $this->resultFactory->create(ResultFactory::TYPE_JSON)->setData($result);
+    }
+}
\ No newline at end of file

app/code/Rokanthemes/CustomMenu/Controller/Adminhtml/Category/SavePlugin.php

+<?php
+namespace Rokanthemes\CustomMenu\Controller\Adminhtml\Category;
+
+use Magento\Catalog\Controller\Adminhtml\Category\Save as SaveController;
+
+class SavePlugin
+{
+    /**
+     * Add additional images
+     *
+     * @param SaveController $subject
+     * @param array $data
+     * @return array
+     */
+    public function beforeImagePreprocessing(SaveController $subject, $data)
+    {
+        foreach ($this->getAdditionalImages() as $imageType) {
+            if (empty($data[$imageType])) {
+                unset($data[$imageType]);
+                $data[$imageType]['delete'] = true;
+            }
+        }
+        
+        return [$data];
+    }
+
+    /**
+     * Get additional Images
+     *
+     * @return array
+     */
+    protected function getAdditionalImages() {
+        return [
+            'rt_menu_icon_img',
+            'rt_menu_bg_img',
+            'cat_image_thumbnail',
+            'vc_menu_icon_img'
+        ];
+    }
+}
\ No newline at end of file

app/code/Rokanthemes/CustomMenu/Helper/Category.php

+<?php
+
+namespace Rokanthemes\CustomMenu\Helper;
+
+use Magento\Framework\App\Helper\AbstractHelper;
+
+class Category extends AbstractHelper
+{
+
+
+    /**
+     * @return array
+     */
+    public function getAdditionalImageTypes()
+    {
+        return array('thumbnail');
+    }
+
+    /**
+     * Retrieve image URL
+     * @param $image
+     * @return string
+     */
+    public function getImageUrl($image)
+    {
+        $url = false;
+        //$image = $this->getImage();
+        if ($image) {
+            if (is_string($image)) {
+                $url = $this->_urlBuilder->getBaseUrl(
+                        ['_type' => \Magento\Framework\UrlInterface::URL_TYPE_MEDIA]
+                    ) . 'catalog/category/' . $image;
+            } else {
+                throw new \Magento\Framework\Exception\LocalizedException(
+                    __('Something went wrong while getting the image url.')
+                );
+            }
+        }
+        return $url;
+    }
+
+}
\ No newline at end of file

app/code/Rokanthemes/CustomMenu/Helper/Data.php

+<?php
+/**
+* Copyright © 2016 TuanHatay. All rights reserved.
+*/
+namespace Rokanthemes\CustomMenu\Helper;
+
+class Data extends \Magento\Framework\App\Helper\AbstractHelper
+{
+
+    protected $_objectManager;
+    
+    public function __construct(
+        \Magento\Framework\App\Helper\Context $context,
+        \Magento\Framework\ObjectManagerInterface $objectManager,
+        \Magento\Store\Model\StoreManagerInterface $storeManager
+    ) {
+        $this->_storeManager = $storeManager;
+        $this->_objectManager= $objectManager;
+        parent::__construct($context);
+    }
+    public function getBaseUrl()
+    {
+        return $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
+    }
+    public function getConfig($config_path)
+    {
+        return $this->scopeConfig->getValue(
+            $config_path,
+            \Magento\Store\Model\ScopeInterface::SCOPE_STORE
+        );
+    }
+    public function getModel($model) {
+        return $this->_objectManager->create($model);
+    }
+    public function getCurrentStore() {
+        return $this->_storeManager->getStore();
+    }
+    public function getIconimageUrl($category)
+    {
+        $url   = false;
+        $image = $category->getRtMenuIconImg();
+        if ($image) {
+            if (is_string($image)) {
+                $url = $this->_storeManager->getStore()->getBaseUrl(
+                        \Magento\Framework\UrlInterface::URL_TYPE_MEDIA
+                ) . 'catalog/category/' . $image;
+            } else {
+                $url = false;
+            }
+        }
+     
+        return $url;
+    }
+}

app/code/Rokanthemes/CustomMenu/Model/Attribute/Categorylabel.php

+<?php
+namespace Rokanthemes\CustomMenu\Model\Attribute;
+
+class Categorylabel extends \Magento\Eav\Model\Entity\Attribute\Source\AbstractSource
+{
+    protected $_helper;
+    
+    public function __construct(
+        \Rokanthemes\CustomMenu\Helper\Data $helper
+    ) {
+        $this->_helper = $helper;
+    }
+    public function getAllOptions()
+    {
+        $label1 = $this->_helper->getConfig('custommenu/cat_labels/label1');
+        $label2 = $this->_helper->getConfig('custommenu/cat_labels/label2');
+        $label3 = $this->_helper->getConfig('custommenu/cat_labels/label3');
+        
+        if (!$this->_options) {
+            $this->_options = [
+                ['value' => '', 'label' => __('No Label')],
+                ['value' => 'label1', 'label' => $label1],
+                ['value' => 'label2', 'label' => $label2],
+                ['value' => 'label3', 'label' => $label3]
+            ];
+        }
+        
+        return $this->_options;
+    }
+}
\ No newline at end of file

app/code/Rokanthemes/CustomMenu/Model/Attribute/Floattype.php

+<?php
+namespace Rokanthemes\CustomMenu\Model\Attribute;
+
+class Floattype extends \Magento\Eav\Model\Entity\Attribute\Source\AbstractSource
+{
+    public function getAllOptions()
+    {
+        if (!$this->_options) {
+            $this->_options = [
+                ['value' => '', 'label' => __('Default')],
+                ['value' => 'left', 'label' => __('Left')],
+                ['value' => 'right', 'label' => __('Right')]
+            ];
+        }
+        
+        return $this->_options;
+    }
+}
\ No newline at end of file

app/code/Rokanthemes/CustomMenu/Model/Attribute/Menutype.php

+<?php
+namespace Rokanthemes\CustomMenu\Model\Attribute;
+
+class Menutype extends \Magento\Eav\Model\Entity\Attribute\Source\AbstractSource
+{
+    public function getAllOptions()
+    {
+        if (!$this->_options) {
+            $this->_options = [
+                ['value' => '', 'label' => __('Default')],
+                ['value' => 'fullwidth', 'label' => __('Full Width')],
+                ['value' => 'staticwidth', 'label' => __('Static Width')],
+                ['value' => 'classic', 'label' => __('Classic')]
+            ];
+        }
+        
+        return $this->_options;
+    }
+}

app/code/Rokanthemes/CustomMenu/Model/Attribute/Subcatcolumns.php

+<?php
+namespace Rokanthemes\CustomMenu\Model\Attribute;
+
+class Subcatcolumns extends \Magento\Eav\Model\Entity\Attribute\Source\AbstractSource
+{
+    public function getAllOptions()
+    {
+        if (!$this->_options) {
+            $this->_options = [
+                ['value' => '', 'label' => __('Default')],
+                ['value' => '1', 'label' => __('1 Column')],
+                ['value' => '2', 'label' => __('2 Columns')],
+                ['value' => '3', 'label' => __('3 Columns')],
+                ['value' => '4', 'label' => __('4 Columns')],
+                ['value' => '5', 'label' => __('5 Columns')],
+                ['value' => '6', 'label' => __('6 Columns')],
+                ['value' => '7', 'label' => __('7 Columns')],
+                ['value' => '8', 'label' => __('8 Columns')],
+                ['value' => '9', 'label' => __('9 Columns')],
+                ['value' => '10', 'label' => __('10 Columns')],
+                ['value' => '11', 'label' => __('11 Columns')],
+                ['value' => '12', 'label' => __('12 Columns')]
+            ];
+        }
+        
+        return $this->_options;
+    }
+}
\ No newline at end of file

app/code/Rokanthemes/CustomMenu/Model/Attribute/Width.php

+<?php
+namespace Rokanthemes\CustomMenu\Model\Attribute;
+
+class Width extends \Magento\Eav\Model\Entity\Attribute\Source\AbstractSource
+{
+    public function getAllOptions()
+    {
+        if (!$this->_options) {
+            $this->_options = [
+                ['value' => '0', 'label' => __('Do not show')],
+                ['value' => '1', 'label' => __('1/12')],
+                ['value' => '2', 'label' => __('2/12')],
+                ['value' => '3', 'label' => __('3/12')],
+                ['value' => '4', 'label' => __('4/12')],
+                ['value' => '5', 'label' => __('5/12')],
+                ['value' => '6', 'label' => __('6/12')],
+                ['value' => '7', 'label' => __('7/12')],
+                ['value' => '8', 'label' => __('8/12')],
+                ['value' => '9', 'label' => __('9/12')],
+                ['value' => '10', 'label' => __('10/12')],
+                ['value' => '11', 'label' => __('11/12')],
+                ['value' => '12', 'label' => __('12/12')]
+            ];
+        }
+        
+        return $this->_options;
+    }
+}
\ No newline at end of file

app/code/Rokanthemes/CustomMenu/Model/Category/Attribute/Backend/Iconimage.php

+<?php
+namespace Rokanthemes\CustomMenu\Model\Category\Attribute\Backend;
+
+class Iconimage extends \Magento\Eav\Model\Entity\Attribute\Backend\AbstractBackend
+{
+    protected $_uploaderFactory;
+	protected $_filesystem;
+	protected $_fileUploaderFactory;
+	protected $_logger;
+	private $imageUploader;
+	
+	public function __construct(
+        \Psr\Log\LoggerInterface $logger,
+        \Magento\Framework\Filesystem $filesystem,
+    	\Magento\MediaStorage\Model\File\UploaderFactory $fileUploaderFactory
+	) {
+        $this->_filesystem                = $filesystem;
+        $this->_fileUploaderFactory = $fileUploaderFactory;
+        $this->_logger                      = $logger;
+	}
+	
+	private function getImageUploader()
+    {
+        if ($this->imageUploader === null) {
+            $this->imageUploader = \Magento\Framework\App\ObjectManager::getInstance()->get(
+                'Magento\Catalog\CategoryImageUpload'
+            );
+        }
+        return $this->imageUploader;
+    }
+	
+	public function beforeSave($object)
+	{
+        $attrCode = $this->getAttribute()->getAttributeCode();
+ 
+    	if (!$object->hasData($attrCode)) {
+            $object->setData($attrCode, NULL);
+    	} else {
+            $values = $object->getData($attrCode);
+        	if (is_array($values)) {
+                if (!empty($values['delete'])) {
+                    $object->setData($attrCode, NULL);
+                } else {
+                    if (isset($values[0]['name']) && isset($values[0]['tmp_name'])) {
+                        $object->setData($attrCode, $values[0]['name']);
+                    } else {
+                        // don't update
+                    }
+                }
+      	  }
+		  else{
+			$object->setData($attrCode, NULL);
+		  }
+    	}
+ 
+    	return $this;
+	}
+	
+	public function afterSave($object)
+    {
+        $image = $object->getData($this->getAttribute()->getName(), null);
+		
+        if ($image !== null) {
+            try {
+                $this->getImageUploader()->moveFileFromTmp($image);
+            } catch (\Exception $e) {
+                $this->_logger->critical($e);
+            }
+        }
+        return $this;
+    }
+}
\ No newline at end of file

app/code/Rokanthemes/CustomMenu/Model/Category/DataProvider.php

+<?php
+namespace Rokanthemes\CustomMenu\Model\Category;
+ 
+use Magento\Framework\Registry;
+use Magento\Framework\App\RequestInterface;
+use Magento\Framework\Exception\LocalizedException;
+use Magento\Framework\Exception\NoSuchEntityException;
+use Magento\Catalog\Api\Data\CategoryInterface;
+use Magento\Catalog\Model\CategoryFactory;
+use Magento\Catalog\Model\Category\DataProvider as CategoryDataProvider;
+use Magento\Store\Model\Store;
+use Rokanthemes\CustomMenu\Helper\Category as CategoryHelper;
+
+class DataProvider
+{
+    protected $registry;
+
+    protected $request;
+
+    private $categoryFactory;
+
+    private $categoryHelper;
+
+    private $requestFieldName = 'id';
+
+    private $requestScopeFieldName = 'store';
+
+    public function __construct(
+        Registry $registry,
+        RequestInterface $request,
+        CategoryFactory $categoryFactory,
+        CategoryHelper $categoryHelper
+    ) {
+        $this->registry = $registry;
+        $this->request = $request;
+        $this->categoryFactory = $categoryFactory;
+        $this->categoryHelper = $categoryHelper;
+    }
+
+    public function afterGetData(CategoryDataProvider $subject, $result)
+    {
+        $category = $this->getCurrentCategory();
+
+        if ($category && $category->getId()) {
+            $categoryData = $result[$category->getId()];
+            foreach ($this->getAdditionalImageTypes() as $imageType) {
+                if (isset($categoryData[$imageType])) {
+                	if(is_string($categoryData[$imageType])){
+                		$data_cat = $categoryData[$imageType];
+	                    unset($categoryData[$imageType]);
+                	}
+                }
+            }
+            //print_r($categoryData);die;
+            $result[$category->getId()] = $categoryData;
+        }
+
+        return $result;
+    }
+
+    private function getCurrentCategory()
+    {
+        $category = $this->registry->registry('category');
+
+        if ($category) {
+            return $category;
+        }
+
+        $requestId = $this->request->getParam($this->requestFieldName);
+        $requestScope = $this->request->getParam($this->requestScopeFieldName, Store::DEFAULT_STORE_ID);
+
+        if ($requestId) {
+            $category = $this->categoryFactory->create();
+            $category->setStoreId($requestScope);
+            $category->load($requestId);
+            if (!$category->getId()) {
+                throw NoSuchEntityException::singleField('id', $requestId);
+            }
+        }
+
+        return $category;
+    }
+
+    private function getAdditionalImageTypes()
+    {
+        return [
+            'rt_menu_icon_img',
+            'rt_menu_bg_img',
+            'cat_image_thumbnail',
+            'vc_menu_icon_img'
+        ];
+    }
+}
\ No newline at end of file

app/code/Rokanthemes/CustomMenu/Model/Config/Menutype.php

+<?php
+namespace Rokanthemes\CustomMenu\Model\Config;
+
+class Menutype implements \Magento\Framework\Option\ArrayInterface
+{
+    public function toOptionArray()
+    {
+        return [
+            ['value' => 'fullwidth', 'label' => __('Full Width')],
+            ['value' => 'staticwidth', 'label' => __('Static Width')],
+            ['value' => 'classic', 'label' => __('Classic')]
+        ];
+    }
+
+    public function toArray()
+    {
+        return [
+            'fullwidth' => __('Full Width'),
+            'staticwidth' => __('Static Width'),
+            'classic' => __('Classic')
+        ];
+    }
+}

app/code/Rokanthemes/CustomMenu/Model/Wysiwyg/Config.php

+<?php
+
+namespace Rokanthemes\CustomMenu\Model\Wysiwyg;
+
+use Magento\Framework\Filesystem;
+use Magento\Framework\App\Filesystem\DirectoryList;
+use Magento\Ui\Component\Wysiwyg\ConfigInterface;
+
+class Config extends \Magento\Cms\Model\Wysiwyg\Config
+{
+    public function getConfig($data = [])
+    {
+        $config = new \Magento\Framework\DataObject();
+
+        $config->setData(
+            [
+                'enabled' => $this->isEnabled(),
+                'hidden' => $this->isHidden(),
+                'use_container' => false,
+                'add_variables' => true,
+                'add_widgets' => true,
+                'no_display' => false,
+                'encode_directives' => true,
+                'baseStaticUrl' => $this->_assetRepo->getStaticViewFileContext()->getBaseUrl(),
+                'baseStaticDefaultUrl' => str_replace('index.php/', '', $this->_backendUrl->getBaseUrl())
+                    . $this->filesystem->getUri(DirectoryList::STATIC_VIEW) . '/',
+                'directives_url' => $this->_backendUrl->getUrl('cms/wysiwyg/directive'),
+                'popup_css' => $this->_assetRepo->getUrl(
+                    'mage/adminhtml/wysiwyg/tiny_mce/themes/advanced/skins/default/dialog.css'
+                ),
+                'content_css' => $this->_assetRepo->getUrl(
+                    'mage/adminhtml/wysiwyg/tiny_mce/themes/advanced/skins/default/content.css'
+                ),
+                'width' => '100%',
+				'add_directives' => true,
+                'height' => '500px',
+                'plugins' => [],
+            ]
+        );
+
+        $config->setData('directives_url_quoted', preg_quote($config->getData('directives_url')));
+
+        if ($this->_authorization->isAllowed('Magento_Cms::media_gallery')) {
+            $config->addData(
+                [
+                    'add_images' => true,
+                    'files_browser_window_url' => $this->_backendUrl->getUrl('cms/wysiwyg_images/index'),
+                    'files_browser_window_width' => $this->_windowSize['width'],
+                    'files_browser_window_height' => $this->_windowSize['height'],
+                ]
+            );
+        }
+
+        if (is_array($data)) {
+            $config->addData($data);
+        }
+
+        if ($config->getData('add_variables')) {
+            $settings = $this->_variableConfig->getWysiwygPluginSettings($config);
+            $config->addData($settings);
+        }
+
+        if ($config->getData('add_widgets')) {
+            $settings = $this->_widgetConfig->getPluginSettings($config);
+            $config->addData($settings);
+        }
+
+        return $config;
+    }
+}

app/code/Rokanthemes/CustomMenu/Setup/InstallData.php

+<?php
+/**
+* Copyright © 2016 TuanHatay. All rights reserved.
+*/
+
+namespace Rokanthemes\CustomMenu\Setup;
+
+use Magento\Framework\Module\Setup\Migration;
+use Magento\Framework\Setup\InstallDataInterface;
+use Magento\Framework\Setup\ModuleContextInterface;
+use Magento\Framework\Setup\ModuleDataSetupInterface;
+use Magento\Catalog\Setup\CategorySetupFactory;
+
+/**
+ * @codeCoverageIgnore
+ */
+class InstallData implements InstallDataInterface
+{
+    /**
+     * Category setup factory
+     *
+     * @var CategorySetupFactory
+     */
+    private $categorySetupFactory;
+ 
+    /**
+     * Init
+     *
+     * @param CategorySetupFactory $categorySetupFactory
+     */
+    public function __construct(CategorySetupFactory $categorySetupFactory)
+    {
+        $this->categorySetupFactory = $categorySetupFactory;
+    }
+    
+    /**
+     * {@inheritdoc}
+     * @SuppressWarnings(PHPMD.ExcessiveMethodLength)
+     */
+    public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
+    {
+        $installer = $setup;
+        
+        $installer->startSetup();
+        
+        $categorySetup = $this->categorySetupFactory->create(['setup' => $setup]);
+        $entityTypeId = $categorySetup->getEntityTypeId(\Magento\Catalog\Model\Category::ENTITY);
+        $attributeSetId = $categorySetup->getDefaultAttributeSetId($entityTypeId);
+        
+        $menu_attributes = [
+            'rt_menu_hide_item' => [
+                'type' => 'int',
+                'label' => 'Hide This Menu Item',
+                'input' => 'select',
+                'source' => 'Magento\Eav\Model\Entity\Attribute\Source\Boolean',
+                'required' => false,
+                'sort_order' => 10,
+                'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
+                'group' => 'Custom Menu'
+            ],
+            'rt_menu_type' => [
+                'type' => 'varchar',
+                'label' => 'Menu Type',
+                'input' => 'select',
+                'source' => 'Rokanthemes\CustomMenu\Model\Attribute\Menutype',
+                'required' => false,
+                'sort_order' => 20,
+                'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
+                'group' => 'Custom Menu'
+            ],
+            'rt_menu_static_width' => [
+                'type' => 'varchar',
+                'label' => 'Static Width',
+                'input' => 'text',
+                'required' => false,
+                'sort_order' => 30,
+                'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
+                'group' => 'Custom Menu'
+            ],
+            'rt_menu_cat_columns' => [
+                'type' => 'varchar',
+                'label' => 'Sub Category Columns',
+                'input' => 'select',
+                'source' => 'Rokanthemes\CustomMenu\Model\Attribute\Subcatcolumns',
+                'required' => false,
+                'sort_order' => 40,
+                'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
+                'group' => 'Custom Menu'
+            ],
+            'rt_menu_float_type' => [
+                'type' => 'varchar',
+                'label' => 'Float',
+                'input' => 'select',
+                'source' => 'Rokanthemes\CustomMenu\Model\Attribute\Floattype',
+                'required' => false,
+                'sort_order' => 50,
+                'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
+                'group' => 'Custom Menu'
+            ],
+            'rt_menu_cat_label' => [
+                'type' => 'varchar',
+                'label' => 'Category Label',
+                'input' => 'select',
+                'source' => 'Rokanthemes\CustomMenu\Model\Attribute\Categorylabel',
+                'required' => false,
+                'sort_order' => 60,
+                'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
+                'group' => 'Custom Menu'
+            ],
+            'rt_menu_icon_img' => [
+                'type' => 'varchar',
+                'label' => 'Icon Image',
+                'input' => 'image',
+                'backend' => 'Magento\Catalog\Model\Category\Attribute\Backend\Image',
+                'required' => false,
+                'sort_order' => 70,
+                'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
+                'group' => 'Custom Menu'
+            ],
+            'rt_menu_font_icon' => [
+                'type' => 'varchar',
+                'label' => 'Font Icon Class',
+                'input' => 'text',
+                'required' => false,
+                'sort_order' => 80,
+                'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
+                'group' => 'Custom Menu'
+            ],
+            'rt_menu_block_top_content' => [
+                'type' => 'text',
+                'label' => 'Top Block',
+                'input' => 'textarea',
+                'required' => false,
+                'sort_order' => 90,
+                'wysiwyg_enabled' => true,
+                'is_html_allowed_on_front' => true,
+                'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
+                'group' => 'Custom Menu'
+            ],
+            'rt_menu_block_left_width' => [
+                'type' => 'varchar',
+                'label' => 'Left Block Width',
+                'input' => 'select',
+                'source' => 'Rokanthemes\CustomMenu\Model\Attribute\Width',
+                'required' => false,
+                'sort_order' => 100,
+                'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
+                'group' => 'Custom Menu'
+            ],
+            'rt_menu_block_left_content' => [
+                'type' => 'text',
+                'label' => 'Left Block',
+                'input' => 'textarea',
+                'required' => false,
+                'sort_order' => 110,
+                'wysiwyg_enabled' => true,
+                'is_html_allowed_on_front' => true,
+                'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
+                'group' => 'Custom Menu'
+            ],
+            'rt_menu_block_right_width' => [
+                'type' => 'varchar',
+                'label' => 'Right Block Width',
+                'input' => 'select',
+                'source' => 'Rokanthemes\CustomMenu\Model\Attribute\Width',
+                'required' => false,
+                'sort_order' => 120,
+                'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
+                'group' => 'Custom Menu'
+            ],
+            'rt_menu_block_right_content' => [
+                'type' => 'text',
+                'label' => 'Right Block',
+                'input' => 'textarea',
+                'required' => false,
+                'sort_order' => 130,
+                'wysiwyg_enabled' => true,
+                'is_html_allowed_on_front' => true,
+                'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
+                'group' => 'Custom Menu'
+            ],
+            'rt_menu_block_bottom_content' => [
+                'type' => 'text',
+                'label' => 'Bottom Block',
+                'input' => 'textarea',
+                'required' => false,
+                'sort_order' => 140,
+                'wysiwyg_enabled' => true,
+                'is_html_allowed_on_front' => true,
+                'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
+                'group' => 'Custom Menu'
+            ]
+        ];
+        
+        foreach($menu_attributes as $item => $data) {
+            $categorySetup->addAttribute(\Magento\Catalog\Model\Category::ENTITY, $item, $data);
+        }
+        
+        $idg =  $categorySetup->getAttributeGroupId($entityTypeId, $attributeSetId, 'Custom Menu');
+        
+        foreach($menu_attributes as $item => $data) {
+            $categorySetup->addAttributeToGroup(
+                $entityTypeId,
+                $attributeSetId,
+                $idg,
+                $item,
+                $data['sort_order']
+            );
+        }
+
+        $installer->endSetup();
+    }
+}
\ No newline at end of file

app/code/Rokanthemes/CustomMenu/Setup/UpgradeData.php

+<?php
+
+namespace Rokanthemes\CustomMenu\Setup;
+
+use Magento\Framework\Module\Setup\Migration;
+use Magento\Framework\Setup\UpgradeDataInterface;
+use Magento\Framework\Setup\ModuleContextInterface;
+use Magento\Framework\Setup\ModuleDataSetupInterface;
+use Magento\Catalog\Setup\CategorySetupFactory;
+
+/**
+ * Data migration:
+ * - Config Migration from version 2.0.1 JSON file store to 2.0.2+ Magento config way
+ *
+ */
+class UpgradeData implements UpgradeDataInterface
+{
+    
+    private $categorySetupFactory;
+    
+    public function __construct(CategorySetupFactory $categorySetupFactory)
+    {
+        $this->categorySetupFactory = $categorySetupFactory;
+    }
+
+    /**
+     * Run data upgrade.
+     *
+     * @param ModuleDataSetupInterface $setup
+     * @param ModuleContextInterface $context
+     */
+    public function upgrade(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
+    {
+        $setup->startSetup();
+
+        if (version_compare($context->getVersion(), '2.3.4') < 0) {
+            $categorySetup = $this->categorySetupFactory->create(['setup' => $setup]);
+            $entityTypeId = $categorySetup->getEntityTypeId(\Magento\Catalog\Model\Category::ENTITY);
+            $attributeSetId = $categorySetup->getDefaultAttributeSetId($entityTypeId);
+            
+            $menu_attributes = [
+                'rt_menu_bg_img' => [
+                    'type' => 'varchar',
+                    'label' => 'Background Image',
+                    'input' => 'image',
+                    'backend' => 'Magento\Catalog\Model\Category\Attribute\Backend\Image',
+                    'required' => false,
+                    'sort_order' => 70,
+                    'global' => \Magento\Eav\Model\Entity\Attribute\ScopedAttributeInterface::SCOPE_STORE,
+                    'group' => 'Custom Menu'
+                ]
+            ];
+            
+            foreach($menu_attributes as $item => $data) {
+                $categorySetup->addAttribute(\Magento\Catalog\Model\Category::ENTITY, $item, $data);
+            }
+            
+            $idg =  $categorySetup->getAttributeGroupId($entityTypeId, $attributeSetId, 'Custom Menu');
+            
+            foreach($menu_attributes as $item => $data) {
+                $categorySetup->addAttributeToGroup(
+                    $entityTypeId,
+                    $attributeSetId,
+                    $idg,
+                    $item,
+                    $data['sort_order']
+                );
+            }
+        }
+
+        $setup->endSetup();
+    }
+}

app/code/Rokanthemes/CustomMenu/etc/acl.xml

+<?xml version="1.0"?>
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
+    <acl>
+        <resources>
+            <resource id="Magento_Backend::admin">
+                <resource id="Rokanthemes_RokanBase::rokanbase" title="Rokanthemes" translate="title" sortOrder="30">
+                    <resource id="Rokanthemes_RokanBase::rokanbase_setting" title="Configuration" translate="title" sortOrder="10">
+                        <resource id="Rokanthemes_CustomMenu::custommenu" title="Custom Menu" translate="title" sortOrder="100" />
+                    </resource>
+                </resource>
+            </resource>
+        </resources>
+    </acl>
+</config>
\ No newline at end of file

app/code/Rokanthemes/CustomMenu/etc/adminhtml/menu.xml

+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../Magento/Backend/etc/menu.xsd">
+    <menu>
+		<add id="Rokanthemes_CustomMenu::custommenu" title="Custom Menu" module="Rokanthemes_CustomMenu" sortOrder="0" parent="Rokanthemes_RokanBase::rokanbase_setting" resource="Rokanthemes_CustomMenu::custommenu" action="adminhtml/system_config/edit/section/custommenu" />
+    </menu>
+</config>
\ No newline at end of file

app/code/Rokanthemes/CustomMenu/etc/adminhtml/routes.xml

+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
+    <router id="admin">
+        <route id="categorylist" frontName="categorylist">
+            <module name="Rokanthemes_CustomMenu" before="Magento_Backend" />
+        </route>
+    </router>
+</config>
\ No newline at end of file

app/code/Rokanthemes/CustomMenu/etc/adminhtml/system.xml

+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../Magento/Backend/etc/system_file.xsd">
+    <system>
+        <section id="custommenu" translate="label" type="text" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1">
+            <class>separator-top</class>
+            <label>Custom Menu</label>
+            <tab>rokanthemes</tab>
+            <resource>Rokanthemes_CustomMenu::custommenu</resource>
+            <group id="general" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
+                <label>General Settings</label>
+                <field id="enable" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Enable</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+                <field id="menu_type" translate="label" type="select" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Default Menu Type</label>
+                    <source_model>Rokanthemes\CustomMenu\Model\Config\Menutype</source_model>
+                </field>
+                <field id="static_width" translate="label comment" type="text" sortOrder="22" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Static Width</label>
+                    <comment>eg: 500px</comment>
+                    <depends>
+                        <field id="menu_type">staticwidth</field>
+                    </depends>
+                </field>
+                <field id="max_level" translate="label comment" type="text" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Visible Menu Depth</label>
+                    <comment>eg: 1, 2, 3, 4 (0 - disable limits). For example, if you set this value to 2, only second level categories will be displayed.</comment>
+                </field>
+            </group>
+            <group id="custom_links" translate="label" type="text" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1">
+                <label>Custom Links &amp; Blocks</label>
+                <field id="staticblock_before" translate="label comment" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Static Block(before)</label>
+                    <comment><![CDATA[Input the Static Block ID, the block content will be shown before the default category menu items and after home link.<br/>eg: menu_custom_links_before]]></comment>
+                </field>
+                <field id="staticblock_after" translate="label comment" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Static Block(after)</label>
+                    <comment><![CDATA[Input the Static Block ID, the block content will be shown after the default category menu items<br/>eg: menu_custom_links]]></comment>
+                </field>
+            </group>
+            <group id="cat_labels" translate="label" type="text" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1">
+                <label>Category Labels</label>
+                <field id="label1" translate="label comment" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Label 1</label>
+                    <comment><![CDATA[Define the text of the category label 1. Labels can be assigned to every category in <b>Products > Inventory > Categories</b>]]></comment>
+                </field>
+                <field id="label2" translate="label comment" type="text" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Label 2</label>
+                    <comment><![CDATA[Define the text of the category label 2. Labels can be assigned to every category in <b>Products > Inventory > Categories</b>]]></comment>
+                </field>
+                <field id="label3" translate="label comment" type="text" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Label 3</label>
+                    <comment><![CDATA[Define the text of the category label 3. Labels can be assigned to every category in <b>Products > Inventory > Categories</b>]]></comment>
+                </field>
+            </group>
+        </section>
+    </system>
+</config>

app/code/Rokanthemes/CustomMenu/etc/config.xml

+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../Store/etc/config.xsd">
+    <default>
+        <custommenu>
+            <general>
+                <enable>1</enable>
+                <menu_type>fullwidth</menu_type>
+                <static_width>500px</static_width>
+                <max_level></max_level>
+            </general>
+            <custom_links>
+                <staticblock_before>rokanthemes_custom_menu_before</staticblock_before>
+                <staticblock_after>rokanthemes_custom_menu</staticblock_after>
+            </custom_links>
+            <cat_labels>
+                <label1>New</label1>
+                <label2>Hot!</label2>
+                <label3>Sale</label3>
+            </cat_labels>
+        </custommenu>
+    </default>
+</config>

app/code/Rokanthemes/CustomMenu/etc/di.xml

+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
+    <type name="Rokanthemes\CustomMenu\Controller\Adminhtml\Category\Iconimage\Upload">
+        <arguments>
+            <argument name="imageUploader" xsi:type="object">Magento\Catalog\CategoryImageUpload</argument>
+        </arguments>
+    </type>
+    <type name="Rokanthemes\CustomMenu\Controller\Adminhtml\Category\Bgimage\Upload">
+        <arguments>
+            <argument name="imageUploader" xsi:type="object">Magento\Catalog\CategoryImageUpload</argument>
+        </arguments>
+    </type>
+	<type name="Magento\Catalog\Model\Category\DataProvider">
+        <plugin name="custom_menu_category_data_provider" type="Rokanthemes\CustomMenu\Model\Category\DataProvider" />
+    </type>
+    <type name="Magento\Catalog\Controller\Adminhtml\Category\Save">
+        <plugin name="custom_menu_image_preprocessing" type="Rokanthemes\CustomMenu\Controller\Adminhtml\Category\SavePlugin" />
+    </type>
+</config>
\ No newline at end of file

app/code/Rokanthemes/CustomMenu/etc/module.xml

+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
+    <module name="Rokanthemes_CustomMenu" schema_version="2.3.4" setup_version="2.3.4" active="true">
+        <sequence>
+            <module name="Magento_Catalog"/>
+        </sequence>
+    </module>
+</config>
\ No newline at end of file

app/code/Rokanthemes/CustomMenu/registration.php

+<?php
+/**
+ * Copyright © 2016 TuanHatay. All rights reserved.
+ */
+
+\Magento\Framework\Component\ComponentRegistrar::register(
+    \Magento\Framework\Component\ComponentRegistrar::MODULE,
+    'Rokanthemes_CustomMenu',
+    __DIR__
+);

app/code/Rokanthemes/CustomMenu/view/adminhtml/ui_component/product_form.xml

+<?xml version="1.0" encoding="UTF-8"?>
+
+<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
+xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
+    <modal name="advanced_inventory_modal">
+        <fieldset name="stock_data">
+            <argument name="data" xsi:type="array">
+                <item name="config" xsi:type="array">
+                    <item name="label" xsi:type="string" translate="true">Stock Configuration</item>
+                    <item name="dataScope" xsi:type="string"/>
+                    <item name="sortOrder" xsi:type="number">2</item>
+                    <item name="collapsible" xsi:type="boolean">false</item>
+                </item>
+            </argument>
+            <field name="sold_stock">
+                <argument name="data" xsi:type="array">
+                    <item name="config" xsi:type="array">
+                        <item name="sortOrder" xsi:type="number">25</item>
+                        <item name="dataType" xsi:type="string">string</item>
+                        <item name="formElement" xsi:type="string">input</item>
+                        <item name="label" xsi:type="string" translate="true">Static Width</item>
+                    </item>
+                </argument>
+            </field>
+        </fieldset>
+    </modal>
+</form>
\ No newline at end of file

app/code/Rokanthemes/CustomMenu/view/frontend/layout/default.xml

+<?xml version="1.0"?>
+<!--
+/**
+* Copyright © 2016 TuanHatay. All rights reserved.
+*/
+-->
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <body>
+        <referenceBlock name="catalog.topnav" remove="true"/>
+        <referenceContainer name="page.top">
+            <block class="Rokanthemes\CustomMenu\Block\Topmenu" name="custom.topnav" template="Rokanthemes_CustomMenu::topmenu.phtml" group="navigation-sections" ttl="3600" before="-"/>
+        </referenceContainer>
+    </body>
+</page>

app/code/Rokanthemes/CustomMenu/view/frontend/requirejs-config.js

+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+var config = {
+	"shim": {
+		"rokanthemes/custommenu": ["jquery"]
+	},
+	'paths': {
+		'rokanthemes/custommenu': 'Rokanthemes_CustomMenu/js/custommenu'
+    }
+};

app/code/Rokanthemes/CustomMenu/view/frontend/templates/sidemenu.phtml

+<?php
+/**
+ * Copyright © 2016 TuanHatay. All rights reserved.
+ */
+
+?>
+<?php
+/**
+ * Top menu for store
+ *
+ * @see \Rokanthemes\CustomMenu\Block\Topmenu
+ */
+?>
+<?php
+    $_helper = $this->helper('Rokanthemes\CustomMenu\Helper\Data');
+    $_config = $_helper->getConfig('custommenu');
+    $columnsLimit = 0;
+    if($_config['general']['enable']) {
+?>
+<?php $_menu = $block->getCustomMenuHtml(); ?>
+
+<nav class="navigation custommenu side-custommenu" role="navigation">
+    <ul>
+        <?php echo $_menu; ?>
+    </ul>
+</nav>
+
+<script type="text/javascript">
+    require([
+        'jquery',
+        'rokanthemes/custommenu'
+    ], function ($) {
+        $(".custommenu").CustomMenu();
+    });
+</script>
+<?php
+    }
+?>
\ No newline at end of file

app/code/Rokanthemes/CustomMenu/view/frontend/templates/topmenu.phtml

+<?php
+/**
+ * Copyright © 2016 TuanHatay. All rights reserved.
+ */
+
+?>
+<?php
+/**
+ * Top menu for store
+ *
+ * @see \Rokanthemes\CustomMenu\Block\Topmenu
+ */
+?>
+<?php
+    $_helper = $this->helper('Rokanthemes\CustomMenu\Helper\Data');
+    $_config = $_helper->getConfig('custommenu');
+    $columnsLimit = 0;
+    if($_config['general']['enable']) {
+?>
+<?php $_menu = $block->getCustomMenuHtml(); ?>
+
+<div class="navigation custommenu main-nav" role="navigation">
+    <ul>
+        <?php echo $_menu; ?>
+    </ul>
+</div>
+
+<script type="text/javascript">
+    require([
+        'jquery',
+        'rokanthemes/custommenu'
+    ], function ($) {
+        $(".custommenu").CustomMenu();
+    });
+</script>
+<?php
+    } else {
+?>
+<?php $_menu = $block->getHtml('level-top', 'submenu', $columnsLimit); ?>
+
+<div class="navigation custommenu main-nav" role="navigation">
+    <ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
+        <?php /* @escapeNotVerified */ echo $_menu; ?>
+    </ul>
+</div>
+
+<?php
+    }
+?>
\ No newline at end of file

app/code/Rokanthemes/CustomMenu/view/frontend/web/js/custommenu.js

+;(function($, window, document, undefined) {
+    $.fn.CustomMenu = function() {
+        $(".navigation.custommenu li.classic .submenu, .navigation.custommenu li.staticwidth .submenu, .navigation.custommenu li.classic .subchildmenu .subchildmenu").each(function(){
+            $(this).css("left","-9999px");
+            $(this).css("right","auto");
+        });
+        $(this).find("li.classic .subchildmenu > li.parent").mouseover(function(){
+            var popup = $(this).children("ul.subchildmenu");
+            var w_width = $(window).innerWidth();
+            
+            if(popup) {
+                var pos = $(this).offset();
+                var c_width = $(popup).outerWidth();
+                if(w_width <= pos.left + $(this).outerWidth() + c_width) {
+                    $(popup).css("left","auto");
+                    $(popup).css("right","100%");
+                    $(popup).css("border-radius","6px 0 6px 6px");
+                } else {
+                    $(popup).css("left","100%");
+                    $(popup).css("right","auto");
+                    $(popup).css("border-radius","0 6px 6px 6px");
+                }
+            }
+        });
+        $(this).find("li.staticwidth.parent,li.classic.parent").mouseover(function(){
+            var popup = $(this).children(".submenu");
+            var w_width = $(window).innerWidth();
+            
+            if(popup) {
+                var pos = $(this).offset();
+                var c_width = $(popup).outerWidth();
+                if(w_width <= pos.left + $(this).outerWidth() + c_width) {
+                    $(popup).css("left","auto");
+                    $(popup).css("right","0");
+                    $(popup).css("border-radius","6px 0 6px 6px");
+                } else {
+                    $(popup).css("left","0");
+                    $(popup).css("right","auto");
+                    $(popup).css("border-radius","0 6px 6px 6px");
+                }
+            }
+        });
+        $(window).resize(function(){
+            $(".navigation.custommenu li.classic .submenu, .navigation.custommenu li.staticwidth .submenu, .navigation.custommenu li.classic .subchildmenu .subchildmenu").each(function(){
+                $(this).css("left","-9999px");
+                $(this).css("right","auto");
+            });
+        });
+        $(".nav-toggle").click(function(e){
+            if(!$("html").hasClass("nav-open")) {
+                $("html").addClass("nav-before-open");
+                setTimeout(function(){
+                    $("html").addClass("nav-open");
+                }, 300);
+            }
+            else {
+                $("html").removeClass("nav-open");
+                setTimeout(function(){
+                    $("html").removeClass("nav-before-open");
+                }, 300);
+            }
+        }); 
+        $(".navigation.custommenu li.ui-menu-item > .open-children-toggle").click(function(){
+            if(!$(this).parent().children(".submenu").hasClass("opened")) {
+                $(this).parent().children(".submenu").addClass("opened");
+                $(this).parent().children("a").addClass("ui-state-active");
+            }
+            else {
+                $(this).parent().children(".submenu").removeClass("opened");
+                $(this).parent().children("a").removeClass("ui-state-active");
+            }
+        });
+		 $(".navigation.custommenu .submenu .subchildmenu li.ui-menu-item  > .open-children-toggle").click(function() {
+            if (!$(this).parent().children(".subchildmenu").hasClass("opened")) {
+                $(this).parent().children(".subchildmenu").addClass("opened");
+                $(this).parent().children("a").addClass("ui-state-active");
+                $(this).parent().children(".subchildmenu.opened").show();
+            } else {
+                $(this).parent().children(".subchildmenu").removeClass("opened");
+                $(this).parent().children("a").removeClass("ui-state-active");
+                $(this).parent().children(".subchildmenu").hide();
+            }
+        });
+    };
+})(window.Zepto || window.jQuery, window, document);
\ No newline at end of file

app/code/Rokanthemes/Instagram/Block/Adminhtml/Button/Fetchposts.php

+<?php
+namespace Rokanthemes\Instagram\Block\Adminhtml\Button;
+
+class Fetchposts extends \Magento\Config\Block\System\Config\Form\Field
+{
+    protected $_indata;
+
+    public function __construct(
+        \Magento\Backend\Block\Template\Context $context,
+        \Rokanthemes\Instagram\Helper\Data $indata,
+        array $data = []
+    ) {
+        $this->_indata = $indata;
+        parent::__construct($context, $data);
+    }
+
+    protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element)
+    {
+        $buttonBlock = $this->getForm()->getLayout()->createBlock('Magento\Backend\Block\Widget\Button');
+
+        $params = [
+            'store' => $buttonBlock->getRequest()->getParam('store')
+        ];
+
+        $url = $this->getUrl("instagram/fetchposts/submitapi", $params);
+        $data = [
+            'id' => 'fetchposts' ,
+            'label' => __('Submit'),
+            'onclick' => "setLocation('" . $url . "')"
+        ];
+
+        $userid = $this->_indata->getConfig('instagramsection/instagramgroup/userid');
+        $accesstoken = $this->_indata->getConfig('instagramsection/instagramgroup/accesstoken');
+        $username = $this->_indata->getConfig('instagramsection/instagramgroup/username');
+
+        if($userid == '' || $accesstoken == '' || $username == ''){
+            $data['disabled'] = 'disabled';
+        }
+
+        $html = $buttonBlock->setData($data)->toHtml();
+        return $html;
+    }
+}
\ No newline at end of file

app/code/Rokanthemes/Instagram/Block/Instagram.php

+<?php
+
+namespace Rokanthemes\Instagram\Block;
+
+use Magento\Framework\View\Element\Template;
+
+class Instagram extends Template {
+    
+    
+    protected function _prepareLayout() {
+        
+        parent::_prepareLayout();
+        $this->pageConfig->getTitle()->set(__('Instagram'));
+    }
+    
+
+}
\ No newline at end of file

app/code/Rokanthemes/Instagram/Block/Widget/Instagram.php

+<?php
+
+namespace Rokanthemes\Instagram\Block\Widget;
+
+use Magento\Framework\View\Element\Template;
+use Magento\Widget\Block\BlockInterface;
+
+class Instagram extends Template  implements BlockInterface
+{
+	protected $_instagrampostFactory;
+	protected $_storeManager;
+    
+    public function __construct(
+        \Magento\Framework\View\Element\Template\Context $context,
+        \Magento\Store\Model\StoreManagerInterface $storeManager,
+        \Rokanthemes\Instagram\Model\InstagrampostFactory $instagrampostFactory,
+        array $data = []
+    ) {
+    	$this->_storeManager = $storeManager;
+    	$this->_instagrampostFactory =  $instagrampostFactory;
+        parent::__construct($context, $data);
+        $this->setTemplate('widget/instagram.phtml');
+    }
+
+    public function getStoreId()
+    {
+        return $this->_storeManager->getStore()->getId();
+    }
+    
+    public function getInstagramPostByStoreView()
+    {
+    	$store_id = $this->getStoreId();
+    	$post_in = $this->_instagrampostFactory->create();
+    	$collection = $post_in->getCollection()->addFieldToFilter('store',['eq' => $store_id]);
+        if($collection->count() <= 0){
+            $collection_default = $post_in->getCollection()->addFieldToFilter('store',['eq' => 0]);
+            return $collection_default;
+        }
+    	return $collection;
+    }
+
+}
\ No newline at end of file

app/code/Rokanthemes/Instagram/Controller/Adminhtml/Fetchposts/Submitapi.php

+<?php
+
+namespace Rokanthemes\Instagram\Controller\Adminhtml\Fetchposts;
+
+use Magento\Framework\App\Filesystem\DirectoryList;
+
+class Submitapi extends \Magento\Backend\App\Action
+{
+   protected $_instagrampostFactory;
+   protected $_resourceConnection;
+   protected $_indata;
+   protected $_filesystem;
+    
+    public function __construct(
+       \Rokanthemes\Instagram\Model\InstagrampostFactory $instagrampostFactory,
+       \Magento\Framework\App\ResourceConnection $resourceConnection,
+       \Rokanthemes\Instagram\Helper\Data $indata,
+       \Magento\Framework\Filesystem $filesystem,
+        \Magento\Backend\App\Action\Context $context
+    ) {
+       $this->_instagrampostFactory = $instagrampostFactory;
+       $this->_indata = $indata;
+       $this->_resourceConnection = $resourceConnection;
+       $this->_filesystem = $filesystem;
+        parent::__construct($context);
+    }
+
+    public function execute()
+    {
+       $store = $this->getRequest()->getParam('store') ? $this->getRequest()->getParam('store') : 0;
+       $connection = $this->_resourceConnection->getConnection();
+       $rokanthemes_instagram = $this->_resourceConnection->getTableName('rokanthemes_instagram');
+
+       $userid = $this->_indata->getConfig('instagramsection/instagramgroup/userid', $store);
+       $accesstoken = $this->_indata->getConfig('instagramsection/instagramgroup/accesstoken', $store);
+       $username = $this->_indata->getConfig('instagramsection/instagramgroup/username', $store);
+       $limit = ($this->_indata->getConfig('instagramsection/instagramgroup/limit', $store)) ? $this->_indata->getConfig('instagramsection/instagramgroup/limit', $store) : 10;
+
+       if($userid == '' || $accesstoken == '' || $username == ''){
+           $this->messageManager->addError(__('Error! Please enter User ID, Access Token, User Name Instagram.'));
+           $this->_redirect('adminhtml/system_config/edit/section/instagramsection');
+           return;
+       }
+
+       $header   = [];
+        $header[] = 'Content-length: 0';
+        $header[] = 'Content-type: application/json; charset=utf-8';
+
+        $verify_url = 'https://graph.instagram.com/'.$userid.'/media';
+        $ch_verify = curl_init( $verify_url . '?fields=media_url,thumbnail_url,caption,media_type,username,permalink&limit='.$limit.'&access_token='.$accesstoken);
+
+        curl_setopt( $ch_verify, CURLOPT_HTTPHEADER, $header );
+        curl_setopt( $ch_verify, CURLOPT_SSL_VERIFYPEER, false );
+        curl_setopt( $ch_verify, CURLOPT_RETURNTRANSFER, 1 );
+        curl_setopt( $ch_verify, CURLOPT_CONNECTTIMEOUT, 5 );
+        curl_setopt( $ch_verify, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.13) Gecko/20080311 Firefox/2.0.0.13');
+
+        $cinit_verify_data = curl_exec( $ch_verify );
+        curl_close( $ch_verify );
+
+        $result = json_decode($cinit_verify_data, true);
+
+        $mediapath = $this->_filesystem->getDirectoryRead(DirectoryList::MEDIA)->getAbsolutePath().'instagram';
+        if(!is_dir($mediapath)){
+           mkdir($mediapath);
+        }
+        
+        if(isset($result['error']['message'])){
+           $this->messageManager->addError($result['error']['message']);
+           $this->_redirect('adminhtml/system_config/edit/section/instagramsection');
+           return;
+        }
+        
+        if(isset($result['data']) && is_array($result['data']) && !empty($result['data'])){
+           $connection->delete(
+               $rokanthemes_instagram,
+               ['store = ?' => $store]
+           );
+
+           foreach ($result['data'] as $key_d => $val_d) {
+               if(isset($val_d['media_type']) && $val_d['media_type'] == 'IMAGE'){
+                   $instagrampost = $this->_instagrampostFactory->create();
+                   if(isset($val_d['media_url'])){
+                       $instagrampost->setMediaUrl($val_d['media_url']);
+                       $img = $val_d['id'].'_'.rand().'.jpg';
+                        $local_media_url = $mediapath.'/'.$img;
+                        file_put_contents($local_media_url, file_get_contents($val_d['media_url']));
+                        $instagrampost->setLocalMediaUrl('instagram/'.$img);
+                   }
+                   if(isset($val_d['username'])){
+                       $instagrampost->setUsername($val_d['username']);
+                   }
+                   if(isset($val_d['permalink'])){
+                       $instagrampost->setPermalink($val_d['permalink']);
+                   }
+                   if(isset($val_d['id'])){
+                       $instagrampost->setIdInstagram($val_d['id']);
+                   }
+                   if(isset($val_d['caption'])){
+                       $instagrampost->setCaption($val_d['caption']);
+                   }
+                   $instagrampost->setStore($store);
+                   $instagrampost->save();
+               }
+           }
+
+           $this->messageManager->addSuccess(__('Fetch Posts Via API Successfully.'));
+           $this->_redirect('adminhtml/system_config/edit/section/instagramsection');
+           return;
+        }
+        else{
+           $this->messageManager->addError(__('Error! Please Try Again.'));
+           $this->_redirect('adminhtml/system_config/edit/section/instagramsection');
+           return;
+        }
+
+       $this->messageManager->addSuccess(__('You saved the configuration.'));
+        $this->_redirect('adminhtml/system_config/edit/section/instagramsection');
+    }
+}
+?>
\ No newline at end of file

app/code/Rokanthemes/Instagram/Controller/Index/Index.php

+<?php
+
+namespace Rokanthemes\Instagram\Controller\Index;
+
+use Magento\Framework\App\RequestInterface;
+
+class Index extends \Magento\Framework\App\Action\Action
+{
+
+    public function execute() {
+        $this->_view->loadLayout();
+        $this->_view->getLayout()->initMessages();
+        $this->_view->renderLayout();  
+    }
+
+}
\ No newline at end of file

app/code/Rokanthemes/Instagram/Helper/Data.php

+<?php
+
+namespace Rokanthemes\Instagram\Helper;
+
+use Magento\Framework\UrlInterface;
+
+class Data extends \Magento\Framework\App\Helper\AbstractHelper
+{
+    
+    public function getConfig($key, $storeId = null)
+    {
+        $result = $this->scopeConfig->getValue($key, \Magento\Store\Model\ScopeInterface::SCOPE_STORE, $storeId);
+        return $result;
+    }
+
+    public function getMediaPath() {
+        return $this->_urlBuilder->getBaseUrl(['_type' => UrlInterface::URL_TYPE_MEDIA]);
+    }
+}
\ No newline at end of file

app/code/Rokanthemes/Instagram/Model/Instagrampost.php

+<?php
+
+namespace Rokanthemes\Instagram\Model;
+
+class Instagrampost extends \Magento\Framework\Model\AbstractModel implements \Magento\Framework\DataObject\IdentityInterface
+{
+	const CACHE_TAG = 'rokanthemes_instagram_post';
+
+	protected $_cacheTag = 'rokanthemes_instagram_post';
+
+	protected $_eventPrefix = 'rokanthemes_instagram_post';
+
+	protected function _construct()
+	{
+		$this->_init('Rokanthemes\Instagram\Model\ResourceModel\Instagrampost');
+	}
+
+	public function getIdentities()
+	{
+		return [self::CACHE_TAG . '_' . $this->getId()];
+	}
+
+	public function getDefaultValues()
+	{
+		$values = [];
+
+		return $values;
+	}
+}
\ No newline at end of file

app/code/Rokanthemes/Instagram/Model/ResourceModel/Instagrampost.php

+<?php
+namespace Rokanthemes\Instagram\Model\ResourceModel;
+
+
+class Instagrampost extends \Magento\Framework\Model\ResourceModel\Db\AbstractDb
+{
+	
+	public function __construct(
+		\Magento\Framework\Model\ResourceModel\Db\Context $context
+	)
+	{
+		parent::__construct($context);
+	}
+	
+	protected function _construct()
+	{
+		$this->_init('rokanthemes_instagram', 'id');
+	}
+	
+}
\ No newline at end of file

app/code/Rokanthemes/Instagram/Model/ResourceModel/Instagrampost/Collection.php

+<?php
+namespace Rokanthemes\Instagram\Model\ResourceModel\Instagrampost;
+
+class Collection extends \Magento\Framework\Model\ResourceModel\Db\Collection\AbstractCollection
+{
+	protected $_idFieldName = 'id';
+	protected $_eventPrefix = 'rokanthemes_instagram_post_collection';
+	protected $_eventObject = 'instagram_post_collection';
+
+	/**
+	 * Define resource model
+	 *
+	 * @return void
+	 */
+	protected function _construct()
+	{
+		$this->_init('Rokanthemes\Instagram\Model\Instagrampost', 'Rokanthemes\Instagram\Model\ResourceModel\Instagrampost');
+	}
+
+}
\ No newline at end of file

app/code/Rokanthemes/Instagram/Model/Source/Resolution.php

+<?php
+
+namespace Rokanthemes\Instagram\Model\Source;
+
+class Resolution implements \Magento\Framework\Option\ArrayInterface
+{
+
+    protected $_options;
+
+    public function toOptionArray() {
+
+        $this->_options = [
+            ['label' => '150px x 150px', 'value' => 'thumbnail'],
+            ['label' => '306px x 306px', 'value' => 'low_resolution'],
+            ['label' => '612px x 612px', 'value' => 'standard_resolution'],
+        ];
+        return $this->_options;
+    }
+
+}
\ No newline at end of file

app/code/Rokanthemes/Instagram/Setup/InstallData.php

+<?php
+namespace Rokanthemes\Instagram\Setup;
+
+use Magento\Framework\Setup\InstallDataInterface;
+use Magento\Framework\Setup\ModuleContextInterface;
+use Magento\Framework\Setup\ModuleDataSetupInterface;
+use Magento\Eav\Setup\EavSetupFactory;
+use Magento\Eav\Setup\EavSetup;
+/**
+ * @codeCoverageIgnore
+ */
+class InstallData implements InstallDataInterface{
+	/**
+	 * {@inheritdoc}
+	 */
+    /**
+     * EAV setup factory
+     *
+     * @var EavSetupFactory
+     */
+    private $eavSetupFactory;
+
+    /**
+     * Init
+     *
+     * @param EavSetupFactory $eavSetupFactory
+     */
+    public function __construct(EavSetupFactory $eavSetupFactory)
+    {
+        $this->eavSetupFactory = $eavSetupFactory;
+    }
+    public function install(ModuleDataSetupInterface $setup, ModuleContextInterface $context)
+    {
+        /** @var EavSetup $eavSetup */
+        $eavSetup = $this->eavSetupFactory->create(['setup' => $setup]);
+        $installer = $setup;
+
+        $installer->startSetup();
+            $installer->getConnection()->dropTable($installer->getTable('rokanthemes_instagram'));
+            $table = $installer->getConnection()
+                ->newTable($installer->getTable('rokanthemes_instagram'))
+                ->addColumn(
+                    'id',
+                    \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
+                    10,
+                    ['identity' => true, 'unsigned' => true, 'nullable' => false, 'primary' => true],
+                    'ID'
+                )
+                ->addColumn(
+                    'media_url',
+                    \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                    null,
+                    ['nullable' => false],
+                    'media_url'
+                )
+                ->addColumn(
+                    'local_media_url',
+                    \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                    null,
+                    ['nullable' => false],
+                    'local_media_url'
+                )
+                ->addColumn(
+                    'id_instagram',
+                    \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                    255,
+                    ['nullable' => false, 'default' => ''],
+                    'id_instagram'
+                )
+                ->addColumn(
+                    'username',
+                    \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                    255,
+                    ['nullable' => false, 'default' => ''],
+                    'username'
+                )
+                ->addColumn(
+                    'permalink',
+                    \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                    255,
+                    ['nullable' => false, 'default' => ''],
+                    'permalink'
+                )
+                ->addColumn(
+                    'caption',
+                    \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                    null,
+                    ['nullable' => true],
+                    'Caption'
+                )
+                ->addColumn(
+                    'store',
+                    \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
+                    10,
+                    ['nullable' => true],
+                    'Store'
+                )
+                ->setComment('Instagram');
+
+            $installer->getConnection()->createTable($table);
+
+        $installer->endSetup();
+    }
+}

app/code/Rokanthemes/Instagram/Setup/UpgradeSchema.php

+<?php
+namespace Rokanthemes\Instagram\Setup;
+
+use Magento\Framework\Setup\UpgradeSchemaInterface;
+use Magento\Framework\Setup\ModuleContextInterface;
+use Magento\Framework\Setup\SchemaSetupInterface;
+
+class UpgradeSchema implements UpgradeSchemaInterface
+{
+    
+    public function upgrade(SchemaSetupInterface $setup, ModuleContextInterface $context)
+    {
+        $installer = $setup;
+
+        $setup->startSetup();
+
+        if (version_compare($context->getVersion(), '2.4.2', '<')) {
+            $installer->getConnection()->dropTable($installer->getTable('rokanthemes_instagram'));
+            $table = $installer->getConnection()
+                ->newTable($installer->getTable('rokanthemes_instagram'))
+                ->addColumn(
+                    'id',
+                    \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
+                    10,
+                    ['identity' => true, 'unsigned' => true, 'nullable' => false, 'primary' => true],
+                    'ID'
+                )
+                ->addColumn(
+                    'media_url',
+                    \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                    null,
+                    ['nullable' => false],
+                    'media_url'
+                )
+                ->addColumn(
+                    'local_media_url',
+                    \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                    null,
+                    ['nullable' => false],
+                    'local_media_url'
+                )
+                ->addColumn(
+                    'id_instagram',
+                    \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                    255,
+                    ['nullable' => false, 'default' => ''],
+                    'id_instagram'
+                )
+                ->addColumn(
+                    'username',
+                    \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                    255,
+                    ['nullable' => false, 'default' => ''],
+                    'username'
+                )
+                ->addColumn(
+                    'permalink',
+                    \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                    255,
+                    ['nullable' => false, 'default' => ''],
+                    'permalink'
+                )
+                ->addColumn(
+                    'caption',
+                    \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
+                    null,
+                    ['nullable' => true],
+                    'Caption'
+                )
+                ->addColumn(
+                    'store',
+                    \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
+                    10,
+                    ['nullable' => true],
+                    'Store'
+                )
+                ->setComment('Instagram');
+
+            $installer->getConnection()->createTable($table);
+        }
+		
+        $setup->endSetup();
+    }
+}

app/code/Rokanthemes/Instagram/composer.json

+{
+    "name": "rokanthemes/module-instagram",
+    "description": "N/A",
+    "require": {
+        "php": "~7.1.3||~7.2.0",
+        "rokanthemes/module-rokanbase": "2.3.*"
+    },
+    "type": "magento2-module",
+    "license": [
+        "OSL-3.0",
+        "AFL-3.0"
+    ],
+    "autoload": {
+        "files": [
+            "registration.php"
+        ],
+        "psr-4": {
+            "Rokanthemes\\Themeoption\\": ""
+        }
+    },
+    "version": "2.4.2"
+}
\ No newline at end of file

app/code/Rokanthemes/Instagram/etc/acl.xml

+<?xml version="1.0"?>
+
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Acl/etc/acl.xsd">
+    <acl>
+        <resources>
+            <resource id="Magento_Backend::admin">
+                <resource id="Magento_Backend::stores">
+                    <resource id="Magento_Backend::stores_settings">
+                        <resource id="Magento_Config::config">
+                            <resource id="Rokanthemes_Instagram::instagram_config" title="Instagram"/>
+                        </resource>
+                    </resource>
+                </resource>
+            </resource>
+        </resources>
+    </acl>
+</config>

app/code/Rokanthemes/Instagram/etc/adminhtml/menu.xml

+<?xml version="1.0"?>
+
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../Magento/Backend/etc/menu.xsd">
+    <menu>
+        <add id="Rokanthemes_Instagram::instagram_config" title="Instagram" module="Rokanthemes_Instagram" sortOrder="100" parent="Rokanthemes_RokanBase::rokanbase_setting" action="adminhtml/system_config/edit/section/instagramsection" resource="Rokanthemes_Instagram::instagram_config"/>
+    </menu>
+</config>

app/code/Rokanthemes/Instagram/etc/adminhtml/routes.xml

+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
+    <router id="admin">
+        <route id="instagram" frontName="instagram">
+            <module name="Rokanthemes_Instagram" before="Magento_Backend" />
+        </route>
+    </router>
+</config>
\ No newline at end of file

app/code/Rokanthemes/Instagram/etc/adminhtml/system.xml

+<?xml version="1.0"?>
+
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../Config/etc/system_file.xsd">
+    <system>
+        <section id="instagramsection" translate="label" type="text" sortOrder="90" showInDefault="1" showInWebsite="1" showInStore="1">
+            <label>Instagram</label>
+            <tab>rokanthemes</tab>
+            <resource>Rokanthemes_Instagram::instagram_config</resource>
+            <group id="instagramgroup" translate="label" type="select" sortOrder="15" showInDefault="1" showInWebsite="1" showInStore="1">
+                <label>General</label>
+                <field id="active" translate="label" type="select" sortOrder="5" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Enable </label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                    <comment>Select Yes to enable module on frontend.</comment>
+                </field>
+                <field id="title" translate="label comment" type="textarea" sortOrder="6" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Title:</label>
+                    <comment>Block Title</comment>
+                </field>
+                <field id="userid" translate="label comment" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>User Id</label>
+                    <comment><![CDATA[set User Id]]></comment>
+                    <depends>
+                        <field id="active">1</field>
+                    </depends>
+                    <validate>required-entry</validate>   
+                </field>
+                <field id="accesstoken" translate="label comment" type="text" sortOrder="15" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Access Token</label>
+                    <comment><![CDATA[set Instagram Access Token]]></comment>
+                    <depends>
+                        <field id="active">1</field>
+                    </depends>
+                    <validate>required-entry</validate>  
+                </field>
+                <field id="username" translate="label comment" type="text" sortOrder="25" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Username</label>
+                    <comment><![CDATA[set Instagram Username]]></comment>
+                    <depends>
+                        <field id="active">1</field>
+                    </depends>
+                    <validate>required-entry</validate>  
+                </field>
+                <field id="limit" translate="label comment" type="text" sortOrder="35" showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Number of Photos</label>
+                    <comment><![CDATA[Number of photos from Instagram API]]></comment>
+                    <depends>
+                        <field id="active">1</field>
+                    </depends>
+                    <validate>required-entry</validate>  
+                </field>
+                <field id="fetch_posts" translate="label comment" type="button" sortOrder="50"  showInDefault="1" showInWebsite="0" showInStore="1">
+                    <label>Fetch Posts</label>
+                    <frontend_model>Rokanthemes\Instagram\Block\Adminhtml\Button\Fetchposts</frontend_model>
+                    <comment><![CDATA[Fetch Posts from Instagram API. Please enter User ID, Access Token, User Name Instagram > click Save Config before Submit]]></comment>
+                    <depends>
+                        <field id="active">1</field>
+                    </depends>
+                </field>
+            </group>
+        </section>
+    </system>
+</config>

app/code/Rokanthemes/Instagram/etc/config.xml

+<?xml version="1.0"?>
+
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Store:etc/config.xsd">
+    <default>
+        <instagramsection>
+            <instagramgroup>
+                <active>0</active>
+                <userid></userid>
+                <accesstoken></accesstoken>
+                <selectimageresolution>0</selectimageresolution>
+            </instagramgroup>
+        </instagramsection>    
+    </default>
+</config>

app/code/Rokanthemes/Instagram/etc/frontend/routes.xml

+<?xml version="1.0"?>
+
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/App/etc/routes.xsd">
+    <router id="standard">
+        <route id="instagram" frontName="instagram">
+            <module name="Rokanthemes_Instagram" />
+        </route>
+    </router>
+</config>
\ No newline at end of file

app/code/Rokanthemes/Instagram/etc/module.xml

+<?xml version="1.0"?>
+
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
+    <module name="Rokanthemes_Instagram" setup_version="2.4.2"/>
+</config>

app/code/Rokanthemes/Instagram/etc/widget.xml

+<?xml version="1.0" encoding="UTF-8"?>
+
+<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
+    <widget id="instagramwidget" class="Rokanthemes\Instagram\Block\Widget\Instagram">
+        <label translate="true">Instagram widget</label>
+        <description>Instagram widget</description>
+        <parameters>
+            <parameter name="title" xsi:type="text" visible="true" required="false" sort_order="10">
+                <label translate="true">Title</label>
+            </parameter>
+			<parameter name="description" xsi:type="text" visible="true" required="false" sort_order="20">
+                <label translate="true">Description</label> 
+            </parameter>
+            <parameter name="image_format" xsi:type="select" required="false" visible="true" sort_order="60">
+                <label translate="true">Image format</label>
+                <options>
+                    <option name="square" value="square" selected="true">
+                        <label translate="true">Square</label>
+                    </option>
+                    <option name="circle" value="circle">
+                        <label translate="true">Circle</label>
+                    </option>
+                </options>
+            </parameter>
+            <parameter name="show_captions" xsi:type="select" required="false" visible="true" sort_order="70">
+                <label>Show captions</label>
+                <options>
+                    <option name="no" value="no" selected="true">
+                        <label translate="true">No</label>
+                    </option>
+                    <option name="yes" value="yes">
+                        <label translate="true">Yes</label>
+                    </option>
+                </options>
+            </parameter>
+			<parameter name="show_instagram_icon" xsi:type="select" required="false" visible="true" sort_order="75">
+                <label>Show Instagram icon</label>
+				<description translate="true">Instagram icon will show if you disabled Instagram caption</description>
+                <options>
+                    <option name="no" value="no" selected="true">
+                        <label translate="true">No</label>
+                    </option>
+                    <option name="yes" value="yes">
+                        <label translate="true">Yes</label>
+                    </option>
+                </options>
+            </parameter>
+            <parameter name="image_resolution" xsi:type="select" required="false" visible="true" sort_order="80">
+                <label>Image resolution</label>
+                <options>
+                    <option name="original" value="original" selected="true">
+                        <label translate="true">Original images</label>
+                    </option>
+                    <option name="small" value="small">
+                        <label translate="true">Small (80x80)</label>
+                    </option>
+                    <option name="thumbnail" value="thumbnail">
+                        <label translate="true">Thumbnail (150x150)</label>
+                    </option>
+                    <option name="medium" value="medium">
+                        <label translate="true">Medium (320x320)</label>
+                    </option>
+                    <option name="large" value="large">
+                        <label translate="true">Large (640x640)</label>
+                    </option>
+                </options>
+            </parameter>
+			<parameter name="rows" xsi:type="select" required="true" visible="true" sort_order="90">
+                <label translate="true">Rows</label>
+                <options>
+                    <option name="default" value="1" selected="true">
+                        <label translate="true">1 Row</label>
+                    </option>
+                    <option name="item2" value="2">
+                        <label translate="true">2 Rows</label>
+                    </option>
+                    <option name="item3" value="3">
+                        <label translate="true">3 Rows</label>
+                    </option>
+                    <option name="item4" value="4">
+                        <label translate="true">4 Rows</label>
+                    </option>
+                    <option name="item5" value="5">
+                        <label translate="true">5 Rows</label>
+                    </option>
+                </options>
+            </parameter>
+			<parameter name="next_back" xsi:type="select" required="true" visible="true" sort_order="100" source_model="Magento\Config\Model\Config\Source\Yesno">
+                <label translate="true">Show Next/Back control</label>
+            </parameter>
+			<parameter name="owl_dots" xsi:type="select" required="false" visible="true" sort_order="130" source_model="Magento\Config\Model\Config\Source\Yesno">
+                <label translate="true">Owl Dots</label>
+            </parameter>
+			<parameter name="owl_item_desktop" xsi:type="text" required="true" visible="true" sort_order="150">
+                <label translate="true">Owl Items On Big Desktop</label>
+				<description translate="true">Big desktop: Over 1440 pixels</description>
+				<value>3</value>
+            </parameter>
+			<parameter name="owl_item_default" xsi:type="text" required="true" visible="true" sort_order="160">
+                <label translate="true">Owl Items Desktop</label>
+				<description translate="true">Desktop: 1200px - 1439px</description>
+				<value>3</value>
+            </parameter>
+			<parameter name="owl_item_small_desktop" xsi:type="text" required="true" visible="true" sort_order="190">
+                <label translate="true">Owl Items On Desktop Small</label>
+				<description translate="true">Desktop Small: 1024px - 1199px</description>
+				<value>3</value>
+            </parameter>
+			<parameter name="owl_item_big_tablet" xsi:type="text" required="true" visible="true" sort_order="200">
+                <label translate="true">Owl Items On Big Tablet</label>
+				<description translate="true">Big Tablet: 992px - 1023px</description>
+				<value>3</value>
+            </parameter>
+			<parameter name="owl_item_tablet" xsi:type="text" required="true" visible="true" sort_order="210">
+                <label translate="true">Owl Items On Tablet</label>
+				<description translate="true">Tablet: 768px - 991px</description>
+				<value>3</value>
+            </parameter>
+			<parameter name="owl_item_small_tablet" xsi:type="text" required="true" visible="true" sort_order="220">
+                <label translate="true">Owl Items On Small Tablet</label>
+				<description translate="true">Tablet Small: 576px - 767px</description>
+				<value>3</value>
+            </parameter>
+			<parameter name="owl_item_mobile" xsi:type="text" required="true" visible="true" sort_order="230">
+                <label translate="true">Owl Items On Mobile</label>
+				<description translate="true"> Mobile: Under 575px</description>
+				<value>3</value>
+            </parameter>
+			<parameter name="owl_margin" xsi:type="text" required="false" visible="true" sort_order="240">
+                <label translate="true">Owl Margin</label>
+            </parameter>
+        </parameters>
+    </widget> 
+</widgets>
\ No newline at end of file

app/code/Rokanthemes/Instagram/registration.php

+<?php
+
+\Magento\Framework\Component\ComponentRegistrar::register(
+    \Magento\Framework\Component\ComponentRegistrar::MODULE,
+    'Rokanthemes_Instagram',
+    __DIR__
+);
\ No newline at end of file

app/code/Rokanthemes/Instagram/view/frontend/layout/default.xml

+<?xml version="1.0"?>
+<!--
+/**
+ * Rokanthemes Infotech
+ * Rokanthemes Instagram Extension
+ * 
+ * @category   Rokanthemes
+ * @package    Rokanthemes_Instagram
+ * @copyright  Copyright © 2006-2016 Rokanthemes (https://www.rokanthemesinfotech.com)
+ * @license    https://www.rokanthemesinfotech.com/magento-extension-license/
+ */
+-->
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="2columns-right" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
+    <head>
+        <css src="Rokanthemes_Instagram::css/instagram.css"/>
+    </head>
+</page>

app/code/Rokanthemes/Instagram/view/frontend/templates/widget/instagram.phtml

+<?php 
+$helper = $this->helper('Rokanthemes\Instagram\Helper\Data');
+$owl_item_default = $block->getData('owl_item_default');
+$owl_item_desktop = $block->getData('owl_item_desktop');
+$owl_item_small_desktop = $block->getData('owl_item_small_desktop');
+$owl_item_big_tablet = $block->getData('owl_item_big_tablet');
+$owl_item_tablet = $block->getData('owl_item_tablet');
+$owl_item_small_tablet = $block->getData('owl_item_small_tablet');
+$owl_item_mobile = $block->getData('owl_item_mobile');
+$rows = $block->getData('rows');
+$owl_margin = $this->getData('owl_margin');
+$next_back = (1 == $this->getData('next_back')) ? 'true' : 'false';
+$owl_dots = (1 == $this->getData('owl_dots')) ? 'true' : 'false';
+if($helper->getConfig('instagramsection/instagramgroup/active')){
+	$collections = $block->getInstagramPostByStoreView();
+?>
+	<div class="section container-rokan-instagram rokantheme-instagram">
+		<!--
+		<div class="rokan-title header-rokan-instagram">
+			<?php //if($block->getData('title')): ?>
+				<h3 class="module-title instagram-title"><?php //$block->escapeHtml($block->getData('title')) ?></h3>
+			<?php //endif; ?>
+			<?php //if($block->getData('description')): ?>
+				<p class="rokan-description instagram-short-des"><?php //$block->escapeHtml($block->getData('description')) ?></p>
+			<?php //endif; ?>
+		</div>
+	-->
+		<?php if($collections->count() > 0){ ?>
+		<div class="content-images-rokan-instagram">
+			<div class="owl"> 
+				<?php 
+					$i=0;
+					foreach ($collections as $val_co) { 
+					if($i %$rows == 0){
+						echo '<div class="item-row">';
+					}
+					$i ++;
+					?>
+					<div class="intagram-item">
+						<a href="<?= $val_co->getPermalink() ;?>" target="_blank" class="<?= $block->getData('image_format') ?> <?php if($block->getData('show_captions') == 'yes'){ ?>has-caption<?php } ?> <?php if($block->getData('show_instagram_icon') == 'yes'){ ?>has-intagram-icon<?php } ?>">
+							<figure>
+								<div>
+									<img alt="<?= $val_co->getIdInstagram() ;?>" src="<?= $val_co->getMediaUrl() ;?>">
+								</div>
+								<?php if($block->getData('show_captions') == 'yes' && $val_co->getCaption()){ ?>
+								<figcaption><?= $val_co->getCaption() ?></figcaption>
+								<?php } ?>
+							</figure>
+						</a>
+					</div>
+					<?php if($i %$rows == 0) echo "</div>"; ?>
+				<?php } ?>
+				<?php if($i %$rows != 0) echo "</div>"; ?>
+			</ul>
+		</div>
+		<?php }else{ ?>
+		<div class="instagram-connect-error">
+			<p><strong><?php echo __('Error: No connected account.');?></strong></p>
+			<p><?php echo __('Please go to the admin > Rokanthemes > Configuration > Instagram: Settings page to connect an account.');?></p>
+		</div>
+		<?php } ?>
+	</div> 
+<?php } ?>
+<script type="text/javascript">
+	require([
+		'jquery',
+		'mage/mage',
+		'rokanthemes/owl'
+	], function ($) {
+		'use strict';
+
+		jQuery(".content-images-rokan-instagram .owl").owlCarousel({
+			lazyLoad: false,
+			autoPlay : false,
+			items : <?php echo $owl_item_default; ?>,
+			itemsDesktop : [1199,<?php echo $owl_item_desktop; ?>],
+			itemsDesktopSmall : [991,<?php echo $owl_item_small_desktop; ?>],
+			itemsTablet: [768,<?php echo $owl_item_tablet; ?>],
+			itemsMobile : [479,<?php echo $owl_item_mobile; ?>],
+			slideSpeed : 500,
+			paginationSpeed : 500,
+			rewindSpeed : 500,
+			navigation : <?php if($next_back) echo 'true'; else echo 'false'; ?>,
+			stopOnHover : true,
+			pagination :false,
+			scrollPerPage:false,
+		});
+	});
+</script>
\ No newline at end of file

app/code/Rokanthemes/Instagram/view/frontend/web/css/instagram.css

+.instangram-feed {
+    display: inline-block;
+    position: relative;
+}
+.instagram-image-name {
+
+    bottom: 5px;
+    left: 0;
+    position: absolute;
+    text-align: center;
+    width: 100%;
+    z-index: 1;
+    background-color: rgba(0,0,0,0.7);
+    color: #fff;
+    padding: 20px 0;
+    opacity: 0;
+    height: 0;
+}
+.instangram-feed:hover .instagram-image-name {
+    opacity: 1;
+    height: auto;
+    transition-duration: 0.5s;
+    transition-timing-function: ease-in;
+    transition-delay: 0s;
+}

app/code/Rokanthemes/Instagram/view/frontend/web/css/source/_module.less

+// Instagram module
+// Copyright by Youngly - BlueskyTechco
+// ________________________________________
+//  Variables
+// ________________________________________
+@intagram-caption-color: @color-white;
+@intagram-caption-limited-line: 3;
+@intagram-caption-font-size: @font-size__base;
+@intagram-caption-font-style: false;
+@intagram-caption-text-transform: false;
+@intagram-caption-text-postion: absolute;
+//  Icons
+//  ________________________________________
+
+@intagram_icon_font: "Font Awesome 5 Brands";
+@intagram-icon: "\f16d";
+@intagram-icon_font-weight: 400;
+@_icon_intagram_font_size: 36px;
+@_icon_intagram_color: @color-white;
+
+@intagram-overlay_bg: fade(#000, 30%);
+
+@item-row-margin: 2rem;
+// Intagram icon
+.icon-font-intgram(){
+	.lib-css(content, @intagram-icon);
+	.lib-css(color, @_icon_intagram_color);
+	.lib-css(font-size, @_icon_intagram_font_size);
+    .lib-css(font-family, @intagram_icon_font);
+    .lib-css(font-weight,  @intagram-icon_font-weight);
+}
+// Hover effect
+@hover_zoom: true;
+@hover_transform: scale(1.1);
+.lib-hover-intagram-effect(
+  @_hover_zoom: @hover_zoom
+) when (@_hover_zoom = true) {
+    .lib-css(transform, @hover_transform, 1);
+}
+
+& when (@media-common = true) {
+	.rokantheme-instagram{
+		.item-row{
+			.intagram-item{
+				&:not(:last-of-type){
+					.lib-css(margin-bottom, @item-row-margin);
+				}
+			}
+		}
+		.intagram-item{
+			a{
+				display: block;
+				overflow: hidden;
+				img{
+					.lib-css(transition, 0.4s, 1);
+				}
+				&:hover{
+					img{
+						.lib-hover-intagram-effect();
+					}
+				}
+				&.circle{
+					@border-radius: 50%;
+					.lib-css(border-radius, @border-radius, 1);
+					img{
+						@border-radius: 50%;
+						.lib-css(border-radius, @border-radius, 1);
+					}
+				}
+				&.has-intagram-icon{
+					&:not(.has-caption){
+						position: relative;
+						&:before{
+							.icon-font-intgram();
+							position: absolute;
+							left: 50%;
+							top: 50%;
+							@transform: translate(-50%, -50%);
+							.lib-css(transform, @transform, 1);
+							z-index: 2;
+							opacity: 0;
+							visibility: hidden;
+							.lib-css(transition, 0.4s, 1);
+						}
+						&:hover{
+							&:before{
+								opacity: 1;
+								visibility: visible;
+							}
+						}
+					}
+				}
+				&.has-intagram-icon,
+				&.has-caption{
+					&:after{
+						content: '';
+						position: absolute;
+						left: 0;
+						right: 0;
+						top: 0;
+						bottom: 0;
+						z-index: 1;
+						.lib-css(background-color, @intagram-overlay_bg);
+						opacity: 0;
+						visibility: hidden;
+						.lib-css(transition, 0.4s, 1);
+					}
+					&:hover{
+						&:after{
+							opacity: 1;
+							visibility: visible;
+						}
+					}
+					&.circle{
+						&:after{
+							@border-radius: 50%;
+							.lib-css(border-radius, @border-radius, 1);
+						}
+					}
+				}
+				&.has-caption{
+					figcaption{
+						.lib-css(color, @intagram-caption-color);
+						.lib-css(font-size, @intagram-caption-font-size);
+						.lib-css(font-style, @intagram-caption-font-style);
+						.lib-css(text-transform, @intagram-caption-text-transform);
+						 display: -webkit-box;
+					    -webkit-box-orient: vertical;
+					    overflow: hidden;
+					    text-overflow: ellipsis;
+						.lib-css(-webkit-line-clamp, @intagram-caption-limited-line);
+						.lib-css(position, @intagram-caption-text-postion);
+						top: 50%;
+						left: 50%;
+						width: 100%;
+						@transform: translate(-50%, -50%);
+						.lib-css(transform, @transform, 1);
+						padding: 0 10%;
+						text-align: center;
+						z-index: 2;
+					}
+					&:after{
+						opacity: 1;
+						visibility: visible;
+					} 
+				}
+			}
+		}
+		// Error
+		.instagram-connect-error{
+			text-align: center;
+		    padding: 25px 15px;
+		    background-color: #f8d7da;
+		    border-color: #f5c6cb;
+		    p{
+		    	margin-bottom: 0;
+		    	strong{
+		    		display: block;
+		    		margin-bottom: 8px;
+		    	}
+		    }
+		}
+	}
+}
\ No newline at end of file

app/code/Rokanthemes/QuickView/Controller/Product.php

+<?php
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+namespace Rokanthemes\QuickView\Controller;
+
+use Magento\Catalog\Model\Product as CatalogProduct;
+use Magento\Framework\App\RequestInterface;
+use Magento\Framework\Exception\NoSuchEntityException;
+use Magento\Review\Model\Review;
+
+/**
+ * Review controller
+ *
+ * @SuppressWarnings(PHPMD.CouplingBetweenObjects)
+ */
+abstract class Product extends \Magento\Framework\App\Action\Action
+{
+    /**
+     * Core registry
+     *
+     * @var \Magento\Framework\Registry
+     */
+    protected $coreRegistry = null;
+
+    /**
+     * Customer session model
+     *
+     * @var \Magento\Customer\Model\Session
+     */
+    protected $customerSession;
+
+    /**
+     * Generic session
+     *
+     * @var \Magento\Framework\Session\Generic
+     */
+    protected $reviewSession;
+
+    /**
+     * Catalog catgory model
+     *
+     * @var \Magento\Catalog\Api\CategoryRepositoryInterface
+     */
+    protected $categoryRepository;
+
+    /**
+     * Logger
+     *
+     * @var \Psr\Log\LoggerInterface
+     */
+    protected $logger;
+
+    /**
+     * Catalog product model
+     *
+     * @var \Magento\Catalog\Api\ProductRepositoryInterface
+     */
+    protected $productRepository;
+
+    /**
+     * Review model
+     *
+     * @var \Magento\Review\Model\ReviewFactory
+     */
+    protected $reviewFactory;
+
+    /**
+     * Rating model
+     *
+     * @var \Magento\Review\Model\RatingFactory
+     */
+    protected $ratingFactory;
+
+    /**
+     * Catalog design model
+     *
+     * @var \Magento\Catalog\Model\Design
+     */
+    protected $catalogDesign;
+
+    /**
+     * Core model store manager interface
+     *
+     * @var \Magento\Store\Model\StoreManagerInterface
+     */
+    protected $storeManager;
+
+    /**
+     * Core form key validator
+     *
+     * @var \Magento\Framework\Data\Form\FormKey\Validator
+     */
+    protected $formKeyValidator;
+
+    /**
+     * @param \Magento\Framework\App\Action\Context $context
+     * @param \Magento\Framework\Registry $coreRegistry
+     * @param \Magento\Customer\Model\Session $customerSession
+     * @param \Magento\Catalog\Api\CategoryRepositoryInterface $categoryRepository
+     * @param \Psr\Log\LoggerInterface $logger
+     * @param \Magento\Catalog\Api\ProductRepositoryInterface $productRepository
+     * @param \Magento\Review\Model\ReviewFactory $reviewFactory
+     * @param \Magento\Review\Model\RatingFactory $ratingFactory
+     * @param \Magento\Catalog\Model\Design $catalogDesign
+     * @param \Magento\Framework\Session\Generic $reviewSession
+     * @param \Magento\Store\Model\StoreManagerInterface $storeManager
+     * @param \Magento\Framework\Data\Form\FormKey\Validator $formKeyValidator
+     * @SuppressWarnings(PHPMD.ExcessiveParameterList)
+     */
+    public function __construct(
+        \Magento\Framework\App\Action\Context $context,
+        \Magento\Framework\Registry $coreRegistry,
+        \Magento\Customer\Model\Session $customerSession,
+        \Magento\Catalog\Api\CategoryRepositoryInterface $categoryRepository,
+        \Psr\Log\LoggerInterface $logger,
+        \Magento\Catalog\Api\ProductRepositoryInterface $productRepository,
+        \Magento\Review\Model\ReviewFactory $reviewFactory,
+        \Magento\Review\Model\RatingFactory $ratingFactory,
+        \Magento\Catalog\Model\Design $catalogDesign,
+        \Magento\Framework\Session\Generic $reviewSession,
+        \Magento\Store\Model\StoreManagerInterface $storeManager,
+        \Magento\Framework\Data\Form\FormKey\Validator $formKeyValidator
+    ) {
+        $this->storeManager = $storeManager;
+        $this->coreRegistry = $coreRegistry;
+        $this->customerSession = $customerSession;
+        $this->reviewSession = $reviewSession;
+        $this->categoryRepository = $categoryRepository;
+        $this->logger = $logger;
+        $this->productRepository = $productRepository;
+        $this->reviewFactory = $reviewFactory;
+        $this->ratingFactory = $ratingFactory;
+        $this->catalogDesign = $catalogDesign;
+        $this->formKeyValidator = $formKeyValidator;
+
+        parent::__construct($context);
+    }
+
+    /**
+     * Dispatch request
+     *
+     * @param RequestInterface $request
+     * @return \Magento\Framework\App\ResponseInterface
+     */
+    public function dispatch(RequestInterface $request)
+    {
+        $allowGuest = $this->_objectManager->get('Magento\Review\Helper\Data')->getIsGuestAllowToWrite();
+        if (!$request->isDispatched()) {
+            return parent::dispatch($request);
+        }
+
+        if (!$allowGuest && $request->getActionName() == 'post' && $request->isPost()) {
+            if (!$this->customerSession->isLoggedIn()) {
+                $this->_actionFlag->set('', self::FLAG_NO_DISPATCH, true);
+                $this->customerSession->setBeforeAuthUrl($this->_url->getUrl('*/*/*', ['_current' => true]));
+                $this->_reviewSession->setFormData(
+                    $request->getPostValue()
+                )->setRedirectUrl(
+                    $this->_redirect->getRefererUrl()
+                );
+                $this->getResponse()->setRedirect(
+                    $this->_objectManager->get('Magento\Customer\Model\Url')->getLoginUrl()
+                );
+            }
+        }
+
+        return parent::dispatch($request);
+    }
+
+    /**
+     * Initialize and check product
+     *
+     * @return \Magento\Catalog\Model\Product|bool
+     */
+    protected function initProduct()
+    {
+        // $this->_eventManager->dispatch('review_controller_product_init_before', ['controller_action' => $this]);
+        $categoryId = (int)$this->getRequest()->getParam('category', false);
+        $productId = (int)$this->getRequest()->getParam('id');
+
+        $product = $this->loadProduct($productId);
+        if (!$product) {
+            return false;
+        }
+
+        if ($categoryId) {
+            $category = $this->categoryRepository->get($categoryId);
+            $this->coreRegistry->register('current_category', $category);
+        }
+
+        try {
+            //$this->_eventManager->dispatch('review_controller_product_init', ['product' => $product]);
+            // $this->_eventManager->dispatch(
+                // 'review_controller_product_init_after',
+                // ['product' => $product, 'controller_action' => $this]
+            // );
+        } catch (\Magento\Framework\Exception\LocalizedException $e) {
+            $this->logger->critical($e);
+            return false;
+        }
+
+        return $product;
+    }
+
+    /**
+     * Load product model with data by passed id.
+     * Return false if product was not loaded or has incorrect status.
+     *
+     * @param int $productId
+     * @return bool|CatalogProduct
+     */
+    protected function loadProduct($productId)
+    {
+        if (!$productId) {
+            return false;
+        }
+
+        try {
+            $product = $this->productRepository->getById($productId);
+            if (!$product->isVisibleInCatalog() || !$product->isVisibleInSiteVisibility()) {
+                throw new NoSuchEntityException();
+            }
+        } catch (NoSuchEntityException $noEntityException) {
+            return false;
+        }
+
+        $this->coreRegistry->register('current_product', $product);
+        $this->coreRegistry->register('product', $product);
+
+        return $product;
+    }
+}
+?>
\ No newline at end of file

app/code/Rokanthemes/QuickView/Controller/Product/Quickview.php

+<?php
+/**
+ *
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+namespace Rokanthemes\QuickView\Controller\Product;
+
+use Rokanthemes\QuickView\Controller\Product as ProductController;
+use Magento\Framework\Controller\ResultFactory;
+
+class Quickview extends ProductController
+{
+    public function execute()
+    {
+        $pr = $this->initProduct();
+        /** @var \Magento\Framework\View\Result\Layout $resultLayout */
+        $resultLayout = $this->resultFactory->create(ResultFactory::TYPE_LAYOUT);
+		$resultLayout->addHandle('catalog_product_view_type_'. $pr->getTypeId());
+        return $resultLayout;
+    }
+}

app/code/Rokanthemes/QuickView/Helper/Data.php

+<?php
+/**
+ * @Author: zerokool - Do Van Tuan
+ * @Email: tien.uet.qh2011@gmail.com
+ * @File Name: Data.php
+ * @File Path: 
+ * @Date:   2015-04-07 19:26:42
+ * @Last Modified by:   zero
+ * @Last Modified time: 2015-07-28 08:35:17
+ */
+namespace Rokanthemes\QuickView\Helper;
+
+class Data extends \Magento\Framework\App\Helper\AbstractHelper {
+
+	public function __construct(
+		\Magento\Framework\App\Helper\Context $context
+	) {
+		parent::__construct($context);
+	}
+	public function getConfigData($path)
+	{
+		$value = $this->scopeConfig->getValue($path, \Magento\Store\Model\ScopeInterface::SCOPE_STORE);
+		return $value;
+	}
+	public function isEnable()
+	{
+		return $this->getConfigData('rokanthemes_quickview/general/enabled');
+	}
+}

app/code/Rokanthemes/QuickView/Model/Gallery/Orientation.php

+<?php
+/**
+ * Copyright  2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+/**
+ * Used in creating options for Yes|No config value selection
+ *
+ */
+namespace Rokanthemes\QuickView\Model\Gallery;
+
+class Orientation implements \Magento\Framework\Option\ArrayInterface
+{
+    /**
+     * Options getter
+     *
+     * @return array
+     */
+    public function toOptionArray()
+    {
+        return [['value' => 'horizontal', 'label' => __('Horizontal')], ['value' => 'vertical', 'label' => __('Vertical')]];
+    }
+
+    /**
+     * Get options in "key-value" format
+     *
+     * @return array
+     */
+    public function toArray()
+    {
+        return ['horizontal' => __('Horizontal'), 'vertical' => __('Vertical')];
+    }
+}

app/code/Rokanthemes/QuickView/composer.json

+{
+    "name": "rokanthemes/module-QuickView",
+    "description": "N/A",
+    "require": {
+        "php": "~5.5.0|~5.6.0|~7.0.0"
+    },
+    "type": "magento2-module",
+    "version": "1.0.0",
+    "license": [
+        "OSL-3.0",
+        "AFL-3.0"
+    ],
+    "autoload": {
+        "files": [ "registration.php" ],
+        "psr-4": {
+            "Rokanthemes\\QuickView\\": ""
+        }
+    }
+}

app/code/Rokanthemes/QuickView/etc/acl.xml

+<?xml version="1.0"?>
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Acl/etc/acl.xsd">
+    <acl>
+        <resources>
+            <resource id="Magento_Backend::admin">
+                <resource id="Rokanthemes_RokanBase::rokanbase" title="Rokanthemes" translate="title" sortOrder="30">
+                    <resource id="Rokanthemes_QuickView::quickview" title="QuickView" translate="title" sortOrder="30">
+                        <resource id="Rokanthemes_QuickView::rokanthemes_quick_view" title="Settings" translate="title" sortOrder="10" />
+                    </resource>
+                </resource>
+            </resource>
+        </resources>
+    </acl>
+</config>
+

app/code/Rokanthemes/QuickView/etc/adminhtml/menu.xml

+<?xml version="1.0"?>
+<!--
+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
+    <menu>
+        <add id="Rokanthemes_QuickView::quickview" title="QuickView" module="Rokanthemes_QuickView" sortOrder="30" parent="Rokanthemes_RokanBase::rokanbase" resource="Rokanthemes_QuickView::quickview"/>
+        <add id="Rokanthemes_QuickView::rokanthemes_quick_view" title="Settings" module="Rokanthemes_QuickView" sortOrder="10" parent="Rokanthemes_QuickView::quickview" action="adminhtml/system_config/edit/section/rokanthemes_quickview" resource="Rokanthemes_QuickView::rokanthemes_quick_view"/>
+    </menu>
+</config>

app/code/Rokanthemes/QuickView/etc/adminhtml/system.xml

+<?xml version="1.0"?>
+<!--
+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../Config/etc/system_file.xsd">
+    <system>
+		<section id="rokanthemes_quickview" translate="label" type="text" sortOrder="500" showInDefault="1" showInWebsite="1" showInStore="1">
+            <class>separator-top</class>
+            <label>Quick View Setting</label>
+            <tab>rokanthemes</tab>
+			<resource>Rokanthemes_QuickView::rokanthemes_quick_view</resource>
+            <group id="general" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
+                <label>General</label>
+				<field id="enabled" translate="label comment" type="select" sortOrder="0"  showInDefault="1" showInWebsite="1" showInStore="1">
+                    <label>Enable</label>
+                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
+                </field>
+            </group>
+        </section>
+    </system>
+</config>

app/code/Rokanthemes/QuickView/etc/config.xml

+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../Magento/Store/etc/config.xsd">
+	<default>
+		<rokanthemes_quickview>
+            <general>
+                <enabled>1</enabled>
+                <enabledTab>1</enabledTab>
+                <enabledTagTab>1</enabledTagTab>
+                <enabledReviewTab>1</enabledReviewTab>
+            </general>
+			<main_image>
+				<image_width>370</image_width>
+                <image_height>470</image_height>
+			</main_image>
+            <moreview>
+                <enable>1</enable>
+                <image_width>100</image_width>
+                <image_height>110</image_height>
+                <autoplay>0</autoplay>
+                <orientation>horizontal</orientation>
+            </moreview>
+        </rokanthemes_quickview>
+	</default>
+</config>

app/code/Rokanthemes/QuickView/etc/di.xml

+<?xml version="1.0"?>
+<!--
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
+</config>

app/code/Rokanthemes/QuickView/etc/frontend/routes.xml

+<?xml version="1.0"?>
+<!--
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
+    <router id="standard">
+        <route id="quickview" frontName="quickview">
+			<module name="Rokanthemes_QuickView" />
+        </route>
+    </router>
+</config>

app/code/Rokanthemes/QuickView/etc/module.xml

+<?xml version="1.0"?>
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
+    <module name="Rokanthemes_QuickView" setup_version="1.0.0" />
+</config>

app/code/Rokanthemes/QuickView/registration.php

+<?php
+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+\Magento\Framework\Component\ComponentRegistrar::register(
+    \Magento\Framework\Component\ComponentRegistrar::MODULE,
+    'Rokanthemes_QuickView',
+    __DIR__
+);

app/code/Rokanthemes/QuickView/view/frontend/layout/default.xml

+<?xml version="1.0"?>
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
+	<head>
+		<link src="Rokanthemes_QuickView::css/rokan_quickview.css"/>
+    </head>
+	<referenceContainer name="content">
+		<block class="Magento\Framework\View\Element\Template" name="quickview" template="Rokanthemes_QuickView::quickview.phtml" />
+	</referenceContainer>
+</page>

app/code/Rokanthemes/QuickView/view/frontend/layout/quickview_product_quickview.xml

+<?xml version="1.0"?>
+ 
+<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
+    <container name="root">
+		<block class="Magento\Framework\Pricing\Render" name="product.price.render.default">
+            <arguments>
+                <argument name="price_render_handle" xsi:type="string">catalog_product_prices</argument>
+                <argument name="use_link_for_as_low_as" xsi:type="boolean">true</argument>
+                <!-- set "override" configuration settings here -->
+            </arguments>
+        </block>
+        <container name="product.info.main" htmlTag="div" htmlClass="product-info-main" before="-">
+			<block class="Magento\Framework\View\Element\FormKey" name="formkey"/>
+			<container name="product.info.price" label="Product info auxiliary container" htmlTag="div" htmlClass="product-info-price" after="product.info.review">
+				<block class="Magento\Catalog\Block\Product\View" name="page.main.title.quickview" template="Rokanthemes_QuickView::product/view/title.phtml"/>
+				<container name="product.info.stock.sku" label="Product auxiliary info" htmlTag="div" htmlClass="product-info-stock-sku">
+					<container name="product.info.type" before="-"/>
+					<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.sku" template="product/view/attribute.phtml" after="product.info.type">
+						<arguments>
+							<argument name="at_call" xsi:type="string">getSku</argument>
+							<argument name="at_code" xsi:type="string">sku</argument>
+							<argument name="css_class" xsi:type="string">sku</argument>
+							<argument name="at_label" xsi:type="string">default</argument>
+							<argument name="add_attribute" xsi:type="string">itemprop="sku"</argument>
+						</arguments>
+					</block>
+				</container>
+				<block class="Magento\Catalog\Block\Product\View" name="product.info.review" template="product/view/review.phtml" after="product.info.stock.sku" />
+				<block class="Magento\Catalog\Pricing\Render" name="product.price.final" after="product.info.sku">
+					<arguments>
+						<argument name="price_render" xsi:type="string">product.price.render.default</argument>
+						<argument name="price_type_code" xsi:type="string">final_price</argument>
+						<argument name="zone" xsi:type="string">item_view</argument>
+					</arguments>
+				</block>
+			</container>
+			<block class="Magento\Catalog\Pricing\Render" name="product.price.tier" after="product.info.price">
+				<arguments>
+					<argument name="price_render" xsi:type="string">product.price.render.default</argument>
+					<argument name="price_type_code" xsi:type="string">tier_price</argument>
+					<argument name="zone" xsi:type="string">item_view</argument>
+				</arguments>
+			</block>
+			<container name="alert.urls" as="alert_urls" label="Alert Urls" after="product.price.tier"/>
+			<block class="Magento\Catalog\Block\Product\View" name="product.info" template="Rokanthemes_QuickView::product/view/form_quickview.phtml" after="alert.urls">
+				<container name="product.info.form.content" as="product_info_form_content">
+					<block class="Magento\Catalog\Block\Product\View" name="product.info.addtocart" as="addtocart" template="Rokanthemes_QuickView::product/view/addtocart_quickview.phtml"/>
+				</container>
+				<block class="Magento\Framework\View\Element\Template" name="product.info.form.options" as="options_container">
+					<block class="Magento\Catalog\Block\Product\View" name="product.info.options.wrapper" as="product_options_wrapper" template="product/view/options/wrapper.phtml">
+						<block class="Magento\Catalog\Block\Product\View\Options" name="product.info.options" as="product_options" template="product/view/options.phtml">
+							<block class="Magento\Catalog\Block\Product\View\Options\Type\DefaultType" as="default" template="product/view/options/type/default.phtml"/>
+							<block class="Magento\Catalog\Block\Product\View\Options\Type\Text" as="text" template="product/view/options/type/text.phtml"/>
+							<block class="Magento\Catalog\Block\Product\View\Options\Type\File" as="file" template="product/view/options/type/file.phtml"/>
+							<block class="Magento\Catalog\Block\Product\View\Options\Type\Select" as="select" template="product/view/options/type/select.phtml"/>
+							<block class="Magento\Catalog\Block\Product\View\Options\Type\Date" as="date" template="product/view/options/type/date.phtml"/>
+						</block>
+						<block class="Magento\Framework\View\Element\Html\Calendar" name="html_calendar" as="html_calendar" template="Magento_Theme::js/calendar.phtml"/>
+					</block>
+					<block class="Magento\Catalog\Block\Product\View" name="product.info.options.wrapper.bottom" as="product_options_wrapper_bottom" template="product/view/options/wrapper/bottom.phtml">
+						<block class="Magento\Catalog\Block\Product\View" name="product.info.addtocart.additional" as="product.info.addtocart" template="product/view/addtocart.phtml"/>
+					</block>
+				</block>
+			</block>
+			<container name="product.info.extrahint" as="extrahint" label="Product View Extra Hint">
+				<container name="product.info.social" label="Product social links container" htmlTag="div" htmlClass="product-social-links" after="product.info.overview">
+					<block class="Magento\Catalog\Block\Product\View" name="product.info.addto" as="addto" template="product/view/addto.phtml"/>
+					<block class="Magento\Catalog\Block\Product\View" name="product.info.mailto" template="product/view/mailto.phtml"/>
+				</container>
+			</container>
+			<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.overview" template="product/view/attribute.phtml" group="detailed_info" after="product.info.extrahint">
+				<arguments>
+					<argument name="at_call" xsi:type="string">getShortDescription</argument>
+					<argument name="at_code" xsi:type="string">short_description</argument>
+					<argument name="css_class" xsi:type="string">overview</argument>
+					<argument name="at_label" translate="true" xsi:type="string">none</argument>
+					<argument name="title" translate="true" xsi:type="string">Overview</argument>
+					<argument name="add_attribute" xsi:type="string">itemprop="description"</argument>
+				</arguments>
+			</block>
+		</container>
+		<container name="product.info.media" htmlTag="div" htmlClass="product media" after="product.info.main">
+			<block class="Magento\Catalog\Block\Product\View\Gallery" name="product.info.media.image" template="Rokanthemes_QuickView::product/view/gallery.phtml"/>
+		</container>
+		<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.details" template="product/view/details.phtml" after="product.info.media">
+			<block class="Magento\Catalog\Block\Product\View\Description" name="product.info.description" template="product/view/attribute.phtml" group="detailed_info">
+				<arguments>
+					<argument name="at_call" xsi:type="string">getDescription</argument>
+					<argument name="at_code" xsi:type="string">description</argument>
+					<argument name="css_class" xsi:type="string">description</argument>
+					<argument name="at_label" xsi:type="string">none</argument>
+					<argument name="title" translate="true" xsi:type="string">Details</argument>
+				</arguments>
+			</block>
+			<block class="Magento\Catalog\Block\Product\View\Attributes" name="product.attributes" as="additional" template="product/view/attributes.phtml" group="detailed_info">
+				<arguments>
+					<argument translate="true" name="title" xsi:type="string">More Information</argument>
+				</arguments>
+			</block>
+		</block>
+		<block class="Magento\Cookie\Block\RequireCookie" name="require-cookie" template="Magento_Cookie::require_cookie.phtml">
+			<arguments>
+				<argument name="triggers" xsi:type="array">
+					<item name="compareProductLink" xsi:type="string">.action.tocompare</item>
+				</argument>
+			</arguments>
+		</block>
+    </container>
+</layout>
\ No newline at end of file

app/code/Rokanthemes/QuickView/view/frontend/requirejs-config.js

+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+var config = {
+    "map": {
+        '*': {
+			'productQuickview': 'Rokanthemes_QuickView/js/quickview'
+        },
+    },
+	"shim": {
+		"quickview/cloudzoom": ["jquery"],
+		"quickview/bxslider": ["jquery"]
+	},
+	'paths': {
+		'quickview/cloudzoom': 'Rokanthemes_QuickView/js/cloud-zoom',
+        "quickview/bxslider": "Rokanthemes_QuickView/js/jquery.bxslider"
+    }
+};

app/code/Rokanthemes/QuickView/view/frontend/templates/product/view/addtocart_quickview.phtml

+<?php
+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+// @codingStandardsIgnoreFile
+
+/** @var $block \Magento\Catalog\Block\Product\View */
+?>
+<?php $_product = $block->getProduct(); 
+$config_point2 = $this->helper('Rokanthemes\RokanBase\Helper\Data')->getConfigData('setting_categories/categories/point2');
+$arr_config_point2 = explode(',', $config_point2);
+$qty = 1;
+$categories = $_product->getCategoryIds();
+if(count($categories) > 0 && count($arr_config_point2) > 0){
+	foreach($arr_config_point2 as $val1){
+		if(in_array(trim($val1), $categories)){
+			$qty = 3;
+			break;
+		}
+	}
+}
+?>
+<?php $buttonTitle = __('Add to cart'); ?>
+<?php if ($_product->isSaleable()): ?>
+<div class="box-tocart">
+    <div class="fieldset">
+        <?php if ($block->shouldRenderQuantity()): ?>
+        <div class="field qty">
+            <a class="qty-down-fixed-onclick qty-down" href="#"><i class="fa fa-minus"></i></a>
+            <div class="control">
+                <input type="number"
+                       name="qty"
+                       id="qty-quickview"
+                       maxlength="12"
+                       value="<?php /* @escapeNotVerified */ echo $qty * 1 ?>"
+                       title="<?php /* @escapeNotVerified */ echo __('Quantity') ?>" class="input-text qty"
+                       data-validate="<?php echo $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
+                       />
+            </div>
+			<a class="qty-up-fixed-onclick qty-up" href="#"><i class="fa fa-plus"></i></a>
+        </div>
+        <?php endif; ?>
+        <div class="actions">
+            <button type="submit"
+                    title="<?php /* @escapeNotVerified */ echo $buttonTitle ?>"
+                    class="action primary tocart"
+                    id="product-addtocart-button-quickview">
+                <span><?php /* @escapeNotVerified */ echo $buttonTitle ?></span>
+            </button>
+            <?php echo $block->getChildHtml('', true) ?>
+        </div>
+    </div>
+</div>
+<?php endif; ?>
+<?php if ($block->isRedirectToCartEnabled()) : ?>
+<script type="text/x-magento-init">
+    {
+        "#product_addtocart_form_quickview": {
+            "Magento_Catalog/product/view/validation": {
+                "radioCheckboxClosest": ".nested"
+            }
+        }
+    }
+</script>
+<?php else : ?>
+<script>
+    require([
+        'jquery',
+        'mage/mage',
+        'Magento_Catalog/product/view/validation',
+        'Magento_Catalog/js/catalog-add-to-cart'
+    ], function ($) {
+        'use strict';
+		var number_click = <?php echo $qty;?>;
+		$(".qty-down-fixed-onclick").click(function() {
+			var val_input = $(this).closest('div.field').find('#qty-quickview').val();
+			val_input = parseInt(val_input);
+			if(val_input <= number_click){
+				val_input = number_click;
+			}
+			else{
+				val_input = val_input - number_click;
+			}
+			$('div.field div.control #qty-quickview').val(val_input);
+			return false;
+		});
+		$(".qty-up-fixed-onclick").click(function() {
+			var val_input = $(this).closest('div.field').find('#qty-quickview').val();
+			val_input = parseInt(val_input);
+			val_input = val_input + number_click;
+			$('div.field div.control #qty-quickview').val(val_input);
+			return false;
+		});
+		
+        $('#product_addtocart_form_quickview').mage('validation', {
+            radioCheckboxClosest: '.nested',
+            submitHandler: function (form) {
+                var widget = $(form).catalogAddToCart({
+                    bindSubmit: false
+                });
+
+                widget.catalogAddToCart('submitForm', $(form));
+
+                return false;
+            }
+        });
+    });
+</script>
+<?php endif; ?>
\ No newline at end of file

app/code/Rokanthemes/QuickView/view/frontend/templates/product/view/form_quickview.phtml

+<?php
+/**
+ * Copyright © 2013-2017 Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+// @codingStandardsIgnoreFile
+
+/**
+ * Product view template
+ *
+ * @var $block \Magento\Catalog\Block\Product\View
+ */
+?>
+<?php $_helper = $this->helper('Magento\Catalog\Helper\Output'); ?>
+<?php $_product = $block->getProduct(); 
+$config_point1 = $this->helper('Rokanthemes\RokanBase\Helper\Data')->getConfigData('setting_categories/categories/point1');
+$arr_config_point1 = explode(',', $config_point1);
+$show = false;
+$categories = $_product->getCategoryIds();
+if(count($categories) > 0 && count($arr_config_point1) > 0){
+	foreach($arr_config_point1 as $val){
+		if(in_array(trim($val), $categories)){
+			$show = true;
+			break;
+		}
+	}
+}
+?>
+<?php if($show){?>
+<div class="text-description">
+	<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('product_view_description_price')->toHtml();?>
+</div>
+<?php } ?>
+<div class="product-add-form">
+    <form action="<?php /* @escapeNotVerified */ echo $block->getSubmitUrl($_product) ?>" method="post"
+          id="product_addtocart_form_quickview"<?php if ($_product->getOptions()): ?> enctype="multipart/form-data"<?php endif; ?>>
+        <input type="hidden" name="product" value="<?php /* @escapeNotVerified */ echo $_product->getId() ?>" />
+        <input type="hidden" name="selected_configurable_option" value="" />
+        <input type="hidden" name="related_product" id="related-products-field" value="" />
+        <?php echo $block->getBlockHtml('formkey')?>
+        <?php echo $block->getChildHtml('form_top'); ?>
+        <?php if (!$block->hasOptions()):?>
+            <?php echo $block->getChildHtml('product_info_form_content'); ?>
+        <?php else:?>
+            <?php if ($_product->isSaleable() && $block->getOptionsContainer() == 'container1'):?>
+                <?php echo $block->getChildChildHtml('options_container') ?>
+            <?php endif;?>
+        <?php endif; ?>
+
+        <?php if ($_product->isSaleable() && $block->hasOptions() && $block->getOptionsContainer() == 'container2'):?>
+            <?php echo $block->getChildChildHtml('options_container') ?>
+        <?php endif;?>
+        <?php echo $block->getChildHtml('form_bottom'); ?>
+    </form>
+</div>
+<script>
+    require([
+        'jquery',
+        'priceBox'
+    ], function($){
+		if($('.amasty-hide-price-text').length > 0){
+			$('div.short-action').hide();
+			$('div.text-description').hide();
+		}
+        var dataPriceBoxSelector = '[data-role=priceBox]',
+            dataProductIdSelector = '[data-product-id=<?php echo $block->escapeHtml($_product->getId())?>]',
+            priceBoxes = $(dataPriceBoxSelector + dataProductIdSelector);
+
+        priceBoxes = priceBoxes.filter(function(index, elem){
+            return !$(elem).find('.price-from').length;
+        });
+
+        priceBoxes.priceBox({'priceConfig': <?php /* @escapeNotVerified */ echo $block->getJsonConfig() ?>});
+    });
+</script>
+<div class="short-action">
+	<div class="short-content">
+		<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('product_view_future_function')->toHtml();?>
+	</div>
+</div>
\ No newline at end of file

app/code/Rokanthemes/QuickView/view/frontend/templates/product/view/gallery.phtml

+<?php
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+// @codingStandardsIgnoreFile
+
+/**
+ * Product media data template
+ *
+ * @var $block \Magento\Catalog\Block\Product\View\Gallery
+ */
+$images = $block->getGalleryImages();
+if(count($images) > 0)
+{
+	$mainImage = $images->getFirstItem();
+	foreach($images as $image)
+	{
+		if($block->isMainImage($image))
+		{
+			$mainImage = $image;
+			break;
+		}
+	}
+?>
+<div class="gallery-placeholder _block-content-loading" data-gallery-role="gallery-placeholder" id="gallery_<?php $block->getProduct()->getId(); ?>" >
+	<div class="product-slider-wrapper col-md-6">
+		<div class="main-img-quickview">
+			<a href="<?php echo $mainImage->getData('large_image_url'); ?>" class="cloud-zoom" rel="transparentImage: 'data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==', useWrapper: false, showTitle: false, zoomWidth:'100', adjustY:0, adjustX:0">
+				<img src="<?php echo $mainImage->getData('medium_image_url'); ?>">
+			</a>
+		</div>
+		<ul class="bxslider">
+		<?php foreach ($images as $_image) { ?>
+			<li><img src="<?php echo $_image->getData('small_image_url'); ?>" data-href="<?php echo $_image->getData('large_image_url'); ?>" data-thumb-image="<?php echo $_image->getData('medium_image_url'); ?>"></li>
+		<?php } ?>
+		</ul>
+	</div>
+</div>
+<?php } ?>
+<script>
+	jQuery(document).ready(function() {
+		jQuery('#gallery_<?php $block->getProduct()->getId(); ?> .cloud-zoom, #gallery_<?php $block->getProduct()->getId(); ?> .cloud-zoom-gallery').CloudZoom({
+			adjustX: 0,
+			adjustY: 0
+		});
+		// Horizontal
+		var horiSlider<?php $block->getProduct()->getId(); ?> = jQuery('#gallery_<?php $block->getProduct()->getId(); ?> .bxslider').bxSlider({
+			mode: 'horizontal',
+			auto: false,
+			autoControls: false, 
+			slideMargin: 9.5,
+
+			// CAROUSEL
+			minSlides: 4,
+			maxSlides: 4,
+			moveSlides: 1,
+			slideWidth: 100,
+			
+			// PAGER
+			pager: false,
+			nextText: "<i class='amz-icon foxy-arrow_right'></i>",
+			prevText: "<i class='amz-icon foxy-arrow_left'></i>",
+			onSlideAfter: function() {
+				var currentImg = horiSlider<?php $block->getProduct()->getId(); ?>.getCurrentSlideElement().children('img');
+				jQuery('#gallery_<?php $block->getProduct()->getId(); ?> a.cloud-zoom').attr('href', currentImg.attr('data-href'));
+				jQuery('#gallery_<?php $block->getProduct()->getId(); ?> a.cloud-zoom img').attr('src', currentImg.attr('data-thumb-image'));
+				jQuery('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();
+			}
+		});
+	});
+</script>

app/code/Rokanthemes/QuickView/view/frontend/templates/product/view/title.phtml

+<?php
+/**
+ * Copyright © 2013-2017 Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+// @codingStandardsIgnoreFile
+
+/**
+ * Product view template
+ *
+ * @see \Magento\Catalog\Block\Product\View\Description
+ */
+?>
+<?php
+$_product = $block->getProduct();
+?>
+<h1 class="title-quickview-product"><?php echo $_product->getName();?></h1>

app/code/Rokanthemes/QuickView/view/frontend/templates/quickview.phtml

+<?php
+/**
+ * Copyright © 2016 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+// @codingStandardsIgnoreFile
+
+/**
+ * Product media data template
+ *
+ * @var $block \Magento\Catalog\Block\Product\View\Gallery
+ */
+?>
+<script type="text/x-magento-init">
+{
+	".quickview-product [data-role=quickview-button]": {
+		"productQuickview": {}
+	}
+}
+</script>
+<script>
+require([
+		'jquery',
+		'mage/mage',
+		'quickview/cloudzoom',
+		'quickview/bxslider'
+	], function ($) {
+	});
+</script>

app/code/Rokanthemes/QuickView/view/frontend/web/css/helpers/jquery.fancybox-buttons.css

+#fancybox-buttons {
+	position: fixed;
+	left: 0;
+	width: 100%;
+	z-index: 8050;
+}
+
+#fancybox-buttons.top {
+	top: 10px;
+}
+
+#fancybox-buttons.bottom {
+	bottom: 10px;
+}
+
+#fancybox-buttons ul {
+	display: block;
+	width: 166px;
+	height: 30px;
+	margin: 0 auto;
+	padding: 0;
+	list-style: none;
+	border: 1px solid #111;
+	border-radius: 3px;
+	-webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
+	   -moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
+	        box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
+	background: rgb(50,50,50);
+	background: -moz-linear-gradient(top, rgb(68,68,68) 0%, rgb(52,52,52) 50%, rgb(41,41,41) 50%, rgb(51,51,51) 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(68,68,68)), color-stop(50%,rgb(52,52,52)), color-stop(50%,rgb(41,41,41)), color-stop(100%,rgb(51,51,51)));
+	background: -webkit-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
+	background: -o-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
+	background: -ms-linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
+	background: linear-gradient(top, rgb(68,68,68) 0%,rgb(52,52,52) 50%,rgb(41,41,41) 50%,rgb(51,51,51) 100%);
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#444444', endColorstr='#222222',GradientType=0 );
+}
+
+#fancybox-buttons ul li {
+	float: left;
+	margin: 0;
+	padding: 0;
+}
+
+#fancybox-buttons a {
+	display: block;
+	width: 30px;
+	height: 30px;
+	text-indent: -9999px;
+	background-color: transparent;
+	background-image: url('fancybox_buttons.png');
+	background-repeat: no-repeat;
+	outline: none;
+	opacity: 0.8;
+}
+
+#fancybox-buttons a:hover {
+	opacity: 1;
+}
+
+#fancybox-buttons a.btnPrev {
+	background-position: 5px 0;
+}
+
+#fancybox-buttons a.btnNext {
+	background-position: -33px 0;
+	border-right: 1px solid #3e3e3e;
+}
+
+#fancybox-buttons a.btnPlay {
+	background-position: 0 -30px;
+}
+
+#fancybox-buttons a.btnPlayOn {
+	background-position: -30px -30px;
+}
+
+#fancybox-buttons a.btnToggle {
+	background-position: 3px -60px;
+	border-left: 1px solid #111;
+	border-right: 1px solid #3e3e3e;
+	width: 35px
+}
+
+#fancybox-buttons a.btnToggleOn {
+	background-position: -27px -60px;
+}
+
+#fancybox-buttons a.btnClose {
+	border-left: 1px solid #111;
+	width: 35px;
+	background-position: -56px 0px;
+}
+
+#fancybox-buttons a.btnDisabled {
+	opacity : 0.4;
+	cursor: default;
+}
\ No newline at end of file

app/code/Rokanthemes/QuickView/view/frontend/web/css/helpers/jquery.fancybox-buttons.js

+ /*!
+ * Buttons helper for fancyBox
+ * version: 1.0.5 (Mon, 15 Oct 2012)
+ * @requires fancyBox v2.0 or later
+ *
+ * Usage:
+ *     $(".fancybox").fancybox({
+ *         helpers : {
+ *             buttons: {
+ *                 position : 'top'
+ *             }
+ *         }
+ *     });
+ *
+ */
+(function ($) {
+	//Shortcut for fancyBox object
+	var F = $.fancybox;
+
+	//Add helper object
+	F.helpers.buttons = {
+		defaults : {
+			skipSingle : false, // disables if gallery contains single image
+			position   : 'top', // 'top' or 'bottom'
+			tpl        : '<div id="fancybox-buttons"><ul><li><a class="btnPrev" title="Previous" href="javascript:;"></a></li><li><a class="btnPlay" title="Start slideshow" href="javascript:;"></a></li><li><a class="btnNext" title="Next" href="javascript:;"></a></li><li><a class="btnToggle" title="Toggle size" href="javascript:;"></a></li><li><a class="btnClose" title="Close" href="javascript:;"></a></li></ul></div>'
+		},
+
+		list : null,
+		buttons: null,
+
+		beforeLoad: function (opts, obj) {
+			//Remove self if gallery do not have at least two items
+
+			if (opts.skipSingle && obj.group.length < 2) {
+				obj.helpers.buttons = false;
+				obj.closeBtn = true;
+
+				return;
+			}
+
+			//Increase top margin to give space for buttons
+			obj.margin[ opts.position === 'bottom' ? 2 : 0 ] += 30;
+		},
+
+		onPlayStart: function () {
+			if (this.buttons) {
+				this.buttons.play.attr('title', 'Pause slideshow').addClass('btnPlayOn');
+			}
+		},
+
+		onPlayEnd: function () {
+			if (this.buttons) {
+				this.buttons.play.attr('title', 'Start slideshow').removeClass('btnPlayOn');
+			}
+		},
+
+		afterShow: function (opts, obj) {
+			var buttons = this.buttons;
+
+			if (!buttons) {
+				this.list = $(opts.tpl).addClass(opts.position).appendTo('body');
+
+				buttons = {
+					prev   : this.list.find('.btnPrev').click( F.prev ),
+					next   : this.list.find('.btnNext').click( F.next ),
+					play   : this.list.find('.btnPlay').click( F.play ),
+					toggle : this.list.find('.btnToggle').click( F.toggle ),
+					close  : this.list.find('.btnClose').click( F.close )
+				}
+			}
+
+			//Prev
+			if (obj.index > 0 || obj.loop) {
+				buttons.prev.removeClass('btnDisabled');
+			} else {
+				buttons.prev.addClass('btnDisabled');
+			}
+
+			//Next / Play
+			if (obj.loop || obj.index < obj.group.length - 1) {
+				buttons.next.removeClass('btnDisabled');
+				buttons.play.removeClass('btnDisabled');
+
+			} else {
+				buttons.next.addClass('btnDisabled');
+				buttons.play.addClass('btnDisabled');
+			}
+
+			this.buttons = buttons;
+
+			this.onUpdate(opts, obj);
+		},
+
+		onUpdate: function (opts, obj) {
+			var toggle;
+
+			if (!this.buttons) {
+				return;
+			}
+
+			toggle = this.buttons.toggle.removeClass('btnDisabled btnToggleOn');
+
+			//Size toggle button
+			if (obj.canShrink) {
+				toggle.addClass('btnToggleOn');
+
+			} else if (!obj.canExpand) {
+				toggle.addClass('btnDisabled');
+			}
+		},
+
+		beforeClose: function () {
+			if (this.list) {
+				this.list.remove();
+			}
+
+			this.list    = null;
+			this.buttons = null;
+		}
+	};
+
+}(jQuery));

app/code/Rokanthemes/QuickView/view/frontend/web/css/helpers/jquery.fancybox-media.js

+/*!
+ * Media helper for fancyBox
+ * version: 1.0.6 (Fri, 14 Jun 2013)
+ * @requires fancyBox v2.0 or later
+ *
+ * Usage:
+ *     $(".fancybox").fancybox({
+ *         helpers : {
+ *             media: true
+ *         }
+ *     });
+ *
+ * Set custom URL parameters:
+ *     $(".fancybox").fancybox({
+ *         helpers : {
+ *             media: {
+ *                 youtube : {
+ *                     params : {
+ *                         autoplay : 0
+ *                     }
+ *                 }
+ *             }
+ *         }
+ *     });
+ *
+ * Or:
+ *     $(".fancybox").fancybox({,
+ *         helpers : {
+ *             media: true
+ *         },
+ *         youtube : {
+ *             autoplay: 0
+ *         }
+ *     });
+ *
+ *  Supports:
+ *
+ *      Youtube
+ *          http://www.youtube.com/watch?v=opj24KnzrWo
+ *          http://www.youtube.com/embed/opj24KnzrWo
+ *          http://youtu.be/opj24KnzrWo
+ *			http://www.youtube-nocookie.com/embed/opj24KnzrWo
+ *      Vimeo
+ *          http://vimeo.com/40648169
+ *          http://vimeo.com/channels/staffpicks/38843628
+ *          http://vimeo.com/groups/surrealism/videos/36516384
+ *          http://player.vimeo.com/video/45074303
+ *      Metacafe
+ *          http://www.metacafe.com/watch/7635964/dr_seuss_the_lorax_movie_trailer/
+ *          http://www.metacafe.com/watch/7635964/
+ *      Dailymotion
+ *          http://www.dailymotion.com/video/xoytqh_dr-seuss-the-lorax-premiere_people
+ *      Twitvid
+ *          http://twitvid.com/QY7MD
+ *      Twitpic
+ *          http://twitpic.com/7p93st
+ *      Instagram
+ *          http://instagr.am/p/IejkuUGxQn/
+ *          http://instagram.com/p/IejkuUGxQn/
+ *      Google maps
+ *          http://maps.google.com/maps?q=Eiffel+Tower,+Avenue+Gustave+Eiffel,+Paris,+France&t=h&z=17
+ *          http://maps.google.com/?ll=48.857995,2.294297&spn=0.007666,0.021136&t=m&z=16
+ *          http://maps.google.com/?ll=48.859463,2.292626&spn=0.000965,0.002642&t=m&z=19&layer=c&cbll=48.859524,2.292532&panoid=YJ0lq28OOy3VT2IqIuVY0g&cbp=12,151.58,,0,-15.56
+ */
+(function ($) {
+	"use strict";
+
+	//Shortcut for fancyBox object
+	var F = $.fancybox,
+		format = function( url, rez, params ) {
+			params = params || '';
+
+			if ( $.type( params ) === "object" ) {
+				params = $.param(params, true);
+			}
+
+			$.each(rez, function(key, value) {
+				url = url.replace( '$' + key, value || '' );
+			});
+
+			if (params.length) {
+				url += ( url.indexOf('?') > 0 ? '&' : '?' ) + params;
+			}
+
+			return url;
+		};
+
+	//Add helper object
+	F.helpers.media = {
+		defaults : {
+			youtube : {
+				matcher : /(youtube\.com|youtu\.be|youtube-nocookie\.com)\/(watch\?v=|v\/|u\/|embed\/?)?(videoseries\?list=(.*)|[\w-]{11}|\?listType=(.*)&list=(.*)).*/i,
+				params  : {
+					autoplay    : 1,
+					autohide    : 1,
+					fs          : 1,
+					rel         : 0,
+					hd          : 1,
+					wmode       : 'opaque',
+					enablejsapi : 1
+				},
+				type : 'iframe',
+				url  : '//www.youtube.com/embed/$3'
+			},
+			vimeo : {
+				matcher : /(?:vimeo(?:pro)?.com)\/(?:[^\d]+)?(\d+)(?:.*)/,
+				params  : {
+					autoplay      : 1,
+					hd            : 1,
+					show_title    : 1,
+					show_byline   : 1,
+					show_portrait : 0,
+					fullscreen    : 1
+				},
+				type : 'iframe',
+				url  : '//player.vimeo.com/video/$1'
+			},
+			metacafe : {
+				matcher : /metacafe.com\/(?:watch|fplayer)\/([\w\-]{1,10})/,
+				params  : {
+					autoPlay : 'yes'
+				},
+				type : 'swf',
+				url  : function( rez, params, obj ) {
+					obj.swf.flashVars = 'playerVars=' + $.param( params, true );
+
+					return '//www.metacafe.com/fplayer/' + rez[1] + '/.swf';
+				}
+			},
+			dailymotion : {
+				matcher : /dailymotion.com\/video\/(.*)\/?(.*)/,
+				params  : {
+					additionalInfos : 0,
+					autoStart : 1
+				},
+				type : 'swf',
+				url  : '//www.dailymotion.com/swf/video/$1'
+			},
+			twitvid : {
+				matcher : /twitvid\.com\/([a-zA-Z0-9_\-\?\=]+)/i,
+				params  : {
+					autoplay : 0
+				},
+				type : 'iframe',
+				url  : '//www.twitvid.com/embed.php?guid=$1'
+			},
+			twitpic : {
+				matcher : /twitpic\.com\/(?!(?:place|photos|events)\/)([a-zA-Z0-9\?\=\-]+)/i,
+				type : 'image',
+				url  : '//twitpic.com/show/full/$1/'
+			},
+			instagram : {
+				matcher : /(instagr\.am|instagram\.com)\/p\/([a-zA-Z0-9_\-]+)\/?/i,
+				type : 'image',
+				url  : '//$1/p/$2/media/?size=l'
+			},
+			google_maps : {
+				matcher : /maps\.google\.([a-z]{2,3}(\.[a-z]{2})?)\/(\?ll=|maps\?)(.*)/i,
+				type : 'iframe',
+				url  : function( rez ) {
+					return '//maps.google.' + rez[1] + '/' + rez[3] + '' + rez[4] + '&output=' + (rez[4].indexOf('layer=c') > 0 ? 'svembed' : 'embed');
+				}
+			}
+		},
+
+		beforeLoad : function(opts, obj) {
+			var url   = obj.href || '',
+				type  = false,
+				what,
+				item,
+				rez,
+				params;
+
+			for (what in opts) {
+				if (opts.hasOwnProperty(what)) {
+					item = opts[ what ];
+					rez  = url.match( item.matcher );
+
+					if (rez) {
+						type   = item.type;
+						params = $.extend(true, {}, item.params, obj[ what ] || ($.isPlainObject(opts[ what ]) ? opts[ what ].params : null));
+
+						url = $.type( item.url ) === "function" ? item.url.call( this, rez, params, obj ) : format( item.url, rez, params );
+
+						break;
+					}
+				}
+			}
+
+			if (type) {
+				obj.href = url;
+				obj.type = type;
+
+				obj.autoHeight = false;
+			}
+		}
+	};
+
+}(jQuery));
\ No newline at end of file

app/code/Rokanthemes/QuickView/view/frontend/web/css/helpers/jquery.fancybox-thumbs.css

+#fancybox-thumbs {
+	position: fixed;
+	left: 0;
+	width: 100%;
+	overflow: hidden;
+	z-index: 8050;
+}
+
+#fancybox-thumbs.bottom {
+	bottom: 2px;
+}
+
+#fancybox-thumbs.top {
+	top: 2px;
+}
+
+#fancybox-thumbs ul {
+	position: relative;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+#fancybox-thumbs ul li {
+	float: left;
+	padding: 1px;
+	opacity: 0.5;
+}
+
+#fancybox-thumbs ul li.active {
+	opacity: 0.75;
+	padding: 0;
+	border: 1px solid #fff;
+}
+
+#fancybox-thumbs ul li:hover {
+	opacity: 1;
+}
+
+#fancybox-thumbs ul li a {
+	display: block;
+	position: relative;
+	overflow: hidden;
+	border: 1px solid #222;
+	background: #111;
+	outline: none;
+}
+
+#fancybox-thumbs ul li img {
+	display: block;
+	position: relative;
+	border: 0;
+	padding: 0;
+	max-width: none;
+}
\ No newline at end of file