14 Building a Multi-Lingual ecommerce Site

Transcription

1 14 Building a Multi-Lingual ecommerce Site With the global reach of the Internet, doing business internationally has become a lot easier. Today it s easier than ever to reach consumers and companies in other countries and target them in their own language. In addition, payment providers and shipping companies support international transactions as well, at lower rates and with shorter implementation times than ever before. Obviously, not every product, company or website will benefit from this international reach. Some products only make sense in a local market, while some other companies cannot, or don t want to, engage in a relationship with foreign customers in different languages. Yet other sites can t live without these features and need support for what is called localization - the process of adapting your site for a specific region or language by adding locale-specific components and translating text. You ll be happy to hear Dynamicweb has great and far-reaching support for localization. Dynamicweb has localization built in at the very core of both the CMS as well as the ecommerce platform, as you ll learn in this chapter. In particular, in this chapter I ll show you the following topics: How to configure options such as currencies, countries and languages for localization How to localize ecommerce data, such as groups and products How to work with websites (or language layers) to set up different sites in Dynamicweb using different languages, including changes needed to IIS the web server used to run your websites How to work with localization in your frontend pages How to let visitors to the site choose between the available currencies and languages at run-time Localization can be a complex and broad subject. While I won t be able to discuss each and every possible scenario in great detail, the goal of this chapter is to give you enough context and background so that you can start creating international ecommerce websites in Dynamicweb Introducing Dynamicweb Localization Dynamicweb has deeply integrated support for localization. You ll find configuration and functionality related to localization at many different places, including: At the Website (formerly known as a language layer) level, where you configure multiple websites with optionally their own domain name and culture settings. In addition, this is where you assign an ecommerce language to a Dynamicweb website. You see how to do this later. At the ecommerce level, where you can create multiple languages, currencies, countries and so on.

2 At the template and page level, where you can create localized versions of templates and where you make use of the Dynamicweb translation tags to create a single copy of a template targeting multiple languages At the frontend level, where you can let the user choose from different countries, languages and currencies. What I really like about all the available options is that you re not forced to use them all together. If you only want to target your users in English, but want to ship to seven different countries, just set up the country list and configure the appropriate relationships, such as Payment Methods. Likewise, if you only target a single bi-lingual country, just set up multiple languages but ignore other settings such as VAT and delivery countries. But at the same time, Dynamicweb does enable you to do all this at the same time in the same site. This way you can set up a site in multiple languages and let customers choose their preferred language. In addition, you could let them choose from different currencies so they can see prices of products in a currency they can relate to. During ordering you can let them choose the delivery country, which in turn can be used to determine the fees and taxes that are added to the order. These multi-dimensional localization options may seem overwhelming or confusing at first. Therefore, this chapter guides you through the process step-by-step. In the next section, you ll first see how to create multiple languages and then you ll see how to localize ecommerce data such as groups, products, discounts and more. Once your ecommerce data is localized, you need to start thinking about localization of your frontend pages, which is discussed in section Setting up Dynamicweb CMS for a Multi-Lingual Website. This section also touches on configuring IIS the web server for multiple sites and domains, and shows you how to localize templates. Near the end of the chapter you ll see how to work with pages in the frontend as an end user, and how to provide your end user with various options to switch language, currency and so on Localizing Dynamicweb ecommerce Often the first thing you do when setting up a localized website in Dynamicweb is to create additional languages. As you saw in Chapter 3, Dynamicweb ships with a single language, which is used as the default language for much of the ecommerce data such as groups and products. If your site needs to support multiple languages, you typically follow this sequence of steps: 1. You configure at least one additional language 2. You localize your groups, products and other ecommerce data 3. You configure multiple Websites in Dynamicweb and associate them with an ecommerce language. You also need to configure the Dynamicweb Website appropriately by setting options like culture and formatting information. Alternatively, you can use a single Website but provide the means to switch the language at the frontend. Page 2 of 34

3 You ll see how to do the first two items in this section, while the third activity is discussed later in this chapter Configuring Languages In Chapter 3 you briefly saw how to configure the languages in Dynamicweb. But since languages are so crucial in Dynamicweb localization scenarios, the following walkthrough shows you again how to create additional languages. The languages are then used in later sections to localize groups, products and other ecommerce data. Walkthrough Configuring an Additional Language 1. Start by opening up the ecommerce Languages settings. To do this, click Management Center in the Main Menu and then expand the path ecommerce Internationalization Language. In Chapter 3 you renamed the default Danish language to English. For cases where you don t need the Danish language, my recommendation is to rename Danish to the language you want to use as the default. Renaming an existing language is quicker and safer than creating a new one and trying to get rid of the old one. If you followed along with the exercises in Chapter 3, you already renamed to Danish to English. If you haven t followed along, but want to follow along with this walkthrough, click the current default language in the languages list, complete the screen as shown in Figure 14-1 and click Save and close. Figure 14-1 The Default checkbox makes the language the default within the Dynamicweb backend administration only. It s used to determine the language for any new product, group or other ecommerce items you create. You then create copies of these items in any of the other supported languages. Later in this chapter you ll see how to assign a language to a specific Dynamicweb Website in the frontend. Page 3 of 34

4 2. In the list of languages, click New language and then complete the screen as shown in Figure 14-2: Figure 14-2 You don t have to create Dutch as a language in your system. You can of course create your own preferred language instead. Just don t forget to substitute Dutch for whatever language you re creating here for the remainder of the walkthroughs in this chapter. Click Save and close. 3. Repeat step 2 for any language that your site needs to support. Now that you ve created a number of languages, it s time to use them to localize your groups and products Localizing Groups and Products The main reason to create multiple languages in a Dynamicweb ecommerce website is to localize your ecommerce data in those languages. Think back to the groups you created in Chapter 4. You created a group structure with a number of groups at the root, such as Bikes, which in turned contained a number of subgroups, such as Mountain bikes and Hybrid bikes. For the Dutch market, you d want to localize these group names into names such as Fietsen and Hybride fietsen. This is pretty easy to do, as you ll see in the next walkthrough. Walkthrough Localizing Groups 1. Open up the ecommerce module in the backend by clicking ecommerce in the Main Menu. 2. Locate your top level group in the Product catalog (mine is called Bikes). Right-click it and choose Edit group. Dynamicweb shows you the Edit screen for the group. Notice that on the Ribbon bar the default language is currently selected as the active language in the Language group, shown in Figure 14-3: Page 4 of 34

5 Figure Click the language button and switch from English to Dutch. The edit screen for the group refreshes and now shows something like this: Figure 14-4 Take note of the warning message just below the Ribbon bar, indicating this product has not been localized in the selected language. As you ll see later in this chapter, Dynamicweb hides items such as groups and products by default if they haven t been translated. If you find products or groups are missing in the frontend in a specific language, open up the item s edit screen in the appropriate language and look for the warning you see in Figure To localize this group to Dutch, all you need to do is enter Fietsen (the Dutch word for bikes) in the Name box and then click Save. Once you click Save or Save and close on the toolbar, the group is saved in the selected language and the warning disappears. Besides localizing just the name you can (and should) localize other group data such as the meta data and the descriptions on the Description tab as well. 5. Repeat steps 2 through to 4 for the remaining groups, localizing them into your selected language. For groups whose names are the same in your language as they are in Page 5 of 34

6 English (such as the Mountain bikes group for the Dutch language), you can leave the name as-is or append a language identifier such as NL to the name. You wouldn t normally do this in a real-world ecommerce site, but it may help you better understand how localized groups end up at the frontend later in this chapter. Localizing products is similar to localizing groups, but with a small twist: when editing a group in a non-default language, many of the product s properties are read-only, as you ll see in the following walkthrough: Walkthrough Localizing Products 1. Open up the ecommerce module in the backend by clicking ecommerce in the Main Menu. 2. Locate the group you just localized and click it to view the products it contains. If your selected language is still Dutch, you should see the available products listed in a lightgray font to indicate they haven t been translated yet (and may thus not be available at the frontend). Figure 14-5 shows my list of products in the Dutch Mountain bikes group: Figure 14-5 If you switch to a language in which the products have been localized (such as the English default language in my setup) using the button on the Ribbon bar, the list of products refreshes and shows the products in a darker font, indicating that they are available in that language: Figure Click the product to edit it. If you re viewing it in the default, or another localized language, switch to a language to which the product hasn t been localized yet using the Ribbon bar. You should see something like Figure 14-7, which shows the edit screen for Page 6 of 34

7 the Mongoose Otera product along with a warning that the product hasn t been localized (yet). Figure Change the name of the product (for example, by adding a language identifier, such as NL). 5. Browse around the various editing categories to see what you can and cannot change in the selected language. In Figure 14-7, you can see that the product type is read-only and can only be changed in the main language. Obviously, this makes a lot of sense as you don t want to differentiate the product s type at the language level. Other categories with read-only properties include Variants, Prices and Stock. 6. Click Save and close on the toolbar. This saves the localized product in the database. When you click the product again in the list to edit it, you ll see that the warning shown just below the Ribbon bar in Figure 14-7 is now gone. Page 7 of 34

8 If you re finding that your English product has now been renamed to the Dutch version as well, it s because Dynamicweb is configured not to enable language differentiation on the Name field. To correct this, click Management Center and then expand the path ecommerce Advanced configuration Language. Make sure that for the Name field (and other fields you want to localize in different languages) at least the checkbox in the Language column is checked Delocalizing Groups and Products If for some reason you want to delocalize a product for a certain language, you can do so on the product s Edit screen. Switch to the language you want to remove and then click the Delocalize button at the right of the Ribbon bar, shown in Figure 14-8: Figure 14-8 There is currently no way to delocalize a product group (other than by removing its associated record from the database) but this may change in a future version of Dynamicweb. Besides localizing groups and products, you can localize a number of other ecommerce items, as you ll see next Localizing other ecommerce Data If you browse through the numerous options for ecommerce configuration in the Management Center, you ll notice that a lot of items have a language drop-down that enable you to localize the properties of the item in a different language. Most of them are pretty straightforward and easy to use and configure, but for the sake of completeness I ll show each of them with a screenshot and a short description of how to use them. Countries Figure 14-9 The list of translated countries is available at the frontend when you re asking the customer for their name and address details. You generally use the translated country name in a drop down for the countries as shown in the following code: Page 8 of 34

9 <select name="ecomordercustomercountry" id="ecomordercustomercountry"> <option </select> Currencies Figure A translated currency is, among other places, available in the product pages and the shopping cart. You access it with tags such as Ecom:Order.CurrencyName and Ecom:Product.Currency.Name. This way you can show Danske Kroner to a Danish customer, and Deense Kronen to a visitor coming from the Netherlands. Notice that this doesn t switch the actual currency; it just changes the localized name to match the language. Switching currencies is discussed later in this book. To see how to relate currencies, languages and countries, check out this FAQ at the documentation website: aspx?ProductID=PROD216. Sales Tax Groups Figure The localized name of the sales tax group is only used in the backend when assigning it to products. Payment Figure Page 9 of 34

10 The localized name of the payment methods appears in the list of available payment methods on the default Information page of the checkout process, or on your own page as you saw how to create in Chapter 8. In addition, the name appears on the order conformation and on the order in the backend. Refer to Chapter 8 for more information about using payment methods. Shipping Methods Figure The localized name of the shipping methods appears in the list of available shipping methods on the default Information page of the checkout process, or on your own page. In addition, the name appears on the order conformation and on the order in the backend. Stock States Figure In Chapter 4 you saw how to configure localized stock states. The translated text you enter is available in the tag Ecom:Product:Stock.Text. Sales Discounts Figure Localizing Sales Discounts can be a bit tricky. You can only localize the Name and the Description but not the rules and discount values. In addition, you can t limit a discount to a specific country and you can only create a new discount in the default language. This poses an interesting problem: what if you want to have a discount of 10% for Dutch, Page 10 of 34

11 15% for English and 20% for Danish speaking customers? To solve this problem, you might do the following: Create three discounts in the default language for 10%, 15% and 20% respectively. You need to create them in the default language, as that s the only place where you can create new discounts. Localize two of the three discounts to Dutch and Danish respectively. This works fine for Dutch and Danish customers, as only localized discounts are applied to an order. However, the English customers are now eligible for all three discounts! Depending on your discount settings in the Management Center, you may be giving them too much or too little discount. One solution to the problem is to create an additional language, which isn t used anywhere else, and then localize each discount for the appropriate language. You d need to do the following to make this work: 1. In the Management Center, create a new language and call it Root, Default or something like that. Make sure you make this the default language by checking the appropriate checkbox. 2. In this new Root language, create three new discounts, for 10%, 15% and 20% respectively. 3. For each of the three other languages (Dutch, Danish and English), localize the appropriate sales discount. I ve used this solution a number of times, and it works well. However, it still feels a bit hacky. The Root language appears in many places in the UI (such as the Product Catalog in the backend) and might confuse users. In addition, API imports become a little more complex because of the additional language. You need to determine if introducing this complexity outweighs the ability to create localized discounts with varying values per ecommerce language. As an alternative, you could implement your own Sales Discount Provider and display a Language drop-down in its settings dialog to let a shop manager choose a country used to limit the availability of the Sales Discount. Building your own Sales Discount Providers is discussed further in Chapter 17. Hopefully, in a future version of Dynamicweb, these workarounds with custom Sales Discount Providers or an additional root language will no longer be needed. Variants Page 11 of 34

12 Figure In Chapter 5 you saw how to use variants and set up multiple linked drop-downs with the names of the variants. When you have created localized variants, the names appear in the front-end automatically. You can translate both the variant groups and the variant options. Related products Figure As you saw in Chapter 4, Related products are labels or groups, if you will that you can use to group related products together. The only available field for a Related product is its name, which is of course localizable. Product units Figure In Chapter 4 The Product Catalog and Chapter 9 Prices and Discounts you saw how to work with Product Units to group various quantities of a single product together. The only available field for a product unit the Name, is fully localizable. Product categories Figure You can translate the product category label (Bikes parts in Figure 14-19) as the well as the individual labels for the fields. However, the values and systems names are readonly. Page 12 of 34

13 If you followed along with the walkthroughs in this chapter, you now have a nice, localized ecommerce product catalog, ready to be used at the frontend. But before I show you how to use this data at the frontend, there are a few more topics you need to look at. In the next section, you ll see how to hide ecommerce items that haven t been localized at the frontend and you ll get a quick tip that can help you speed up your localization efforts Miscellaneous ecommerce Localization Tips In this section you ll see a few miscellaneous tips for working with Dynamicweb ecommerce localization Hiding Non-localized Data Imagine the following scenario. You have set up a Dynamicweb ecommerce website in two languages: English and Danish. You have a number of products in your ecommerce Product Catalog. All of them are created with an English description, but you only provided a Danish description for a handful of products. Now the question is: what do you show when a Danish customer hits your site: all products? Or just the localized Danish products? The answer is: it depends. On some sites, you may want to display the products, regardless of the absence of the proper translation, and simply show the English text as a fallback. For other scenarios, it may make sense to hide these products from the frontend completely. To accommodate both scenarios, Dynamic has a Management Center setting that controls this behavior. To hide (or show) untranslated ecommerce elements (Products, Groups, Product units, Variants, Related products and more, follow these steps: 1. Open the Management Center and expand the path ecommerce Advanced settings Language. You see the following screen appear: Figure Make sure this field is checked if you want to hide products and other ecommerce data that has not been translated. Rather than hiding the untranslated products, you can of course localize them in Dynamicweb. With the integration of the Google translation services, which you ll see at work next, this is simpler than you might think. Now that you ve seen how to create localized versions if your ecommerce data, the next logical step is setting up Dynamicweb CMS to support multiple languages as well. In the next section you ll see how to create multiple Dynamicweb websites and assign them ecommerce languages. The last part of this chapter then shows you how everything comes together at the frontend. Page 13 of 34

14 14.3 Setting up Dynamicweb CMS for a Multi-Lingual Website So far you ve only been concerned with localizing your ecommerce data. But obviously, you need a way to display that data at the front end as well. There are a couple of ways to do this: Using a single Website in Dynamicweb - With this setup, you create a single site and then offer the user a mechanism to switch between the languages offered. Using multiple Websites in Dynamicweb - With this setup, you create multiple Websites in Dynamicweb and assign a default ecommerce language to each of the sites. The first solution is pretty easy to set up, but has a few drawbacks, which you ll see later. The second option is much more powerful, and should be your preferred option for most ecommerce solutions Switching Languages on a Single Website To determine the language used to display products, Dynamicweb uses a session variable called Ecom.SelectedLangID, which contains the language s ID, such as LANG1 or LANG2. Rather than setting the session variable directly, you can pass a query string called LanguageID to any page to switch to a different language. Where exactly you pass this query string depends on your requirements. One solution is to provide a global switch in the main Layout file, for example. You can use any method you see fit to pass the query string to Dynamicweb, such as text links, images of country flags, a dropdown list that posts back to the server automatically and so on. The following example shows how to use flags to switch to the selected language <a href="/default.aspx?id=<!--@global:page.top.id-->&languageid=lang1"> <img src="/files/images/uk.gif" /> </a> <a href="/default.aspx?id=<!--@global:page.top.id-->&languageid=lang2"> <img src="/files/images/nl.gif" /> </a> I am using the tag Global:Page.Top.ID to create a link to the current page. In addition, I pass LANG1 (for English) or LANG2 (for Dutch) as the LanguageID query string parameter. When you click one of the images, the page reloads, Dynamicweb detects the language parameter and switches the current language. You can also provide a link on a product s details page so that users can see the translated version of a product they are viewing. Again, you have multiple options available, such as the simple text links shown in this example: <a href="/<!--@ecom:product.link.clean-->&languageid=lang1"> View this product in English </a> <a href="/<!--@ecom:product.link.clean-->&languageid=lang2"> Bekijk dit product in het Nederlands </a> Rather than using the page ID, I am building up the link based on the product s link. Page 14 of 34

15 Regardless of the option you choose, Dynamicweb switches the language and remembers the option for the remainder of the user s session, or until the user clicks one of the other links to switch to a different language. The biggest problem with this solution is that it only switches the language used to display ecommerce data. All other content, such as pages, page names, the checkout process and so on, remain in the single language used for the entire website. Clearly it doesn t make a whole lot of sense to let users see a product s description in Dutch or Danish, and then force them through an English checkout process. So, for all but the simplest sites, you need to find a different solution, which means you need to look at the Dynamicweb Websites module Creating Multiple Websites Dynamicweb CMS has a module called Websites (formerly known as the Language/Area module). This module enables you to create multiple websites within a single Dynamicweb solution. You can use this module to create semi-independent websites, such as a company s public website and an Intranet, or a business-toconsumer and a business-to-business website. But it s also used to create different language versions of the same website. Consider the corporate Dynamicweb site. It has versions in a number of languages, each addressable by its own domain (dynamicweb.dk, dynamicweb.nl and so on). But in the backend, all these sites are hosted in the same physical Dynamicweb solution. This makes management of the site and sharing content a lot easier. The Websites module and Dynamicweb ecommerce play very well together. When you create a new website using the Websites module, you can assign it a default ecommerce language, which is used as the primary language to display products. When you create a new website in Dynamicweb, you have a few ways to address the pages in the site. The two most common ones are by top-level or sub domain, and by a sub folder. With the top-level or sub domain option, the domain name reflects the selected language, for example: en.example.com nl.example.com English version of the site using a top level domain Dutch version of the site using a top level domain English version of the site using a sub domain Dutch version of the site using a sub domain If you only have a single domain (or only want to communicate a single domain), you can also create a virtual folder in the site s address that reflects the language chosen for that website. For example: English version of the site using a sub folder Dutch version of the site using a sub folder I prefer the first option over the second for a couple of reasons. Firstly, it s much easier to communicate a language specific domain to your customers on business cards, advertisements and other marketing material. Secondly, it keeps your URLs shorter and Page 15 of 34

16 cleaner. Your reasons may vary, of course, so you should choose the option that works best for you. In the following walkthrough you ll see how to create a new Website in Dynamicweb for the second language you ve created. You ll then see how to configure the Websites module to make the languages available through sub folders on the primary domain. A later walkthrough then shows you the changes you need to make each Website available through its own domain. Walkthrough Creating Websites using the Websites Module This walkthrough uses the Websites module, so you need to have it enabled in order to follow along. 1. Log in to Dynamicweb and click the Modules button in the Main Menu. Next, under Installed Add-on modules, click the Websites module. You should see a screen similar to Figure Figure In the list below the Ribbon bar you ll see the default website that each Dynamicweb installation has. However, your settings for the name and chosen language may be different. 2. With the default website selected, click the Copy button on the Ribbon bar. The following screen appears: Page 16 of 34

17 Figure Here you can determine which content gets copied, and how. Under Name, enter the new name for the site, such as Dutch. Under Regional settings, choose the appropriate settings for the language you re creating. In my example, I am choosing Dutch (Netherlands). Under Copy, leave the Structure and paragraphs option selected. With this option on, the entire site is copied to the new website, which gives you a complete copy of the website, ready to be localized. Leave all other checkboxes checked and click OK. After a short while, Dynamicweb will have created the new website, which now appears in the list. 3. Click the newly created website and then on the Ribbon bar click the ecommerce button (visible in Figure 14-23). Here you can choose the language for the website, as well as a default currency. Figure Page 17 of 34

18 Make sure Netherlands is chosen as the new language (or pick the language you created earlier) and make sure Currency is set to Euro. Click OK to apply the changes. 4. At the bottom of the page, you ll see the URL section. Notice how the URL field is set to /nl-nl/. By default, this URL will be used to distinguish one website from the other, but you ll see later how to change this. Click Save and close to apply the changes. 5. Go back to the Navigation Panel and click the down arrow next to the website s name. A menu appears that shows you the available Dynamicweb websites: Figure Choose Dutch in the drop-down to switch to that website. The Navigation Panel reloads, and shows the exact same site structure as before (because the Dutch layer is an identical copy of the Standard website). 7. Right-click one of the pages and choose Properties. Then enter a new, localized name. For example, you could open the Cart page and change its name to Winkelmand. 8. Right-click one of the pages with the Product Catalog on it and choose View page to open it in your browser. You should see the product appear in the language you assigned to the Dynamicweb Website. In addition, the browser s address bar should reflect the selected language: 9. Close your browser and go back to Dynamicweb. Using the Website switcher at the top of the Navigation panel, switch back to the Standard language 10. Open the same page with the product catalog again. Your products should now be displayed in English, and the address bar in the browser shows en-gb instead of nl-nl. Now that you ve created a second Website named after the language it uses, it s a good idea to rename the Standard website to English. To change the name, click the Website in the Websites module and then click Edit on the Ribbon bar. To help Dynamicweb distinguish between pages in the various language layers, the regional settings of the language layer are added to the address by default. However, it doesn t have to be like this and you can configure Dynamicweb to use a different URL scheme. You see how to set this up next. Page 18 of 34

19 Note: the inclusion of the regional settings is needed to disambiguate page names across various language layers while keeping the original page name. Without it, Dynamicweb appends sequential numbers to page names to differentiate between pages with the same name in various websites. This means a page called Products.aspx in the Dutch website may be named Products-1.aspx in the English website. When each page in the websites has a different name, this isn t really a problem. For example, you could rename the Dutch Products page to Producten to create a unique name. However, you ll quickly run into problems with pages with more generic names such as Contact, which is the same in English and in Dutch. Using sub or top level domains to disambiguate page names resolves this problem as you ll see later. Walkthrough Configuring SEO URLs for Dynamicweb Websites In this short walkthrough you ll see the various options you have available to change the URLs used by Dynamicweb for your websites. The default settings are usually the best option, so can you revert your changes at the end of the exercise if you wish. 1. Open the Management Center and expand the path Web and HTTP Customized URLs. 2. In the URL type region, make sure that Location and page name is selected. You can then choose from the following options: Figure With the Don t show option, no information about the specific Website is included in the address of a page. As explained in the note above, this works fine if each website contains unique page names only. Duplicate names are extended with a sequential number to make them unique. The last option Use ISO code from regional settings is what you ve been using so far and appends the ISO code such as nl-nl - to the address. The middle option gives you the most flexibility. With this option on, Dynamicweb takes the name of the language area and adds that to the address. With the websites set up as shown earlier, this results in pages like the following: /English/Cart.aspx /Dutch/Winkelmand.aspx (or /Dutch/Cart.aspx if you haven t renamed the page) Page 19 of 34

20 To modify the name added to the path, simply rename the website in Dynamicweb. For example, since the name is now included in URLs visible to the user, it makes more sense to rename the Dutch website to Nederlands the Dutch word for Dutch. The option Ensure unique paths prevents Dynamicweb from creating sequential numbers for pages with the same name. This option requires a unique domain name for each website, as Dynamicweb needs a way to disambiguate pages with the same name across various websites. You ll see how to set up unique domain names for each website in the next walkthrough. Walkthrough Configuring Unique Domain Names 1. On the Main Menu, click the Modules button and the open the Websites module. 2. Click the English website (or the Standard website if you didn t rename it earlier) to open its settings. 3. In the Domain text box, enter the following domain name: en.ecommerce8.local.dynamicweb.dk. Click Save (not Save and close) on the Ribbon bar. Note: if you followed along with the walkthroughs in the book, your site uses the domain name ecommerce8.local.dynamicweb.dk. As you learned at the start of the book, in the Internet DNS a so called * record has been created for the domain local.dynamicweb.dk. This means you can add whatever you want in front of the domain and it still points to your local machine. This makes it super easy to make up domain names as is done in this example during development. As an alternative to the * record for local.dynamicweb.dk, you can also manually modify your Windows hosts file and create your own en and nl domains that both point to your local machine. If you re working on a real website, you need to enter the real addresses of the sites in the Domain box or nobody will be able to visit your sites. 4. When you click Save, the domain you entered in the preceding step becomes available in the Primary domain drop-down. Select that domain from the drop-down list. Your Websites screen should now look like this: Page 20 of 34

21 Figure Click Save and close to apply the changes. 5. Repeat steps 3 and 4, but this time modify the Dutch website and assign it a domain and primary domain of nl.ecommerce8.local.dynamicweb.dk. 6. If you were to try out one of the pages in either website, you ll notice that it fails, and that you get an error message instead. The reason for this is a mismatch between the domain that IIS your webserver listens to, and those recognized by Dynamicweb. Although the * record for local.dynamicweb.dk points to your local machine, IIS hasn t been set up to listen to these new domain names. To fix this, open up the Internet Information Services (IIS) Manager (type inetmgr on the Windows start menu or locate the item in the Administrative Tools section of the Windows Control Panel. Locate the site you set up earlier, right-click it and choose Edit bindings. Click the Add button and complete the dialog as follows: Page 21 of 34

22 Figure Click OK, and then click Add again, but now add a host name for the Dutch website: nl.ecommerce8.local.dynamicweb.dk. Finally, to avoid confusion, remove the host name that was already present by selecting it and clicking the Remove button. Your Site Bindings dialog should now look like Figure 14-28: Figure Next, go back to the administrative interface of Dynamicweb. Since you removed the binding you ve been using so far, you can no longer log in at ecommerce8.local.dynamicweb.dk/admin. Instead, you need to use one of the two host names you just created (either one should work fine). 8. In the Navigation panel, right click the Cart page and choose View page to view it in the browser. You should see something like this: You can do the same for pages in the other website, and the address will be changed to reflect the domain name associated with the Dynamicweb Website. The ecommerce data on your website is now ready to be viewed in different languages. Depending on the actual domain names you ve configured, your site is either only accessible from the local machine, or it can be accessed by users over the Internet. But there s still one more thing to do before you can put it in production: you need to localize Page 22 of 34

23 the content in the frontend as well. You ll see how to do this in the final section of this chapter Localizing the Frontend Localizing frontend content is much more a Dynamicweb CMS than a Dynamicweb ecommerce activity. However, since it s so crucial for multi-language ecommerce websites, the next section guides you through the process of localizing the frontend pages. This process involves a number of steps, including: 1. Renaming the page names in your site to reflect the selected language. For example, you may want to rename the English Cart page to the Dutch Winkelwagen. You briefly saw how to do this earlier. In addition, you should translate the meta data, such as the page s title and description, to the Website s language. 2. Localize your page content. This in turn consists of a number of sub activities, including: 1. Translating paragraph content such as the text and images (if appropriate) 2. Creating language specific version of templates used by the various modules. 3. Creating translatable versions of templates using the Translate tag to minimize code duplication across template. You ll see how to do this in the following sections Creating Localized ecommerce Pages Since the newly created Dutch site in the sample Dynamicweb solution is just a plain copy of its English counterpart, all content and the page names are still in English. From a search engine and an end user perspective, you should localize this content as much as possible. In the following short walkthrough I ll quickly guide you through this process. Walkthrough Localizing Pages In this and the following walkthroughs I ll show you how to modify the Dutch Website I created earlier. If you re following along with your own Website, substitute Dutch for whatever name you ve given to your website. 1. On the Navigation Panel, make sure the Dutch Website is selected. If it isn t, click the arrow directly below the Navigation header at the top of the Navigation Panel and choose the Dutch Website. 2. Right-click the Catalog page you created in Chapter 4 and choose Properties. If you don t have this page, just pick another one from the Navigation tree. 3. Change the Page name from Catalog to the Dutch Catalogus. In addition, provide new localized content for the Title, Description and Keyword(s) fields. Make any other changes you see fit in the page s properties dialog, such as the URL that s used for the page, or the Layout file that is used. Click Save and close to apply the changes. Page 23 of 34

24 4. Next, open up the paragraph you added to this page. Change the Paragraph name to Catalogus as well. If you had any content in the rich text editor, translate that as well. Remember, you can use the Translate text button to quickly get a machine-translated version of the text. You can skip the Module section of the paragraph, as this will be discussed in the next section. 5. Click the Open website button, which you ll find at the far right of the main Toolbar. Your site should open in the Dutch language, and you should see the Catalogus page appear in the site s menu. 6. Close the new browser window and return to Dynamicweb. Switch the website to the English site again and click Open website on the toolbar. You should now see the English version of the site with a Catalog menu item. 7. Repeat the preceding steps to localize the other pages in your website. If you browse around your localized pages you ll still see a lot of English content. You ll see how to fix that next Creating Localized Copies of Your Templates To localize the content of your paragraph templates, you have two main options: completely replace the template with a localized version or use the Dynamicweb Translate tag to translate only pieces of text. Which one you choose depends on the contents of the template. If the template contains only a small amount of text that needs to be localized, I prefer to use the Translate tag. A good example of such a template is the file Receipt.html, which is used to display the order receipt at the end of the checkout process. It only contains static labels such as Company, Name and Address, which are easily translated in an external file. You ll see how to use the Translate tag in a later section. If, on the other hand, your template file contains a lot of text, or contains content or logic specific to a language, it s often easier to create a copy of the template, localize it and then assign that template to the paragraph or module in Dynamicweb. A good example of this is the template Information.html, which contains a great deal of text with the Terms and Conditions for the site. You can of course mix both; you can create a localized copy of a template and still use the Translate tag to refer to common pieces of text such as Company, Address and so on, which are then reusable elsewhere in your site. In the next quick walkthrough I ll show you how to create a localized template and use that in the Dutch website. Walkthrough Localizing Templates Most of what you ll see in this walkthrough is pretty standard Dynamicweb stuff. However, I am still showing it to you here to make you aware of the different options you have to localize your site content. In this walkthrough, you ll create a copy of the Information.html template, which displays the terms and conditions to the user. You ll only translate the part of the file that contains the terms and conditions. Later you ll see how to translate other content using the Translate tag. Page 24 of 34

25 1. Using the Dynamicweb File Manager, Windows Explorer or Visual Studio, create a copy of the file Information.html from the path /Templates/eCom7/CartV2/Step. You should name the file Information-nl.html or similar to make it clear which language this file is targeting. To make management of the files easier, you should also rename the original file to Information-en.html. 2. Open up the new file for editing (again, using Dynamicweb or Visual Studio) and then locate the <fieldset /> with an id of conditions. Inside the <fieldset /> you should find an <ol> element that you can delete completely. Then replace the code you cut away with a Dutch version of the terms and conditions. For this walkthrough this can be as simple as Algemene voorwaarden or anything else you see fit. Make sure you don t accidentally delete the checkbox with the name EcomOrderCustomerAccepted as it s used to determine if the user has agreed to the terms. Save your changes. 3. On the Navigation panel, locate your cart page (which you may have renamed to its localized version) and open up the settings for the Shopping Cart v2 module. In the Steps section click the Edit icon for the Information step. In the Template dropdown choose the new template you just created: Figure Click OK and then Save and close to apply the changes. 4. Next, go to the frontend of the website and add a few products to your cart. Click the Cart page in the menu and then click the next button to proceed to the Information step. You should now see the localized version of the terms and conditions appear. Notice that the other content is still in English. In this walkthrough you simply assigned a new copy of the template, just as you would do anywhere else in Dynamicweb. This is a good solution for larger blocks of text. However, you may have noticed that this template also contains other content, such as labels in front of text controls. Theoretically, you could translate these elements directly in the Information-html template. However, there s a fair chance you ll use this text at various other locations as well, such as the order confirmation page, the order and so on. To make it easier to translate a piece of text only once, Dynamicweb offers you the Translate tag Using Translate tags to Localize Templates The Translate tag enables you to display a piece of text in the current frontend language. Rather than repeating the same translation in your templates over and over again, you define the translations for each language once in a single location and then Page 25 of 34

26 refer to these translations from your templates. To see how this works, consider the following example: "Company")--> The first parameter passed to the Translate tag (Company without quotes) is the key for the translated element. The second part is the default value that is used when no translation could be found for the current language. When used in a template shown in the Dutch language layer, this tag returns something like Bedrijfsnaam, provided of course you ve supplied the localized version for it. The translations are stored in XML files at various locations throughout the Templates folder. In Dynamicweb there are two levels where translations can be defined: globally for the entire site or locally at the module level. With global translations a translation file called Translations.xml is stored at the root of the Templates folder, shown in Figure 14-30: Figure To refer to a key in the global translation file, you need to use the Translate tag as follows: <!--@Translate(TextKey, "Default value", global)--> The static identifier global (without quotes) tells Dynamicweb to look up translations in the global file Translations.xml in the root of the Templates folder. A good candidate for a global key would be User name, as it s likely you ll need that in numerous pages of your site. To display the text User name in multiple languages, you use the key as follows: <!--@Translate(UserName, "User name", global)--> You then need to provide translated versions of the text User names for all languages where the default value doesn t suffice. In my example, it means I need to create a Dutch version for it. You see how to create the translated versions in a minute. Local translation keys, on the other hand, are usable within a module only. The Translations.xml file is stored at the root folder for the module, as shown in Figure 14-31, which shows the ecom v2 module: Page 26 of 34

27 Figure Keys stored in this translation file are only accessible by templates used by the module. This is a great way to isolate keys within a module, and not clutter up the translations interface with hundreds of keys from other modules. To add keys to these translation files (both locally and global), you have two options. First, for bulk inserting, you could simply modify the Translations.xml file directly. It has a clean and straightforward XML format. Here s an example of the Company label you saw earlier: <?xml version="1.0" encoding="utf-8"?> <translations> <key name="company"> <translation culture="en-gb"><![cdata[]]></translation> <translation culture="nl-nl"><![cdata[bedrijfsnaam]]></translation> </key> </translations> There are a few important things to note in this example. First, the <key /> element has a name attribute that matches the key used in the Translate tag. The key element then has a <translation /> element for each supported language. You assign a language by setting the culture attribute, which should match the regional settings you set for the Website in the Websites module. You saw how to do this in the section Creating Multiple Websites. Within the <translation /> element you then define the content for the key wrapped in a CDATA element to avoid encoding issues. The final thing to notice is that the English <translation /> element has no content defined here. This in turn causes Dynamicweb to use the default value set in the Translate key, which happens to be Company and can thus be used directly in the English template. Obviously, hand-editing XML is not much fun, and especially not if you want the shop manager to be able to handle this as well from the backend. Fortunately, there is a much easier way to translate keys in the Dynamicweb user interface, as you ll see in the next walkthrough. Walkthrough Using the Translate tag Page 27 of 34

28 In this walkthrough you ll modify the file Receipt.html from the /Templates/eCom7/CartV2/Step folder. I use this file just as an example, so you can easily follow along with a different file if you prefer. 1. Open up the file in the Dynamicweb file editor or in Visual Studio. At the top of the page, locate the <fieldset /> with the text Receipt in it. Replace the word Receipt with the following Translate tag: <!--@Translate(Receipt, "Receipt")--> 2. Next, replace the text Print this page with the following tag: <!--@Translate(PrintThisPage, "Print this page")--> Notice how I use the text as the key, but with special characters such as spaces, quotes and angle brackets removed. This makes it easy for an end user to understand what the key is used for, while it s still a usable key for Dynamicweb. The top of the template file should now look like this: <div id="receipt"> <fieldset> <legend><!--@translate(receipt, "Receipt")--></legend> <p><a href="javascript:window.print();"> <!--@Translate(PrintThisPage, "Print this page")--></a></p> 3. Next, replace the text Company in the Billing address section with the following tag: <!--@Translate(Company, "Company", global)--> This creates a global key, which will be stored in the Translations.xml file in the root of the Templates folder. With this key you can see how global and local keys differ in their behavior. 4. To follow along with this walkthrough, you don t have to translate any more keys. But in a real-world website you would of course replace each and every text label with its own Translate tag. Save the changes to the template and close it. 5. Next, open up the Templates folder and look at the files it contains. It should contain a file called Translations.xml. If you look into this file, you should see some XML that defines the global Company key. Likewise, if you open up the folder /Templates/eCom7 you should see the Translations.xml file for that module, which should now contain the keys you created in step 1 and In the Navigation Panel in the Dynamicweb backend, click the Cart page in the Dutch website and then open the settings for the Shopping Cart v2 module. Next to the Receipt step, click the Edit icon. This brings up the following screen: Page 28 of 34

29 Figure Notice the two icons to the right of the template drop-down list in Figure The first icon enables you to edit the template, as you ve seen before. The second icon is used to translate the keys found in the current template. Click it, to bring up the following screen: Figure The Ribbon bar has two tabs. The first tab, labeled Translate shows a list of all the keys found in the current template, both the local and the global ones. To provide a translation for a key, simply enter it in the text box for the key. If you want to translate keys for multiple languages at once, click the Cultures button and select the appropriate languages. Page 29 of 34

30 Figure When you click the OK button at the bottom, the page refreshes and shows additional text boxes for the other languages. You can also edit the template directly from this template. Clicking the Edit button brings up the Edit template dialog, where you can modify the template and the keys it contains. The Browse keys tab visible in Figure shows you a list with all the global keys together with the local keys used in the current module. This makes it easy to see if a key you re about to create has already been created and translated before. The Browse keys tab by default only shows the local keys, so you need to select global from the Keys button list first. 7. Complete the Translate dialog by supplying translations for the three keys in the Dutch language as follows: Page 30 of 34

31 Figure You can leave the text boxes for the English language empty as they ll then pick up the default text defined in the Translation tag. 8. Click Save and close to apply the changes. Tip: you can also open up the Translate dialog when editing a template. Simply click the Translate button on the Ribbon bar, as shown in Figure 14-36: Figure This is a quick way to go to that dialog and localize just the keys that are used in the template you re working on. 9. Open the frontend of the site in your browser (make sure you choose the Dutch site), add a few products to your cart and then complete the checkout process. At the end of the checkout process you should see the receipt page, which should now show a number of labels translated to the Dutch language. You ve now seen how to translate content in your Dynamicweb ecommerce website at various locations, In a real-world website, this of course takes a bit more time as there are a lot more keys to set up and translate. Fortunately, many Dynamicweb templates already come with Translate tags, reducing the amount of work for you. In addition, since the translations are stored in plain XML files, they are easily portable to other Dynamicweb solutions. This further reduces the work you need to do when setting up a new Dynamicweb ecommerce website. Page 31 of 34