Tuotteiden liikennevalojen tekstien muutos

Tekniset tiedotKoodausohjeet › Tuotteiden liikennevalojen tekstien muutos

Taustaa

Verkkokaupan toimitusaikoja suunniteltaessa tulee joskus vastaan tilanteita, että tuotteiden liikennevalojen (saldon ilmaisin) teksti ei ole riittävän selkeä. Esimerkiksi eräs asiakkaamme halusi vaihtaa punaisten liikennevalojen Varastossa-tekstin "Loppu varastosta" -tekstiksi ja keltaisten liikennevalojen tekstin "Toimitusaika noin 2 vko" -tekstiksi. Vaihtaminen onnistuu seuraavalla periaatteella.

Tarvittavat ohjelmistot

Tässä työssä tarvitaan

  • selain (esim. Firefox)

Toteutusohjeet (punainen valo)

  • Kirjaudu verkkokaupan hallintaliittymään (demo).
  • Klikkaa ylhäältä asetukset / koodit ja ulkoasu.
  • Klikkaa Lisää uusi -painiketta.
  • Valitse tyypiksi "Javascript/HTML5".
  • Syötä nimeksi mitä tahansa (ei näy verkkokaupassa).
  • Valitse Sijainti-kohdasta "Verkkokaupassa </body> ennen".
  • Lisää Koodi-kohtaan:
    <script>  
    var $elements = document.getElementsByClassName("product_stock_indicator_no");
    for (var $i = 0; $i < $elements.length; $i++) $elements[$i].innerHTML = '<i class="fa fa-check-circle"></i>&nbsp;<i class="fa fa-circle"></i>&nbsp;<i class="fa fa-circle"></i> Loppu toistaiseksi';
    </script>
    
  • Klikkaa Päivitä-painiketta.

Toteutusohjeet (keltainen valo)

  • Kirjaudu verkkokaupan hallintaliittymään (demo).
  • Klikkaa ylhäältä asetukset / koodit ja ulkoasu.
  • Klikkaa Lisää uusi -painiketta.
  • Valitse tyypiksi "Javascript/HTML5".
  • Syötä nimeksi mitä tahansa (ei näy verkkokaupassa).
  • Valitse Sijainti-kohdasta "Verkkokaupassa </body> ennen".
  • Lisää Koodi-kohtaan:
    <script>  
    var $elements = document.getElementsByClassName("product_stock_indicator_neutral");
    for (var $i = 0; $i < $elements.length; $i++) $elements[$i].innerHTML = '<i class="fa fa-check-circle"></i>&nbsp;<i class="fa fa-check-circle"></i>&nbsp;<i class="fa fa-circle"></i> Toimitusaika noin 2 vko';
    </script>
    
  • Klikkaa Päivitä-painiketta.

Hyvä tietää

Tämä malliesimerkki koskee vain yksityiskohtaisilla tuotesivuilla näkyviä liikennevaloja.

Vastuunrajoitus

Näillä ohjeilla ja koodiesimerkeillä ei ole minkäänlaista toimivuustakuuta. Emme vastaa välittömistä, välillisistä, satunnaisista tai epäsuorista vahingoista, menetyksistä, korvauksista, tai kolmannen osapuolen esittämistä vaatimuksista, jotka johtuvat näiden ohjeiden tai koodiesimerkkien noudattamisesta.

Scroll to Top