<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d12008469\x26blogName\x3dIf+You+Don\x27t+Talk,+I+Won\x27t+Listen\x26publishMode\x3dPUBLISH_MODE_HOSTED\x26navbarType\x3dBLUE\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttp://blog.babywit.com/search\x26blogLocale\x3den\x26v\x3d2\x26homepageUrl\x3dhttp://blog.babywit.com/\x26vt\x3d1826027175920618601', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

Magento 2.1.2 A Quidk How To Guilde On Custom Theming for The Novice

Monday, November 07, 2016

I know not many folks out there are interested in this but I thought I would write down what I've discovered along my journey because I kept wishing there was a dummy guide out there for folks who are starting out in Magento 2 that may lack a developer background.

I have a rudimentary understanding of HTML and CSS, mostly just looking up elements online and then hacking some already developed code to make something work the way I want. I have no javascript or php background and have never written a command line to my server.

There are plenty of online guides on how create your custom theme directory but after that the Magento 2 Front End Developer Guide assumes you have a firm grasp on concepts and skips over basic steps. Also, there are a lot of annoying bugs in Magento 2.1 that take a lot of time to muddle through finding fixes.

I just updated to the latest release of 2.1.2 but it's taken me about a month of working in a 2.1.0 store to just get it set up with my products in it.

Because Magento 2 is so new, are some fairly annoying bugs in 2.1, some of them set me back a bit until I was gifted with answers to them on magento stack exchange and github.
These included:
  • attributes with multiple options that could be selected were not updating when products were selected in mass and one tried to mass update their attributes.
  • email templates not loading or saving. Turned out to be to separate issues, one a bug in the code and the other a permissions issue. 
  • the logo in the email header not being uploaded and you have to jerry rig it by uploading it to a folder mentioned in the source code. 
  • Still searching as to why some of my attributes in the drop down lists will not show up in the order listed in the defined attribute and 
  • why clearing my static cache causes all my symlinks to break and files to disappear. 
Also there were the user error stuff like when grey lines began running through all my images when I switched between the blank theme and my custom theme because the database somehow got confused and couldn't find the watermark image.

Or some irritating usage stuff like you have to create fake associated products in order to be able to select and associate already existing simple products to a configurable. Another was getting the "cannot gather stats! Warning! stat(): stat failed" message when you delete an image in a product that is apparently being used by an associated product (I think....that's what's going on) and this lovely warning makes your product inaccessible.

Something to note is odd things will happen if the permissions were not set properly so this is always something to check up on with your host (mine is nexcess and they are great at responding to support requests) to see if that might be the issue.

I've built out custom spreadsheets, figured out why the imports weren't working (some things to make sure of...configurables products go at the end, the images do not need paths and to get your products to associate you have to make sure the entire of list of configurable_variations is in there properly.)

Now, I'm ready to start building out my own theme but how the heck do I even start. The files structure is intimidating and for a newbie.

If you want a custom theme (I've based mine off the parent Magento Blank theme. I've seen doc advising against basing it off the Luma theme and I can't remember exactly the reasons but when I read it I decided to just go with the Blank) you will find the design/app folder that hold the frontend and adminhtml folders and this is where you will create folders that will hold your custom themes.

There is a Magento Folder inside there but if you've used composer for your install, it will be empty and you will find these files in a folder titled vendor/magento. In here you will find module folders and also a folder called theme-frontend-blank. If you go into the theme-frontend-blank.folder you will find repeats of these module folders for the magento blank theme.

You will not want to edit these files but you will be duplicating the structure of these folders and files you want to alter from the theme-frontend-blank or from the module folders a level above (depending on where you find the file you need. I tend to look for the files I need in my custom folder, then the blank theme and then the module folder a level above) to your custom theme when you want to overwrite the parent theme.

Again creating your theme directory is well documented across the Internet and I found this guide easy to follow. It's when you want to start changing things like button colors or how about just removing that magento bug line or the footer links....then, you've got to go searching to find what file that bug line is referenced and what block it resides in etc.

Apparently, each footer link, the privacy policy, the search, the advanced search and the contact link all reside in different blocks, in different module folders. You could go into each block, in each module and comment out that reference line. This fix was suggested by others but involved editing files in the vendor folder that could be overwritten during updates and seemed inefficient. I found the easiest way was to turn each block off in the default.xml files in your custom theme folder.

There are a ton of folders as each module has it's own layouts, blocks, css, js, html,  less etc files. It's a bitch to wade through and the only way I've found it's best to just download the site and do file searches for whatever is referenced in the dev hints paths (turn those on if you are looking for something) or in the source code (although this can be misleading as it will reference static files which you don't want to edit as those are created from the compiled less and will disappear etc as I have learned) using a text editor like sublime.

I am now taking a crash course (thank you udemy) in less (I quite like it as it uses variables and calculations to produce CSS) to try and what should be the simplest of adjustments to my theme. I just read this note on the magentostackexchange which is quite helpful. I'm about to try it so I will return to update on whether it works or not.

On a side note, I once met Magento Guru Alan Storm for coffee as he lives in Portland Oregon. I was needing my site overhauled. He gently informed me that my project might be too small for him. I'm laughing about that now. He developed something called Commerce Bug but it's way beyond my comprehension level that I imagine I won't be purchasing that for a year or two.


Labels: , ,

leave a comment