Views: 4260
Number of votes: 3
Average rating:

Generate QR Code for EPiServer Page/Commerce Product

What is QR Code?

A QR code (abbreviated from Quick Response code) is a specific matrix barcode (or two-dimensional code) that is readable by dedicated QR barcode readers and camera telephones. The code consists of black modules arranged in a square pattern on a white background. The information encoded may be text, URL, or other data.

Common in Japan, where it was created by Toyota subsidiary Denso-Wave in 1994, the QR code is one of the most popular types of two-dimensional barcodes. The QR code was designed to allow its contents to be decoded at high speed.

The technology has seen frequent use in Japan, the Netherlands, and South Korea, while the rest of the world has been slower in the adoption of QR codes.

Reference: http://en.wikipedia.org/wiki/QR_code

QR Code Generator Library:

Using open source QRCode Library: http://www.codeproject.com/KB/cs/qrcode.aspx

Author: twit88 

Name: ThoughtWorks.QRCode.NET

Generate QR Code for EPiServer Page

Basic idea is convert to current page url to QR Code as an image. People can use mobile phone with QRCode reader to read the link.

1. Create QR Code generator handler

Create new class inherited from IHttpHandler

   1: /// <summary>
   2: ///     QR Code Generator HttpModules. Retrieves QR Code from cache, render to memory, and streams to browser
   3: /// </summary>
   4: public class QRCodeGeneratorHandler : IHttpHandler
   5: {
   6:     public void ProcessRequest(HttpContext context)
   7:     {
   8:         var application = context.ApplicationInstance;
   9:         // get the url to generate qr code; this must be passed in via the querystring
  10:         var url = application.Request.QueryString["url"];
  11:         if (string.IsNullOrEmpty(url))
  12:         {
  13:             application.Response.StatusCode = 404;
  14:             context.ApplicationInstance.CompleteRequest();
  15:             return;
  16:         }
  17:  
  18:         // generate new qr code for current url
  19:         var qrCodeEncoder = new QRCodeEncoder
  20:                                 {
  21:                                     QRCodeEncodeMode = QRCodeEncoder.ENCODE_MODE.BYTE,
  22:                                     QRCodeScale = 4,
  23:                                     QRCodeVersion = 7,
  24:                                     QRCodeErrorCorrect = QRCodeEncoder.ERROR_CORRECTION.L
  25:                                 };
  26:         using (Bitmap qrImage = qrCodeEncoder.Encode(url))
  27:         {
  28:             // write the image to the HTTP output stream as an array of bytes
  29:             qrImage.Save(application.Response.OutputStream, ImageFormat.Jpeg);
  30:         }
  31:  
  32:         application.Response.ContentType = "image/jpeg";
  33:         application.Response.StatusCode = 200;
  34:         context.ApplicationInstance.CompleteRequest();
  35:     }
  36:  
  37:     public bool IsReusable
  38:     {
  39:         get { return true; }
  40:     }
  41: }

2. Configure the handler in web.config

Add new handler to <system.webServer> (IIS7) or <system.web> for IIS 6

<add name="QRCodeGenerator" verb="GET" path="QRCodeGenerator.aspx" type="EPiServer.Sample.CustomProperties.QRCodeGeneratorHandler, EPiServer.Templates.AlloyTech"/>

3. Using handler as image url

For AlloyTech:

Open PageFooter.acx, add new <img> tag to display QR Code

<img src="<%# QRCodeImageUrl %>" alt="QR Code for current page"/>

Code-behind:

   1: protected string QRCodeImageUrl
   2: {
   3:     get
   4:     {
   5:         var urlBuilder = new UrlBuilder(UriSupport.Combine(UriSupport.SiteUrl.AbsoluteUri, CurrentPage.LinkURL));
   6:         if (UrlRewriteProvider.IsFurlEnabled)
   7:         {
   8:             EPiServer.Global.UrlRewriteProvider.ConvertToExternal(urlBuilder, null, Encoding.UTF8);
   9:         }
  10:  
  11:         var linkUrl = System.Web.HttpContext.Current.Server.HtmlEncode((string)urlBuilder);
  12:  
  13:         return string.Format("QRCodeGenerator.aspx?url={0}", linkUrl);
  14:     }
  15: }

For Commerce Sample:

Open ProductDisplayModule.ascx (Templates/ClickTalk/Units/Placeable)

Add new img tag under “Product image” section

   1: <div class="image">
   2:         <img src="<%# QRCodeImageUrl %>" alt="QR Code for current page"/>
   3:     </div>

Code-behind:

   1: protected string QRCodeImageUrl
   2:         {
   3:             get
   4:             {
   5:                 var productLink = GetProductUrl(Entry);
   6:                 var urlBuilder = new UrlBuilder(UriSupport.Combine(UriSupport.SiteUrl.AbsoluteUri, productLink));
   7:                 if (UrlRewriteProvider.IsFurlEnabled)
   8:                 {
   9:                     Global.UrlRewriteProvider.ConvertToExternal(urlBuilder, null, Encoding.UTF8);
  10:                 }
  11:  
  12:                 var linkUrl = System.Web.HttpContext.Current.Server.HtmlEncode((string)urlBuilder);
  13:  
  14:                 return string.Format("QRCodeGenerator.aspx?url={0}", linkUrl);
  15:             }
  16:         }
  17:  
  18:         /// <summary>
  19:         /// Gets the entry handler path.
  20:         /// </summary>
  21:         /// <value>The entry handler path.</value>
  22:         private static string EntryHandlerPath
  23:         {
  24:             get
  25:             {
  26:                 string path = Providers.StaticUrlProvider.Instance.GetUrl(Commerce.Constants.EntryViewCommandName);
  27:                 if (!string.IsNullOrEmpty(path) && path.StartsWith("~", StringComparison.OrdinalIgnoreCase))
  28:                 {
  29:                     path = path.Substring(1);
  30:                 }
  31:                 return path;
  32:             }
  33:         }
  34:  
  35:         private string GetProductUrl(Entry entry)
  36:         {
  37:             var language = CultureInfo.CurrentUICulture.Name;
  38:             var url = string.Empty;
  39:             Seo languageSeo = entry.SeoInfo.Where(seo => seo.LanguageCode.Equals(language, StringComparison.OrdinalIgnoreCase)).FirstOrDefault();
  40:             if (languageSeo != null)
  41:             {
  42:                 url = languageSeo.Uri;
  43:             }
  44:             else
  45:             {
  46:                 url = EntryHandlerPath;
  47:                 url = UriSupport.AddQueryString(url, Commerce.Constants.ParameterEntryCode, entry.ID);
  48:                 UriSupport.AddLanguageSelection(url, language);
  49:             }
  50:  
  51:             return url;
  52:         }

4. Result

Now you can try with your mobile, open QR code scanner application and scan it!

AlloyTech:

clip_image002

clip_image004

Click Talk Commerce Sample:

clip_image006

 

Hope this will help marketing guy to have QR Code for your campaign. Enjoy EPiServer CMS, EPiServer Commerce and QR Code together

Aug 02, 2011

Please login to comment.