Skip to content

Internationalization

Hyvä React Checkout uses Magento 2 translation feature under the hood. The translations are prepared using the block Hyva\ReactCheckout\Block\CheckoutTranslator and passed over to the ReactApp via a javascript global variable CHECKOUT_TRANSLATIONS. These would be picked up by the ReactApp and utilize it.

Translation - The backend story

Hyvä React Checkout uses layout XML update to include the checkout related translatable strings.

File: src/view/frontend/layout/hyva_reactcheckout_index.xml

<block class="Hyva\ReactCheckout\Block\CheckoutTranslator"
       name="checkout.translations"
       template="Hyva_ReactCheckout::translation.phtml">
    <arguments>
        <argument name="checkout_translations" xsi:type="array">
            <item name="hyva_react_checkout_core" xsi:type="string">
                <![CDATA[-- Please Select --,%1 zipcode: %1,%1 is required,...]]>
            </item>
        </argument>
    </arguments>
</block>

As you can see here Hyva\ReactCheckout\Block\CheckoutTranslator is responsible for doing the translation process. We are passing checkout_translations as an argument here and it will be an array. Finally, we are passing the core translatable strings through the group hyva_checkout_core here.

File: src/view/frontend/templates/translation.phtml

<script>
    var CHECKOUT_TRANSLATIONS = '<?= $block->getTranslations()  ?>';
</script>

Here we are passing the translation using a global javascript variable CHECKOUT_TRANSLATIONS to the frontend.

So when you need to add more translatable strings through this, all you need to do is pass it through the layout update XML file.

File: <your/layout/update/xml>/hyva_reactcheckout_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <referenceBlock name="checkout.translations">
                <arguments>
                    <argument name="checkout_translations" xsi:type="array">
                        <item name="<unique_group_name_here>" xsi:type="string">
                            <![CDATA[your translations,goes here]]>
                        </item>
                    </argument>
                </arguments>
            </referenceBlock>
        </referenceContainer>
    </body>
</page>

Make sure to use a unique group name for your translations. After this by clearing the layout and full_page cache, your translations would be added and will be available in the ReactApp to be used.

What if my translatable string contains a comma?

In this case, you need to include it like below

"first part of string, second part of string"

Translation - Frontend story

There is a helper function __() available in the ReactApp similar to the translation facility in Magento 2 templates. You can find this helper function at src/reactapp/src/i18n/__.js. For an example, go to the PlaceOrder component.

File: src/reactapp/src/components/PlaceOrder.jsx

import React from 'react';
import { __ } from '../i18n';

function PlaceOrder() {

  return (
    <div className="flex items-center justify-center h-24">
      <Button
        variant="warning"
        big
        disable={!isValid}
        click={() => submitHandler(values)}
      >
        {__('Place Order')}
      </Button>
    </div>
  );
}

export default PlaceOrder;

see the import of the function __() and usage. It is that simple.

Another job __() function does is, it accepts any number of parameters which will be replaced in the string at the right position. For example, if you want to print the string: My name is Julius Caesar. You can do this:

const firstName = 'Julius';
const lastName = 'Caesar';

__('My name is %1 %1', firstName, lastName);

In the string %1 part indicates it is the dynamic part and needs to be replaced with the other parameters passing to the __(). These parameters will be replaced in the %1 part in the given order.