I’ve recently started using Orchard and one of the first modules I installed was the Disqus comment module (also on CodePlex) for its centralised commenting and trackback system. Version 1.0 of the module was released earlier this year, on April 15 2011, and doesn’t look like it’s had much attention since then. However, it still works fine, as it is essentially just a placeholder for an external service (which is being maintained).

Even so, one thing was missing that I think is fairly important, especially for someone like me: developer mode. Described here on the Disqus support pages, the disqus_developer variable:

Tells the Disqus service that you are testing the system on an inaccessible website, e.g. secured staging server or a local environment.

[…]

Usage: Specify 1 for on and 0 for off. If undefined, disqus_developer is off.

So, for production environments, you’re going to want this off, and that’s where this post comes in!

Please be aware that I am still learning Orchard and MVC 3/Razor/C# in general so, for you veterans out there, it’s more than likely you’ll see bits of my code and think, “…the chuff is he doing!?” Feel free to pass on any criticism in the comments, though!

The module available in the Orchard gallery has the development variable hard-coded into the View file as always on, var disqus_developer = '1', even on your public site (it’s the same module). Now, the quick fix for anyone just using Orchard as-is would be to change that 1 to a 0 so that developer mode is off. If this applies to you, I suggest you do that. If not, or you’d like to ‘learn by doing’ as I like to do, read on and I’ll go through adding a new option to the Disqus settings page to turn development mode on or off as needed.

As an overview of what needs to be changed, here’s what we’ll be doing:

1. Creating a ‘DevMode’ option in the module’s model files
2. Adding an update method to the migration file to alter the database
3. Telling the controller how to handle the new option
4. Modifying the views to show the new option in the settings

Note: before we start, I’m assuming you have opened the “Disqus.Comments” module project in Visual Studio or similar. All folder/file paths refer to locations inside the module’s folder.

Models

We will be adding a bool to various model files in the module which can either be on (1) or off (0). We’ll start with DisqusSettingsRecord.cs in the Models folder. Add the following line into the DisqusSettingsRecord class:

public bool DevMode { get; set; }

Next, open DisqusSettingsPart.cs from the same folder and add the following code block in the DisqusSettingsPart class:

public bool DevMode {
    get { return Record.DevMode; }
    set { Record.DevMode = value; }
}

By adding these two code sections, we’ve added a new property, DevMode, to the module. In the next file we will pass this property to the Settings page so that we can change the setting. Open DisqusSettingsViewModel.cs from the ViewModels folder and add the following to the DisqusSettingsViewModel class:

[Display(Name = "Developer mode")]
public bool DevMode { get; set; }

Data migration

That’s all the model-related files done so now would be a good time to update the migration file, I thought. Open Migration.cs from the module’s root folder. Add a new method into the Migrations class which returns an integer as shown:

public int UpdateFrom1() {
    SchemaBuilder.AlterTable("DisqusSettingsRecord",
        table => table.AddColumn("DevMode", DbType.Boolean));

    return 2;
}

This method will add a “DevMode” column to the database table for this module without erasing any existing data, meaning we can simply upgrade the already installed module without having to remove it first. For more information on data migration, or any of the files we’ve covered so far, have a look at the Orchard documentation.

The controller

The next file is a big-ish one. Open AdminController.cs from the Controllers folder. There are 3 ActionResult methods we are interested in: Index(), Settings(), and SaveSettings(). You will see each one is getting or setting the variables that were specified in the model files. We need to add our new DevMode property to the list like so:

public ActionResult Index() {
    …
    var viewModel = new DisqusSettingsViewModel {
    ShortName = settings.ShortName,
    SecretKey = settings.SecretKey,
    SyncComments = settings.SyncComments,
    SyncInterval = settings.SyncInterval,
    DevMode = settings.DevMode
};

public ActionResult Settings() {
    // Same as above
}

public ActionResult SaveSettings(string returnUrl) {
    …
    settings.SyncComments = viewModel.SyncComments;
    settings.SyncInterval = viewModel.SyncInterval;
    settings.DevMode = viewModel.DevMode;
}

Views

The Settings page will now have access to the DevMode property. Open Settings.cshtml from the Views\Admin folder. We need to add a control that will allow us to set our DevMode setting to on/off – a checkbox is the perfect choice. How and where you add your option is entirely up to you, but I will share the code I used (this exert is from the top of the file):

<fieldset>
    <label for="ShortName">
    …
    </div>

    <label for="DevMode">
        @T("Developer Mode")
    </label>
    <div class="editor-field">
        @Html.EditorFor(model => model.DevMode) Turn developer mode ON
        @Html.ValidationMessageFor(model => model.DevMode)
        <span class="hint">
            @T("Turn developer mode on for development/staging environments")
        </span>
    </div>
</fieldset>

This adds a checkbox with a label and a hint, as shown below:

Finally, we move on to the view that actually shows the Disqus thread. From the Views folder, open CommentsWrapper.cshtml. You will see the 3 existing variables (permalink, uniqeId, and shortName) being declared towards the top of the file. Add the DevMode variable underneath like so:

var DevMode = Model.DisqusSettings.DevMode;

Scroll down to the Disqus Javascript code. You should see a line reading, “var disqus_developer = 1;” – we need to change this to use the value of our DevMode Boolean. Change the assignment of the variable to the following:

var disqus_developer = '@(devMode ? 1 : 0)';

I have used a shorthand if-then-else statement here to make sure our true or false value is returned as a 1 or 0. In English, it basically reads “if devMode is true, put a 1, otherwise put a 0” (remember the description from the Disqus support page that said the variable must be 1 or 0, not true or false, or yes or no).

Note: your theme may use its own view for the comment threads (mine did), so make sure you check in your current theme’s Views folder for a CommentsWrapper.cshtml and adjust it accordingly (it should be very similar to the one we changed above).

All done – time for tea

Build the module then browse to the modules admin page on your Orchard site. You should have a notification informing you that a module needs to be updated – just click Update. Browse to the Settings page of the Disqus module and you should see the checkbox we added. For your development site, leave it ticked, but for your production site, un-tick it and click Save.

I recommend a quick check to make sure the module is working properly – search for the disqus_developer variable in the page source and verify the value matches what you’ve set (ticked = 1, un-ticked = 0).

That’s all, folks! I hope that’s helped at least some of you. If you need any more help, leave me a comment below, or, as I mentioned earlier, have a look at the Orchard documentation.

The source code for this module, with the changes above, is available here: Download [zip, 3.2MB]