Module only on the main page?

[zweeper]

Hey, I created an html module on my homepage (cms) and I want this module to show only on the first page.
Since there are many articles, I got many pages and this module shows up on every single page.

Do you have any idea/hint how I could manage this?

Greetings

[shka]

For this special case (using displaytemplate_widget), content for the template is

<div id="Page1Message">Place your content in this div</div>

<script type="text/javascript">
   window.onload= function() {
      if (pageData['pagenum'] =="1") {
         document.getElementById("Page1Message").style.display = 'block';
      } else {
         document.getElementById("Page1Message").style.display = 'none';
      }
      $('div.toolbar-pagenav-wrapper').bind('DOMSubtreeModified', function() {
         if ($('input[name="page"]')[0].value =="1") {
            document.getElementById("Page1Message").style.display = 'block';
         } else {
            document.getElementById("Page1Message").style.display = 'none';
         }
      });
   }
</script>

Sometimes (e.g. multipage discussions list in channels) you have do change the array from [0] to [1] in $('input[name="page"]')[0].value.


Better/more flexible approach instead of disabling visibility would be frontend controller call to load content for div depending on current page.

[Wayne Luke]

Three ways to do this...

1) Create new page templates for your sub-category and article pages. Then apply these page templates to every article category. This is time consuming.

1. Edit a sub-category page
2. Save the page.
3. Set "Overwrite Template" to No.
4. Enter in new page template name.
5. Finish Saving.
6. Edit the page again.
7. Remove the module.
8. Save the page.
9. Overwrite the page template this time.
10. Assign this page template to every article category.
11. Do the same for the page when you view an article.

2) Use CSS to set the module to display:none if the pageid doesn't equal the Articles page. This will be messy and the code will actually be on the page. This means that you can be dinged by search engines for hiding content.

#widgetid_XX {display:none}
body.pageXX #widgetid_XX {display: block}

3) You should be able to use a custom template and then a template conditional to display it. However, I am not sure if the $page object is available to all templates or if it needs to be pulled in. I will have to discuss this with the developers.

[Wayne Luke]

So.. Here is how to create #3...

1. Go to Styles → Style Manager.
2. Select "Add New Template" from the Choose Action... drop down.
3. Give your template a name.
4. Add your code.
5. Save the template.

My example code is:

<vb:if condition="$page['pageid']==28">
<div style="padding:8px;margin:10px;border: 1px solid blue">
     This is my custom content.
</div>
</vb:if>

In this code, 28 is the page id of my main Articles page.

Next go to the Articles page on your front end.

1. Edit the page.
2. Drag the "Display Template" module where you want it on the page.
3. Edit the "Display Template" module's options.
4. Give it a name.
5. Add in the name of your template.
6. Set "Display Title" to No.
7. Set Display Borders and background to No.
8. Save the module.
9. Save the page.

Style your custom code with HTML and CSS. If you use the module classes, you can make it look just like any other module.

[zweeper]

Hi Wayne, many many thanks for that input! Option 3 sounds good for me.
But the main page is my forums homepage, for example www.vbulletin.com/forum - what is equal to page 1.
Page 2 would be www.vbulletin.com/forum/page2

What would be the correct pageid in this case? 1 is not working, and neither 2,3,4 - which I just tested right now.
If I write down any text without this if condition, it shows up (so module/template is working in general).

[Wayne Luke]

You would have to view the source code (right click the page and choose View Page Source) and look for the Javascript pageData Object. It will list the page id for each page. For example, this is page 238. Then adjust your vb:if condition to look for that number.

In the page source code you would look for this part of the pageData object:

var pageData = {
"baseurl": "https://forum.vbulletin.com",
"baseurl_path": "/",
"baseurl_core": "https://forum.vbulletin.com/core",
"baseurl_pmchat": "https://forum.vbulletin.com/pmchat/chat",
"pageid": "238",

[zweeper]

Hey, thanks, I understand what you mean. But the pageid is the same for all the different pages (709 in my case). This is not changing, even if I switch to page 2, 3 or 4 and so on.

It is the same here on vbulletin.com in the article section.

[Wayne Luke]

Your main article page should have a different number.

/articles on this site is page id: "608"
/articles/vbulletin-connect is page id: "706"
/articles/vbulletin-connect/sitebuilder is page id "887".

Individual articles within those catagories should be 609, 707, and 888 respectively. All articles/topics/discussions within a channel will share the same page id.

Page numbers when using pagination aren't new pages as far as the system is concerned. They just show new content on the same page. The pageid in this case refers specifically to the row in the page table that draws the page you're seeing. When you install vBulletin 5, it creates 54 pages. These are for the default channels, registration, user profile, who's online, etc... Every time you create a new channel (article, forum, blog, etc...), the system will create two new pages in this database table. One to display a list of content (i.e. all articles) and one to display individual topics or articles.

So with the above display template, the HTML will display on every page in /articles/ area but not in /articles/vbulletin-connect or lower in the channel tree.

[zweeper]

Hey, yes, that is right.
But actually I wanted to hide the module when a user switches to page 2 from the main page.
I guess this is not possible due to ajax features?

Because all these pages have absolutely the same pageid

[Wayne Luke]

Looking at how the pageData object is built in the header template, it appears that if you want it to show only on page #1 of the /article list you can probably do something like:

<vb:if condition="$page['pageid']==XX AND $page['pagenum']==1">do stuff...</vb:if>

That pagenum value should change every time you use the pagination controls.

[zweeper]

Hey, that works now. But only when i completely refresh that page by pressing f5. If not, that part wont get refreshed and it still stands there.

[Wayne Luke]

You'll need a more advanced solution to integrate with AJAX. I am not sure what it is yet. Probably some Javascript to remove it from display by changing the innerHTML.

[zweeper]

this would be the same with option 2, right?

[zweeper]

Customer is not satisfied with this. Hm, I have no idea how I could solve that in any other way.

[shka]

Not tested.

Two ways of selecting page 1,2,3
- calling the direct url - solution is an event listener window.load https://developer.mozilla.org/de/doc...dow/load_event
- selecting page via buttons (ajax call) - proxy object observing variable https://developer.mozilla.org/en-US/..._Objects/Proxy

Both functions doing the same - could change visibility of your widget element (for use with static html widget) or more interesting call a frontend controller (ajax) and load new content for widget.

[Wayne Luke]

this would be the same with option 2, right?

Option 2 would just hide it with CSS. I am not sure if it will be reloaded with an AJAX change since the browser will not render the entire HTML again with pagination. When you click 2 in the pagination, a Javascript event is fired. A query is sent to the server to get the next page of results. This is returned to the Javascript as a JSON object and then the Javascript rewrites portions of the page using that object. Since the object only contains a list of topics/articles to show, then that portion gets rewritten in the browser but the header, footer, and any other modules just stay the same.

Changing how this works will be a major effort that basically rewrites how channels work across the entire system.