Jump to:

23368 Posts in 18143 Topics by 2863 members

General Questions

SilverStripe Forums » General Questions » How to Install a Widget - BASIC Tutorial

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 3514 Views
  • ianbt7
    Avatar
    Community Member
    6 Posts

    How to Install a Widget - BASIC Tutorial Link to this post

    I am sure others have had the same question as me without wanting to appear ignorant enough to ask it. I will play that role today.

    Would someone please tell me how to install an editable widget tab on normal pages in the CMS. The instructions (http://doc.silverstripe.org/doku.php?id=widgets&s=widgets) are totally ambiguous because after following them exactly--still no editable widget tab in my CMS.

    1) First, I unpacked several widgets along with the blog module. Dev/Build went successfully. (I'm using the 'dreamy' theme, by the way.)

    2) Next, per the documentation, I added the exact code to /public_html/mysite/code/Page.php

    <?php
    class Page extends SiteTree {
       public static $db = array(
       );
       public static $has_one = array(
       );
    }
    static $has_one = array(
       "Sidebar" => "WidgetArea",
    );
    function getCMSFields() {
       $fields = parent::getCMSFields();
       $fields->addFieldToTab("Root.Content.Widgets", new WidgetAreaEditor("Sidebar"));
       return $fields;
    }

    3) Then, and this is where I am confused, I add the $Sidebar to public_html/themes/dreamy/templates/Includes/SideNav.ss

    Here's how it looks:

    <h3>
    <a href="$Link" title="Go to the $Title page" class="$LinkingMode">$MenuTitle</a>
    </h3>
        <ul>
        <% control Children %>   
        <li><a href="$Link" title="Go to the $Title page" class="$LinkingMode">$MenuTitle</a></li>
            <% end_control %>
        $Sidebar
        </ul>

    4) Then, I do a dev/build to check-- Still, no editable tab, which is strange because to the best of my knowledge, I followed the directions.

    Could someone please help?

    Thanks,
    Ian

  • Willr
    Avatar
    Forum Moderator
    5489 Posts

    Re: How to Install a Widget - BASIC Tutorial Link to this post

    Hi Ian, and welcome to the community.

    class Page extends SiteTree {
    public static $db = array(
    );
    public static $has_one = array(
    );
    }
    static $has_one = array(
    "Sidebar" => "WidgetArea",
    );

    You only need to define the $has_one once. Your code should always be contained within the class's ' { } ' as well (currently its sitting outside the class so silverstripe doesn't see that code.

    <?php
    class Page extends SiteTree {
    public static $db = array(
    );
    public static $has_one = array(
    "Sidebar" => "WidgetArea"
    );

    function getCMSFields() {
    $fields = parent::getCMSFields();
    $fields->addFieldToTab("Root.Content.Widgets", new WidgetAreaEditor("Sidebar"));
    return $fields;
    }

    // see how this last } is AFTER all the code ^
    }

    After you change those, run the dev/build, reload the cms and you should have the widgets tab. In future versions Widgets are probably going to be built into the core so you won't have to write any code like that

  • ianbt7
    Avatar
    Community Member
    6 Posts

    Re: How to Install a Widget - BASIC Tutorial Link to this post

    Thank you, Willr! That was immensely helpful! It works now.
    -Ian

  • ianbt7
    Avatar
    Community Member
    6 Posts

    Re: How to Install a Widget - BASIC Tutorial Link to this post

    Thanks again Willr!

    I have one other incey-winsy question about how to get the Widget-containing sidebar to actually appear on the Page. I was so consumed with the CMS Widget tab that I forget to ask about what the support doc refers to as "calling" $Sidebar.

    So, now the Widget tab appears on CMS, but no sidebar containing widget (I have it set to google ads) on the actual Web site.

    1) Using Blackcandy (which is a great theme), I go to blackcandy/templates/includes/Sidebar.ss and

    2) I insert $Sidebar before the closing </div> near the last three lines of code because that's what the support doc says:

    "Then in your Template you need to call $SideBar whereever you want to render the widget, Eg for blackcandy I put this above the closing </div> themes/myThemeName/templates/Includes/Sidebar.ss - $Sidebar"

    3) So, it looks like this in my blackcandy/templates/includes/Sidebar.ss:

       </ul>
          <div class="clear"></div>
       </div>
       <div class="sidebarBottom"></div>
       $Sidebar
    </div>

    4) dev/build ... and nothing shows on the Web Page.

    Again, I am sure this dysfunctionality is related to a disjuncture in my understanding of the instructions on the support doc.

    Thanks!
    Ian

  • MartinPhone
    Avatar
    Community Member
    57 Posts

    Re: How to Install a Widget - BASIC Tutorial Link to this post

    Hi, I'm in precisely the same position and would be grateful for any tips! Did you ever get it working?

  • MartinPhone
    Avatar
    Community Member
    57 Posts

    Re: How to Install a Widget - BASIC Tutorial Link to this post

    FWIW, I put the $Sidebar just in a <div id="Sidebar" class="typography"> and put that at the point in Page.ss that you want your sidebar. (Not in any other files.) A bit of CSS and it's looking how I imagined it.

    I get the feeling it's not the 'right' way, but the documentation is predictably vague...
       

  • Bauer-CTU
    Avatar
    Community Member
    10 Posts

    Re: How to Install a Widget - BASIC Tutorial Link to this post

    MartinPhone,

    Yes that is the right way. No Sidebar.ss needed and just drag, drop & re-order your widgets in the CMS.

    3514 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.