This article covers a Bloomreach Experience Manager version 12. There's an updated version available that covers our most recent release.

Adding a mobile version for existing site

This page describes how to add a mobile channel for an existing site. This page assumes you are familiar with 1) Adding a new language to an already existing site and 2) Adding a new (sub)site. Also, we assume that the new channel (mobile) will use the same content as the already existing channel (the website).

We assume reusing content

Thus, we do not need to do anything in the CMS regarding content.

This page is very similar to adding a new site and translation, except for the last part, where we explain hst:types

Steps in the HST-2 configuration

1 Add a new hst:configuration for the new mobile version of myproject.

Assume we already had different translations for myproject and have the following hst:configuration

/hst:hst:
  /hst:configurations:
    hst:default:
    /common:
      /hst:pages:
      /hst:components:
      /hst:templates:
      /hst:catalog:
    /myproject:
      hst:inheritsfrom: [../common]
      /hst:sitemap:
      /hst:sitemenus:
      /hst:channel:
        hst:name: My project
    /monprojet:
      hst:inheritsfrom: [../common]
      /hst:sitemap:
      /hst:sitemenus:
      /hst:channel:
        hst:name: Mon projet

Depending on your domain specific use case, we can or cannot reuse the common part for the already existing site myproject. Assume that the new channel mymobile has the same hst:components and hst:catalog but it has different hst:pages and hst:templates. We can thus reuse everything except the hst:pages and hst:templates. If we first move hst:pages and hst:templates to website, we can later on easily add mymobile. Thus

Step 1 Split off hst:pages from common

/hst:hst:
  /hst:configurations:
    hst:default:
    /common:
      /hst:components:
      /hst:catalog:
    /website:
      hst:inheritsfrom: [../common]
      /hst:templates:
      /hst:pages:
    /myproject:
      hst:inheritsfrom: [../website]
      /hst:sitemap:
      /hst:sitemenus:
      /hst:channel:
        hst:name: My project
    /monprojet:
      hst:inheritsfrom: [../website]
      /hst:sitemap:
      /hst:sitemenus:
      /hst:channel:
        hst:name: My project

Step 2 Add mymobile

/hst:hst:
  /hst:configurations:
    hst:default:
    /common:
      /hst:components:
      /hst:catalog:
    /website:
      hst:inheritsfrom: ../common
      /hst:templates:
      /hst:pages:
    /myproject:
      hst:inheritsfrom: ../website
      /hst:sitemap:
      /hst:sitemenus:
      /hst:channel:
        hst:name: My project
    /monprojet:
      hst:inheritsfrom: ../website
      /hst:sitemap:
      /hst:sitemenus:
      /hst:channel:
        hst:name: Mon projet
    /mymobile:
      hst:inheritsfrom: ../common
      /hst:sitemap:
      /hst:sitemenus:
      /hst:templates:
      /hst:pages:
      /hst:channel:
        hst:name: My mobile

Now you can customize the hst:pages and hst:templates for the mobile version just to get a mobile site.

2 Add a new hst:site for the new mobile channel

Assume you already had:

/hst:hst:
  jcr:primaryType: hst:hst
  /hst:sites:
    jcr:primaryType: hst:sites
    /myproject:
      jcr:primaryType: hst:site
    /monprojet:
      jcr:primaryType: hst:site

Copy the myproject, and rename it to mymobile. Because we reuse the same content for the website and the mobile channel, the hst:content property points to the same content as the hst:content property for myproject. We thus get something like:

/hst:hst:
  jcr:primaryType: hst:hst
  /hst:sites:
    jcr:primaryType: hst:sites
    /myproject:
      jcr:primaryType: hst:site
    /mymobile:
      jcr:primaryType: hst:site
    /monprojet:
      jcr:primaryType: hst:site

3 Create the host or "URL space" for the new mobile channel.

Assume you already had

/hst:hst:
  jcr:primaryType: hst:hst
  /hst:hosts:
    jcr:primaryType: hst:virtualhosts
    /prod:
      jcr:primaryType: hst:virtualhostgroup
      /com:
        jcr:primaryType: hst:virtualhost
        /myproject:
          jcr:primaryType: hst:virtualhost
          /www:
            jcr:primaryType: hst:virtualhost
            /hst:root:
              jcr:primaryType: hst:mount
      /fr:
        jcr:primaryType: hst:virtualhost
        /monprojet:
          jcr:primaryType: hst:virtualhost
          /www:
            jcr:primaryType: hst:virtualhost
            /hst:root:
              jcr:primaryType: hst:mount

now, adding the new mobile as a new host can be done as follows:

/hst:hst:
  jcr:primaryType: hst:hst
  /hst:hosts:
    jcr:primaryType: hst:virtualhosts
    /prod:
      jcr:primaryType: hst:virtualhostgroup
      /com:
        jcr:primaryType: hst:virtualhost
        /myproject:
          jcr:primaryType: hst:virtualhost
          /www:
            jcr:primaryType: hst:virtualhost
            /hst:root:
              jcr:primaryType: hst:mount
          /m:
            jcr:primaryType: hst:virtualhost
            /hst:root:
              jcr:primaryType: hst:mount
      /fr:
        jcr:primaryType: hst:virtualhost
        /monprojet:
          jcr:primaryType: hst:virtualhost
           /www:
             jcr:primaryType: hst:virtualhost
             /hst:root:
               jcr:primaryType: hst:mount

We have added above the host m.myproject.com. Make sure the hst:mountpoint for

/hst:hst/hst:hosts/prod/com/myproject/m/hst:root 

points to the created node /hst:hst/hst:sites/mymobile in the step 2.

Now we still need to do one important thing. Namely, we need to indicate that the new channel is of type mobile. Consider the following: HST needs to create a cross domain link between the French and English sites. However, in a mobile environment, we want a mobile cross domain link, and in website environment, we want a website link; in the content however, the link between the two documents is the same. We thus need to give HST an extra hint about the channel. We do this through the  hst:types property on the hst:mount. Mounts that have the most types in common, have preference to link to each other.

Add a hst:types property

The hst:types is a mulite valued property.

Thus, in the example above, for example add to the Mount at hst:hst/hst:hosts/prod/com/myproject/m/hst:root the property:

  hst:types: mobile

Now, if you also add a French mobile version, then cross domain links have channel awareness: The links stay within the website versions for websites and vice versa for mobile sites.

Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?