Archive for July, 2013

Translating strings in a CQ component to user’s preferred language

Adobe CQ provides an easy way to translate strings (fieldLabel) in a component. Inside the component folder, create the i18n sling folder. Then create language folders (sling:folder)  and assign  Mixins of mix:language type. In the language folder, add the jcr:language property and assign the language code.

Dake Smith blog, Internationalization within Sling (and CQ), has some great inputs.

In the image displayed below, the Localization component has two fields: first name and last name. They are localized in two languages: Spanish (es) and French (fr).

hierarchy

In each language folder, create two nodes of sling:MessageEntry type. In the first node, add Slig:key and Sling:Message as shown above. This is for the first string (First Name.) Repeat this for the second node.

After you are done with creating MessageEntry nodes for all the strings that you have in the component, go to the items in the dialog node, and change the fieldLabel value to the slingKey value you defined in the language node.

first_name

To test, go to useradmin, select the user. In the Preferences tab, change the language to the language of your choice.

See the component in French as displayed below:

dialog

 

 

Creating a Facebook component in Adobe CQ

In this blog entry, we will see how to create a component that displays the Facebook Like button.
A Facebook Like button needs no explanation. It allows a user to like your company’s Facebook page and also keeps a record of the number of people “Liked” the page.
facebook_like

Facebook provides great documentation on how to add this into your website. It’s very much straightforward. Get the code from Facebook’s Configurator. If you add the code to a webpage that is available locally and test it, it won’t work. If you are testing the code, ensure that you uploaded the webpage in a server.

Edit the template to include the following script:

<div id="fb-root">
</div>
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

(Don’t ask me for details. I got it from Facebook. :) )

Now create a component, Facebook. We need only one field that’s configurable. It’s for providing the Facebook page URL of your company.
See the screenshot below that depicts the node hierarchy. (The component development is explained in detail in one of my previous posts.)

node_hierarchy

Following is the JavaServer page associated with the component. (facebook.jsp)

<%@include file="/libs/foundation/global.jsp"%><%
%><%@page session="false" %>
<%
 String facebook=properties.get("facebook", "Enter the product page.");
 if (facebook=="Enter the product page.")
 {
 out.write(facebook);
 }
out.write("<p><div class=\"fb-like\" id=\"fb\" data-href=\""+ facebook +"\" data-send=\"false\" data-width=\"450\" data-show-faces=\"true\"></div></p>");
%>

Drag-and-drop the component to the web page. Right-click, select Edit, and provide the Facebook page’s URL.
Note that the component is not displayed at this moment. Close the page and open it again to see the component. (I think it has something to do with the Facebook implementation; I will experiment more later.)