[how-to] Installare bottoni social su pagina prodotto 1.5

[viger]

Ciao a tutti!

Sempre a causa della versione 1.5.0.17, i moduli che avevo provato nell 1.4.9 non vanno più e, tra questi, due ottimi che mi permettevano di inserire in 2 minuti i pulsanti "mi piace" e "G+" belli puliti e perfettamente posizionati.

Visto che un update è, purtroppo, ben lungi da venire, e non essendo io in grado di scrivere un modulo, riporto qui il cambio di codice per posizionare i pulsanti nella pagina prodotto.

I pulsanti sono:

• invia a un amico (mailto)
  
• facebook mi piace
  
• twitter
  
• G+
  

Ho eliminato il pulsante "stampa" che credo, personalmente, di non aver mai usato in vita mia. Ho invece aggiunto il pulsante "invia" che mi pare ben più comodo (e non vedo perché doverlo installare con un modulo addirittura!).

Il posizionamento risulta come da immagine allegata:

 

 

Sì lo so, in caso di aggiornamento, ecc ecc.

Ma perché aggiornare? Se funziona, deve essere per forza riparato?

Sinceramente ogni nuova versione ha bug e problemi in abbondanza, perché andare a cercarsi rogne?

Quindi io ho fatto così, voi... decidete!

 

NB: faccio riferimento solo al tema di default

• Aprire il file /themes/default/product.tpl
  
• cercare
  

<!-- usefull links-->

• selezionare poco dopo (riga 215 nella 1.5.0.17)
  

  <li class="print"><a href="javascript:print();">{l s='Print'}</a></li>

• sostituire con
  

<!--   <li class="print"><a href="javascript:print();">{l s='Print'}</a></li>-->
			<!--inizio bottoni sociali-->
			<!--mail button-->
  <li class="bottoni_sociali" style="padding-right: 15px;"><a href="mailto:?SUBJECT={$product->name}&BODY={$link->getProductLink($product)}"><img src="{$img_dir}icon/mail.jpg"></a></li>
			<!--facebook button-->
<li class="fb_right_pad"><div id="fb-root"></div>
<script type="text/javascript">(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false"></div></li>
			<!--twitter button-->
<li class="bottoni_sociali"><a href="https://twitter.com/share" class="twitter-share-button" data-size="medium">Tweet</a>
<script type="text/javascript">(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//platform.twitter.com/widgets.js";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'twitter-wjs'));</script></li>
			<!--googleplus button-->
<li class="bottoni_sociali"><div class="g-plusone" data-size="medium"></div>
<script type="text/javascript">
 (function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
 })();
</script></li>
			<!--fine bottoni sociali-->

• aprire il file /themes/default/css/product.css
  
• cercare
  

/* link list */
#usefull_link_block {
list-style-type:none;
margin-top: 20px
}
#usefull_link_block li {padding:2px 0;}
#usefull_link_block li.print {
padding-left:20px;
background:url(../img/icon/print.gif) no-repeat 0 0;
}
#usefull_link_block li.sendtofriend {
padding-left:20px;
background:url(../img/icon/send_friend.gif) no-repeat 0 0;
}
#usefull_link_block li#left_share_fb{
padding-left:20px;
background:url(../img/icon/picto_fb.png) no-repeat 0 0;
}

• sostituire con
  

/* link list */
#usefull_link_block {
width: 500px;
padding-top: 10px;
}
#usefull_link_block ul {
list-style-type:none;
}
#usefull_link_block .bottoni_sociali {
display: inline-block;
vertical-align: top;
}
#usefull_link_block .fb_right_pad {
padding-right: 35px;
display: inline-block;
vertical-align: top;
}

• Caricare l'immagine seguente nella directory /themes/default/img/icon/mail.jpg:
  

• Per visualizzare il risultato, ricordarsi, da BO, di settarre l'obbligo di compilazione nella scheda performance!
  

Buon lavoro!

 

EDIT: non so a voi, ma a me cliccando sul thumbnail delle immagini mi si apre sempre un riquadro bianco. L'unico modo per vedere l'immagine è "ispeziona elemento" (su chrome).

Edited October 29, 2012 by viger (see edit history)

[pesciolinorex]

Anche io uso lo stesso sistema, comodo e soprattutto molto personalizzabile. Grazie

[Sito Lab]

ciao scusa puoi aiutarmi ? io invece di avere le icone come le hai tu orizzontale le ho in verticale ho fatto il tuo procedimento

[assisassi]

Ciao e grazie, voglio provarli anch'io.

 

Non ho capito a quale tumbnail delle immagini ti riferisci.

A me è capitato qualcosa del genere da BO nelle miniature dell'elenco prodotti, che curiosamente non si verificava nella istallazione "vergine" di PS. La versione 1.5.2 non ha questo problema.

 

Comunque ho notato che gli aggiornamenti maggiori a volte si portano dietro degli errori.

(quello più curioso che mi è capitato in PS 1.5.2, è che, col SEO attivato, in locale su xampp il sito viaggia regolarmente, mentre online, su Aruba, non vede alcuni link - voci del menù - CMS..., anche se sono regolarmente riportati nella barra degli indirizzi del browser, appare pagina non trovata, oppure ricarica un'altra pagina... aggiorno, e la pagina viene caricata regolarmente).

 

In pratica avrei deciso di non fare un aggiornamento ma di fare una istallazione vergine e ricaricare i prodotti, categorie, clienti tramite CSV. Un lavoraccio, ma rende l'istallazione pulita, un po come quando si riformattava il PC e reinstallava windows.

 

A proposito di aggiornamenti, per non perdere le modifice ai css e tpl effettuate sul tema default, basta fare una copia dello stesso e personalizzare la copia.

[viger]

Non ho capito a quale tumbnail delle immagini ti riferisci.

 

Ciao,

a quelle di questo forum, tipo alle due immagini del primo post che vedi come thumbnail, ci clicchi sopra, si apre il fancybox ma è bianco e a volte manco gli funziona la X di chiusura.

In effetti dal mio post non era chiaro, ma mi riferisco solo a quelle di questo forum.

 

 

ciao scusa puoi aiutarmi ? io invece di avere le icone come le hai tu orizzontale le ho in verticale ho fatto il tuo procedimento

 

Non so se posso aiutarti, che versione di PS hai? Hai un tema personalizzato o quello di default?

Edited December 23, 2012 by viger (see edit history)

[Sito Lab]

ciao grazie della risposta, ho la versione prestashop 1.5.2 ed uso il template di default

[viger]

Ciao, scusa il ritardo.

Per la 1.5.2 non so dirti, forse hanno cambiato qualcosa, la guida è per la 1.5.0.17. Dovrei vedere con calma su una installazione pulita, ma ora non ho molto tempo per questo. Se riesco posto qui il risultato, ma ho visto che sono già alla 1.5.3. Io non aggiorno, quindi....

[armadillo2]

ottima mod!! eseguita con successo su 1.5.4

[valba]

viger sei un grande

[valba]

Se volessi eseguire la stessa cosa su una qualsiasi pagina CMS?