PrestaShop 1.7.6.1 – Installation fehlerfrei

Unsere Webagentur erhielt viele Anfragen, dass PrestaShop 1.7.6 nicht installiert werden könne.

Die neuste PrestaShop Version bringt aber sehr viele interessante Updates mit, deshalb haben wir das Thema natürlich aktiv beobachtet.

PrestaShop 1.7.6.1 – Fehlerfrei installieren

In unserem Test haben wir die neuste Version, PrestaShop 1.7.6.1, Stable, installiert.

Die Installation klappte fehlerfrei, sowohl das Front- als auch das Backend werden sofort angezeigt und es entstehen auch keine Error-Logs.

Voraussetzungen:

  • Download der neusten Version: PrestaShop 1.7.6.1 Stable
  • PHP-Version 7.3
  • CHMOD: Inhaber sollte der Benutzer sein.
    Bei Root-Servern vor allem ein wichtiges Thema.
    Haben Sie einen Server gemietet, sollte der Benutzer somit bereits gesetzt sein.

PrestaShop 1.7.6.1 Stable – Installationsanleitung

Um die neuste PrestaShop Version korrekt zu installieren, muss neu auch das zip-File auf den Server geladen werden.

Eine genaue Anleitung wie Sie PrestaShop installieren, finden Sie hier.

 

Fehler korrekt auslesen

Sollte die Installation oder der Abruf von Frontend- oder Backend nicht korrekt funktionieren, sollten im ersten Schritt die Fehler korrekt ausgelesen werden.

Dazu haben Sie 2 Möglichkeiten:

1.) Server Error-Logs prüfen
Falls Sie diese Error-Logs nicht finden können, kontaktieren Sie kurz Ihren Webhoster

2.) PrestaShop verfügt bereits über einen Debug-Mode, welcher unter configs/defines.inc.php aktiviert werden kann.
Dieser ermöglicht es Ihnen, Fehler auszulesen, auch wenn PrestaShop beispielsweise eine weisse Seite anzeigen sollte.

Zuerst ein Backup des Files anlegen, danach können Sie mit einem einfachen Editor das File öffnen.
Danach sehen Sie direkt folgende Zeilen und sollten die fettmarkierten Stellen von „false“ auf „true“ umstellen und speichern.
(weitere je nach Bedarf)

/* Debug only */
if (!defined(‚_PS_MODE_DEV_‘)) {
define(‚_PS_MODE_DEV_‘, true);
}
/* Compatibility warning */
define(‚_PS_DISPLAY_COMPATIBILITY_WARNING_‘, false);
if (_PS_MODE_DEV_ === true) {
@ini_set(‚display_errors‘, ‚on‘);
@error_reporting(E_ALL | E_STRICT);
define(‚_PS_DEBUG_SQL_‘, true);
} else {
@ini_set(‚display_errors‘, ‚off‘);
define(‚_PS_DEBUG_SQL_‘, false);
}

define(‚_PS_DEBUG_PROFILING_‘, false);
define(‚_PS_MODE_DEMO_‘, false);


SSL Zertifikate mit Let`s Encrypt

Wie in unserem Artikel zum Thema SSL Verschlüsselung im 2018 erwähnt, stellte Google neue Bedingungen in Bezug auf SSL-Verschlüsselungen von Domainnamen.

Diese Warnung das eine Verbindung per http und somit unsicher sei, wurde mittlerweile auch von weiteren Browsern übernommen.

 

Website mit SSL – Was bringt mir das?

Grundsätzlich gilt: Ein Besuch mittels https:// ist sicherer, da die Daten nicht von Dritten eingesehen werden können.

Gerade heute ist das Thema Sicherheit allgegenwärtig und beschäftigt sowohl Unternehmen als auch Privatpersonen.

Ein SSL-Zertifikat sorgt somit für mehr Sicherheit bei einem Besuch, sei es ein Online-Shop oder eine Website.

Google selber möchte natürlich verschlüsselte Websites sehen, somit ist es auch für Unternehmen ein wichtiges Thema.

 

Was kostet mich ein SSL-Zertifikat?

Noch vor einigen Jahren waren günstigere sowie auch teurere SSL-Zertifikate erhältlich.

Heute gibt es mit Let`s Encrypt einen kostenlosen Service, welcher SSL-Zertifikate für alle Domains ermöglicht.

Let`s Encrypt ist ein Non-Profit Projekt und möchte sicherstellen, dass Verbindungen zu Websites sicherer, aber gratis bleiben.
Hinter dem Projekt stehen sehr viele Gönner und Sponsoren, wodurch sich Let`s Encrypt finanziert.

Bereits heute sind Let`s Encrypt Zertifikate bei vielen Hostern per Klick erhältlich.

Weitere Informationen: www.letsencrypt.org

 

Let`s Encrypt SSL-Zertifikat aktivieren

Die meisten Hosting-Anbieter bieten bereits per Klick ein Let`s Encrypt Zertifikat an.

Sehen Sie keinen solchen Menupunkt, kontaktieren Sie am besten kurz den technischen Support.

Sobald das Let`s Encrypt SSL-Zertifikat für eine Domain aktiviert wurde, dauert es ca. 15 Minuten.
In dieser Zeit wird eine Domain geprüft, das Zertifikat automatisch generiert und aktiviert.

Danach können Sie zusätzlich die Option „Automatische Weiterleitung auf SSL“ aktivieren, womit jeder Besucher automatisch auf die SSL verschlüsselte Seite umgeleitet wird.

Wie Sie sehen ist Let`s Encrypt eine wirklich sinnvolle Lösung für SSL-Zertifikate und erst noch kostenlos!

 


PrestaShop Menu – Schriftgrösse & Schriftfarbe ändern

PrestaShop wird sowohl von selbstständigen Personen sowie auch kleinen- und mittelgrossen Unternehmen eingesetzt.

Allerdings möchte man keinen 0815 Online-Shop, sondern sich von der Konkurrenz abheben – In diesem Fall sind einzelne Anpassungen des eigenen PrestaShop natürlich notwendig.

In diesem Beitrag befassen wir uns mit der Anpassung der Linkfarbe sowie der Schriftgrösse im PrestaShop Hauptmenu.
Dies gilt für die Versionen von PrestaShop 1.7.x.

PrestaShop CSS-File

PrestaShop 1.7.x ist aufgebaut auf Bootstrap und steuert darüber sämtliche Styleangaben, sowohl für Desktop- als auch für mobile Geräte.

CSS-Datei: themes/classic/assets/css/theme.css
(Wurde ein Theme eingekauft, so kann der Ordner classics auch nach dem Theme benannt worden sein)

Wichtig: PrestaShop verfügt ab der Version 1.7.x nur noch über 1 zentrales CSS-File.
Im PrestaShop 1.6.x waren in den Modulen noch einzelne CSS-Files enthalten.

Als Beispiel das PrestaShop Hauptmenu:

Wir befassen uns als Beispiel einmal mit dem PrestaShop Hauptmenu für Desktop, also Computer.

Beim Menu können Sie die Schriftfarbe oder Schriftgrösse ganz einfach anpassen, in dem Sie die folgende Codezeile suchen:

#header .top-menu a

Beim Mouseover (Hover), suchen Sie nach folgendem Tag, welcher sich im CSS-File direkt dahinter befindet:

#header .top-menu a:hover

Konnten Sie diesen Tag im CSS-File finden, können Sie die Textfarbe oder Textgrösse ganz einfach anpassen.

PrestaShop Menu Schriftgrösse und Linkfarbe

Gehen wir im Beispiel davon aus, dass wir die Farbe gerne in Rot und die Schriftgrösse auf 25 Pixel setzen möchten, so wäre der Code wie folgt:

#header .top-menu a {font-size:25px; color:#ff0000}

Ein solcher Tag beinhaltet meistens bereits gewisse Angaben.
So können Sie selber entscheiden, ob Sie diese weiterhin stehen lassen oder je nach Design gerne ändern möchten.

Wollen Sie im PrestaShop Menu nur die Schriftgrösse- oder Schriftfarbe ändern, dann lassen Sie den restlichen Code bestehen.
Möchten Sie weitere Elemente wie Breite, Abstände, Höhe usw. anpassen, dann sind in jedem Fall sehr gute Kenntnisse im CSS bzw. CSS3 empfehlenswert!

Sehr wichtig: Erstellen Sie vor der Anpassung ein Backup Ihres PrestaShop CSS-Files!

 


Apple Touch Icon für Websites & Online-Shops

Viele Personen speichern beim surfen sogenannte Favoriten oder bauen Schnellzugriffe ein, um Links möglichst schnell abzurufen.

Bei Smartphones gibt es aber auch die Möglichkeit, einen gewünschten Link direkt ins Menu des Smartphones zu legen – Ein sogenanntes Apple Touch Icon.

 

Apple Touch Icon erstellen

Ein Touch Icon besteht normalerweise wie ein Favicon nur aus einem Symbol, welches Ihre Website oder Ihren Online-Shop symbolisiert.

Falls Sie bereits eines besitzen, können Sie daher auch eine grössere Version des Favicons nutzen.

Wichtig ist, dass Sie das Icon als PNG-Bilddatei anlegen, um den Hintergrund transparent zu halten.

Speichern Sie das Icon mit dem Namen „apple-touch-icon.png“ in der Grösse von 180 x 180 Pixel.

 

Apple Touch Icon einbauen

Öffnen Sie via FTP-Programm den Zugriff zu Ihrer Website.

Als erster Schritt laden Sie die erstellte Datei apple-touch-icon.png in den Bilderordner, meistens unter images oder img.

Anschliessend kopieren Sie den folgenden Code und bauen diesen innerhalb des <head></head> Tags ein:

  <link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">

Hinweis: Anstelle von img/ muss der Name des eigenen Bilderordners angepasst werden.

Ab sofort können iPhone-Nutzer einen Schnellzugriff anlegen, welcher jedoch aus Ihrem Symbol besteht, was ganz einfach schöner aussieht und den Personen besser in Erinnerung bleibt.

 

Touch Icon ohne Kanten und Glanz

Das iPhone macht automatisch Kanten sowie einen Glanz um das Icon.
Möchten Sie das Ihr Icon ohne diesen Effekt platziert wird?

Dann sind 2 Schritte notwendig:

1.) Speichern Sie das Icon mit dem Namen apple-touch-icon-precomposed.png
Sie fügen also ganz einfach das Wort -precomposed hinzu.

Dann nutzen Sie innerhalb des <head></head> Tags den folgenden Code anstelle des obenstehenden:

  <link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon-precomposed.png">


Hinweis:

Die Entfernung der Kanten sowie des Glanzeffekt sind für Safari + iOS 7 sowie ältere Versionen nicht kompatibel.


PrestaShop 1.7 Design / Layout anpassen

Jeder der einen Online-Shop mit Prestashop betreibt, fragt sich natürlich, ob er auf PrestaShop 1.7.x umsteigen soll.

Lohnt sich PrestaShop 1.7 oder soll man lieber mit PrestaShop 1.6 weiterhin arbeiten?

PrestaShop 1.7 vs. PrestaShop 1.6

Mittlerweile ist PrestaShop 1.7.x bereits einige Zeit erhältlich und erste positive und negative Punkte lassen sich feststellen.

Ganz wichtig ist natürlich, dass PrestaShop 1.6.x ins Alter kommt, Updates gibt es vereinzelt nur noch für Module, da können durchaus auch Fehler mit Server- bzw. PHP-Version nicht ausgeschlossen werden.
Möchte man diese selbstständig beheben, sind meistens grössere Arbeiten nötig – Diese Zeit hat kaum jemand, schliesslich möchte man verkaufen und Geld verdienen.

Deshalb lohnt sich ein Blick auf PrestaShop 1.7 in jedem Fall, denn die Entwickler haben eine stabile und gute Shopsoftware entwickelt.

PrestaShop 1.7 – Ordnerstruktur

Natürlich möchte man ein eigenes Design, bestenfalls das bisherige übernehmen oder direkt ein Redesign.
Auf den ersten Blick kommen viele an ihre Grenzen – Aber das ist normal, denn das System sowie die Struktur wurden neu überarbeitet.

Die Anpassung ist aber einfacher gemacht als viele denken.

Design:
PrestaShop basiert weiterhin auf Bootstrap, dieses steuert natürlich die Breite einzelner Tabellen im Layout.

Im Ordner „themes/classic/templates“ sind einige Ordner vorhanden, diese sind so aufgebaut, dass je nach Wunsch einzelne Bereiche einen anderen Kopf- und Fussbereich erhalten können.

Als Beispiel: Soll der Kunde im Warenkorb sowie in der Kasse nicht mehr abgelenkt werden, so kann unter „checkout/_partials“ der Kopf- und Fussbereich eingeschränkt werden.
Dadurch soll der Fokus nur noch auf den Kaufabschluss gelegt werden, was durchaus sinnvoll ist.

Also sollten keinesfalls einfach per Hand neue Tabellen unüberlegt im CSS erstellt, sondern zwingend Bootstrap angewendet werden.

PrestaShop Design anpassen

Möchte man das Logo ändern, kann man dies weiterhin via Admin-Panel erledigen.
Farben können aber auch weiterhin über das „theme.css“ bearbeitet werden.

Möchten Sie einzelne Objekte an anderen Orten, so können diese im Admin-Panel unter „Positionen“ als sogenannte Hooks angesetzt werden.
Möchten Sie einzelne Tabellen zum Beispiel in der Breite bearbeiten, öffnen Sie die Templates (beispielsweise Header oder Footer) oder je nach Objekt die dazugehörigen Module.

Zu beachten gilt:
Öffnen Sie den Ordner „themes/classic/modules“ Und nicht „modules“ im Hauptverzeichnis (root).

 

PrestaShop 1.7 Menu bearbeiten

Gehen wir im Beispiel davon aus, man möchte das Hauptmenu für Desktop, also Computer-Ansicht, in der Breite bearbeiten.

Dabei öffnet man direkt das Modul, welches für das Menu zuständig ist.
Dieses ist unter „themes/classic/modules/ps_mainmenu/ps_mainmenu.tpl“ zu finden.

Sehr wichtig: Legen Sie vorher kurz eine Kopie, also ein Backup an, damit Sie immer darauf zurückgreifen können!

Das HTML-Angabe befindet sich unten in der Zeile 36:

<div class=“menu col-lg-12 col-md-7 js-top-menu position-static hidden-sm-down“ id=“_desktop_top_menu“>

Die Angabe „col-lg-12“ ist im Bootstrap hinterlegt mit 100%, also volle Breite.
Möchten Sie das Menu kürzen, damit rechts beispielsweise etwas Platz vorhanden ist, können Sie diese Zahl nach unten rechnen.

 

Weitere Anpassungen im PrestaShop 1.7

Der Grundsatz ist immer derselbe, es muss lediglich nur die Breitenangabe gewählt werden, welche im theme.css (Bootstrap) hinterlegt ist.

Auf dieselbe Weise können wie erwähnt auch die Farben sowie Effekte (hover) angepasst werden.

Möchten Sie weitere Anpassungen vornehmen, öffnen Sie einfach die Module oder die Template-Files dazu.

Auch hier gilt: Immer mit Backups arbeiten, denn gerade wenn viel Code vorhanden ist wie im theme.css, sind Fehler kaum auffindbar, deshalb lohnt sich ein Backup immer!

 

Fazit zum neuen PrestaShop

Die neue Version ist im Vergleich natürlich überarbeitet worden und benötigt einige Zeit, um sich darin den Überblick zu verschaffen.

Allerdings ist es eine stabile und vor allem moderne Shopversion, welche für den alltäglichen Betrieb keine Wünsche offen lässt!
Aber jedes Unternehmen muss natürlich selber die Checkliste erarbeiten, ob PrestaShop 1.7 alle nötigen Funktionen, eventuell auch durch zusätzliche Module mitbringt, um erfolgreich zu arbeiten.

Wir können PrestaShop 1.7 aber definitiv empfehlen.
Es ist einfach aufgebaut und auch ohne Kenntnisse können die Tagesgeschäfte problemlos mit etwas Übung erledigt werden.

Wir wünschen Ihnen viel Erfolg!