3.4. Przesyłanie wiadomości za pomocą mediatorów

Kolejnym sposobem, który można wykorzystać do przekazywania informacji między komponentami frontendowymi, zarówno reactowymi jak i typescriptowymi są mediatory.

Aby użyć mediator w danym pliku należy go zaincludować i przypisać do zmiennej:

const mediator = require('oro/mediator');

Podstawową funkcją mediatorów jest przesłanie bezpośrednio informacji z jednego komponentu do drugiego. Jako payload może posłużyć np. zmienna lub obiekt.

prepareCreatedPackageToAssign = (packageId: string) => {
    mediator.trigger('pim_reference_entity:package_was_created', packageId);
}

Do wywoływania mediatora używa się metody trigger a jako payload przykładowo posłuży id stworzonej właśnie paczki.

constructor(props: RecordSelectorProps & any) {
  super(props);
  this.DOMel = React.createRef();

  mediator.on('pim_reference_entity:package_was_created', (payload: string) => {
     		this.addNewPackageToCurrentProduct(payload);
  });
}

W konstruktorze w innym komponencie do którego ma być wysłane id tworzymy mediator, ktory będzie nasłuchiwać eventu jaki jest triggerowany w komponencie powyżej. Po wywołaniu tego eventu wywoływana jest funkcja strzałkowa, która wywołuje kolejna metoda, w której przekazany jest payload.

W sytuacji w której chcemy przekazać infomację między dwoma stworzonymi komponentami mediator często jest najławiejszym sposobem komunikacji. Należy jednak pamiętać, że w momencie wysyłania informacji z pierwszego komponentu, drugi musi być już wyrenderowany aby odebrać informacje.

3.5. UserContext

Kolejnym modułem często wykorzystywanym jest UserContext. Używając wbudowaną metodę get można pobrać np:

• język katalogu: UserContext.get('catalogLocale');
• nazwę użytkownika: UserContext.get('username');
• język elemetów UI: UserContext.get('uiLocale');
• obecny scope np. ecommerce czy settings: UserContext.get('catalogScope');

Analogicznie setem można utawić różne wartości, gdzie drugim argumentem funkcji jest string, np:

• język kataloguUserContext.set('catalogLocale', locale);
• scope obecnego katalogu: UserContext.set('catalogScope', scope);

3.6 LocaleReference, ChannelReference

Local Reference jest to klasa napisana w typescripcie posiadająca metody publiczne umożliwiające porównanie języków czy utworzenie obiektu referencji z istniejącym językiem.

Import:

import LocaleReference from 'akeneoreferenceentity/domain/model/locale-reference';

Przykładowe stworzenie referencji dla wybranego języka:

const locale = LocaleReference.create('en_US');
console.log(locale);

Otrzymujemy obiekt z właściwością localreference równej wartości podanego języka. Mamy oczywiście również dostęp do reszty metod dostępnych po prototypie.

W akeneo zapytania często wykonywane są metodą PUT, gdzie jako payload przykazywany jest właśnie obiekt javasocriptowy. Dlatego często przy wykonywaniu różnych zapytań np. przy polu select aby ten zwrócił odpowiednie wyniki dla danej wersji językowej potrzebujemy przekazać obiekt z zawierający odpowiednie dane i strukturę i w tym celu wykorzystuje się obiekty stworzone przez metody publiczne takiej klasy jak ta.

LocaleReference można oczywiście też łączyć z innymi helperami dostępnymi w akeneo, np. ze wcześniej omówionym UserContextem aby dynamicznie pobrać język zamiast go wpisywać jako string:

LocaleReference.create(UserContext.get('catalogLocale'))

Channel Reference jest również klasą w typescripcie dającą nam dostęp do metod publicznych, które pozwalają nam stworzyć lub porównać referencję.

Użycie jest analogiczne do LocaleReference:

const channel = ChannelReference.create(UserContext.get('catalogScope'));
console.log(channel);

Stworzona referencja:

3.7. Tłumaczenia

W akeneo możliwe jest dodawanie tłumaczeń po stronie backendu oraz frontendu. W tym rozdziale skupimy się na tych drugich.

Tłuaczenia można zaimportować do dowolnego pliku javascript przez następującą referencję:

import __ from 'akeneoassetmanager/tools/translator';

Następnie można wykonać tłumaczenia używając funkcji -- a jako argument podając klucz do tłumaczenia.

this.validationErrors = response.responseJSON ? 
    this.normalize(response.responseJSON) : [{
        message: __('pim_enrich.entity.fallback.generic_error')
    }];

this.render();

Aby stworzyć nowe tłumaczenie należy w folderze resources stworzyć folder translations i dodać tam pliki yaml dla różnych wersji językowych:

W pliku należy stworzyć odpowiedni klucz przez który będziemy się odwoływać: