Adding the translation strings

The first things to do is to add the strings that we need to use. The strings that we need to add are Points (English) and Punkte (German).

To add the strings we need to open each respective language file. These can be found at:
<theme-root>/locale/en-US.json
<theme-root>/locale/de-DE.json

Since the loyalty points will be shown on the product page we should add the strings to the product group. Find the product key and insert a new item inside this object under the key loyalty. This has to be done for each file.

The locale files should end up looking like this:

{
  ...
  "product": {
    "description_heading": "About",
    "loyalty": "Points",
    "pick_an_attribute": "Pick a {0}"
  },
  ...
}

Using translation strings

We can now use the translation strings from inside the Loyalty component. This can be done by importing the <I18n> component from one of the Shopgate libraries (@shopgate/pwa-common) and using it. The string prop needs to match the JSON path inside the locale files: products.loyalty.

<theme-root>/pages/Product/components/Header/components/Loyalty/index.jsx
import React from 'react';
import PropTypes from 'prop-types';
import LoyaltyIcon from 'Components/icons/LoyaltyIcon';
import I18n from '@shopgate/pwa-common/components/I18n';
import styles from './style';

const Loyalty = ({ points }) => (
  points ? (
    <div className={styles.container}>
      <LoyaltyIcon className={styles.icon} />
      <I18n.Text string="product.loyalty" />: {points}
    </div>
  ) : null
);

Loyalty.propTypes = {
  points: PropTypes.number,
};

Loyalty.defaultProps = {
  points: 0,
};

export default Loyalty;