Dung Le
Aug 2, 2011
  5576
(3 votes)

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

Comments

Please login to comment.
Latest blogs
Optimizely SendGrid SMTP host is deprecated

SendGrid is a services for sending email that is included in Optimizely DXP. Previously smtp.episerver.net was the recommended SMTP server to use,...

Tomas Hensrud Gulla | Dec 4, 2022 | Syndicated blog

Hosting Optimizely CMS 12 on Docker Engine

Since Optimizely CMS can now be deployed as a Docker container, here is a demonstration of building, running and scaling an Optimizely CMS 12 site ...

Stefan Holm Olsen | Dec 4, 2022 | Syndicated blog

How to use CacheTagHelper with content areas in Optimizely CMS 12

I might be going out on a limb here - if you have a better solution, feel very free to share it!  Upgrading your Optimizely web application from .N...

Andreas J | Dec 2, 2022

The 1001st Piece in your 1000 Piece Puzzle: .NET Default Interface Functions

I was recently working with a client who wanted a reasonably large subsystem added to Optimizely that would add automated management to their...

Greg J | Nov 28, 2022 | Syndicated blog