Duplicazione menu a tendina di google translator

[helel666]

Ciao a tutti!

premessa:

Non sono programmatore, sono il classico smanettone copia incolla che adopera google per trovare ciò che cerca.

oggi però mi trovo qui perchè probabilmente non so quale domanda porre a google per risolvere il mio problema.

mi sono trovato nella condizione di dover inserire il menu a tendina di google translator al'interno del menu di magento (theme rwd).

Per semplificarmi la vita ho inserito il codice di google-translate all'interno dei campi dedicati nella sezione design agli script personalizzati in admin di magento e nel file header.phtml il codice necessario ad ottenere la visualizzazione del menu.

Sono partito con inserire il codice nel menu di tipo mobile (skip-links) subito dopo il header-minicart e cioè:

 <!-- Cart -->

 <div class="header-minicart">
 <?php echo $this->getChildHtml('minicart_head'); ?>
 </div>
 <!-- Gtranslate -->
 <div id="gtranslate">
 <ul>
 <li>
 <a onclick="toggleMenu()" href="#" class="skip-link skip-language">
 <span class="icon"></span>
 <span class="label">Lingua</span>
 </a>
 <ul id="menu-box" style="display:none;">
 <li><div id="google_translate_element"></div></li>
 </ul>
 </li>
 </ul>
 </div>

per far si che il menu a tendina di google comparisse come sottomenu esclusivamente al momento del clik sopra il link ho inserito sempre nella sezione amministrativa di magento, nel campo dedicato agli script personalizzati questo codice:

<script >
function toggleMenu() {
  var menuBox = document.getElementById('menu-box');    
  if(menuBox.style.display == "block") { // if is menuBox displayed, hide it
    menuBox.style.display = "none";
  }
  else { // if is menuBox hidden, display it
    menuBox.style.display = "block";
  }
}
</script>

tutto funziona perfettamente.

Poi sono passato a tentare di far visualizzare la stessa cosa nel menu  "header-nav" cioè quello classico da desktop.

ho copiato ed incollato il codice  :

<div id="gtranslate">
 <ul>
 <li>
 <a onclick="toggleMenu()" href="#" class="skip-link skip-language">
 <span class="icon"></span>
 <span class="label">Lingua</span>
 </a>
 <ul id="menu-box" style="display:none;">
 <li><div id="google_translate_element"></div></li>
 </ul>
 </li>
 </ul>
 </div>

sostituendo "gtrastate" con "gtranstate-nav" per differenziarli, stessa cosa con tutti gli altri nomi che fanno riferimento a "funzioni" e "id" eccetto fatto per l'id 

<div id="google_translate_element"></div>

che ho lasciato invariato

ora...:

compare il link nel menu, se ci clicco sopra compare il sotto menu ma non il menu a tendina di google translator.

sospetto sia una questione di conflitto nel senso che non possono esistere due menu translator in contemporanea.

la mia domanda è:

esiste un metodo per far visualizzare un elemento (in questo caso il menu a tendina di google translator) su diversi punti del template in contemporanea?

nel mio caso sia nel menu mobile sia nel menu classico

[Black Cat]

Premesso che inserire il pulsante di google translate la trovo una soluzione molto "brutta" da vedere.

Questo post:

https://stackoverflow.com/questions/21759756/multiple-instances-of-google-translate

dovrebbe fare proprio al caso tuo

[helel666 · Accepted solution]

Ti ringrazio molto per la risposta ed il suggerimento, è molto apprezzato

Ho trovato la soluzione ed era sotto il mio naso.

Sono uno "smanettone", tutto quello che so è a dir poco "empirico", ma bando alle ciance.

riporto qui la mia soluzione.

Innanzi tutto i file che andremo a toccare sono header.phtml e style.css

il primo si trova in:

www.tuosito.xxx/app/design/frontend/tuofrontend/tuodefault/template/page/html/header.phtml

Il secondo in:

www.tuosito.xxx/skin/frontend/tuofrontend/tuodefault/template/page/html/header.phtml

in headre.phtml:

 <!-- Skip Links -->

        <div class="skip-links">
            <a href="#header-nav" class="skip-link skip-nav">
                <span class="icon"></span>
                <span class="label"><?php echo $this->__('Menu'); ?></span>
            </a>

            <a href="#header-search" class="skip-link skip-search">
                <span class="icon"></span>
                <span class="label"><?php echo $this->__('Search'); ?></span>
            </a>

            <div class="account-cart-wrapper">
                <a href="<?php echo $this->helper('customer')->getAccountUrl(); ?>" data-target-element="#header-account" class="skip-link skip-account">
                    <span class="icon"></span>
                    <span class="label"><?php echo $this->__('Account'); ?></span>
                </a>
                  
                <!-- Cart -->

                <div class="header-minicart">
                    <?php echo $this->getChildHtml('minicart_head'); ?>
                </div>
                <!-- Gtranslate -->
             <div id="gtranslate">
                 <ul>
                  <li>
                     <a onclick="toggleMenu()" href="#" class="skip-link skip-language">
                         <span class="icon"></span>
                         <span class="label">Lingua</span>
                     </a>
                       <ul id="menu-box" style="display:none;">
                         <li><div id="google_translate_element"></div></li>
                       </ul>
                   </li>
                </ul>
              </div>           
            </div>
         </div>

Poi successivamente modificare in questo modo le righe tra <--Navigator--> e <--Search-->:

<!-- Navigation -->

        <div id="header-nav" class="skip-content">
            <?php echo $this->getChildHtml('topMenu') ?>
        </div>
        <div href=".account-cart-wrapper" >
               
         </div>
        <!-- Search -->

in pratica osservando il codice ho notato la funzione "href" subito dopo il div con class "skip-link" all'interno del tag <A> è ho visto che conteneva l'id .header-nav.

non ho fatto che replicare la cosa per le mie esigenze.

Molti di voi penseranno "ovvio ignorante!!"... ebbene si ... lo so! Però ci son arrivato da solo viso che nonostante le mie ricerche non ho trovato indizi che indicassero tale soluzione (thie!)

Personalmente ho fatto in modo che comparisse un icona raffigurante google translation modificando il file immagine icon_spryte.png e icon_spryte@2x.png e aggiungendo i corrispettivi css "skip-language".

A livello di css bisogna dare le istruzioni al browser perché faccia in modo che il div con id="account-cat-wrapper" sia visibile con tutte le modalità di risoluzione, è possibile inoltre modificare l'aspetto di questo div per integrarlo meglio con le differenze tra visualizzazione mobile e desktop.

Sempre a livello di css è necessario lavorare per dare style al div (nel mio caso id="gtranslate") che contiene il menu a tendina di google:

#gtranslate-nav {position:relative;}
#gtranslate-nav ul {margin: 0px; padding: 0px;}
#gtranslate-nav ul li {}
#gtranslate-nav ul li a {
  display: block;
}
  
  #gtranslate-nav li ul {
  position:fixed; z-index:1008; top:100px; right:0; display: block; background-color:#f5f5f5; padding:10px; -webkit-box-shadow: 0 4px 2px 2px #cccccc;
  box-shadow: 0 4px 2px 2px #616161;
  -webkit-border-radius: 0px 0px 0px 5px;
  border-radius: 0px 0px 0px 5px;  
  }

Fatto questo andate e logatevi nel backend di magento nella sezione dedicata agli script personalizzati nel design dello store e inserite 2 script :

Il primo è quello di google :

<script type="text/javascript">
                                                                     function googleTranslateElementInit() {
                                                                         new google.translate.TranslateElement({ pageLanguage: 'it',includedLanguages: 'ar,de,el,en,es,fr,hu,it,ja,pt,ru,sr,uk,zh-TW', gaTrack: true,  }, 'google_translate_element');
                                                                         }
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>

il secondo è quello che gestisce il comparire del menu a tendina di google (lo vedete all'interno del tag "ul" ) :

<script >
function toggleMenu() {
  var menuBox = document.getElementById('menu-box');    
  if(menuBox.style.display == "block") { // if is menuBox displayed, hide it
    menuBox.style.display = "none";
  }
  else { // if is menuBox hidden, display it
    menuBox.style.display = "block";
  }
}
</script>

 Fatto.

Mi sono limitato a darvi le direttive generali, ma così funziona ed è anche carino da vedere.

Sto cercando di inserire le bandierine nel menu di google, ma l'impresa per me è davvero ardua, ho trovato molti pseudo suggerimenti, ma nessuno sembra essere quello che fa per me, se qualcuno ha suggerimenti sono sempre disponibile a "scroccare" l'esperienza altrui 

Un saluto.