0

I'm on Magento 2.1.14 and have a custom theme applied which builds off of the blank theme. The customizations through XML in the Magento_Theme directory are minimal. I added several links to the main nav bar (the same one that contains the category links) by calling a cms block in the default.xml. The cms block was created through the admin and instead of hardcoding the urls, I used {{store direct_url='path'}}. In my default-head-blocks.xml file in my "Magento_Theme" folder, I am not calling any extra js. Code posted.

On the desktop version of the site, there are no problems with the nav bar and all links direct to their correct urls or paths. When I load the mobile version, the extra links that were added through calling the cms block all direct me to url/undefined. This only happens on the mobile version.

Does anyone have any insight into why this may be happening? I have searched for any info and it all leads back to JS or jQuery errors. But I'm basically using the majority of the Magento Blank theme and core Magento files.

Background: when I originally added the links, I tried several methods including, the current method. I initially tried adding the links directly through XML using the link class and added arguments to specificy the path. This ended up adding a trailing slash to all the paths added, so I then created redirects in the admin to direct those particular paths with trailing slashes to the correct path (without the trailing slash). That resulted in the browser crashing for a few of the links, so I removed the XML and deleted the redirects from the admin.

myThemeDirectory/Magento_Theme/layout/default.xml

   <?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
  <body>

    <referenceBlock name="catalog.topnav">
      <block class="Magento\Cms\Block\Block" name="additional-links">
        <arguments>
          <argument name="block_id" xsi:type="string">additional-store-links</argument>
        </arguments>
      </block>
    </referenceBlock>

    <referenceBlock name="skip_to_content.target" remove="true" />
    <referenceBlock name="report.bugs" remove="true"/>
    <referenceBlock name="store.settings" remove="true"/><!-- targets mobile menu ? -->
    <referenceBlock name="store.links" remove="true"/><!-- targets mobile menu ? -->
    <referenceBlock name="top.search" remove="true" />
    <referenceBlock name="top.links" remove="true" />
    <referenceBlock name="footer_links" remove="true" />
    <referenceBlock name="form.subscribe" remove="true" />

    <referenceBlock name="reviews.tab" remove="true" />
    <referenceBlock name="product.review.form" remove="true" />
    <referenceBlock name="product.info.review" remove="true" />

    <move element="store_language" destination="header-wrapper" after="-" />
    <move element="breadcrumbs" destination="main.content" before="-" />

    <referenceBlock name="header.panel.wrapper" remove="true"/>

    <referenceContainer name="footer">
          <block class="Magento\Cms\Block\Block" name="cms-static-main-footer" before="copyright">
                    <arguments>
                        <argument name="block_id" xsi:type="string">cms-static-main-footer</argument>
                    </arguments>
                </block>
    </referenceContainer>
  </body>
</page>
Improve this question
1
  • For me, it helped to disable Magento page builder. Or disable page builder, save the block with the links and then enabl;e page builder again. When you save the block with page builder enabled i get the undefined link issue again.
    – Michel Vinke
    Commented Sep 16 at 7:53

2 Answers 2

Reset to default
0

This is not 100% answered, and actually, I would like an answer as to why the links behave differently on desktop vs. mobile. But, here is what I discovered about the MOBILE MENU, which is what the question was originally about. On desktop the following does not apply.

After hours of debugging it turns out that this has to do with the "catalog.topnav" block in Magento. Any link placed in this block that is not a category in your store will not be rendered as a "normal link" in the Magento mobile menu. Although placing links in the "catalog.topnav" block will place the links in the the main navigation (category links bar).

For may people trying to place links, this is the ideal location, as it renders the link on the front end both in the main categories navigation bar, as well as the main drop down menu in the mobile menu. However, the url's will not render properly. Links need to be placed outside of this block in order for the URL to render correctly.

For example the link will throw an "undefined" error leading you to a 404 page no matter how you format it:

and regardless of hows the links are placed here

  • using a cms block and calling the block in the xml file with the Magento block class "Magento\Cms\Block\Block"
  • or placing the code with a template using the template class "Magento\Framework\View\Element\Template"

Unfortunately for those who are Magento specialists the documentation on this topic is almost non-existent if you don't understand full coding language.

Hopefully this helps someone out there.

Improve this answer
1
  • Ran into this same issue after creating a custom mega menu for a site. Our workaround was to create a custom click handler for a mobile-menu class. On click, we used e.preventDefault() and e.stopPropagation() to keep the click event from bubbling up to the Magento menu js. Then we set window location to the link in the anchor tag href.
    – ml13007
    Commented Apr 18, 2019 at 19:00
0

Primarily this issue comes with any of JS conflict or base path definition in settings. If everything is fine, then you need to do hack like this. Jump into code and you will find the culprit. In my case - I have removed and add

  • structure to re-form the menu.

    It works !!

    If you are not able to do, please follow/connect me on twitter @rammohan4b

    Code preview of Mobile Menu

    • Improve this answer

    Your Answer

    By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

    Not the answer you're looking for? Browse other questions tagged or ask your own question.