Mobile Menu Links created in CMS Block are Redirecting to Undefined

https://magento.stackexchange.com/questions/323136

14-04-2021
|

题

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>

解决方案

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:

with the simple identifier name from your admin panel
or with the full url: http://example.com/[your-cms-page-identifier]

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.

其他提示

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

许可以下： CC-BY-SA 和归因

不隶属于 magento.stackexchange