Categories
Magento 2

Magento 2 – Admin form UI Component ImageUploader Field.

In this article today I will disuse about Magento 2 – admin form UI Component imageUploader field. This article is include all steps UI Components tutorial for image upload from your custom module. UI Component imageUploader xml form field, Show image in edit form, Save image info in database.

Below example code is based on a custom module “Extendfeature_RequestQuote” this is my custom module.

Best article for frontend custom form image uploader
Magento 2 – File or image upload via frontend custom module form and Controller

Step 1: Add UI Component imageUploader field

Please add/create following UI component imageUploader code in your UI form located in Extendfeature/RequestQuote/view/adminhtml/ui_component/form.xml file. My image uploader field name is “filesubmission” show field as “File Attachment” in admin form.

Step 2: Create image-preview.html template file

Please add/create image preview template with following code located in Extendfeature/RequestQuote/view/adminhtml/web/template/image-preview.html file.

Step 3: Crate image upload admin Controller file

Now create a adminhtml image upload Controller Filesubmission.php for image upload in Extendfeature\RequestQuote\Controller\Adminhtml\Requestquote\Filesubmission.php file with following code.

Step 4: Crate image upload Model

Now we create a image upload Model ImageUploader.php, in this we added more methods related upload image into pub/media/requestaquote directory, here “requestaquote” is IMAGE_UPLOAD_DIRECTORY name. Please create a model file with following code.

Step 5: Define Image Uploader configuration in di.xml file

Define Image Uploader configuration in your module di di.xml file with following code, File located in Extendfeature/RequestQuote/etc/di.xml.

Magento 2 - Admin form UI Component ImageUploader Field

Step 6: Image name save into the database field

To save image name into the database field please add follow below code into Save controller Extendfeature/RequestQuote/Controller/Adminhtml/Requestquote/Save.php file inside execute method.

Step 7: Display image after save records in edit form

Now add following code into DataProvider like Extendfeature/RequestQuote/Model/Requestquote/DataProvider.php File to display image after save records inside public function getData() method.

Now, Execute below commands via SHELL and enjoy image uploader function in your UI form.

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please SHARE this post.

Categories
Magento 2

Magento 2 – File or image upload via frontend custom module form and Controller

Today I will discuse how to File or image upload via frontend custom module form and Controller. Open your module form.phtml file and make sure that the form attribute method to post method=”post” and also make sure that the form attribute enctype like enctype=”multipart/form-data”.

Also make sure that INPUT field type attribute type=”file”, I have use file field name “filesubmission”.

Now open you costom module Controller php file VENDOR\MODULE\Controller\Index\Post.php and use some library class for DirectoryList, UploaderFactory and Filesystem in top of file below namespace.

Now add some protected on top of Controller class before __construct() method.

Now update your Controller method public function __construct() like below.

Now add code for fileupload in your Controller method public function execute(). You can see I do not use $_FILES Global Variable in Magento because it does not meet with Magento standards. Instead of $_FILES Variable please use $this->getRequest()->getFiles();

Here filesubmission is the input name and also the field name of database table.
Upload image file will be saved at pub/media/requestaquote directory.
And $data[‘filesubmission’] = $imagePath; the value of $imagePath; that will be saved in the database field.

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please SHARE

Categories
Magento 2

Magento 2 – How to validate at least one checkbox in custom module form?

Today I will discuses, How to validate at least one checkbox in custom module form? Open your module form .phtml file and add the validation component on form tag, as a attribute like data-mage-init.

How to validate at least one checkbox in custom module form?

Add attribute on the form tag: data-mage-init='{“validation”:{}}’

Add some validation rules to your custom module form checkbox fields like data-validate=”{required:true, ‘validate-one-required-by-name’:true}”, Please see example checkbox form html code with validate-one-required-by-name below.

After form validate screen.

List of Magento 2 form validation rules

List of some Magento 2 validation rules you can use and their error message. You can find all methods yourself by looking in lib/web/prototype/validation.js on line 415

List of Magento 2 supported all form validation rules, jQuery validation rules

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please SHARE

Categories
Magento 2

Magento 2 – How to enable/disable WYSIWYG Editor?

In Magento 2 WYSIWYG Editor is an useful feature that allows users to directly see the appearence of the end result, helps users save a lot of time and produce greater results. In this tutorial, I will show you, How to enable/disable WYSIWYG Editor?

How to enable/disable WYSIWYG Editor?

Please follow this tutorial step by step how to enable/disable WYSIWYG Editor.

Step 1: Login into store admin and go to: STORES => Configuration page.

STORES => Configuration

Step 2: In the Configuration page go to General => Content Management to view WYSIWYG Options section.

Step 3: Enable WYSIWYG Editor is set to enable by default. Uncheck box “Use system value” and choose other option Disabled by default as shown in below picture.

 Enable WYSIWYG Editor

Click on “Save Config” button to save new changes.

Step 4: Finally, you need to clear cache by menu SYSTEM => Cache Management => Select All => Refresh => Submit

That’s all about How to enable/disable WYSIWYG Editor Magento 2 admin. Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please LIKE and SHARE this post.

Categories
Magento 2

Magento 2 – Set page title by layout XML or Controller

By default URL showing as title but thats not good look that appears on the title bar when created a new custom module. There are 2 (two) ways of Set page title by layout XML or Controller.

1. From frontend view layout module_controller_action.xml by head and title tag.

2. From frontend view layout module_controller_action.xml by referenceBlock page.main.title and set setPageTitle argument tag.

Set page title by PHP Controller

Also we can set page title by PHP controller file controllerName.php in method public function execute()

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please LIKE and SHARE

Categories
Magento 2

Exception: Invalid template file: require_js.phtml in module: ‘Magento_Backend’ block’s name: ‘require.js’

To fix blank admin page on Magento 2.3 in Windows-10. This is the error what you will encounter when installing Magento 2.3 in Windows 10!

This error for the invalid template file is the difference between the use of “/” and “\” in the path. Windows uses “/” while Magento uses “\”.

The exception appear like this:

1 exception(s):
Exception #0 (Magento\Framework\Exception\ValidatorException): Invalid template file: ‘E:/xampp/htdocs/extendfeature/vendor/magento/module-backend/view/adminhtml/templates/page/js/require_js.phtml’ in module: ‘Magento_Backend’ block’s name: ‘require.js’

Open file vendor\magento\framework\View\Element\Template\File\Validator.php line no 138. Of find isPathInDirectories function in line 133

And change line 138 from

To

After make change find isPathInDirectories function like below code.

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please LIKE and SHARE

Categories
Magento 2

Magento 2 Installation at 51% Error: (Wrong file in Gd2.php:64) Module ‘Magento_Theme’

I am having an issue during installing Magento 2 in localhost window10. I have updated my file like below and I can install in localhost. I am trying to solve by change on my php.ini

Also No UAC activate on WINDOWS 10 and Antivirus disabled. I have fetch the same error.

[ERROR]

InvalidArgumentException: Wrong file in E:\xampp\htdocs\extendfeature\vendor\magento\framework\Image\Adapter\Gd2.php:64 Stack trace: #0 E:\xampp\htdocs\extendfeature\vendor\magento\framework\Image.php(55): Magento\Framework\Image\Adapter\Gd2->open(‘E:/xampp/htdocs…’) #1 E:\xampp\htdocs\extendfeature\vendor\magento\framework\Image.php(36): Magento\Framework\Image->open() #2 E:\xampp\htdocs\extendfeature\vendor\magento\framework\ObjectManager\Factory\AbstractFactory.php(121): Magento\Framework\Image->__construct(Object(Magento\Framework\Image\Adapter\Gd2), ‘E:/xampp/htdocs…’) #3 E:\xampp\htdocs\extendfeature\vendor\magento\framework\ObjectManager\Factory\Dynamic\Developer.php(66): Magento\Framework\ObjectManager\Factory\AbstractFactory->createObject(‘Magento\Framewo…’, Array) #4 E:\xampp\htdocs\extendfeature\vendor\magento\framework\ObjectManager\ObjectManager.php(56): Magento\Framework\ObjectManager\Factory\Dynamic\Developer->create(‘Magento\Framewo…’, Array) #5 E:\xampp\htdocs\extendfeature\vendor\magento\framework\Image\Factory.php(47): Magento\Framework\ObjectManager\ObjectManager->create(‘Magento\Framewo…’, Array) #6 E:\xampp\htdocs\extendfeature\vendor\magento\framework\View\Design\Theme\Image.php(127): Magento\Framework\Image\Factory->create(‘E:/xampp/htdocs…’) #7 E:\xampp\htdocs\extendfeature\vendor\magento\module-theme\Model\Theme\Registration.php(135): Magento\Framework\View\Design\Theme\Image->createPreviewImage(‘E:/xampp/htdocs…’) #8 E:\xampp\htdocs\extendfeature\vendor\magento\module-theme\Model\Theme\Registration.php(114): Magento\Theme\Model\Theme\Registration->_savePreviewImage(Object(Magento\Theme\Model\Theme\Data)) #9 E:\xampp\htdocs\extendfeature\vendor\magento\module-theme\Model\Theme\Registration.php(73): Magento\Theme\Model\Theme\Registration->_registerThemeRecursively(Object(Magento\Theme\Model\Theme\Data)) #10 E:\xampp\htdocs\extendfeature\vendor\magento\module-theme\Setup\Patch\Data\RegisterThemes.php(47): Magento\Theme\Model\Theme\Registration->register() #11 E:\xampp\htdocs\extendfeature\vendor\magento\framework\Setup\Patch\PatchApplier.php(162): Magento\Theme\Setup\Patch\Data\RegisterThemes->apply() #12 E:\xampp\htdocs\extendfeature\setup\src\Magento\Setup\Model\Installer.php(1023): Magento\Framework\Setup\Patch\PatchApplier->applyDataPatch(‘Magento_Theme’) #13 E:\xampp\htdocs\extendfeature\setup\src\Magento\Setup\Model\Installer.php(890): Magento\Setup\Model\Installer->handleDBSchemaData(Object(Magento\Setup\Module\DataSetup), ‘data’, Array) #14 [internal function]: Magento\Setup\Model\Installer->installDataFixtures(Array) #15 E:\xampp\htdocs\extendfeature\setup\src\Magento\Setup\Model\Installer.php(371): call_user_func_array(Array, Array) #16 E:\xampp\htdocs\extendfeature\setup\src\Magento\Setup\Controller\Install.php(109): Magento\Setup\Model\Installer->install(Array) #17 E:\xampp\htdocs\extendfeature\vendor\laminas\laminas-mvc\src\Controller\AbstractActionController.php(83): Magento\Setup\Controller\Install->startAction() #18 E:\xampp\htdocs\extendfeature\vendor\laminas\laminas-eventmanager\src\EventManager.php(321): Laminas\Mvc\Controller\AbstractActionController->onDispatch(Object(Laminas\Mvc\MvcEvent)) #19 E:\xampp\htdocs\extendfeature\vendor\laminas\laminas-eventmanager\src\EventManager.php(178): Laminas\EventManager\EventManager->triggerListeners(Object(Laminas\Mvc\MvcEvent), Object(Closure)) #20 E:\xampp\htdocs\extendfeature\vendor\laminas\laminas-mvc\src\Controller\AbstractController.php(115): Laminas\EventManager\EventManager->triggerEventUntil(Object(Closure), Object(Laminas\Mvc\MvcEvent)) #21 E:\xampp\htdocs\extendfeature\vendor\laminas\laminas-mvc\src\DispatchListener.php(117): Laminas\Mvc\Controller\AbstractController->dispatch(Object(Laminas\Http\PhpEnvironment\Request), Object(Laminas\Http\PhpEnvironment\Response)) #22 E:\xampp\htdocs\extendfeature\vendor\laminas\laminas-eventmanager\src\EventManager.php(321): Laminas\Mvc\DispatchListener->onDispatch(Object(Laminas\Mvc\MvcEvent)) #23 E:\xampp\htdocs\extendfeature\vendor\laminas\laminas-eventmanager\src\EventManager.php(178): Laminas\EventManager\EventManager->triggerListeners(Object(Laminas\Mvc\MvcEvent), Object(Closure)) #24 E:\xampp\htdocs\extendfeature\vendor\laminas\laminas-mvc\src\Application.php(339): Laminas\EventManager\EventManager->triggerEventUntil(Object(Closure), Object(Laminas\Mvc\MvcEvent)) #25 E:\xampp\htdocs\extendfeature\setup\index.php(39): Laminas\Mvc\Application->run() #26 {main} Next Magento\Framework\Setup\Exception: Unable to apply data patch Magento\Theme\Setup\Patch\Data\RegisterThemes for module Magento_Theme. Original exception message: Wrong file in E:\xampp\htdocs\extendfeature\vendor\magento\framework\Setup\Patch\PatchApplier.php:170 Stack trace: #0 E:\xampp\htdocs\extendfeature\setup\src\Magento\Setup\Model\Installer.php(1023): Magento\Framework\Setup\Patch\PatchApplier->applyDataPatch(‘Magento_Theme’) #1 E:\xampp\htdocs\extendfeature\setup\src\Magento\Setup\Model\Installer.php(890): Magento\Setup\Model\Installer->handleDBSchemaData(Object(Magento\Setup\Module\DataSetup), ‘data’, Array) #2 [internal function]: Magento\Setup\Model\Installer->installDataFixtures(Array) #3 E:\xampp\htdocs\extendfeature\setup\src\Magento\Setup\Model\Installer.php(371): call_user_func_array(Array, Array) #4 E:\xampp\htdocs\extendfeature\setup\src\Magento\Setup\Controller\Install.php(109): Magento\Setup\Model\Installer->install(Array) #5 E:\xampp\htdocs\extendfeature\vendor\laminas\laminas-mvc\src\Controller\AbstractActionController.php(83): Magento\Setup\Controller\Install->startAction() #6 E:\xampp\htdocs\extendfeature\vendor\laminas\laminas-eventmanager\src\EventManager.php(321): Laminas\Mvc\Controller\AbstractActionController->onDispatch(Object(Laminas\Mvc\MvcEvent)) #7 E:\xampp\htdocs\extendfeature\vendor\laminas\laminas-eventmanager\src\EventManager.php(178): Laminas\EventManager\EventManager->triggerListeners(Object(Laminas\Mvc\MvcEvent), Object(Closure)) #8 E:\xampp\htdocs\extendfeature\vendor\laminas\laminas-mvc\src\Controller\AbstractController.php(115): Laminas\EventManager\EventManager->triggerEventUntil(Object(Closure), Object(Laminas\Mvc\MvcEvent)) #9 E:\xampp\htdocs\extendfeature\vendor\laminas\laminas-mvc\src\DispatchListener.php(117): Laminas\Mvc\Controller\AbstractController->dispatch(Object(Laminas\Http\PhpEnvironment\Request), Object(Laminas\Http\PhpEnvironment\Response)) #10 E:\xampp\htdocs\extendfeature\vendor\laminas\laminas-eventmanager\src\EventManager.php(321): Laminas\Mvc\DispatchListener->onDispatch(Object(Laminas\Mvc\MvcEvent)) #11 E:\xampp\htdocs\extendfeature\vendor\laminas\laminas-eventmanager\src\EventManager.php(178): Laminas\EventManager\EventManager->triggerListeners(Object(Laminas\Mvc\MvcEvent), Object(Closure)) #12 E:\xampp\htdocs\extendfeature\vendor\laminas\laminas-mvc\src\Application.php(339): Laminas\EventManager\EventManager->triggerEventUntil(Object(Closure), Object(Laminas\Mvc\MvcEvent)) #13 E:\xampp\htdocs\extendfeature\setup\index.php(39): Laminas\Mvc\Application->run() #14 {main}

Solutions:

Finally Installation is complete 100% after done following changes:

Find validateURLScheme function in vendor\magento\framework\Image\Adapter\Gd2.php file. at line 96. Replace function with this: !file_exists($filename)

Please find and change validateURLScheme function like below code.

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please LIKE and SHARE

Categories
Magento 2

Magento 2 – Create a New Module / Extension

How to Create Module or Extension in Magento 2 Completed Guide. We know whole Magento 2 system is built with different unique Magento system core modules. Magento is opensource eCommerce platform, So we can add/install our developed custom module on Magento project.

In this article today I discuse how to create new custom Module or Extension for Magento 2. For Magento 2 module create we need to complete the following steps:

  • 1. Create vendor directory
  • 2. Create module directory
  • 3. Create etc/module.xml file
  • 4. Create registration.php file
  • 5. Create composer.json file
  • 6. Create etc/adminhtml/system.xml file
  • 7. Run php bin/magento setup:upgrade command to install the new module
  • 8. Check your created new module is working

Module Folder and Files structure

Let’s go through complete each of above steps.

Create vendor directory

Go to app/code directory on your Magento 2 project and create a directory rename it to as your module vendor name. I have create a directory “ExtendFeature” is vendor.

Create module directory

Go to app/code/ExtendFeature directory on your Magento 2 project and create a directory rename it to as your module name. I have create a directory “HelloWorld” is my custom module name.

Create etc/module.xml file

Go to app/code/ExtendFeature/HelloWorld directory on your Magento 2 project and create a directory rename it to etc, Now go to etc directory and crete module.xml file. Each Magento 2 module must have this file.

Open module.xml file and add following code.

Create registration.php file

Go to app/code/ExtendFeature/HelloWorld directory on your Magento 2 project and create a PHP file rename it to registration.php. Each Magento 2 module must have this file.

Open registration.php file and add following code.

Create composer.json file

Go to app/code/ExtendFeature/HelloWorld directory on your Magento 2 project and create a composer.json file.

Open composer.json file and add following code.

Create etc/adminhtml/system.xml file

Now create system.xml file in etc/adminhtml/ directory, Open system.xml file and add following code. This file generated some fields on Magento 2 system configuration section. You can view configuration fields by admin menu STORE=>Configurations=>Extend Feature menu.

Run php bin/magento setup:upgrade command to install the new module

Now login into SSH terminal and go to Magento 2 project root directory and run following commands to install/active your new module.

Check your created new module is working

Each Magento 2 module after install/active by command setup:upgrade added a new line on app/etc/config.php file, Now please check the file app/etc/config.php. New module is listed by auto-generated modules that are active. Please never change config list manually!

Also check module status via SHELL command.

After apply these steps, you can successfully create/active a new module in Magento 2 project and enjoy!

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please LIKE and SHARE

Categories
Magento 2

Magento 2 – Create custom Theme step by step

Create Magento 2 custom Theme step by step process. In Magento 2 has by default Luma and Blank themes – that you can see after installing Magento 2 successfully. Magento 2 default demonstration theme is Luma theme, and Blank is basis for custom theme creation.

We can create custom theme by call parent Luma or Blank theme. In this article I will discus create new theme by Luma parent theme.

Theme Folder and Files structure

To create a theme directory for your Magento 2, you need to go: app/design/frontend directory. Under frontend directory, create a new directory according to your theme vendor name: app/design/frontend/Extendfeature directory, I have choose Extendfeature for my theme vendor name under your theme vendor directory, create a directory for your Magento 2 theme: app/design/frontend/Extendfeature/ultimate I have choose ultimate for my theme name directory.

After creating files and folder structure, we need to declare name/title your Magento 2 theme, So that Magento knows it exists and we can set your theme as the current store theme in your Magento 2 backend.

Declare your Magento 2 theme

Now you need to create the theme.xml file under app/design/frontend/Extendfeature/ultimate/ directory and use the code below:

In <title> tag enter the name of your theme, and in the <parent> tag you can specify parent theme for fallback purposes. I am using the Luma theme. In the <preview_image> tag I declare a theme preview image.

Make Your Theme a Composer package

PHP dependency management tool is composer. it allows declare the libraries your project depends on and composer will manage install/update them for you and distribute theme as a package, we need to add a composer.json file to the theme directory.

Register your Magento 2 Custom theme

Add registration.php to register your Magento 2 Custom theme in your theme directory: app/design/frontend/Extendfeature/ultimate/registration.php and add the following content in your registration.php file.

Creating web static files, folders

For theme design view, we need to many static files such as javascript, css, images and fonts. Magento 2 are stored in separate folders in web of theme package.

Here are the structure

Configure storefront images size

Copy the view.xml file from the vendor/magento/theme-frontend-luma/etc directory of an existing theme (for example, from the Luma theme) to your theme app/design/frontend/Extendfeature/ultimate/etc directory. And let update the image configuration for storefront catalog product grid and others template page.

Configure Magento 2 Custom Theme via Admin panel

Run following commands and check your newly created theme is working.

After adding your theme to the file system, everything is ready for you to activate your theme and apply it to your magento store. Login into Magento 2 admin panel, then go to Content > Design > Themes. And make your sure your theme title appears on this list.

Custom Theme in theme list

Theme Configuration, When you can see your theme in this list, go to Content > Design > Configuration, select your newly created theme from those shown in the image below. After change your theme, click on “Save Config” button.

Theme configuration add theme

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please LIKE and SHARE

Categories
Magento 2

Install Magento 2 Using Composer in localhost XAMPP server

Install Magento 2 Using Composer in localhost. In this article I will guide to you how to install composer and how to install Magento 2 with Composer in localhost XAMPP server or web server.

At first we want to know about Magento 2 System Requirements? Here is the full checklist.

Step 1: Install Composer

After setup XAMPP server go htdocs directory E:\xampp\htdocs and Download and Run the Composer Windows Installer from here:
Download Composer

Check the installation using composer -V
Output: Composer version 1.10.1 2020-03-13 20:34:27

If you want to Composer setup on web server please please login into SSH terminal and run following commands to check and install composer. If nothing displays or you face any errors, please install Composer Download Composer

Step 2: Setup Virtual Hosts

Setup Virtual Hosts and create a url for run magento project. Open E:\xampp\apache\conf\extra\httpd-vhosts.conf add following lines for setup Virtual Hosts.

Step 3: Setup a URL

Setup URL on windows host file. Open C:\Windows\System32\drivers\etc\hosts add following lines for browse site via browser.

Step 4: Download Magento 2

Go to XAMPP server htdocs E:\xampp\htdocs directory via SSH terminal and Run the following command in the htdocs directory.

Note: I have define “magento23” is project install directory in Setup Virtual Hosts section.

Step 5: Create The Database

Create an empty database to work with MySQL in case you have already created so ignore database creating step and next step.

Step 6: Install Magento 2

Run the following lines in Command Line to install your Magento 2

Magento 2 console command setup:install install Magento 2 via Command Line. If this command run without error you can see like following image:

Install Magento 2 by command line

Please check your Magento 2 project admin amd database information in app\etc\env.php file backend and db section.

Now Magento 2 setup is done in XAMPP windows server. Now write http://magento2demo.com/ in your web browser and enjoy magento 2 project.

Exception: in module: ‘Magento_Backend’ block’s name: ‘require.js’

If we gitting Exception: Invalid template file: vendor/magento/module-backend/view/adminhtml/templates/page/js/require_js.phtml in module: ‘Magento_Backend’ block’s name: ‘require.js’

Open file vendor\magento\framework\View\Element\Template\File\Validator.php line no 138.

change line 138 from

to

See more derails Here…

Thank you for carefully read my article If you have any query please Leave your query on following comment section or contact with us. Please LIKE and SHARE