ChatGPT Made a Magento 2 Module YOU GOTTA SEE

If you've been following me on Twitter at all lately, you'll know that I am really interested in AI and how it can help Magento developers code. I've also been knee deep in the development of my Magento 2 power theming course. Link is in the description below. But during the development I thought it would be great to display the layout handles at the bottom of every single page. Layout handles match to routes and I think are extremely helpful when it comes time to debugging and figuring out where to place your layout XML and in your themes. There are a few modules out there that do this already, but I just wanted something really simple that my students can install really quickly and just display the layout handles. Rather than trying to code it out myself, I just ask ChatGPT to help me out. I thought this would give me a great starting point for my custom module and then I will review all of the code it gave me and then make my updates. So I asked it how do I programmatically display all layout handles in Magento 2 at the bottom of every page in a custom module? What I will do is take this code exactly verbatim out of Chat GPT, add it to my editor and then run it and see if it works. And then I will go through and manually review this code. This will let us know if it actually got something working right out of the box and how close it was to following Magento 2's best practices. So it outputted a module XML file and a layout XML file and then a ML file which handles the presentation of this data. Let's go ahead and start with this module XML file. So let's go ahead and copy this code. I will need to create my own custom vendor name and module name for this module. So let's go into app code and create a new directory at Mark Schust slash Layout handle logger. I can name this whatever I wish, but I thought this was a good descriptive name. Next I will go ahead and create this file at Etsy/modules.xml and then I will just go ahead and paste this code in and I will need to update this vendor name and module name. So let's name this Mark Schust Layout handle logger. I did notice that it did not give me a registration PHP file, so I will go ahead and create that now. So let me go right into the module directory and create a new registration PHP file and I will go ahead and populate it. Our next step is to create a layout XML file in the VUE front end Layout directory. Notice how it says it's PHP code and it actually didn't tell me the name of the layout XML file that I need to create. So this is one of these intricacies that you need to be familiar with Magento in order to plug this code in. So since I want this code to be displayed in all pages I will add this to the default XML file. Let me go ahead and copy this code and we will go ahead and add it to our module at View front end layout and then I will create a new file in here named default XML since we want this code displayed on all pages. Next I'll just paste this code in and again we will need to update our view vendor name module name Mark Schust and then the module name is Layout handle logger and we have to do the same in our template. Notice it did case things correctly with title case and an underscore with this module. So we will just rename this Mark Schust Layout handle logger and then it does suggest a name for this phtml template handles that phtml so that's just fine and let's go ahead and create this final file which they say we have to put in view front end templates and they do tell us to name this handles phtml. So let's go ahead and copy this code and in our front end directory we will create a new file at templates/handles.ph d m l and then let's go ahead and paste this code in again. Notice phpstorm complain about a few things when I pop this code in but for now we will just ignore that and I want to see if this works right out of the gate. And initially I'm wondering what all of the styling is in this email template but let's just see what it outputs before we go ahead and start editing this file around. Next I will go ahead and open terminal and go ahead and enable this module with bin slash Magento module enable Mark Schust layout handle logger and then we will register this module with bin slash Magento Setup Upgrade. I'm really excited to see how this module will register and look on the front end. Very excited about this and we can see how well the AI created this module for us. Let me now go ahead and create a new tab for our Magento test site and let me scroll down to the bottom of the page and wow, it outputted layout handles with all of the correct layout handles and if I refresh the page they are still there. Let's Check out another one of these pages about us and we do still get the CMS page view and the ID for about us. And if we go to a dynamic page such as a category page, yes, it has all of these layout handles, which is absolutely amazing. And I'm actually shocked to see that that it actually styled this block for us, matching the Luma theme, which is absolutely incredible. So I think this is absolutely amazing. It works out of the box and it works pretty darn well. Now I will review this code and see how close it was to Magento's best practices and coding guidelines and standards and see if it's actually usable on a production site. First is this phtml file. You you'll notice that phpstorm is complaining about this Magento Framework view element that we can replace the qualifier with an import. So let's go ahead and do that. That's very pedantic though that's not a real issue. Let's go ahead and move this type hint above the variable and then we also see a little squiggly under git layout. It looks like this throws an exception or could throw it so we need to surround it in a try catch statement. Again, this usually isn't done by Magento coders, so this is another pedantic update. Let's go ahead and replace the qualifier with an import again and then if there is an error we will just output the exception message. Notice that was auto completed for me. That's because I am also using GitHub copilot which I strongly suggest for a little tiny snippets just like this. And finally we get another squiggly in this foreach that says the variable handles is probably undefined. That's just another pedantic update from phpstorm but but we can go ahead and add handles equals empty array to fulfill this little warning. Another update I would do is it's using a long echo tag here and I would convert this into a short echo tag and in one line PHP statements. I don't think these semicolons are necessary, so I'm just going to remove that but otherwise it looks pretty darn good. Next, in the default XML file we will notice that the block class is set to Magento Framework view element template which is the default block class in Magento. So this is completely unneeded. If something is the default I try not to set it at all. So we will go ahead and remove that. And also I noticed something missing with this file which is the XML prologue. Just to be consistent we should add the XML prologue to this file. Again, this is pretty pedantic, but it's a good update so we can be consistent in our code. And finally, if we check out the module XML file we will see that we have a blatant error in the no namespace schema location and this URI is not registered and that's because it ends in XML and not XSD. I'm not quite sure why ChatGPT thought this was the correct file, but it's an easy update to make. I expect CHAT GPT not to make this error in the future as the training data set gets larger and it just gets better training data to work from. It also added this sequence node for Page builder. I'm not sure why because none of this code has anything to do with page builder. So let's go ahead and remove that. And it also adds the setup version which is really from older versions of Magento. So let's go ahead and remove that. And since we now have an empty tag, we can change this to a self closing tag instead. And that's pretty much it. Let me know what you think in the comments below. I think this is an amazing tool if you and it can really drastically increase your development productivity. If you like this video, remember to hit the like button to support my channel. I really appreciate it. Notice that you really do still need Magento experience to figure all this out and plug in all this code. So this is no substitute for actually learning the Magento framework. It's just a tool to become more productive and to help you save some time. Those couple keywords and snippets that I used in this video were actually generated by a tool I created called Beeline. If you'd like to learn more about Beeline and how it can also save you a ton of time, be sure to check out this video that goes over all of it in more detail. And until next time, keep coding.