Uncaught TypeError: $(...).translate is not a function - while executing on shopify store

Abhishekkirar
January 6, 2017
195 views
0 votes
2 Answers

Here is working demo.

Its working well on js fiddle and on my localhost as well but when i executing it on shopify store it is not working. showing me following error…

Uncaught TypeError: $(...).translate is not a function

For trial purpose i followed all steps om shopify store.

Please anybody can make another initialization logic.

The documentation for the plugin I used can be found here.

Answers

Chosen as BEST ANSWER

$ch = curl_init("https://$shop_name/admin/script_tags.json");
$params = json_encode(array("script_tag"=> array("event" => "onload",
                "src" => "https://monza.mochahost.com/~shreyasoft/languagetranslator/new_script_tag.php")));
            curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST"); 
            curl_setopt($ch,CURLOPT_RETURNTRANSFER,TRUE);
            curl_setopt($ch, CURLOPT_POSTFIELDS, $params); 
            curl_setopt($ch, CURLOPT_HTTPHEADER, array(
                    "Content-Type: application/json",
                    "X-Shopify-Access-Token: $token"
                    ));
            $result = curl_exec($ch);
            // print_r($result);

I got the solution, the external script tag. Problem was there shopify restrictions.

(Edit)

Looks like js is not added.Try this:

$(function() {
  
  var t = {
    "Toggle navigation": {
      pt: "Mostrar/esconder navegaÃ§Ã£o",
      es: "Mostrar/esconder navegaÃ§Ã£o in spanish",
      de: "Mostrar/esconder navegaÃ§Ã£o in german"
    },
    "Home": {
      pt: "InÃcio",
      es: "InAcio in spanish",
      de: "InAcio in german"
    },
    "abhishek": {
      pt: "abisek",
      es: "abishek in spanish",
      de: "abhishek in german"
    },
    "kirar": {
      pt: "kerar",
      es: "kirar in spanish",
      de: "kirar in german"
    },
    "indore": {
      pt: "Indoor",
      es: "indoor in spanish",
      de: "indoore in german"
    },
    About: {
      pt: "Acerca",
      es: "acerea in spanish",
      de: "acerea in german"
    },
    "Language": {
      pt: "Idioma",
      es: "idioam in spanish",
      de: "idioam in german"
    },
    "Step": {
      pt: "Passo",
      es: "passo in spanish",
      de: "passo in german"
    },
    "translate.js is a jQuery plugin to translate text in the client side." : {
      pt: "translate.js Ã© um plugin JQuery para traduzir texto client side.",
      es: "translate.js Ã© um plugin JQuery para traduzir texto client side. in spanish",
      de: "translate.js Ã© um plugin JQuery para traduzir texto client side. in german"
    },
    "Usage: translate entire page": {
      pt: "Uso: traduzir uma pÃ¡gina inteira",
      es: "Uso: traduzir uma pÃ¡gina inteira in spanish",
      de: "Uso: traduzir uma pÃ¡gina inteira in german"
    },
    "Usage: translate a string": {
      pt: "Uso: traduzir uma string",
      es: "Uso: traduzir uma string in es",
      de: "Uso: traduzir uma string in de"
    },
    "include JQuery and translate.js in your page" : {
      pt: "incluir JQuery e translate.js na pÃ¡gina",
      es: "incluir JQuery e translate.js na pÃ¡gina in spanish",
      de: "incluir JQuery e translate.js na pÃ¡gina in german"
    },
    "every text you want translated include the <code>trn</code> class" : {
      pt: "incluir a classe <code>trn</code> no texto a traduzir",
      es: "incluir a classe <code>trn</code> no texto a traduzir in spanish",
      de: "incluir a classe <code>trn</code> no texto a traduzir in german"
    },
    "create your dictionary" : {
      pt: "criar o dicionÃ¡rio",
      es: "criar o dicionÃ¡rio in spanish",
      de: "criar o dicionÃ¡rio in ger in german "
    },
    "initialize the plugin and translate the entire page body" : {
      pt: "iniciar o plugin e traduzir o body da pÃ¡gina",
      es: "iniciar o plugin e traduzir o body da pÃ¡gina in spanish",
      de: "iniciar o plugin e traduzir o body da pÃ¡gina in german"
    },
    "change to another language" : {
      pt: "mudar para outro idioma",
      es: "mudar para outro idioma in spanish",
      de: "mudar para outro idioma in german"
    },
    "try it" : {
      pt: "experimentar",
      es: "experimentar in spanish",
      de: "experimentar in german"
    },
    "translate to English": {
      pt: "traduzir para InglÃªs",
      es: "traduzir para InglÃªs in spanish",
      de: "traduzir para InglÃªs in german"
    },
    "translate to Portuguese": {
      pt: "traduzir para PortuguÃªs",
      es: "traduzir para PortuguÃªs in spanish",
      de: "traduzir para PortuguÃªs in german"
    },
    "After you initialize the component you can translate a string" : {
      pt: "Depois do componente iniciado, pode-se traduzir uma string",
      es: "Depois do componente iniciado, pode-se traduzir uma string in spanish",
      de: "Depois do componente iniciado, pode-se traduzir uma string in german"
    },
    "Download translate.js": {
      pt: "Descarregar translate.js",
      es: "Descarregar translate.js in spanish",
      de: "Descarregar translate.js in german"
    }
  };
  var translater = $('body').translate({lang: "en", t: t});
  var str = translater.g("translate");
  console.log(str);

  // this is used for set default language cook


  $(".lang_selector").click(function(ev) {
   var lang = $(this).attr("data-value");
   translater.lang(lang);
   $("#language_drop li").removeClass("active");
   $(this).parent().addClass("active");
    console.log(lang);
    ev.preventDefault();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://www.openxrest.com/translatejs/jquery.translate.js"></script>

<ul class="nav navbar-nav">
	<li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span>Language</span> <b class="caret"></b></a>
        <ul class="dropdown-menu" id="language_drop">
            <li>
                <a href="#" class="lang_selector" data-value="pt"> Portugu&ecirc;s</a>
            </li>
            <li>
                <a href="#" class="lang_selector" data-value="es"> Spanish</a>
            </li>
            <li>
                <a href="#" class="lang_selector" data-value="de"> German</a>
            </li>
            <li class="active">
                <a href="#" class="lang_selector" data-value="en"> English</a>
            </li>
        </ul>
    </li>
</ul>

<a class="btn btn-default lang_selector"  href="#" role="button" data-value="en">translate to English</a>
<a class="btn btn-default lang_selector" href="#" role="button"  data-value="pt">translate to Portuguese</a>
<a class="btn btn-default lang_selector" href="#" role="button"  data-value="es">translate to spanish</a>
<a class="btn btn-default lang_selector" href="#" role="button"  data-value="de">translate to german</a>

<h2>Usage: translate entire page</h2>
<span>include JQuery and translate.js in your page</span>
<p>Step</p>
<span>every text you want translated include the <code>trn</code> class</span>
<div class="trn">Step</div>
<ks>Usage: translate a string</ks>
<p>Usage: translate a string</p>
<p>Step</p>
<span>initialize the plugin and translate the entire page body</span>
<p>initialize the plugin and translate the entire page body</p>
<span>Step</span>
<span>change to another language</span>
<span>Step</span>
<span>try it</span>
<h2>Usage: translate a string</h2>
<p>After you initialize the component you can translate a string</p>

 <!-- <script src="./js/jquery-1.10.2.min.js"></script> -->
<script>
    var a = document.getElementsByTagName("div"); //moved inside function, returns array
    for(i=0;i<a.length;i++){ //loop through array
    document.getElementsByTagName("div")[i].className += " trn";
    }
    var a = document.getElementsByTagName("span"); //moved inside function, returns array
    for(i=0;i<a.length;i++){ //loop through array
    document.getElementsByTagName("span")[i].className += " trn";
    }
    var a = document.getElementsByTagName("p"); //moved inside function, returns array
    for(i=0;i<a.length;i++){ //loop through array
    document.getElementsByTagName("p")[i].className += " trn";
    }
    var a = document.getElementsByTagName("h2"); //moved inside function, returns array
    for(i=0;i<a.length;i++){ //loop through array
    document.getElementsByTagName("h2")[i].className += " trn";
    }
    var a = document.getElementsByTagName("a"); //moved inside function, returns array
    for(i=0;i<a.length;i++){ //loop through array
    document.getElementsByTagName("a")[i].className += " trn";
    }
</script>
</body>
</html>

Please signup or login to give your own answer.

Click here to cancel reply.

Uncaught TypeError: $(…).translate is not a function – while executing on shopify store

Answers