CMS page under a Category menu item

[wallchopz]

Hi,

 

I have a CMS page. I also have this category with sub-categories in it. How do I put my CMS page as a link under the category on the top menu?

 

It would look something like this:

 

Category

  >Sub-Category 1

  >Sub-Category 2

  >CMS Page

[vekia]

what menu module you use? default one?

[wallchopz]

Yes, the default top menu module.

[vekia]

so, in prestashop 1.6 menu module displays "pages" defined for "categories"

take a look:

 

test is a cms subcategory, another 1 is a cms page

[wallchopz]

I understand, vekia. But is it possible to put 'another 1' under 'WOMEN' as a sub-menu?

[lizanta]

Hi Vekia, I didn't get that, You go to modules > pages? or how?.

I created two pages in cms and I want to put them as subcategories in the top horizontal menu.

( I know this is a very old post, but I'm having kind of the same problem)

[pandorrah]

Same here. I created 3 CMS pages and want to put them into submenu links in horizontal topmenu.

[lizanta]

Hi Pandorrah,

In the back office go to Preferences > CMS > Here, you will have two category sections:

a)- Categories (above) and

- Pages in Category "Home" (at the bottom).

 

So pick the first section "Categories" and click on the plus sign. In here you can add categories in the cms, then go to the cms page/s you created, and, in the CMS Category drop menu, pick the category you want to display the page or pages.

 

I hope this helps 

[pandorrah]

Hi lizanta,

 

thank you for that, but that is not what i meant:

i need the CMS pages to show up as links in the Top Horizontal Menu (i.e. instead of clicking to a product category, you click to a CMS page).

[pandorrah]

[sOLVED]

 

What i did:

 

1. under Preferences > CMS > create a new CMS Category, in my case 'Extra'.

2. i opened the new CMS Category, and created New Pages, five new ones in my case.
3. every New Page under CMS i added the information i wanted and saved them one by one, under the new CMS Category 'Extra'.

4. then i went to Modules > Horizontal Top Menu, and from the right column, i selected the new 'Extra' CMS Category, clicked Add to add to the left column, and Saved.

5. On the main page, in the Horizontal Menu, a new Category 'Extra' exists, with all five CMS pages added as sublinks.

[Henri]

Right so this is 4 years late so i doubt that for the original poster this will be helpfull but for future reference here is how i tackled this issue:

As far as i was about to find out it is impossible to do this to date with the default menu and the cms category system. So i added it in by editing the ps_mainmenu.tpl from the menu module.

 

{assign var=_counter value=0}
{function name="menu" nodes=[] depth=0 parent=null}
    {if $nodes|count}
      <ul class="top-menu" {if $depth == 0}id="top-menu"{/if} data-depth="{$depth}">
        {foreach from=$nodes item=node}
            <li class="{$node.type}{if $node.current} current {/if}" id="{$node.page_identifier}">
            {assign var=_counter value=$_counter+1}
              <a
                class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                href="{$node.url}" data-depth="{$depth}"
                {if $node.open_in_new_window} target="_blank" {/if}
              >
                {if $node.children|count}
                  {* Cannot use page identifier as we can have the same page several times *}
                  {assign var=_expand_id value=10|mt_rand:100000}
                  <span class="float-xs-right hidden-md-up">
                    <span data-target="#top_sub_menu_{$_expand_id}" data-toggle="collapse" class="navbar-toggler collapse-icons">
                      <i class="material-icons add">&#xE313;</i>
                      <i class="material-icons remove">&#xE316;</i>
                    </span>
                  </span>
                {/if}
                {$node.label}
              </a>
              {if $node.children|count}
              <div {if $depth === 0} class="popover sub-menu js-sub-menu collapse"{else} class="collapse"{/if} id="top_sub_menu_{$_expand_id}">
                {menu nodes=$node.children depth=$node.depth parent=$node}
              </div>
              {/if}
            </li>
            
{* adds a custom link after the category which id is defined *}            
{if $node.page_identifier == "category-56"}
	<li class="{$node.type}{if $node.current} current {/if}" id="custom page id">
		<a
			class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
			href="custom page url" data-depth="{$depth}"                
		>
			custom link text
		</a>
	</li>
{/if}
            
        {/foreach}

      </ul>
    {/if}
{/function}

<div class="menu col-lg-8 col-md-7 js-top-menu position-static hidden-sm-down" id="_desktop_top_menu">
    {menu nodes=$menu.children}
    <div class="clearfix"></div>
</div>

It's nothing fancy but it works. 

It simply looks when the loop in this case hits category 56 after which it executes my code.

Just be sure to modify "category-56" into the sub-menu after which you want to insert your custom link(s); fill in the link's id, url  and text.

[tonisky]

On 7/3/2018 at 5:13 PM, Henri said:

Right so this is 4 years late so i doubt that for the original poster this will be helpfull but for future reference here is how i tackled this issue:

As far as i was about to find out it is impossible to do this to date with the default menu and the cms category system. So i added it in by editing the ps_mainmenu.tpl from the menu module.

 

{assign var=_counter value=0}
{function name="menu" nodes=[] depth=0 parent=null}
    {if $nodes|count}
      <ul class="top-menu" {if $depth == 0}id="top-menu"{/if} data-depth="{$depth}">
        {foreach from=$nodes item=node}
            <li class="{$node.type}{if $node.current} current {/if}" id="{$node.page_identifier}">
            {assign var=_counter value=$_counter+1}
              <a
                class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
                href="{$node.url}" data-depth="{$depth}"
                {if $node.open_in_new_window} target="_blank" {/if}
              >
                {if $node.children|count}
                  {* Cannot use page identifier as we can have the same page several times *}
                  {assign var=_expand_id value=10|mt_rand:100000}
                  <span class="float-xs-right hidden-md-up">
                    <span data-target="#top_sub_menu_{$_expand_id}" data-toggle="collapse" class="navbar-toggler collapse-icons">
                      <i class="material-icons add">&#xE313;</i>
                      <i class="material-icons remove">&#xE316;</i>
                    </span>
                  </span>
                {/if}
                {$node.label}
              </a>
              {if $node.children|count}
              <div {if $depth === 0} class="popover sub-menu js-sub-menu collapse"{else} class="collapse"{/if} id="top_sub_menu_{$_expand_id}">
                {menu nodes=$node.children depth=$node.depth parent=$node}
              </div>
              {/if}
            </li>
            
{* adds a custom link after the category which id is defined *}            
{if $node.page_identifier == "category-56"}
	<li class="{$node.type}{if $node.current} current {/if}" id="custom page id">
		<a
			class="{if $depth >= 0}dropdown-item{/if}{if $depth === 1} dropdown-submenu{/if}"
			href="custom page url" data-depth="{$depth}"                
		>
			custom link text
		</a>
	</li>
{/if}
            
        {/foreach}

      </ul>
    {/if}
{/function}

<div class="menu col-lg-8 col-md-7 js-top-menu position-static hidden-sm-down" id="_desktop_top_menu">
    {menu nodes=$menu.children}
    <div class="clearfix"></div>
</div>

It's nothing fancy but it works. 

It simply looks when the loop in this case hits category 56 after which it executes my code.

Just be sure to modify "category-56" into the sub-menu after which you want to insert your custom link(s); fill in the link's id, url  and text.

Hi Henri, I tried your codes, but it didn't work.   I created a sub-category called "Contact us", its category ID is 3, so I changed "category-56" to "category-3", under this sub-category there are a few CMS links.  I am not sure how to edit the code you wrote above <id="custom page id">. If the page ID of the CMS link is 8, do I change your code into <"id="8">?