Clone
9
Implementacija
a.barna edited this page 2023-06-15 13:29:47 +02:00

Zadužbina "Petar Mandić" - partneri, prijatelji i pokrovitelji.

Objašenjenje za implementaciju žiga za partnere, pokrovitelje i prijatelje na stranicama istih.


<div style="max-width:300px;" id="hoqmee-partner-render"></div>
<script 
    id="hoqmee-partners" 
    data-token="<UNIQUE_TOKEN>" 
    data-langcode="<LANG_CODE>" 
    src="https://www.teslamandic.org/<LANG_CODE>/hoqmee-partners/load/script?l=<LANG_CODE>&t=<UNIQUE_TOKEN>"
></script>
  • <LANG_CODE> - jezik na kom će se isčitati žig sa propratnim tekstom.
    • Ukoliko želite da se žig sa propratnim tekstom isčitava na srpskom latinici, umesto <LANG_CODE> morate upisati srl.
  • <UNIQUE_TOKEN> - zamenite sa jedinstvenim kodom koji Vam je prosleđen putem elektronske pošte.

Pažnja:

<LANG_CODE> je potrebno izmeniti na 3 mesta, a <UNIQUE_TOKEN> na 2, u kodu za implementaciju.


Primer pravilno ispunjenih podataka za isčitavanje žiga sa propratnim tekstom na srpskom ćirilici, gde je jedinstven kod 1234567890:

<script 
    id="hoqmee-partners" 
    data-token="1234567890" 
    data-langcode="sr" 
    src="https://www.teslamandic.org/sr/hoqmee-partners/load/script?l=sr&t=1234567890"
></script>

Uspešan primer implementacije se može videti na stranici.

Podržani jezici:
  • sr - srpski - ćirilica
  • srl - srpski - latinica
  • en - engleski

2. Višejezične stranice

Ukoliko je Vaša stranica višejezična, trebalo bi postupiti tako da se podaci za isčitavanje žiga ispišu dinamički. Na primer:

  • za stranicu koja je na srpskom ćirilici, koristiće se sr,
  • za stranicu koja je na engleskom će se koristiti en.

To je moguće izvesti kroz dodeljivanje jezičke skraćenice u varijablu koja će biti prosleđena na određeno mesto u kodu (umesto <LANG_CODE>).

Dodatno:

1. Primer implementacije u React

Napomena: potrebno je izmeniti vrednosti u kodu!
function App() {

  const [langcode, setSelectedValue] = useState('sr')

  useEffect(() => {

    const script = document.createElement('script');
    const token = '1234567890'
    script.src = `https://www.teslamandic.org/${langcode}/hoqmee-partners/load/script?l=${langcode}&t=${token}`;
    script.async = true;
    script.setAttribute('data-langcode', langcode)
    script.setAttribute('data-token', token)
    script.id = 'hoqmee-partners'
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    }
  }, [langcode]);

  const handleSelectChange = (event) => {
    setSelectedValue(event.target.value);
  };

  return (
    <div className="App">
        <select value={langcode} onChange={handleSelectChange}>
          <option value="en">EN</option>
          <option value="sr">SR</option>
        </select>

      <div id="hoqmee-partner-render"></div>
    </div>
  );
}

export default App;