Pay attention when using Bootstrap 4 and 5 with OpenMage

[addison74]

In OpenMage there are phtml template files where you will find col-1, col-2 classes. Please be careful when using Bootstrap 4 and 5 because these Magento classes actually mean that container will take 1 or 2 columns in the grid.

This is not an issue with Bootstrap 3 because col-* doesn't exist, it was introduced in version 4. I quickly solved the problem by commenting the Bootstrap classes, but it is a temporary solution, until I can make an assessment. Perhaps these classes inherited from the Magento era should be renamed and modified in the styles.css file, but this will have an big impact on all themes that are already in production.

With Tailwind it is not an issue because it uses columns-*.

[fballiano]

mmm the problem is that, if we do that, we may break all custom themes that depends on those classes :-(

I would work on some RWD2 theme which has to tackle all of these things, and more.

[addison74]

I will think of a paragraph to be integrated in README.md related to this issue. In /app/design/frontend directory there are 53 uses of col-1 and 48 uses of col-2. It is obvious that we cannot rename the classes, but I think there is a patch/repository for Bootstrap >4 where these classes can be changed as names. If someone has a custom theme, it certainly does not contain many files, most likely a few files in the catalog and page directories. If there will be a repository then whoever wants to switch to a Bootstrap using an existing custom theme will have to manually operate the changes in the files, it is not complicated at all and can be specified in the description of the repository.

[fballiano]

the readme is starting to be a little bit overcrowded (we'll have to think something) but why not ;-)

[justinbeaty]

Maybe a section “Known incompatible software”? It could list any extensions we know are broken as well, etc.

[addison74]

We could add a "Known Issues" section in the Readme in a certain format that stands out. For this issue it should be as follows:

Bootstrap 4 and 5. In the OpenMage templates (PHTML files), the classes col-1 and col-2 are used, which conflict with the classes col-1 and col-2 from Bootstrap.

[addison74]

I analyzed the issue better. Canceling the functionality of col-1 and col-2 classes from Bootstrap is only a temporary solution, if I want to use them in the future, they will not work. Therefore, the solution I see is to change the name of those classes inherited from the Magento era. So as not to interfere with other classes in the future I will call them col1 and col2. There are already classes that start with these prefixes, for example col1-layout, col2-right-layout.

[justinbeaty]

If the classes in OM were to ever change, I would recommend om-col-1, om-col-2, om-col1-layout, etc. Every framework wants to define grid classes, and they usually clash, so it's smart to prefix them.

But this would break a lot of themes and extensions.

[addison74]

Unfortunately, I don't think there is a solution by modifying these classes in OM. Custom themes are made using templates from /base directory which are then modified as everyone wants. If we change the existing code, the visual impact is immediate, especially since there are around 50 files that use col-1 and col-2 classes. I visited the /customer/account/login path and immediately noticed the distorted content.

There would be another option, but I am not a specialist in this. Let's create a patch that replaces in the files containing the col-1 and col-2 classes with col1 and col2. Thus the change will not only be made on the OM files but also on the custom modified ones. Basically, in the case of those who want to use OM, they must run this script (PHP, Bash, Python, ...). Now it also depends on what happens when a new version is released, this script must be run again? I think so.

[addison74]

Using Bootstrap and Tailwind in OpenMage can literally make a website shine. Even if the share of smartphone versus desktop has started to be in favor of the first, an attractive website will always sell. A well-chosen color, a pleasant discrete effect on images and button, make a shopping cart different from all the others. I have often met online stores that sold only a few products, but with a spectacular turnover, all because they had an attractive design.

[justinbeaty]

The script would also have to modify blocks in the database etc. I simply suggested that if this route is taken to replace col-1 with om-col-1 instead of col1. The reason is that maybe some other CSS framework uses col1 and then we are back to the start of the problem.

However, why not just compile your own SCSS from bootstrap's repo, and change the prefixes there so they don't conflict with OM? It could be changed to bootstrap-col-1, etc.

[addison74]

I checked on the Internet before if col1 and col2 can be found through other CSS frameworks and they don't exist (for now). The name of those classes is fine to be applied om-col-*, to be differentiated and to avoid any future issues. In addition to the OM files, I will also have to modify them in all my custom templates. I have about 9 references in /catalog and /page directories. In Blocks, CMS Pages I did not use these classes.

I can compile my own Bootstrap. Actually I do this to reduce the size of the file by limiting to the classes used in the templates. I would add that prefix bs- only for the two common classes with OM even I don't use them anyway, I've never used col-* in Bootstrap, that means a viewport <576px.

[addison74]

I decided to add a prefix to all classes in the col-* format, thus col-1 becomes bs-col-1. The OM code remains unchanged, as do the custom template files. The classes are intuitive and cover all 12 columns in the grid for a viewport bellow 576. I expanded from two initials to twelve because I found an older theme from Template Monster where it uses col-3 and col-4 classes.

I will create a paragraph in the Readme file to warn users when using Bootstrap 4. I will call the section Known Issues.

[addison74]

If we take a look into this file

magento-lts/skin/frontend/default/default/css/styles.css

Lines 123 to 126 in 6b0408f

	.col4-set .col-1 { float:left; width:23.5%; }
	.col4-set .col-2 { float:left; width:23.5%; margin:0 2%; }
	.col4-set .col-3 { float:left; width:23.5%; }
	.col4-set .col-4 { float:right; width:23.5%; }

Magento team used not only col-1 and col-2 but col-3 and col-4 classes. The fastest solution is to rename all 12 Bootstrap classes from col-* to bs-col-* format to avoid future issues.

In general, I use special CSS files with which I change the behavior of the default ones that are delivered with Magento/OM and themes. The rule is to load these files at the end. For example,

extra_styles.css - here are the classes created by me.
responsive.css - here are the media queries created by me.
override.css - here are the classes in the files created by others, but which I change so as not to touch the initial files.

[addison74]

I recently faced an issue in the use of some Bootstrap components and I said not to keep it to myself because maybe others will also face it. There is a conflict with the Prototype library, in case of a collapse the opening and closing of the hidden block does not work smoothly. Below is the JS code I used to resolve this conflict. A noconflict.js file must be created which can be in /skin/.../theme/js and added to the theme page layout. I went further and avoided a conflict with JQuery too. There is a file already for this issue located in /js/lib/jquery.

jQuery.noConflict();
if (Prototype.BrowserFeatures.ElementExtensions) {
    var disablePrototypeJS = function (method, pluginsToDisable) {
            var handler = function (event) {
                event.target[method] = undefined;
                setTimeout(function () {
                    delete event.target[method];
                }, 0);
            };
            pluginsToDisable.each(function (plugin) { 
                jQuery(window).on(method + '.bs.' + plugin, handler);
            });
        },
        pluginsToDisable = ['collapse', 'dropdown', 'modal', 'tooltip', 'popover', 'tab'];
    disablePrototypeJS('show', pluginsToDisable);
    disablePrototypeJS('hide', pluginsToDisable);
}
var $j = jQuery.noConflict();