Show all categories and it's articles in navigation (Pages)

[Kirill Gromov]

1 hour ago, newbie LAC said:

Hello,

You will need use recursion.

Unfortunately I can not cope with this..

[DannyPhantom]

I have a question, did I something wrong?

I noticed that by a page refresh all items are expand. 
So that not only items are expand which currently viewed.

Could this be fixed or is this an issue provided by myself? 

[Koper74]

@newbie LAC Thank you for this great tutorial!

Just one question:
Records in side menu are sorted by _title - I'd like to sort them by an custom field (named "order") but I just don't get it. Any ideas?

[newbie LAC]

14 hours ago, Koper74 said:

Records in side menu are sorted by _title - I'd like to sort them by an custom field (named "order") but I just don't get it. Any ideas?

Sort by setting. Do you see your field there?

[Koper74]

8 hours ago, newbie LAC said:

Do you see your field there?

Unfortunately not. I only have the following choice in the block settings:

They do not seem to match the database.

I can only select my custom fields in the database settings, but that does not change the order of the entries in the side menu.

[newbie LAC]

16 hours ago, Koper74 said:

Unfortunately not. I only have the following choice in the block settings:

 

In this case you need to create the block as @bfarber wrote

[Koper74]

13 hours ago, newbie LAC said:

In this case you need to create the block as @bfarber wrote

thx!

[Koper74]

Since updating to 4.3.6., it unfortunately does not work any more. Categories are completely displayed, but only 5 from a total of 115 articles are displayed in the sidebar. I cannot see any kind of pattern. 

The HTML structure of the templates and the JavaScript still correspond to the Developer Documantation here on the board (which should probably also run on 4.3.6!?).

Did you make any changes to the DB structure of pages that require changes to be made in the plugin block?

Does anyone else have this problem, or does anyone have a suggestion for me?

[steve00]

53 minutes ago, Koper74 said:

Since updating to 4.3.6., it unfortunately does not work any more. Categories are completely displayed, but only 5 from a total of 115 articles are displayed in the sidebar. I cannot see any kind of pattern. 

The HTML structure of the templates and the JavaScript still correspond to the Developer Documantation here on the board (which should probably also run on 4.3.6!?).

Did you make any changes to the DB structure of pages that require changes to be made in the plugin block?

Does anyone else have this problem, or does anyone have a suggestion for me?

Can you not set how many records to show when creating block ?

[Koper74]

1 hour ago, steve00 said:

Can you not set how many records to show when creating block ?

That's it. Thx! 👍

Strange - till 4.3.5. it worked with "Number to show = 0"...

[steve00]

29 minutes ago, Koper74 said:

That's it. Thx! 👍

Strange - till 4.3.5. it worked with "Number to show = 0"...

Glad to help

[PatrickRQ]

Small addition from me

1. Create new JS, guidesMenu.js, paste below code into and link under the guides page.

/**
 * IPS Social Suite 4
 * (c) 2013 Invision Power Services - http://www.invisionpower.com
 *
 * ips.guides.js - Guides JS controller
 *
 * Author: Rikki Tissier
 */
;( function($, _, undefined){
	"use strict";

	ips.controller.register('guides.menu', {

		initialize: function () {
			this.setup();
		},

		setup: function () {
			// Find the items we need
			var self = this;
			var items = this.scope.find("[data-role='title']");
			var output = [];
			var last = '';

			if( !items.length ){
				return;
			}

			output.push('<ul class="sGuidesMenu__list">');

			items.each( function () {
				var anchor = $( this ).prev('a').attr('id');
				output.push('<li class="sGuidesMenu__item sGuidesMenu__item--' + this.tagName + '"><a href="#' + anchor + '">' + $( this ).text() + '</a></li>');
			});

			output.push('</ul>');

			// Build the menu element
			var menu = "<nav class='sGuidesMenu'><h2 class='ipsType_reset'>In This Guide:</h2>" + output.join('') + "</nav>";

			this.scope.prepend( menu );
		}
	});
}(jQuery, _));

 

2. Go to listing templates and open record template, find

<section class="ipsType_richText ipsType_normal" data-controller='core.front.core.lightboxedImages'>{$record->_content|raw}</section>

replace with

<section class="ipsType_richText ipsType_normal" data-controller='core.front.core.lightboxedImages,guides.menu'>{$record->_content|raw}</section>

3. Add extra CSS to page style file

.sGuidesMenu {
  float: right;
  background: #f5f5f5;
  padding: 25px;
  margin-left: 20px;
  margin-bottom: 20px;
  font-size: 14px;
  width: 230px;
}

/* PHONES */
@media screen and (max-width: 767px) {
  .sGuidesMenu {
   	float: none;
    width: 100%;
    margin-left: 0;
  }
}
	
	.sGuidesMenu a {
        text-decoration: none !important;
	}

	.sGuidesMenu h2 {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 15px;
      color: #000;
	}

.sGuidesMenu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sGuidesMenu__item {
  padding: 0;
}

.sGuidesMenu__item--H2 {
  font-size: 15px;
}
.sGuidesMenu__item--H2:before {
  content: '\f105';
  font-family: 'FontAwesome';
  margin-right: 5px;
}

.sGuidesMenu__item--H3 {
  font-size: 13px;
  padding-left: 25px;
}

.sGuidesMenu__item--H3 + .sGuidesMenu__item--H2 {
	margin-top: 10px;
}

.sGuidesMenu__item--H4 {
  font-size: 13px;
  padding-left: 40px;
}

.sGuidesMenu__item--H4 + .sGuidesMenu__item--H3,
.sGuidesMenu__item--H4 + .sGuidesMenu__item--H2 {
	margin-top: 10px;
}

4. Go to edit editor Toolbars, add new button of following config, then add the button to the toolbar of your edit. Each time you will create heading with the button it will make heading included in the guide menu.