Umbraco 7 reacties

we're baaaack!

Geschreven door: op

Tijdens het maken van onze nieuwe blogsectie kwam ik erachter dat voor Umbraco 7 er geen package is om zgn. reacties bij een blogartikel te plaatsen. Reacties onder een artikel geven tevens de mogelijkheid om de SEO van een pagina te versterken.
Aangezien ik van mening ben dat een dergelijke sectie wel bij een blog hoort beschrijf ik hieronder hoe je dit redelijk eenvoudig zelf, m.b.v. Razor, kan maken. Daarnaast zullen we ook tegelijkertijd microdata (www.schema.org) toevoegen voor een optimale indexering bij de zoekmachines.

Zet eerst een formulier op de pagina

<form action="" method="post">
<input placeholder="Uw naam" class="name" type="" name="user" />
<input placeholder="Uw mail" class="email" type="" name="email" />
<textarea placeholder="Uw reactie" name="comment"></textarea>
<input class="btn" type="submit" value="Verzenden" />
</form>

p.s. we zetten een extra input (email) neer welke als honeypot dient (dit is om bots te ondervangen)

Een nieuw document-type
Maak nu een nieuw document-type genaamd 'comment' aan. Voeg aan dit nieuwe document-type de volgende 3 eigenschappen toe:

  • name = Gebruiker, alias = userName, type = Textstring
  • name = Ip adres, alias = ipAdres, type = Textstring
  • name = Reactie, alias = userComment, type = userComment

Wanneer het nieuwe document-type is aangemaakt ga dan naar de pagina waar u de reacties wilt tonen en geef hier het nieuwe document-type aan als 'Allowed child nodetypes'.

Nu maken we een razor script waarin een funktie al het magische doet:

@functions {
void SavePage(string name, string title, string ip, string body)
{
var contentService = UmbracoContext.Current.Application.Services.ContentService;
var page = contentService.CreateContent(
name, //the name of the page
@Model.Id, //parentId -> id of the groupnode
"comment", //the alias of the product Document Type
0);

//update the properties
page.SetValue("userName", title);
page.SetValue("ipAdres", ip);
page.SetValue("userComment", body);

contentService.SaveAndPublish(page);
}
}
@{
var commentUrl = "http://DOMEIN.nl" + @Model.url;
}

Vervang 'DOMEIN' met uw eigen domein. Naast de nieuwe functie wordt er ook een nieuwe variabele aangemaakt welke in de mail gebruikt wordt.

In onderstaande code gaan we kijken of er een zgn. POST wordt gedaan en zo ja kijken we eerst of de benodigde velden ingevuld zijn. Indien aan criteria wordt voldaan zal een pagina met de reactie in Umbraco aangemaakt worden onder de pagina waar de bezoeker zich bevindt. Daarnaast wordt er ook een mail gestuurd zodat editors/developers op de hoogte worden gebracht van een nieuwe reactie.
Naast de vereiste criteria wordt er tegelijktijd gekeken of het mogelijk om een spambericht gaat. Wanneer het inputveld 'email' (honeypot) ook wordt meegstuurd zal het script niet uitgevoerd worden. In beide gevallen wordt er in ieder geval een mailtje gestuurd.

@if (IsPost)
{
var naam = Request["user"] as string;
var email = Request["email"] as string;
var ip = Request.UserHostAddress as string;
var text = Request["comment"] as string;

if (String.IsNullOrWhiteSpace (email)) {

if(!String.IsNullOrWhiteSpace (naam) && !String.IsNullOrWhiteSpace(text)) {
SavePage("Reactie", @naam, @ip, @text);
}

try
{
MailMessage mail = new MailMessage();
mail.From = new MailAddress("info@UWDOMEIN.nl");
mail.To.Add("naam@UWDOMEIN.nl");
mail.Subject = "Reactie geplaatst";
mail.IsBodyHtml = false;
mail.Body = "Er is een reactie geplaatst op:\n" +
"Url: " + commentUrl + "\n" +
"Bericht van: " + naam + "\n" +
"Bericht: " + text + "\n";
SmtpClient smtp = new SmtpClient();
smtp.Send(mail);
}
catch(Exception ex)
{

}
} else {
try
{
MailMessage mail = new MailMessage();
mail.From = new MailAddress("info@UWDOMEIN.nl");
mail.To.Add("naam@UWDOMEIN.nl");
mail.Subject = "Reactie van een BOT";
mail.IsBodyHtml = false;
mail.Body = "Een bot probeert een reactie te plaatsen!:\n" +
"Url: " + commentUrl + "\n" +
"Bericht van: " + naam + "\n" +
"IP-adres: " + ip + "\n" +
"Bericht: " + text + "\n";
SmtpClient smtp = new SmtpClient();
smtp.Send(mail);
}
catch(Exception ex)
{

}
}
Response.Redirect(commentUrl);
}

Pas de 4 'UWDOMEIN' velden aan met uw eigen gegevens (van en naar mailadres)

Bij deze het volledige Razor script welke wij gebruiken om een blogartikel te tonen:

@inherits umbraco.MacroEngines.DynamicNodeContext
@using Umbraco.Core;
@using Umbraco.Core.Models;
@using Umbraco.Core.Services;
@using Umbraco.Web;
@using System;
@using System.Linq;
@using System.Net.Mail;

@functions {
void SavePage(string name, string title, string ip, string body)
{
var contentService = UmbracoContext.Current.Application.Services.ContentService;
var page = contentService.CreateContent(
name, //the name of the page
@Model.Id, //parentId -> id of the groupnode
"comment", //the alias of the product Document Type
0);

//update the properties
page.SetValue("userName", title);
page.SetValue("ipAdres", ip);
page.SetValue("userComment", body);

//Finaly, save and publish. The page is now accessable in umbraco.
contentService.SaveAndPublish(page); //this also refreshes the cache!
}
}

@{
var commentUrl = "http://blog.arlanet.nl" + @Model.url + "?comment=last";
}

@if (IsPost)
{
var naam = Request["user"] as string;
var email = Request["email"] as string;
var ip = Request.UserHostAddress as string;
var text = Request["comment"] as string;

if (String.IsNullOrWhiteSpace (email)) {

if(!String.IsNullOrWhiteSpace (naam) && !String.IsNullOrWhiteSpace(text)) {
SavePage("Reactie", @naam, @ip, @text);
}

try
{
MailMessage mail = new MailMessage();
//var from = new MailAddress(Email.Text);
mail.From = new MailAddress("info@UWDOMEIN.nl");
mail.To.Add("naam@UWDOMEIN.nl");
mail.Subject = "Reactie geplaatst";
mail.IsBodyHtml = false;
mail.Body = "Er is een reactie geplaatst op:\n" +
"Url: " + commentUrl + "\n" +
"Bericht van: " + naam + "\n" +
"Bericht: " + text + "\n";
SmtpClient smtp = new SmtpClient();
smtp.Send(mail);
}
catch(Exception ex)
{

}
} else {
try
{
MailMessage mail = new MailMessage();
//var from = new MailAddress(Email.Text);
mail.From = new MailAddress("naam@UWDOMEIN.nl");
mail.To.Add("naam@UWDOMEIN.nl");
mail.Subject = "Reactie van een BOT";
mail.IsBodyHtml = false;
mail.Body = "Een bot probeert een reactie te plaatsen!:\n" +
"Url: " + commentUrl + "\n" +
"Bericht van: " + naam + "\n" +
"IP-adres: " + ip + "\n" +
"Bericht: " + text + "\n";
SmtpClient smtp = new SmtpClient();
smtp.Send(mail);
}
catch(Exception ex)
{

}
}
Response.Redirect(commentUrl);
}
@* The fun starts here *@
<div class="who-when">
Geschreven door: <a title="Alle artikelen van @Model.blogArticleAuthor" href="/auteur/?name=@Model.blogArticleAuthor"><span itemprop="author"><span itemprop="name">@Model.blogArticleAuthor</span></span></a> op <span itemprop="datePublished" content="@Model.CreateDate.ToString("dd MMMM yyyy")">@Model.CreateDate.ToString("dd MMMM yyyy")</span>
</div>
<div itemprop="articleBody">
@Model.bodyText
</div>

<div class="comment">
<h3>Reageer</h3>
<form action="" method="post">
<input placeholder="Uw naam" class="name" type="" name="user" />
<input placeholder="Uw mail" class="email" type="" name="email" />
<textarea placeholder="Uw reactie" name="comment"></textarea>
<input class="btn" type="submit" value="Verzenden" />
</form>
</div>

@if (Model.Children.Where("Visible").Any())
{
<h3>Reacties (@Model.Descendants("comment").Where("Visible").Count())</h3>
<ul class="comments">
@foreach (var childPage in Model.Descendants().Where("Visible"))
{
<li itemtype="http://schema.org/Comment" itemscope="itemscope" itemprop="comment">
<p>naam: <span itemprop="name">@childPage.userName</span></p>
<p itemprop="discusses">reactie: <span itemprop="commentText">@childPage.userComment</span></p>
</li>
}
</ul>
} else {
<p>Niemand heeft nog gereageerd, wees de eerste!</p>
}

Extra
U kunt hier het razor-bestand downloaden.
Vanwege usability redenen scroll ik de pagina omlaag wanneer betreffende pagina wordt benaderd met de parameter 'comment'. Hieronder vindt u de code daarvoor:

function getUrlParameter(sParam){
   var sPageURL = window.location.search.substring(1);
   var sURLVariables = sPageURL.split('&');
   for (var i = 0; i < sURLVariables.length; i++){
      var sParameterName = sURLVariables[i].split('=');
      if (sParameterName[0] == sParam){
         return sParameterName[1];
      }
   }
}
$(function () {
   var comment = getUrlParameter('comment');
   if(comment) {
      $("html, body").animate({ scrollTop: $(document).height() }, 1500);
   }
});
Umbraco 7 reacties

Trefwoorden:

Aantal keer bekeken: 3.719