Salesforce Commerce Cloud (SFCC) allows you to build rich, layout-driven storefront pages using Page Designer. These pages can now be translated through the Smartling Salesforce Commerce Cloud (SFCC) Connector, allowing you to request translations in Smartling and automatically deliver translated content back to your Salesforce environment.

Previously, Page Designer content could only be translated using a manual export, translate, and import process. The connector can now sync Page Designer pages directly. If you are looking for the previous manual process, see Translating Page Designer Content (Legacy Manual Process). For most cases, the workflow described below is the recommended approach.

Requirements

You will need the following:

• A Salesforce Commerce Cloud Connector project already set up in Smartling and connected to your Commerce Cloud environment. See Setting Up Your Salesforce Commerce Cloud Connector.
• The Shared Libraries configuration completed in your SFCC Smartling project by entering the Shared Library ID and name. Unlike other content types, where this is optional, a Shared Library is required for Page Designer because this is where Commerce Cloud stores Page Designer pages.
  
• The Smartling Page Designer package installed in your Commerce Cloud environment. See One-time setup below.
• Your site locales configured under Merchant Tools > Site Preferences > Site Locales. The default locale is the language your site renders if no locale is passed with a request, typically English.

What gets translated

Page Designer pages contain two kinds of translatable content, and the connector handles both:

• Strings that belong to the page (page metadata): non-visible strings that belong to the page itself, such as the page description and SEO tags. In Page Designer, these are managed through the Page Settings for the selected language. You can find them by opening a page, selecting the language version, and then going to Page Settings. 
  
  The page name and description are included for translation by default. 
  
  The page SEO fields are also included for translation by default. 
  
  
   
• Strings that belong to the page's components: visible strings that belong to the page's components, including image text such as text overlays and alt text. Components display content to the shopper and can contain text or markup (HTML). In Page Designer, these are managed through the Page Structure, where you select individual components.
  
  
  
   

By default, the connector translates all component fields that contain plain text or HTML. If there are specific fields you do not want to translate, you can exclude them; see Excluding content.

Visual context

The connector supports dynamic visual context for Page Designer pages. This means that linguists working in the Smartling CAT tool can see what the page will look like to end users as they translate. Because the context is dynamic, it updates in real time: as translators type, their translations appear in the rendered page, so they can get a feel for how the final, translated page will look.

How it works

Page Designer content is not accessible through the standard Salesforce Commerce Cloud API. Instead, the connector uses two scheduled jobs in Salesforce to move content between Salesforce and Smartling:

• smartling-cache-update fetches your Page Designer content from Salesforce so it can be ingested into Smartling for translation.
• smartling-import-translation delivers completed translations from Smartling back into Salesforce.

How your data is handled: The smartling-cache-update job is based on a Salesforce system export job, which exports all site content as a zip file on the Commerce Cloud side. Smartling reads only the data that belongs to your Page Designer pages from that export. Your exported content stays within Commerce Cloud and is not sent outside of it.

We recommend scheduling both jobs to run at short intervals, such as every five minutes, so that new content is ingested into Smartling promptly and completed translations are delivered back to Salesforce without significant delays.

Because the connector supports translating one site per Smartling project, you must select a single source site during configuration. However, Page Designer pages belong to the Salesforce Commerce Cloud instance rather than to an individual site. This means you only need to translate a page once and can then assign the translated version to multiple sites within Salesforce.

One-time setup

Before you can translate Page Designer pages, complete the following one-time setup: install the Smartling cartridge, then set up the synchronization jobs.

Install the Smartling cartridge

Support for translating Page Designer pages is provided by a custom code add-on developed by Smartling. It works in conjunction with the existing Salesforce Commerce Cloud Connector to extend support for translating Page Designer pages. There are two options for installing the package: uploading it using VS Code, or running a script.

Download the cartridge package (.zip) here.

Option A: Upload via VS Code

1. Set up the dw.json file (WebDAV access to the Commerce Cloud file system).
   

   The hostname is your Commerce Cloud instance host URL.

   Example:
   
   
   The username is the user you use to log in to the Commerce Cloud console. 
   Example:
   

   The password is the access key to WebDAV.
   
   
   

   The code-version is your current storefront code version.
   

2. From the terminal, run the command:
   sgmf-scripts --uploadCartridge bm_smartling && sgmf-scripts --uploadCartridge plugin_smartling && sgmf-scripts --uploadCartridge int_smartling_core
3. Re-activate the uploaded code version (e.g., version1) to enable the cartridge code.
   

Option B: Using a script

1. Create an API Client ID.
2. Set OCAPI permissions.
3. Set WebDAV permissions.
4. Run the script:
   1. Open a terminal. 
   2. Use the cd command to navigate to the cartridge folder: cd *path_to_cartridge*/sfcc-cartridge-public
   3. Run the script: CLIENT_ID='client_id' CLIENT_SECRET='client_secret' HOST='storefront_url' CODE_VERSION='code_version' bash scripts/install.sh

Once you have finished installing the package using Option A or Option B, complete the cartridge setup.

Cartridge setup

1. Add the cartridge to the path.

   1. Business Manager path
      
   2. Site path
      

   

2. Import the Smartling site data.
   1. Upload smartling-data-import.zip. 
      
   2. Import the uploaded .zip.
      
      
       

Set up synchronization jobs

Because Salesforce does not have an API for managing Page Designer content, these sync jobs fetch the content in your pages so it can be ingested into Smartling for translation, and deliver completed translations back to Salesforce.

1. Navigate to the Administration section in Salesforce. 
   
2. Under Site, use the drop-down menu to select the site where your source pages belong. Under the Operations section, click Jobs.
   
3. Find and select the smartling-cache-update job and click Run to run it manually. Wait until the job's status changes from Running to OK.
   
4. Next, schedule the job to run automatically. Click the name of the job and select Schedule and History. Ensure the Enabled checkbox is selected, the Trigger is set to Recurring Interval, and the From date is set (this is the date the schedule will begin). You can leave the To date blank. Under Run Time, set the job to run every 5 minutes.
   Note: Only Salesforce production instances support scheduled jobs; enabling a schedule on a sandbox will not trigger the job.
   
    
5. Next, set up the smartling-import-translation job, which runs to get translations into your Salesforce environment once they are completed in Smartling.
6. As with the first job, you can run it manually if needed. Add the same schedule you set for the smartling-cache-update job, configuring it to run every five minutes. 
   
   

Translate a page

Once your synchronization jobs are set up, follow these steps each time you want to translate Page Designer content.

Step 1: Locate the page in Page Designer 

1. Log in to your Salesforce Commerce Cloud environment.
2. Navigate to the Merchant Tools section. This is the area where you create and modify your SFCC content. 
   
   Merchant Tools is accessible via the menu in the top-left corner. 
   
3. Under Content, click into the Page Designer section to see the list of pages. From here you can edit existing pages and create new pages. 
   

Page Designer always opens in your site's default locale, which is typically English. This is the source content the connector sends to Smartling for translation.

Step 2: Request translation in Smartling

1. Navigate to your SFCC project in Smartling and go to the Salesforce Commerce Cloud tab.
2. Under the Content Type filter, select Page Designer Pages.

3. Your content is displayed in a hierarchical folder structure (Site > Library > Pages). Click the name of your site, then the library folder. You will then see the list of your pages. Select the page or pages you wish to translate.

   If you recently created the page, it may not be visible in the list if the smartling-cache-update job has not run yet. You can go into Salesforce and run it manually, or wait five minutes for the schedule to trigger.

4. From the Actions menu, select Request Translation. This opens the Request Translation wizard, where you can create a new job or add the content to an existing job. The request translation process is the same as when requesting any other content type; see Translating with the Salesforce Commerce Cloud Connector. 

Step 3: View translated pages

As translations are completed, they are automatically sent back to your Salesforce Commerce Cloud instance using the smartling-import-translation job that runs every five minutes. You can also run this job manually from within Salesforce at any time. Because translations are delivered on the job's schedule rather than instantly, expect a short delay (up to about five minutes) between a translation completing in Smartling and appearing in Page Designer.

You can view translations by opening the page:

1. Go to Merchant Tools > Content > Page Designer. 
2. From the list of pages, click a page.
3. Use the language drop-down menu to view the different language versions. 
   

Excluding content

If you do not want to translate a particular field on a page, you can set that field to "Do Not Translate".

From the Settings tab of your Salesforce Commerce Cloud project, go to Salesforce Commerce Settings. Under the Content Parsing section, use the filter to select Page Designer Pages, then set the relevant field to Do Not Translate.

Important notes and considerations

• Your exported content stays within Commerce Cloud. The smartling-cache-update job is based on a Salesforce system export job that exports all site content as a zip file on the Commerce Cloud side. Smartling reads only the data that belongs to your Page Designer pages and does not send the exported content outside of Commerce Cloud.
• Translation delivery is not instant after an asset has been published in Smartling. Translations are delivered when the smartling-import-translation job next runs, so expect a short delay based on the job's configured schedule (five minutes is the recommended interval).
• The connector can translate one site at a time. The connector translates from a single source site. Because pages belong to the Commerce Cloud instance, a translated page can be assigned to other sites within Salesforce after it has been translated.
• Scheduled jobs are supported on Salesforce production instances only. If you are working in a sandbox environment, the synchronization jobs will need to be run manually. 
• Source content uses the default locale (typically English), which is what Page Designer opens in and what the connector sends for translation.
• All text and HTML fields are translated by default. To exclude specific fields, see Excluding content.