Flow/Add locale selector

From Aimeos documentation

Flow
Other languages:
English 100%


2016.x+ version

For shops offering multiple languages, currencies or both, Aimeos contains a locale selector component that renders menus of the configured language/currency combinations, so visitors are able to choose their preferred language and/or currency. By default, both will be part of the URL afterwards.

How to add locales for language/currency combinations is described in the user manual.

Configuration

To make the locale selector available in the templates, you need to add the component name to the page configuration. Add these settings for the "page" configuration in your ./Configuration/Settings.yaml file:

  1. Aimeos:
  2.   Shop:
  3.     page:
  4.       account-index: ['locale/select','account/history','account/favorite','account/watch','basket/mini','catalog/session']
  5.       basket-index: ['locale/select','basket/standard','basket/related']
  6.       catalog-detail: ['locale/select','basket/mini','catalog/stage','catalog/detail','catalog/session']
  7.       catalog-list: ['locale/select','basket/mini','catalog/filter','catalog/stage','catalog/lists']

They add the "locale/select" component to the account, basket, catalog detail and catalog list templates where they can be rendered afterwards.

Templates

In Flow/Neos applications, you can overwrite the templates of packages by copying a modified version of the template to the ./Packages/Application/Your.Package/Resources/Private/Templates/ directory and configuring that path as additional template path in your "./Configuration/Views.yaml":

  1. -
  2.   options:
  3.     layoutRootPaths: ['resource://Your.Package/Private/Layouts']
  4.     templateRootPaths:
  5.       'Aimeos.Demo': 'resource://Your.Package/Private/Templates'
  6.       'Aimeos.Shop': 'resource://Your.Package/Private/Templates'
Don't forget to replace "Your.Package" with the real name of your package!

In each page template where the locale selector should be available, you need to add the lines for rendering the header and body section of the locale selector:

  1. <f:section name="AimeosHeader">
  2. 	<f:format.raw>{aiheader.locale_select}</f:format.raw>
  3.         ...
  4. </f:section>
  5.  
  6. <f:section name="AimeosHead">
  7. 	<f:format.raw>{aibody.locale_select}</f:format.raw>
  8.         ...
  9. </f:section>

Templates that should be modified:

  • Account/index.html
  • Basket/index.html
  • Catalog/detail.html
  • Catalog/list.html

Depending on the section you've added the body of the locale selector to, it will be rendered at different places.

Routes

Language and currency ID chosen by the visitor are part of the URL by default, so they are explicit and can be cached (contrary to information based on session data). To make this work, you need to redefine all routes besides the "*adm" (admin) routes with a prefix in your ./Configuration/Routes.yaml:

  1. -
  2.   name: 'Account'
  3.   uriPattern: '{locale}/myaccount/<AccountSubroutes>'
  4.   subRoutes:
  5.     'AccountSubroutes':
  6.       package: 'Aimeos.Shop'
  7.       suffix:  'Account'
  8.  
  9. -
  10. # ...

Adapt selector

The locale selector is a normal component with subparts, that can be adapted like any other component. If you e.g. only need a language or currency menu, you can remove the subpart you don't need via the client/html/locale/select/standard/subparts configuration.

Adapting the layout of the locale selector is possible via CSS.