Відео

It's my pleasure

PHP Storm www.jetbrains.com/phpstorm/

The process is quite similar. You begin with the component node in the layout file (right under jsLayout argument node), then use the jsLayout method in PHP to render it within the PHTML file. The rendering data will act as the value to the js app module (Magento_Ui/js/core/app).

Glad it was helpful!

Sure, I will create a video on the requested topic soon.

The simplest way is to use click event using jquery. The event will be applied on the anchor element, and make sure to return false. Here is the sample for you: <form class="my-custom-form-class" style="display: none;"> .... </form> <a href="" class="openform">Link to open the form</a> <script> requirejs(['jquery', 'domReady!'], function($) { $(document).ready(function() { $('.openform').on('click', function() { $("form.my-custom-form-class").show(); return false; }); }); }); </script> If you want to toggle (show/hide) using same button, then use the toggle function: $("form.my-custom-form-class").toggle(); I hope this will be helpful for you.

feel free to reach out if you have any specific topics or questions

Thank you for appreciation. More content is in the timeline

Not yet, but it's on the timeline. I will create soon

@@knowthemage Ok.Thank you!

Indeed it is the best practice to defined the template within your component by default. The purpose of defining component template from phtml was to demonstrate the component creation keeping the simplicity in mind.

Sure I'll do it

@@knowthemage thanks

Sure thing! Noted your request.

@@knowthemage Waiting for more great content from your side in future...

Hi, I'm glad you liked the content. Apologies for the silence; I've been quite busy lately. I'll be actively engaging with the channel, so expect plenty of upcoming posts.

That's wonderful to hear! I'm really glad you're finding the videos helpful and informative. It's always great to know that the content is making a positive impact. Stay tuned, new content coming soon.

I'm glad it was helpful!

No you can't call php method directly inside template ".html". All you need to pass the dynamic data to the component and then retrieve inside your html file. I have a post on this topic, please checkout: ua-cam.com/video/G7jsz1FYeHI/v-deo.html You can also check the post on blog: knowthemage.com/how-to-pass-dynamic-variables-to-a-component-in-magento-2/

@@knowthemage but i did it using phtml only , i just call a phtml file in html and using xml already define phtml,html both

Hello Pratik, thank you and noted your request. The upcoming post will be on this topic in a couple of weeks. Thank you for your patience!

@@knowthemage I am veryyy eagerly waiting for it 🙏🏻

@@knowthemage Hey, and please do cover things in details, both the coding part and the other. And can I publish a module without a composer setup? I just have a manual installation for the time being.

Sure & thank you. Noted the suggestion. Installing magento module manually is not recommended. However you can achieve that in following steps: Step 1: Add your module into the app/code directory Step 2: Inside db, run following query (make sure to replace with your module name in query): INSERT INTO `setup_module` VALUES ("Know_MyModule","1.0.0","1.0.0"); Step 3: If there are database entities involve, do create them using sql statement(s) Step 4: Delete following sub folders under magento var directory: -> delete everything under generated folder. -> delete everything under cache folder. -> delete everything under view_preprocessed folder. -> delete everything under static folder Step 5: Open app/etc/config.php and add your module like: 'Know_MyModule' => 1, Step 6: (Optional) flush cache from admin panel. Step 7: Test your page or configuration This should work.

Hey @knowthemage Waiting for your video 😢

My pleasure!

​@@knowthemage Thanku very much , but what if I want to make a mixin , if the type of address I get is 'custimer-address' on loading the shipping page , then trigger a click on next button automatically and got proceed to billing page directly Can this be done , and address-type==='customer-address' , we will get only when customer is logged in

I suggest to create a mixin for "Magento_Checkout/js/model/checkout-data-resolver" file and add custom logic for "resolveShippingRates" method. Then using quote model do followings: 1- Make sure address type is 'customer-address'. 2- Check if shipping method was not selected select it (using select shipping method action). 3- Either use jquery to trigger the next button click, or you can use 'Magento_Checkout/js/action/set-shipping-information' as dependency, set the dependency and navigate to next screen using 'Magento_Checkout/js/model/step-navigator' js model.

I will soon come with a new post on this topic.

@@knowthemage I have tried using quote to get shipping method type but it returns null , don't know why it's giving null .

Thank you. Mixins are useful when existing behavior modification is needed. This approach can also be termed as extending via mixins. Extending UI Components mean to create a new or a custom feature using existing or available functionality. I will come up with another tutorial on this topic soon.

Hello there! I sincerely appreciate your positive response and I truly appreciate your patience. I will be active soon next week and I'll definitely prioritize creating a video tutorial on the process of publishing a Magento module on the marketplace. Thank you very much.

The issue is missing dependencies, which are actually passed in `customer_account_create.xml` file and used by the register.phtml: attribute_data, region_provider and create_account_button_view_model I have seen this issue in the latest versions. So let's fix that. Replace your controller with following code: `Know\Module\Controller\Index\Index`, add following dependancies: <?php namespace Know\Module\Controller\Index; use Magento\Framework\App\ActionInterface; use Magento\Framework\App\ResponseInterface; use Magento\Framework\Controller\Result\JsonFactory; use Magento\Framework\View\Result\PageFactory; class Index implements ActionInterface { private PageFactory $pageFactory; private JsonFactory $jsonFactory; /** * @var \Magento\Customer\Block\DataProviders\AddressAttributeData */ private $attributeData; /** * @var \Magento\Customer\ViewModel\Address\RegionProvider */ private $regionProvider; /** * @var \Magento\Customer\ViewModel\CreateAccountButton */ private $createAccountButtonViewModel; public function __construct( PageFactory $pageFactory, JsonFactory $jsonFactory, \Magento\Customer\Block\DataProviders\AddressAttributeData $addressAttributeData, \Magento\Customer\ViewModel\Address\RegionProvider $regionProvider, \Magento\Customer\ViewModel\CreateAccountButton $createAccountButtonViewModel ) { $this->pageFactory = $pageFactory; $this->jsonFactory = $jsonFactory; $this->attributeData = $addressAttributeData; $this->regionProvider = $regionProvider; $this->createAccountButtonViewModel = $createAccountButtonViewModel; } public function execute() { $resultPage = $this->pageFactory->create(); /** @var \Know\Module\Block\Form\Register $block */ $block = $resultPage->getLayout() ->createBlock(\Know\Module\Block\Form\Register::class); $block->setData('attribute_data' , $this->attributeData); $block->setData('region_provider' , $this->regionProvider); $block->setData('create_account_button_view_model' , $this->createAccountButtonViewModel); $html = $block->setTemplate('Magento_Customer::form/register.phtml') ->toHtml(); $resultJson = $this->jsonFactory->create(); $resultJson->setData([ 'data' => $html ]); return $resultJson; } }

Thank you very much for pointing out.

@@knowthemage There is another problem friend, when trying to inject \Magento\Customer\ViewModel\Address\RegionProvider $regionProvider, and \Magento\Customer\ViewModel\CreateAccountButton $createAccountButtonViewModel It tells me that these are classes that do not exist, can you help me with this please?

It looks like you are using previous Magento version. Remove the "\Magento\Customer\ViewModel\CreateAccountButton" dependancy. And inside execute method remove: "$block->setData('create_account_button_view_model', $this->createAccountButtonViewModel);", then remove the generated content and flush the cache. If this still not work, try with removing "\Magento\Customer\ViewModel\Address\RegionProvider" dependancy and its related code.

Regarding your previous issue, double check other conflicting modules or theme related to the customer registration template file.

It sounds like you want to add custom fields to billing address only?

@@knowthemage yes , but sir first thanks for every lecture u provided . Basically I want to understand the topic of layout processor in depth , how after adding any field we can proceed further and get the value of custom added field in order success mail and in invoices etc. Yaa adding field in billing form , I don't know how to proceed because we have option in admin that we need seperate billing address or with each payment method we can also billing form , here I am confused how to take seperately both in layout processor. Please make a detail video for full flow and understanding how we can add and fetch data . Waiting for your video. Thanks in advance sir.

Sure, I'll come up with this post in a couple of weeks.

The use of the db_schema_whitelist.json file in Magento 2 is considered a temporary solution to encourage developers, to define their database structures in declarative schema XML files. This file is used to specify which database tables are allowed and disallowed during the setup and upgrade processes. *New Table*: When creating a new table, remember to generate the db_schema_whitelist.json file. *Drop Table*: When dropping a table, do not remove it from the db_schema_whitelist.json file, otherwise it will not be dropped. *Rename Table*: When renaming a table, remember to regenerate the db_schema_whitelist.json file so it contains the new name in addition to the old one. *New Column*: When adding a new column into table, remember to generate the db_schema_whitelist.json file. *Drop a Column*: It is possible to drop a column only if it exists in the db_schema_whitelist.json file. *Drop a foreign key*: It is possible to drop a foreign key only if it exists in the db_schema_whitelist.json file. See more in documentation: developer.adobe.com/commerce/php/development/components/declarative-schema/migration-scripts/

Handling validation for custom forms in a ui component can indeed be tricky. You must introduce the custom validation for that. Instead there can be a separate component for a custom form which could also include the validation. Creating a custom step with a custom form and validating fields is an interesting idea. *Next tutorial is coming soon on this topic.* There are many ways you can get output from rendered CMS blocks. You can render it in PHTML template and assign it to the global JS config, such as utilizing `window.checkoutConfig` and appending the CMS block output string to it. Alternatively, you can initiate an AJAX request to a controller responsible for rendering the CMS block.

Thank you so much for your kind words! Teaching practical things is at the core of what I aim to do, and I appreciate your positive feedback. If you have any specific topics or questions you'd like covered in future tutorials, feel free to let me know. Happy Coding!

So do you want to introduce an additional step on the checkout page, where you prompt the customer to sign in?

@@knowthemage no i just want to add additional step to verify guest user email when they click on next during shipping for this i want to redirect to some other page with the help of controllers,

Why use controllers when this can be achieved with JavaScript? You can perform a redirection after sending a shipping information request to the server and modify the response data accordingly. Based on the response, you can then perform the necessary actions, like redirection or allow further steps.

@@knowthemage i didnt understand ur method is this possible to redirect using js in my custom module??

Indeed you can do that

If we were to create the logic directly within the 'cart/summary-modal,' we'd find the need to duplicate it within the 'checkout summary' component, which undermines code reusability. So to avoid this issue we need a central or an abstract component like 'summary-mixin'. Examining the requirejs-config, we will notice that the 'summary-mixin' component is used as mixin for both our custom `summary-modal` component on cart page and the `summary` component on the checkout page.

Thank you, your words of encouragement mean a lot! Stay tuned for more exciting content!

Waiting all your tuts

Thank you for your support. I will certainly consider your request, and will come up soon with a new post on this topic. So we will learn how to relocate the billing address to shipping section, positioning it just below the shipping address/form. Stay tuned for updates.

@@knowthemage ok , thanks for your reply . Yaa that will be a good enhancement. can we move the address list from shipping page to any other section like ship to section .

Sure, let's proceed with displaying the address list in the 'Ship To' section in coming post. Stay tuned!

@CS-yh3jz Here is the tutorial you requested: ua-cam.com/video/IoE06_uU9eM/v-deo.html Happy Coding!

You're very welcome! I'm glad you found the content helpful. The blog posts will be published shortly, and we also have more to-do list tutorial in the pipeline. In the meantime, you can check out our GitHub repository: github.com/arsalanworld/km-todo-tutorial