shopify语言翻译插件高级定义

饰罪

已于 2023-06-12 14:08:14 修改

阅读量214

点赞数

分类专栏： shopify 文章标签： css html javascript

于 2019-12-26 10:58:20 首次发布

本文链接：https://blog.csdn.net/sz80443374/article/details/103258287

版权

shopify 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

app地址：G | translate - Translate your shop and 3rd party apps with Google Translate. | Shopify App Store

app安装好后，设置如下：

然后拷贝这里的代码到需要的位置使用：

注意为了弹框出来的语言列表换行，可以加<br/>标签。

同时设置 .gt_white_content a {width:341px}

下面为修改后代码：

<!-- GTranslate: https://gtranslate.io/ -->
<a href="#" class="switcher-popup glink nturl notranslate" onclick="openGTPopup(this)"><img src="//gtranslate.io/shopify/assets/flags/24/en.png" height="24" width="24" alt="en" /> <span>English</span><span style="color:#666;font-size:8px;font-weight:bold;">&#9660;</span></a>
<div id="gt_fade" class="gt_black_overlay"></div>
<div id="gt_lightbox" class="gt_white_content notranslate">
    <div style="position:relative;height:14px;">
        <span onclick="closeGTPopup()" style="position:absolute;right:2px;top:2px;font-weight:bold;font-size:12px;cursor:pointer;color:#444;font-family:cursive;">X</span>
    </div>
    <div class="gt_languages">
        <a href="#" onclick="changeGTLanguage('en|en', this);return false;" title="English" class="glink nturl selected">
            <img data-gt-lazy-src="//gtranslate.io/shopify/assets/flags/24/en.png" height="24" width="24" alt="en" />
            <span>English</span>
        </a>
        <br/>
        <a href="#" onclick="changeGTLanguage('en|fr', this);return false;" title="French" class="glink nturl">
            <img data-gt-lazy-src="//gtranslate.io/shopify/assets/flags/24/fr.png" height="24" width="24" alt="fr" />
            <span>French</span>
        </a>
        <br/>
        <a href="#" onclick="changeGTLanguage('en|de', this);return false;" title="German" class="glink nturl">
            <img data-gt-lazy-src="//gtranslate.io/shopify/assets/flags/24/de.png" height="24" width="24" alt="de" />
            <span>German</span>
        </a>
        <br/>
        <a href="#" onclick="changeGTLanguage('en|it', this);return false;" title="Italian" class="glink nturl">
            <img data-gt-lazy-src="//gtranslate.io/shopify/assets/flags/24/it.png" height="24" width="24" alt="it" />
            <span>Italian</span>
        </a>
        <br/>
        <a href="#" onclick="changeGTLanguage('en|ru', this);return false;" title="Russian" class="glink nturl">
            <img data-gt-lazy-src="//gtranslate.io/shopify/assets/flags/24/ru.png" height="24" width="24" alt="ru" />
            <span>Russian</span>
        </a>
        <br/>
        <a href="#" onclick="changeGTLanguage('en|es', this);return false;" title="Spanish" class="glink nturl">
            <img data-gt-lazy-src="//gtranslate.io/shopify/assets/flags/24/es.png" height="24" width="24" alt="es" />
            <span>Spanish</span>
        </a>
    </div>
</div>
<style type="text/css">
    .gt_black_overlay {display:none;position:fixed;top:0%;left:0%;width:100%;height:100%;background-color:black;z-index:2017;-moz-opacity:0.8;opacity:.80;filter:alpha(opacity=80);}
    .gt_white_content {display:none;position:fixed;top:50%;left:50%;width:341px;height:235px;margin:-117.5px 0 0 -170.5px;padding:6px 16px;border-radius:5px;background-color:white;color:black;z-index:19881205;overflow:auto;text-align:left;}
    .gt_white_content a {width:341px;display:block;padding:5px 0;border-bottom:1px solid #e7e7e7;white-space:nowrap;}
    .gt_white_content a:last-of-type {border-bottom:none;}
    .gt_white_content a.selected {background-color:#ffc;}
    .gt_white_content .gt_languages {column-count:1;column-gap:10px;}
    .gt_white_content::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3);border-radius:5px;background-color:#F5F5F5;}
    .gt_white_content::-webkit-scrollbar {width:5px;}
    .gt_white_content::-webkit-scrollbar-thumb {border-radius:5px;-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,.3);background-color:#888;}
</style>

<script type="text/javascript">
    function GTranslateGetCurrentLang() {var keyValue = document.cookie.match('(^|;) ?googtrans=([^;]*)(;|$)');return keyValue ? keyValue[2].split('/')[2] : null;}
    function gt_loadScript(url,callback){var script=document.createElement("script");script.type="text/javascript";if(script.readyState){script.onreadystatechange=function(){if(script.readyState=="loaded"||script.readyState=="complete"){script.onreadystatechange=null;callback()}}}else{script.onload=function(){callback()}}script.src=url;document.getElementsByTagName("head")[0].appendChild(script)}
    var gtSwitcherJS = function($){/*{auto_detect_code}*/
        window.openGTPopup = function(a) {$('.gt_white_content a img').each(function() {if(!$(this)[0].hasAttribute('src'))$(this).attr('src', $(this).attr('data-gt-lazy-src'))});if(a === undefined){document.getElementById('gt_lightbox').style.display='block';document.getElementById('gt_fade').style.display='block';}else{$(a).parent().find('#gt_lightbox').css('display', 'block');$(a).parent().find('#gt_fade').css('display', 'block');}}
        window.closeGTPopup = function() {$('.gt_white_content').css('display', 'none');$('.gt_black_overlay').css('display', 'none');}
        window.changeGTLanguage = function(pair, a) {doGTranslate(pair);$('a.switcher-popup').html($(a).html()+'<span style="color:#666;font-size:8px;font-weight:bold;">&#9660;</span>');closeGTPopup();}
        $('.gt_black_overlay').click(function(e) {if($('.gt_white_content').is(':visible')) {closeGTPopup()}});
        if(typeof GTranslateGetCurrentLang == "function")if(GTranslateGetCurrentLang() != null)$(document).ready(function() {var lang_html = $(".gt_languages a[onclick*='|"+GTranslateGetCurrentLang()+"']").html();if(typeof lang_html != "undefined")$('a.switcher-popup').html(lang_html.replace("data-gt-lazy-", "")+'<span style="color:#666;font-size:8px;font-weight:bold;">&#9660;</span>');});
    };
    gt_loadScript("//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js", function(){jQuery_gtranslate = jQuery.noConflict(true);gtSwitcherJS(jQuery_gtranslate);});
</script>

<style type="text/css">
    #goog-gt-tt {display:none !important;}
    .goog-te-banner-frame {display:none !important;}
    .goog-te-menu-value:hover {text-decoration:none !important;}
    body {top:0 !important;}
    #google_translate_element2 {display:none!important;}
</style>

<div id="google_translate_element2"></div>
<script type="text/javascript">
    function googleTranslateElementInit2() {new google.translate.TranslateElement({pageLanguage: 'en',autoDisplay: false}, 'google_translate_element2');}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit2"></script>


<script type="text/javascript">
    if(typeof GTranslateGetCurrentLang != 'function')function GTranslateGetCurrentLang() {var keyValue = document.cookie.match('(^|;) ?googtrans=([^;]*)(;|$)');return keyValue ? keyValue[2].split('/')[2] : null;}
    function GTranslateFireEvent(element,event){try{if(document.createEventObject){var evt=document.createEventObject();element.fireEvent('on'+event,evt)}else{var evt=document.createEvent('HTMLEvents');evt.initEvent(event,true,true);element.dispatchEvent(evt)}}catch(e){}}
    function doGTranslate(lang_pair){if(lang_pair.value)lang_pair=lang_pair.value;if(lang_pair=='')return;var lang=lang_pair.split('|')[1];if(GTranslateGetCurrentLang() == null && lang == lang_pair.split('|')[0])return;if(typeof ga!='undefined'){ga('send', 'event', 'GTranslate', lang, location.hostname+location.pathname+location.search);}else{if(typeof _gaq!='undefined')_gaq.push(['_trackEvent', 'GTranslate', lang, location.hostname+location.pathname+location.search]);}var teCombo;var sel=document.getElementsByTagName('select');for(var i=0;i<sel.length;i++)if(/goog-te-combo/.test(sel[i].className))teCombo=sel[i];if(document.getElementById('google_translate_element2')==null||document.getElementById('google_translate_element2').innerHTML.length==0||teCombo.length==0||teCombo.innerHTML.length==0){setTimeout(function(){doGTranslate(lang_pair)},500)}else{teCombo.value=lang;GTranslateFireEvent(teCombo,'change');GTranslateFireEvent(teCombo,'change')}}
</script>

当前使用的模板的修改位置为：Snippets/header-util.liquid

<div class="right-wrapper"> 这个下面

只用作代码位置添加参考