My site, originally built on m2.1, uses a custom theme to apply different header CSS classes for the Product pages and Checkout pages. Here is how I achieved that:
Product pages:
layout files
app/design/frontend/FuryBros/default/Magento_Theme/layout/default.xml
app/design/frontend/FuryBros/default/Magento_Theme/layout/default_head_blocks.xml
default.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="after.body.start"> <block class="Magento\Framework\View\Element\Template" before="-" name="mobile.nav" template="Magento_Theme::mobile-nav.phtml"/> <block class="Magento\Framework\View\Element\Template" before="-" name="topbar" template="Magento_Theme::topbar.phtml"/> </referenceContainer> <referenceContainer name="header.container" htmlClass="page-header main-header header-split menu-calculated"/> <referenceBlock name="breadcrumbs" remove="true" /> <referenceBlock name="header.panel.wrapper" remove="true"/> <referenceBlock name="top.search" remove="true"/> </body> </page>
Checkout pages:
layout files
app/design/frontend/FuryBros/default/Magento_Checkout/layout/default.xml
app/design/frontend/FuryBros/default/Magento_Checkout/layout/checkout_index_index.xml
app/design/frontend/FuryBros/default/Magento_Checkout/layout/default_head_blocks.xml
default.xml
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd"> <body> <referenceContainer name="after.body.start"> <block class="Magento\Framework\View\Element\Template" before="-" name="mobile.nav" template="Magento_Theme::mobile-nav.phtml"/> <block class="Magento\Framework\View\Element\Template" before="-" name="topbar" template="Magento_Theme::topbar.phtml"/> </referenceContainer> <referenceContainer name="header.container" htmlClass="page-header"/> <referenceBlock name="breadcrumbs" remove="true" /> <referenceBlock name="header.panel.wrapper" remove="true"/> <referenceBlock name="top.search" remove="true"/> </body> </page>
This worked fine for 2.1
I am trying to upgrade to 2.3.3 and now, header is broken on product pages. Its missing the extra classes main-header header-split and menu-calculated. If I add these classes in the checkout layout, they also show up on product pages. It is as if the Checkout layout is applying everywhere now instead of the Theme layout.
I don't know how to fix or troubleshoot. Please help!
Solved! Go to Solution.
Apparently not a lot of 2.3 users on this forum?
The fix was to move the referenceContainer line into checkout_index_index.xml instead of default.xml
@pablit07 after upgrading have you switched to your custom theme?
Aye, it is active. I also confirmed it is set as type = 0 in database.
@Rahul Gupta the image just shows you, yes the theme is active.
Do you know, is this the right path and file to override the <header> block and give it a CSS class in Magento 2.2.3? This is what no longer works after the upgrade:
app/design/frontend/FuryBros/default/Magento_Theme/layout/default.xml
but, it works here
app/design/frontend/FuryBros/default/Magento_Checkout/layout/default.xml
Do you know why?
You can see the details of what I want to accomplish in my original post. Thanks!
@pablit07 if you are using default.xml inside Magento_Theme then it would be added for whole website but if you wanted it in checkout only then use it inside Magento_Checkout.
Thanks
I've added default.xml inside Magento_Theme. It is not working after clearing cache etc.
I also added default.xml inside Magento_Checkout. This one is applying for the entire site after upgrade - I dont understand why or how to fix.
@pablit07 clear your pub/static folder and then try again.
@Rahul Gupta Thank you for the suggestion but clearing pub/static and redeploying static content did not fix this.