Jump to content

[gelöst] Social Media Module fehlerhaft

Birel34
 Share

Recommended Posts

Birel34 Enthusiast

Birel34

Posted
Posted (edited)

Hallo und guten Abend zusammen

Mir ist aufgefallen, dass bei den zwei Modulen von PrestShop Fehler vorhanden sind.

Zum einen im Modul „Social Media Button“ fehlt der Button Google.

SM-B-1.thumb.png.fbe0db07d5bfa902caf8b4a51e73fae5.png

Bei der Anleitung auf YouTube https://www.youtube.com/watch?v=ZujAhaHKiBU sieht man, dass normal der Google-Button vorhanden ist.

SM-B-2.png.5ecdf3b36bffbe2aef0c6f98eb4ac22f.pngBild 2

 

Hingegen im Modul „Social media Links“ werden bei den Felder von Likedin, TikTok und Discord falsche Symbole angezeigt.

SM-B-3.png.6d94cfb5fc3d05b7917986ecf52bd54f.png

 

SM-B-4.png.950eeab6ddc3e03dbe50422a1496445a.png

Es wird immer das Symbol von Facebooke angezeigt.

Wie kann man das beheben?

Ich verwende PS 1.7.8.8 und die beiden Module, Social Media Links v2.3.0 und Social Media Buttons v2.1.2, siehe Bild.

SM-B-5.png.0554cb8aed4b3523fccbe54907b17a34.png

Vielen Dank für die Hilfe.

Ich wünsche allen ein schönes Wochenende.

Frühlingshafte Grüsse

Edited by Birel34 (see edit history)
Link to comment
Share on other sites
JBW Mentor

JBW

Posted
Posted
10 hours ago, Birel34 said:

Zum einen im Modul „Social Media Button“ fehlt der Button Google.

 

Google+ wurde schon vor einiger Zeit eingestellt, daher wurde das Netzwerk wohl auch aus dem Modul entfernt, wo soll es auch hinlinken?

 

10 hours ago, Birel34 said:

Social Media Buttons v2.1.2, siehe Bild.

Dieses Modul kann bei mir nur Facebook/Twitter/Pinerest - entweder hast du da was modifiert oder noch ein anderes Modul (z.b. aus dem Theme) im Einsatz

Link to comment
Share on other sites
Birel34 Enthusiast

Birel34

Posted
  • Author
Posted

Hallo und schönen guten Morgen,

Vielen Dank für Eure Antworten.

Das mit Google+ wusst ich nicht. Darum kann ich es verstehen, dass der Button nun fehlt.

Bei den "Social Media Links" handelt es sich meiner Meinung nach um ein Tool das PrestaShop selbst zur verfügung stellt und miut der Grundinstallation dabei ist.

SM-B-6.thumb.png.ea429053c9c4028d057e331f376b80f0.png

und er Inhalt sieht so aus:

SM-B-7.thumb.png.db2b67a2c963f377f25de2d4d0d907c2.png

SM-B-8.thumb.png.221247d6463e69ff2c8f025ad10a1bb3.png

und bei den drei markierten Feldern, wenn man da den Link setzt, erscheint das Symbol von Facebook und es sieht dann so aus:

SM-B-4.png.9dd5b1f8b1097d58fa3ceca6b3668618.png

Facebook ist ja schon als erstes Symobol vorhanden.

Wo kann man diese Symbole anpassen?

Freundliche Grüsse

 

 

 

Link to comment
Share on other sites
Netagent Collaborator

Netagent

Posted
Posted

Die 3 letzten Dienste wurden in der aktuellen Vesrion "Social Media Links v2.3.0" hinzugefügt. Bei mir in den Testshops werden die Buttons korrekt angezeigt. Lösch mal deinen Cache. Falls es dann noch nicht weg ist, tippe ich auf ein Template Problem, da du scheinbar nicht das Standard Theme nutzt.

Link to comment
Share on other sites
Birel34 Enthusiast

Birel34

Posted
  • Author
Posted

Hallo

vielen Dank für Deine Antwort.

Ich habe nun den versuch durchegführt und habe das originale Template aktiviert, den Chach gelöscht und es ist folgendes passiert:

SM-B-9.png.e693375e79c96ca8bb4e81e8e31a3135.png 

 

Auf dem obigen Bild siehst Du die fünf Ikons, das ganz rechts ist grau ohne Bild. Hier sollte das TikTok-Logo erscheinen.

Wenn ich nun zurück auf das Template gehe wo ich verwende, erscheint im leeren Feld das Facebook-Logo.

Ich glaube eher, dass das Logo fehlt.

Wo ist das den abgelegt?

 

Gruss Rolando

Link to comment
Share on other sites
Netagent Collaborator

Netagent

Posted
Posted

css Datei: /modules/ps_socialfollow/views/css/ps_socialfollow.css

Icons: /modules/ps_socialfollow/assets/icon/(linkedin/tiktok/discord).svg 

Diese Grafiken und die css werden aber erst bei Aktivierung dort abgelegt.

Ansonsten befinden sie sich hier: /themes/classic/assets/css/(zahlen-und-buchstaben).svg. und /themes/classic/assets/css/theme.css (normal Zeile 72 rum)

Definiert werden die Icons durch "class". Bei den bereits vorhandenen heißt es dann z.B. <li class="facebook">, bei den neu hinzugekommenen heißt es z.B. "<li class="ps-socialfollow-discord"> in der Datei "/modules/ps_socialfollow/ps_socialfollow.tpl", bzw. "/themes/classic/modules/ps_socialfollow/ps_socialfollow.tpl"

Gruß Dirk

Link to comment
Share on other sites
Birel34 Enthusiast

Birel34

Posted
  • Author
Posted

Hallo Dirk

Vielen herzlichen Dank für die Zeit die Du Dir genommen hast mir diese Positionen zu erklären.

Ich habe da ein bisschen rumgeschaut und kann daruas nicht viel interpretiern.
Bevor ich etwas zerstöre lass ich es lieber sein.
Das ist eine Nummer zu hoch für mich.
Dann muss ich wohl oder über damit leben, dass das Tik Tok Symbol nicht angezeigt wird.

Gibt es vielleicht ein anderes Modul oder Plugin wo alles funktioniert?
Kennst Du eventuell eins?

Nochmals vielen Dank und einen schönen Sonntag.

Gruss Rolando

Link to comment
Share on other sites
Netagent Collaborator

Netagent

Posted
Posted

Es gibt sicherlich noch weitere Module. Dazu müsstest halt mal im AddonStore suchen.

So lange du das Standard Theme benutzt, dürfte es aber auch reichen, wenn du das Modul einfach mal resettest und anschließend den Cache löschst.

Gruß Dirk

Link to comment
Share on other sites
Birel34 Enthusiast

Birel34

Posted
  • Author
Posted

Hallo Dirk

Da muss somst ein Fehler vorhanden sein, meine Vermutung, dass das Bild von TikTok fehlt.

Ich komme darauf, weil ich nun alles, wie Du beschrieben hast, auch mit dem Standart-Theme ausprobiert habe.

Beim Standart-Them kommt immer noch die grau Fläche ohne Symbol für TikTok und beim Them das ich verwende, das Facebook-Zeichen.

Wie kann man dieses problem PS weiterleiten?

Vielen Dank für Deine Hilfe.

Gruns und einen tollen Wochenstart.

Rolando

 

Link to comment
Share on other sites
Birel34 Enthusiast

Birel34

Posted
  • Author
Posted

Hallo und guten Tag

Vielen Dank für Deine Anregung. Ich habe nachgeschaut und tatsächlich gibt es für die drei Portale: Linkedin, TikTok und Discord keine Icons.
Wo bekommt man die und wie kann man die einbinden?

Gruss Rolando

Link to comment
Share on other sites
Birel34 Enthusiast

Birel34

Posted
  • Author
Posted

Wow, genial, das kannte ich nicht.
Nun habe ich ein ICON von TikTok heruntergeladen, und habe dies in den drei Grössen 64,128,256.
Dies sind nun .png Dateien.

icons8-tick-tack-128.png.7af4edd0681101efcb6ae3fee98b2c15.png

Wo muss oder kann ich diese nun hochladen, dass sie wirksam werden?
Oder müssen diese zuerst in eine .svg Datei umgewandelt werden?

Vielen Dank im Voraus für Deine Antwort.

Link to comment
Share on other sites
Netagent Collaborator

Netagent

Posted
Posted (edited)

@Birel34 Das können wir kurz machen: Dein Theme "Allura" kann das nicht.

DAS wären deine verfügbaren Zeichen für die Social Links: https://lifestyle-shop.ch/themes/allura/assets/img/social-icon.png

Da fehlen die Buttons für Discord, TikTok und LinkedIn. Ich habe oben ja auch von dem Standard Theme (classic) gesprochen. In deinem Theme ist das alles ein bissl anders koordiniert und wird nicht durch einzelne .svg Grafiken wiedergegeben.

Ergo bleibt dir bei dem Theme nur die Möglichkeit, in der entsprechenden Datei (/themes/allura/modules/ps_socialfollow/ps_socialfollow.tpl) die passenden Pfade zu den neuen Grafiken manuell anzugeben.

Gruß Dirk

Edited by Netagent
Tippfehler (see edit history)
Link to comment
Share on other sites
Birel34 Enthusiast

Birel34

Posted
  • Author
Posted

Hallo Dirk

Das ist die Datei, der Inhalt:
  

{**
 * 2007-2018 PrestaShop
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to [email protected] so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to http://www.prestashop.com for more information.
 *
 * @author    PrestaShop SA <contact@prestashop.com>
 * @copyright 2007-2018 PrestaShop SA
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 * International Registered Trademark & Property of PrestaShop SA
 *}

{block name='block_social'}
  <div class="block-social">
  	<!-- <p class="h3 hidden-sm-down">{l s='stay connected' d='Shop.Theme.Global'}</p> -->

    <ul id="footer_social_block">
      {foreach from=$social_links item='social_link'}
        <li class="{$social_link.class}"><a href="{$social_link.url}" target="_blank">{$social_link.label}</a></li>
      {/foreach}
    </ul>
  </div>
{/block}

Leider kann ich hier nicht sehen was ich anpaasen soll.
Siehst Du etwas?
Gruss Rolando

Link to comment
Share on other sites
Netagent Collaborator

Netagent

Posted
Posted

Natürlich sehe ich etwas 😄

du hast 2 Möglichkeiten:

a) du passt diese Datei an in dem du innerhalb der "foreach" Schleife den Pfad der fehlenden Grafiken mit einer "if" Abfrage bestimmst, oder

b) du editierst die von mir oben verlinkte Grafik in dem du in diese Grafik die fehlenden Buttons rein setzt und dann in der css die Position bestimmst.

Ich würde Punkt b) empfehlen, da es zum einen professioneller wäre und zum aneren du dann auch den aktuellen "hover" Übergang beibehalten könntest. ist natürlich mit ein bissl Frimmelarbeit und Rechnerei für die Positionen verbunden...

Link to comment
Share on other sites
Birel34 Enthusiast

Birel34

Posted
  • Author
Posted

Vielen Dank für die Antwort.

Die Variante b) die Du vorgeschlagen hast, würde ich gerne ausprobieren.
Das mit dem Bild https://lifestyle-shop.ch/themes/allura/assets/img/social-icon.png kann ich so erstellen, dass auch die Reihenfolge so ist wie auch die Liste.
Ist das so richtig (siehe Bild im Anhang)? 

Mit dem zweiten Teil habe ich Mühe. Wie Du schreibst, sollte man die Positionen bestimme. Kannst Du mir da weiterhelfen?

Sonnige Grüsse
(heute scheint einmal wieder die Sonne) 

 

 

social-icon.png

Link to comment
Share on other sites
SliderFlash Proficient

SliderFlash

Posted
Posted
vor 13 Stunden schrieb Netagent:

du editierst die von mir oben verlinkte Grafik in dem du in diese Grafik die fehlenden Buttons rein setzt

Ich glaube, er hat überhaupt keine Ahnung von html & co

@Birel34

Bevor du dich weiter quälst, im Forum gibt es das Job-Forum. Da kannst du Beauftragen und dann ist das Ding in einer Stunde erledigt.

Link to comment
Share on other sites
SliderFlash Proficient

SliderFlash

Posted
Posted (edited)

hier mal grob die Positionen, (Der Name der PNG Datei ist soz.png musst anpassen) 

#facebook {
    width: 30px;
    height: 30px;
    background: url(soz.png) -0px --5px;
}
#twitter {
    width: 30px;
    height: 30px;
    background: url(soz.png) -0px -60px;
}
#rss {
    width: 30px;
    height: 30px;
    background: url(soz.png) -0px -130px;
}
#youtube {
    width: 30px;
    height: 30px;
    background: url(soz.png) -0px -205px;
}
#google {
    width: 30px;
    height: 30px;
    background: url(soz.png) -0px -267px;
}
#printerest {
    width: 30px;
    height: 30px;
    background: url(soz.png) -0px -335px;
}
#vlog {
    width: 30px;
    height: 30px;
    background: url(soz.png) -0px -410px;
}
#instagram {
    width: 30px;
    height: 30px;
    background: url(soz.png) -0px -475px;
}
#linkin {
    width: 30px;
    height: 30px;
    background: url(soz.png) -0px -555px;
}
#tiktok {
    width: 30px;
    height: 30px;
    background: url(soz.png) -0px -633px;
}
#robot {
    width: 30px;
    height: 30px;
    background: url(soz.png) -0px -720px;
}

 

Edited by SliderFlash (see edit history)
Link to comment
Share on other sites
Birel34 Enthusiast

Birel34

Posted
  • Author
Posted

Genau da hast Du vollkommen recht, keine Anhnug von HTML & Co.
Kein Meister ist vom Himmel gefallen.
Ich versuche wenigsten über das Formum etwas dazu zu lernen.
Habe schon einiges dazu gerlent, leider joch viel zu wenig.

Die Datei die du angegeben hast, "soz.png" finde ich nicht.
Wo soll diese sein?

Diese Auflistung der Plazierung, die Du erstellt hast, vielen Dank erstmal dazu, wo kommt die genau hin?

 

Link to comment
Share on other sites
Birel34 Enthusiast

Birel34

Posted
  • Author
Posted

Mal nochmals zurück zu kommen wegen den beiden Templates "classic" und "allura".

Woher bezieht das Template "allura"  und das Original Template "classic" die Bilder Social-Media-Icons.
Die Frage stellrt sich für mich, da ich die Datei https://lifestyle-shop.ch/themes/allura/assets/img/social-icon.png gelöschte, dann im Shop den Cache auch gelöscht habe.
Nun habe ich den Shop aufgerufen und die Icon's werden immer noch angezeigt.

Muss ich dann davon ausgehen, dass die Bilder andersweitig bezogen werden?
 

Link to comment
Share on other sites
rictools Mentor

rictools

Posted
Posted

Hier wäre ich mit meinen Kenntnissen auch am Ende gewesen, hat mit HTML-Kenntnissen eher wenig zu tun ...

Das Naheliegendste wäre vielleicht, den Autor des Themes zu bitten, die zusätzlichen sozialen Netzwerke zu integrieren, wäre ja sicher auch für andere Käufer des Themes nützlich. Und zumindest sollte ein Kauftheme ja nicht weniger können als das Standard-Classic-Theme ...

Link to comment
Share on other sites
Netagent Collaborator

Netagent

Posted
Posted

Zuerst solltest du dich mal entscheiden was für ein Template du überhaupt nutzen willst. Wie bereits gesagt nutzen die beiden Templates jeweils verschiedene Methoden die Icons darszustellen. Daher kannst du das nicht mal eben vergleichen. Zudem ist es absolut schädlich ewig zwischen den Templates hin- und her zu schalten. Jedes Template hat ja auch seine eigenen Hooks. Und diese veränderst du bei jedem Wechsel. Wenn du ewig switchst, dann geht bald gar nichts mehr in deinem Shop.

Und ja, deine oben aufgeführte Grafik ist schon korrekt so. Jetzt musst du nur noch in der css Datei die korrekten Positionen dafür angeben.

Dafür würde ich aus der "theme.css" von dem "allura" Template den ganzen Block ab Zeile 12345 bis Zeile 12438 raus kopieren -> diesen so in die "custom.css" rein setzen -> dann darunter die Positionen der neuen Icons (so wie die alten Icons darüber sind) aufführen.

Noch einfacher kann ich es nicht erklären 😉 Das sind normal Sachen, womit ich Geld verdiene. Also wenn ich dir das machen soll, denn sag Bescheid.

Gruß Dirk

Link to comment
Share on other sites
Birel34 Enthusiast

Birel34

Posted
  • Author
Posted

Hallo Dirk

Gerne gebe ich Dir dafür einen Obolus.

Ich bin Deiner Anleitung gefolgt, bin mir sich, dass ich ncoh einen Fehler drin habe.

Hast Du mein E-Mail, wenn ja, schreibe mir auf diese mit Deiner Bankverbindung und ich überweise Dir dafür etwas.
Passt das so für Dich?

Hier im Anhang noch die custom.css datei.

 

custom.css

Link to comment
Share on other sites
Netagent Collaborator

Netagent

Posted
Posted

Ja, einen groben Fehler hast du noch drin 😉

Mach vor dem "block-social li..." usw.  immer einen "." (Punkt). Den hast du teilweise bei den neuen vergessen. Ansonsten sieht es doch erst mal gut aus. Test es halt ob es so in deinem "allura" Template hinhaut.

Gruß Dirk

Link to comment
Share on other sites
Netagent Collaborator

Netagent

Posted
Posted

Also ich sehe in deinem Shop die neuen Icons... zumindest ansatzsweise 😉 Du hast da wohl ein bissl ungenau mit den Pixeln in der Grafik gearbeitet.

Versuch mal folgendes bei den neuen Icons: 

.block-social li.linkedin {
  background-position: 5px -554px;
}
.block-social li.linkedin:hover {
  background-position: -40px -554px;
}
.block-social li.tiktok {
  background-position: 7px -633px;
}
.block-social li.tiktok:hover {
  background-position: -40px -633px;
}

Viele Grüße Dirk

Link to comment
Share on other sites
Birel34 Enthusiast

Birel34

Posted
  • Author
Posted

Hallo Dirk, super Danke, wieder was kleines dazugelernt. Auch wennes es nur ein brucchteil ist. Macht aber Spass. Herzlichen Dank dafür.
Wie gesagt, sende mir Deine Daten und ich werde Dir gerne etwas überweisen. Schreibe mir auf [email protected].

Ich wüsnche Dir noch einen schönes und erholsames Wochenende.

Link to comment
Share on other sites
  • Birel34 changed the title to [gelöst] Social Media Module fehlerhaft
Netagent Collaborator

Netagent

Posted
Posted

@Birel34 Ich glaube, du wirst mein neuer Kunde... ich hab selten jemand, der so gierig nach einer Rechnung schreit 😄

Ich schick dir die Tage noch ne Mail. Aber nicht wegen dem oben - weil ich hab für das posten der css Werte hier länger gebraucht, als für das herausfinden der Werte selbst 😉 - aber wegen ein paar anderen Sachen, die mir bei dir aufgefallen sind.

Viele Grüße Dirk

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...