SXA Component not appearing on published site on mobile devices

Question

I'm using Sitecore 9.1.1 and SXA 1.8.1. I have a cloned component for the header of my site. This header component is added to the "Header" placeholder and its rendering variant contains a number of another components such as: Navigation, Search box, Language switcher,...

The problem is: This header component is causing my site to not open on the cd server only on mobile devices. After troubleshooting, i found that the problem is caused because of two components in the Header's rendering variant: 1- a cloned language switcher component 2- a page content structure component on which i added a search box to its variant.

Whenever i remove both of the previous component from the header, the site on the cd server opens successfully, but when added it gives an error.

I'm not sure what could be wrong with those two components"Search box and language switcher". Noting that the site opens normally on desktop from both cm and cd. and also opens normally on mobile devices but only on the cm server.

Any idea what might be causing this behavior?

Answer 1

First of all, check if everything is published. It looks like some items might be missing (e.g.: rendering variant, rendering data source items, ...). What is more, double-check your custom renderings (you cloned a lot of stuff as far as I can see).

But I also noticed something... weird. You've written, "its rendering variant contains a number of another component such as Navigation, Search box, Language switcher" or "a page content structure component on which I added a search box to its variant".

This is not how you should design pages! Why:

• if you want to have set of renderings for header, use Page and Partial Designs, create Header partial design which will contain all the renderings you need - do not store everything under Rendering Variant for one component, this is not how you should use that feature
• do not use Page Content as a structure component - Page Content should be used to display content, not to build page structure (even if it can) and hold Search Box - that is crazy!
• if you need to structure the renderings on the page use grid settings or Container, Column or Row Splitter renderings