{"id":7,"date":"2017-01-04T15:36:42","date_gmt":"2017-01-04T14:36:42","guid":{"rendered":"http:\/\/www.b2b-shop-system.de\/blog\/?page_id=7"},"modified":"2018-06-28T15:36:55","modified_gmt":"2018-06-28T13:36:55","slug":"startseite","status":"publish","type":"page","link":"https:\/\/www.b2b-shop-system.de\/blog\/","title":{"rendered":"Startseite"},"content":{"rendered":"<p>Nicht jedes Shop-System ist f\u00fcr jeden Anwendungsfall geeignet. Insbesondere bei Shops die f\u00fcr den Handel zwischen Firmen geplant sind, kann es erheblich Abweichungen zu Systemen geben die f\u00fcr das Endkundengesch\u00e4ft optimiert sind.<br \/>\nDieser Blog will immer wieder sporadisch Themen aufgreifen, die sich aus der Praxis aktuell stellen, einerseits um die Unterschiede und Problematiken zu verdeutlichen andererseits, \u00a0um L\u00f6sungsm\u00f6glichkeiten aufzuzeigen.<\/p>\n<style><\/style><div class=\"wplp_outside wplp_widget_74\" style=\"max-width:100%;\"><span class=\"wpcu_block_title\">Neue Beitr\u00e4ge<\/span><div id=\"wplp_widget_74\" class=\"wplp_widget_default wplp_container vertical swiper wplp-swiper default cols3\" data-theme=\"default\" data-post=\"74\" style=\"\" data-max-elts=\"5\" data-per-page=\"10\"><div class=\"wplp_listposts swiper-wrapper\" id=\"default_74\" style=\"width: 100%;\" ><div class=\"swiper-slide\" style=\"\"><div class=\"insideframe\"><div id=\"wplp_box_top_74_144\" class=\"wpcu-front-box top equalHeightImg\" ><div class=\"wplp-box-item\"><a href=\"https:\/\/www.b2b-shop-system.de\/blog\/2024\/09\/06\/vendure-ein-nextgen-shop-system-aus-wien\/\"  class=\"thumbnail\"><span class=\"img_cropper\" style=\"margin-right:4px;margin-bottom:4px;max-width:100%;\"><img decoding=\"async\" src=\"https:\/\/www.b2b-shop-system.de\/blog\/wp-content\/uploads\/2024\/09\/Firefox_Screenshot_2024-09-06T10-37-15.553Z-300x188.png\" style=\"aspect-ratio:4\/3;\" srcset=\"\" alt=\"Vendure &#8211; ein nextGen Shop-System aus Wien\" class=\"wplp_thumb\" \/><\/span><\/a><a href=\"https:\/\/www.b2b-shop-system.de\/blog\/2024\/09\/06\/vendure-ein-nextgen-shop-system-aus-wien\/\"  class=\"title\">Vendure &#8211; ein nextGen Shop-System aus Wien<\/a><\/div><\/div><div id=\"wplp_box_left_74_144\" class=\"wpcu-front-box left wpcu-custom-position\" ><div class=\"wplp-box-item\"><\/div><\/div><div id=\"wplp_box_right_74_144\" class=\"wpcu-front-box right wpcu-custom-position\" ><div class=\"wplp-box-item\"><\/div><\/div><div id=\"wplp_box_bottom_74_144\" class=\"wpcu-front-box bottom \" ><div class=\"wplp-box-item\"><span class=\"date\">6. September 2024<\/span><span class=\"category\">Allgemein<\/span><span class=\"text\"><span style=\"max-height:2.8em\" class=\"line_limit\">Ich bin seit vielen Jahren als Softwareentwickler im Online-Shop Bereich t\u00e4tig.Ich habe mich jetzt in ein neues Online-Shop-System verliebt.\n\n\n\nSeit vielen Jahren basiert die Technik der bekannten Shop-Systeme auf der Programmiersprache PHP.Dies sowohl f\u00fcr das Backend und das Frontend. Wobei im Frontend gerne auch Javascript in Verbindung mit Serverabfragen (AJAX)  eingesetzt wird. Aber im Grunde genommen ist PHP eine ziemlich veraltete Technik. PHP hat sich zwar in den letzten Jahren (mit PHP 7 und 8) noch einmal deutlich weiter entwickelt, aber das \u00e4ndert nichts an der Architektur einer PHP Anwendung: Die vom Webserver ausgelieferte Seite wird auf dem Server per PHP durch Zugriffe auf die Datenbank zusammengesetzt und an den Client gesendet.Anwendungen mit sehr vielen gleichzeitigen Zugriffen sind nur \u00fcber eine Skalierung der Server vern\u00fcnftig darstellbar. Das hei\u00dft leistungsf\u00e4hige Server und\/oder sehr viele davon.\n\n\n\nNehmen wir mal eine Anwendung, die sehr viele Benutzer hat, die sie gleichzeitig benutzen. Eine solche Anwendung ist z.B. Facebook. Hier wird eine andere Technik benutzt, die viele Vorteile bringt. Facebook hat eine Javascript Framework (REACT) entwickelt, welches ma\u00dfgebliche  Teile der Darstellung auf den Client verlagert und nur noch Datenfragmente vom Server liest. Dies bedeutet f\u00fcr den Server erheblich weniger Belastung und geht auch in der Regel viel schneller.  Insbesondere kann die Seite schon aufgebaut werden, wenn noch nicht alle Daten vorhanden sind. Das ist f\u00fcr den Benutzer erheblich angenehmer, als wenn er einen l\u00e4ngeren Zeitraum auf die komplette Seite warten muss.    \n\n\n\n Nun das hat sich wohl auch Herr Bromley aus Wien gedacht und hat vor einigen Jahren angefangen das Shop-System Vendure zu entwickeln. Es ist ein sogenanntes Headless Shop-System. Das bedeutet, dass es kein vordefiniertes Frontend gibt. Stattdessen sind die API-Calls definiert, die man benutzen kann, um Daten vom Backend abzufragen oder zu ver\u00e4ndern. Das Backend arbeite auf Basis von Node.js, also mit Javascript. Somit hat man die gleiche Programmiersprache sowohl im Browser als auch auf dem Server.\n\n\n\nEs handelt sich um ein Shop-System, dass nicht nur dem aktuellen Stand der Technik entspricht, sondern in vielen Punkten ein Vorreiter f\u00fcr die Technik von morgen ist.Ich sage mal einige Schlagworte: Headless, GraphQL, TypeScript, Verkaufskan\u00e4le, benutzerdefinierte Felder, mehrsprachig, unterschiedliche Steuers\u00e4tze, Lagerverwaltung etc.Die Software selbst ist kostenlos und die Lizenz basiert auf GPL3.\n\n\n\n\n\n\n\nBild 1: Dashboard im Backend\n\n\n\nBild 2: Produkte bearbeiten\n\n\n\nBild 3: Die Shopkategorien hei\u00dfen Collections\n\n\n\nMein Kollege hat einen Demoshop auf Basis von Vendure und next.js erstellt. Hier der Demoshop von ShopPilot \n\n\n\nUnd hier kann man auch die Performance dieser L\u00f6sung direkt sehen. Google Lighthouse zeigt folgendes f\u00fcr eine Produktdetailseite des Shops an.\n\n\n\n\n\n\n\nDie Performance, die Lighthouse misst, ist sehr wichtig f\u00fcr eine Website.  Hier sind einige Gr\u00fcnde, warum diese Messungen wichtig sind:\n\n\n\n\nBenutzererfahrung: Eine schnelle und reibungslose Website sorgt f\u00fcr eine bessere Benutzererfahrung. Langsame Ladezeiten k\u00f6nnen Besucher frustrieren und dazu f\u00fchren, dass sie die Seite verlassen.\n\n\n\nSEO: Google ber\u00fccksichtigt die Ladegeschwindigkeit und andere Performance-Metriken bei der Bewertung von Websites f\u00fcr die Suchergebnisse.&nbsp;Eine bessere Performance kann also zu einer besseren Platzierung in den Suchergebnissen f\u00fchren.\n\n\n\nConversion-Raten: Schnellere Websites haben oft h\u00f6here Conversion-Raten, da Benutzer eher geneigt sind, auf einer gut funktionierenden Seite zu bleiben und Aktionen durchzuf\u00fchren, wie z.B. Eink\u00e4ufe oder Anmeldungen.<\/span><span style=\"margin-left:3px; max-height:2.8em\" class=\"line_limit\"> [...]<\/span><\/span><span class=\"custom_fields\">\n<!-- WPLP Unknown field: Custom_Fields -->\n<\/span><\/div><\/div><\/div><\/div><div class=\"swiper-slide\" style=\"\"><div class=\"insideframe\"><div id=\"wplp_box_top_74_137\" class=\"wpcu-front-box top equalHeightImg\" ><div class=\"wplp-box-item\"><a href=\"https:\/\/www.b2b-shop-system.de\/blog\/2020\/03\/09\/server-migration-und-server-umzug\/\"  class=\"thumbnail\"><span class=\"img_cropper\" style=\"margin-right:4px;margin-bottom:4px;max-width:100%;\"><img decoding=\"async\" src=\"https:\/\/www.b2b-shop-system.de\/blog\/wp-content\/uploads\/2020\/03\/symbol-www-300x300.png\" style=\"aspect-ratio:4\/3;\" srcset=\"\" alt=\"Server-Migration und Server-Umzug\" class=\"wplp_thumb\" \/><\/span><\/a><a href=\"https:\/\/www.b2b-shop-system.de\/blog\/2020\/03\/09\/server-migration-und-server-umzug\/\"  class=\"title\">Server-Migration und Server-Umzug<\/a><\/div><\/div><div id=\"wplp_box_left_74_137\" class=\"wpcu-front-box left wpcu-custom-position\" ><div class=\"wplp-box-item\"><\/div><\/div><div id=\"wplp_box_right_74_137\" class=\"wpcu-front-box right wpcu-custom-position\" ><div class=\"wplp-box-item\"><\/div><\/div><div id=\"wplp_box_bottom_74_137\" class=\"wpcu-front-box bottom \" ><div class=\"wplp-box-item\"><span class=\"date\">9. M\u00e4rz 2020<\/span><span class=\"category\">Allgemein<\/span><span class=\"text\"><span style=\"max-height:2.8em\" class=\"line_limit\">Das ist etwas, was niemand gerne macht. Insbesondere dann, wenn der Server voll produktiv ist. Dann f\u00fchrt jeder Ausfall zu hohen Folgekosten und Unzufriedenheit der Kunden. Hier hei\u00dft es vorab eine Strategie zu entwickeln, diese zu testen und dann umzusetzen. Die Gr\u00fcnde f\u00fcr einen Umzug sind verschieden. Zum Beispiel ist die Leistungsf\u00e4higkeit des alten Servers nicht mehr ausreichend. Oder man m\u00f6chte den Provider wechseln. Beim Serverumzug bekommt man fast immer eine neue IP-Adresse, auch wenn man beim gleichen Provider bleibt. Wenn man den Provider wechselt ist es unumg\u00e4nglich auf eine neue IP zu wechseln.\n\n\n\n\n\n\n\n Umzug einschlie\u00dflich der Domain \n\n\n\nWenn man den Provider wechselt m\u00f6chte man in der Regel auch\ndie Domain zum neuen Provider \u00fcbertragen.\nDer Transfer einer Domain ist aber keine Sache die in kurzer Zeit erfolgen\nkann, es dauert mindestens 24h, wenn nicht sogar mehrere Tage.\nIn dieser Zeit es unbestimmt, welcher Domain-Registrator f\u00fcr die Domain\nzust\u00e4ndig ist. Deshalb sollte man auf jeden Fall den gleichzeitigen Wechsel von\nIP und Registrator vermeiden. Um dies zu erreichen legt man einfach die Domain\nmit den alten IP Daten beim neuen Registrator an. Dann ist es egal von woher\ndie Daten w\u00e4hrend der Umzugsphase gezogen werden.\n\n\n\n\n\n\n\n Neuen Server testen \n\n\n\nJetzt kann man mit dem Umzug auf den neuen Server beginnen.\nEs gibt einige Administrationsoberfl\u00e4chen die einen solchen Umzug recht\nkomfortable unterst\u00fctzen zum Beispiel Plesk. Ist dies nicht der Fall, muss man\nein eigenes Script entwickeln, dass den Umzug der Daten automatisiert.\nEs ist n\u00e4mlich nicht damit getan, die Daten einmalig auf den neuen Server zu\nkopieren. Das ist ein Vorgang den man zun\u00e4chst testen muss und dann beim\ntats\u00e4chlichen Umzug perfekt laufen muss.\n\n\n\nWelche Daten m\u00fcssen migriert werden\n\n\n\n1. Die Daten der Website. Also alles was f\u00fcr die Darstellung\nder Webinhalte notwendig ist. Liegt normalerweise unter \/var\/www.\n\n\n\n2. Die Datenbanken. Hier sollte man aber nicht die\nDatenbankdateien kopieren, sondern den Inhalt der Datenbank als SQL-Datei\ndumpen. Und auf dem neunen Server per SQL einspielen.\n\n\n\n3. Die Mailboxen.\n\n4. Ja nach Anwendung des Servers kann es nat\u00fcrlich auch noch andere Daten\ngeben, die nicht vergessen werden d\u00fcrfen.&nbsp;\n&nbsp;\n\n\n\nNach der ersten Migration, kann man schon mal testen in wie weit der neue Server funktioniert. Aber wie? Die IP der Domain zeigt ja immer noch auf den alten Server. Daf\u00fcr gib es jedoch eine relativ einfache L\u00f6sung. Auf dem lokalen Rechner gibt es eine hosts Datei, mit der man die IP-Adresse zu einer Domain lokal festlegen kann. Dies hat Vorrang vor der normalerweise genutzten DNS Abfrage.\n\n\n\n\nBei Windows ist die Hosts Datei hier zu finden:\nC:\\Windows\\System32\\drivers\\etc\\hosts\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nJetzt k\u00f6nnen wir den neuen Server im Browser aufrufen. Ich habe schon viele Umz\u00fcge gemacht und eigentlich noch nie erlebt, dass alles auf Anhieb funktioniert. Es gibt zwei Hauptbereiche: Softwareinkompatibilit\u00e4t. Auf dem neuen Server ist oft aktueller Basissoftware, wie Datenbank, PHP oder Perl installiert. Dies kann zu Inkompatibilit\u00e4ten f\u00fchren. Die im Quellcode der Anwendungssoftware ausger\u00e4umt werden m\u00fcssen. Fehlende Module. Oft sind zus\u00e4tzliche Module (Grafik, Verschl\u00fcsselung o.a.) installiert worden, die auf dem neuen Server jetzt fehlen und nachinstalliert werden m\u00fcssen. \n\n\n\n\n\n\n\nTime To Live anpassen\n\n\n\n\nBevor man den tats\u00e4chlichen Umzug startet, ist noch eine wichtige Sache zu erledigen.\n\nIm Domain-Record sollte noch die TTL (Time To Live) m\u00f6glichst kurz eingestellt\nwerden. Normalerweise ist die TTL 24h.\nDies sollte auf einige Minuten gesetzt werden.&nbsp;\nDie TTL ist die H\u00e4ufigkeit mit der andere DNS Server f\u00fcr diese Domain\nden Record aktualisieren.\nZu beachten ist, dass die \u00c4nderung der TTL nicht sofort wirksam wird. Da sie\nzuerst noch mit der alten TTL verteilt werden muss. Es kann also bis zu 24\nStunden dauern bis die neue TTL \u00fcberall beachtet wird.\n\n\n\n Jetzt kommt der finale Umzug \n\n\n\nDer Umzug sollte zu einer Zeit geplant werden, wo m\u00f6glichst\nwenig los ist. Also z.B. nachts.\nDie Zeitdauer spielt auch eine Rolle. Deshalb sollte man unn\u00f6tige Dateien\nvorher vom alten Server l\u00f6schen.\nSobald alles kopiert ist, werden die IP-Adressen der Domains umgestellt und in\n5 Minuten ist dann der neue Server aktiv.<\/span><span style=\"margin-left:3px; max-height:2.8em\" class=\"line_limit\"> [...]<\/span><\/span><span class=\"custom_fields\">\n<!-- WPLP Unknown field: Custom_Fields -->\n<\/span><\/div><\/div><\/div><\/div><div class=\"swiper-slide\" style=\"\"><div class=\"insideframe\"><div id=\"wplp_box_top_74_121\" class=\"wpcu-front-box top equalHeightImg\" ><div class=\"wplp-box-item\"><a href=\"https:\/\/www.b2b-shop-system.de\/blog\/2019\/04\/01\/4-programmiersprachen-fuer-e-commerce-js-php-perl-python\/\"  class=\"thumbnail\"><span class=\"img_cropper\" style=\"margin-right:4px;margin-bottom:4px;max-width:100%;\"><img decoding=\"async\" src=\"https:\/\/www.b2b-shop-system.de\/blog\/wp-content\/uploads\/2019\/03\/py-300x215.png\" style=\"aspect-ratio:4\/3;\" srcset=\"\" alt=\"4 Programmiersprachen f\u00fcr E-Commerce Shopsysteme (JS, PHP, Perl, Python)\" class=\"wplp_thumb\" \/><\/span><\/a><a href=\"https:\/\/www.b2b-shop-system.de\/blog\/2019\/04\/01\/4-programmiersprachen-fuer-e-commerce-js-php-perl-python\/\"  class=\"title\">4 Programmiersprachen f\u00fcr E-Commerce Shopsysteme (JS, PHP, Perl, Python)<\/a><\/div><\/div><div id=\"wplp_box_left_74_121\" class=\"wpcu-front-box left wpcu-custom-position\" ><div class=\"wplp-box-item\"><\/div><\/div><div id=\"wplp_box_right_74_121\" class=\"wpcu-front-box right wpcu-custom-position\" ><div class=\"wplp-box-item\"><\/div><\/div><div id=\"wplp_box_bottom_74_121\" class=\"wpcu-front-box bottom \" ><div class=\"wplp-box-item\"><span class=\"date\">1. April 2019<\/span><span class=\"category\">Allgemein<\/span><span class=\"text\"><span style=\"max-height:2.8em\" class=\"line_limit\">Welche Programmiersprachen gibt es, um Onlineshop-Seiten dynamisch auf dem  auf dem Webserver zu erstellen.\nMich hat einfach mal interessiert, was sich in den letzten Jahren getan hat und was die Unterschiede sind. Dabei kann ich nat\u00fcrlich keinen kompletten \u00dcberblick geben, dazu ist die Angelegenheit zu komplex. Ich greife deshalb nur einige Punkte heraus, die mich als Programmierer besonders interessieren.\nDas w\u00e4re insbesondere der Programmierstil der jeweiligen Sprache, die Unterst\u00fctzung f\u00fcr den Programmierer, die Performance etc.\nZun\u00e4chst einmal habe ich in der jeweiligen Sprache einige Zeilen Code geschrieben, der im wesentlichen das gleiche macht. In einer Schleife werden einige arithmetisch Operationen durch gef\u00fchrt und ein Wert in einem Assoziativen Array gespeichert und wieder ausgelesen.\nEin Assoziatives Array ist ein wichtiges Element, wenn man mit Daten arbeitet. Denn es erm\u00f6glich die Verkn\u00fcpfung zweier Inhalte. Das Ganze ist im Grunde ohne Sinn. Es soll zeigen, was die Unterschied der L\u00f6sung in den verschiedenen Sprachen ist und wie es mit der Performance aussieht. \nErstaunlich ist die \u00c4hnlichkeit des Codes. Insbesondere von Python, Perl und PHP. Variablen werden bei Perl und PHP mit dem Dollar Pr\u00e4fix gekennzeichnet.\nBei Python und JavaScript ist das nicht notwendig. Hier sind Variablen immer Objekte, die f\u00fcr alle m\u00f6glichen Typen stehen k\u00f6nnen.\nPython\n\nPHP\n\nPerl\n\nJavascript\n\nAuswertung\nIn der Schleife werden 5 Millionen Operationen ausgef\u00fchrt.\n\n\n\n\nPython\nPHP\nPerl\nJavaScript\n\n\nOhne assoziativem Array\n5.48\n3\n2\n1.25\n\n\nMit assoziativem Array\n9.16\n4\n9\n12.2\n\n\nBeispiel\nLFS\n Oxid-eSales \nShopPilot\nunbekannt\n\n\n\nDie Unterschiede in der Performance sind nicht allzu gro\u00df. \u00dcberraschend ist, dass PHP den schnellsten Zugriff auf die Werte im Assoziativen Array hat. Python scheint durchgehend etwas langsamer zu sein. Perl im Mittelfeld und JavaScript bei arithmetischen Operationen schnellster. Die wichtigen Faktoren wie Testbarkeit (Debugging), Schnittstellen, Bibliotheken und Verbreitung habe ich hier gar nicht testen k\u00f6nnen.  \nF\u00fcr neue Projekte w\u00fcrde ich wahrscheinlich Python oder JavaScript w\u00e4hlen, weil sie beide ein eingebaute Objektorientierung haben.<\/span><span style=\"margin-left:3px; max-height:2.8em\" class=\"line_limit\"> [...]<\/span><\/span><span class=\"custom_fields\">\n<!-- WPLP Unknown field: Custom_Fields -->\n<\/span><\/div><\/div><\/div><\/div><div class=\"swiper-slide\" style=\"\"><div class=\"insideframe\"><div id=\"wplp_box_top_74_109\" class=\"wpcu-front-box top equalHeightImg\" ><div class=\"wplp-box-item\"><a href=\"https:\/\/www.b2b-shop-system.de\/blog\/2019\/01\/04\/bootstrap-3-vs-bootstrap-4\/\"  class=\"thumbnail\"><span class=\"img_cropper\" style=\"margin-right:4px;margin-bottom:4px;max-width:100%;\"><img decoding=\"async\" src=\"https:\/\/www.b2b-shop-system.de\/blog\/wp-content\/uploads\/2019\/01\/bootstrap.jpg\" style=\"aspect-ratio:4\/3;\" srcset=\"\" alt=\"Bootstrap 3 vs Bootstrap 4\" class=\"wplp_thumb\" \/><\/span><\/a><a href=\"https:\/\/www.b2b-shop-system.de\/blog\/2019\/01\/04\/bootstrap-3-vs-bootstrap-4\/\"  class=\"title\">Bootstrap 3 vs Bootstrap 4<\/a><\/div><\/div><div id=\"wplp_box_left_74_109\" class=\"wpcu-front-box left wpcu-custom-position\" ><div class=\"wplp-box-item\"><\/div><\/div><div id=\"wplp_box_right_74_109\" class=\"wpcu-front-box right wpcu-custom-position\" ><div class=\"wplp-box-item\"><\/div><\/div><div id=\"wplp_box_bottom_74_109\" class=\"wpcu-front-box bottom \" ><div class=\"wplp-box-item\"><span class=\"date\">4. Januar 2019<\/span><span class=\"category\">Allgemein<\/span><span class=\"text\"><span style=\"max-height:2.8em\" class=\"line_limit\">Seit mehr als einem Jahr ist jetzt Bootstrap 4 ver\u00f6ffentlicht. Lohnt sich der Umstieg, werden sich viele fragen. Welche Vorteile gibt es in der Version 4 und wieviel Aufwand ist mit einer Umstellung verbunden.\nDie wesentlichste \u00c4nderung ist die Umstellung auf Flex\nFlex ist eine Display-Typ den alle Modernen Browser mittlerweile beherrschen.\nNeben display:block oder display:inline gibt es jetzt auch display:flex.\nDie Klassen container und container-fluid gibt es auch in Bootstrap 3. Der Unterschied jedoch ist , dass sie jetzt in flex dargestellt werden und an alle Kind-Elemente vererbt wird. Flex erleichtert oder vereinfacht an vielen Stellen die gew\u00fcnschte Darstellung.\nEs funktioniert nichts mehr\nBindet man jetzt blau\u00e4ugig die Bootstrap 4 Dateien in eine bestehende Bootstrap 3 Website ein, ist man doch erstaunt, dass die Seite nicht mehr wiederzuerkennen ist und das nicht im positiven Sinne.\nGeht man dann step f\u00fcr step auf die Suche, welchen Klassen es jetzt nicht mehr gibt oder anders hei\u00dfen, merkt man schnell, dass es eine ganze Menge sind. Manchmal verstehe ich auch die Logik, warum der Name einer Klasse ge\u00e4ndert wurde \u00fcberhaupt nicht. So wird z.B. aus der Klasse img-responsive, die Bootstrap 3 zur responsiven Gr\u00f6\u00dfen Anpassung von Bilder gut\u00a0 Dienste geleistet hat, jetzt img-fluid.\nSo gibt es auch keinen btn-default mehr, der hei\u00dft jetzt btn-secondary. Das Carousel und der Pager funktioniert nicht mehr etc.\nDas Panel gibt es nicht mehr, ein \u00e4hnliches Element hei\u00dft jetzt Card. Es sind leider fast \u00fcberall Anpassungen notwendig.\nWie Flexbox arbeitet\nDie Nutzung von Flex bietet eine Vielzahl von neuen M\u00f6glichkeiten. Eigentlich ist es damit sogar m\u00f6glich das komplette Grid-Design mit\u00a0 Row und Column abzul\u00f6sen.\u00a0 Dennoch ist das bekannte Grid mit seinen 12 Spalten in leicht abgewandelter Form erhalten geblieben. Nachfolgend ein Beispiel mit drei gleich gro\u00dfen Spalten. Bei der kleinste Breite des Displays braucht man nun nicht mehr die Gr\u00f6\u00dfe anzugeben. Deshalb steht satt col-xs nur col dort. Das p-2 (oder p-*) ist auch etwas Neues. Es bewirkt ein Padding der Stufe 2. Ebenso gibt es das auch f\u00fcr Margin.\n&lt;div class=\"row  bg-secondary\"&gt;\r\n\t&lt;div class=\"p-2 col\" style=\"background:yellow\"&gt;col 1&lt;\/div&gt;\r\n\t&lt;div class=\"p-2 col\" style=\"background:orange\"&gt;col 2&lt;\/div&gt;\r\n\t&lt;div class=\"p-2 col\" style=\"background:cyan\"&gt;col 3&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n\r\nIm zweiten Beispiel f\u00e4llt vielleicht auf, das bei den Spalten gar keine Breitenangaben stehen. Wenn die Breite nicht angegeben ist, wird sie automatisch aus der zur Verf\u00fcgung stehenden Breite berechnet und auf die Spalten aufgeteilt. Bei der mittleren Spalte ist jetzt die Breite 6, womit Spalte 1 und Spalte 3 jeweils die Breite 3\u00a0 erh\u00e4lt.\r\n\r\n&lt;div class=\"row bg-secondary\"&gt;\r\n\t&lt;div class=\"p-2 col\" style=\"background:yellow\"&gt;col 1&lt;\/div&gt;\r\n\t&lt;div class=\"p-2 col-6\" style=\"background:orange\"&gt;col 2&lt;\/div&gt;\r\n\t&lt;div class=\"p-2 col\" style=\"background:cyan\"&gt;col 3&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n\r\n\r\nIm dritten Beispiel nutzen wir Flex, um das gleiche Ergebnis zu erzielen. Das margin-left\/right wird hier benutzt, weil die  Klasse row dies automatisch hinzuf\u00fcgt und wir die gleiche Breite erhalten wollen. flexy-grow bewirkt, dass die mittlere Splate so breit wie m\u00f6glich wird.\r\n\r\n&lt;div class=\"d-flex bg-secondary\" style=\"margin-left:-15px;margin-right:-15px;\"&gt;\r\n\t&lt;div class=\"p-2 bg-info\" style=\"width:25%\"&gt;col 1&lt;\/div&gt;\r\n\t&lt;div class=\"p-2 bg-warning flex-grow-1\"&gt;col 2&lt;\/div&gt;\r\n\t&lt;div class=\"p-2 bg-primary\" style=\"width:25%\"&gt;col 3&lt;\/div&gt;\r\n&lt;\/div&gt; \r\n\r\n\r\n\r\n \r\n\n(wird fortgesetzt)<\/span><span style=\"margin-left:3px; max-height:2.8em\" class=\"line_limit\"> [...]<\/span><\/span><span class=\"custom_fields\">\n<!-- WPLP Unknown field: Custom_Fields -->\n<\/span><\/div><\/div><\/div><\/div><div class=\"swiper-slide\" style=\"\"><div class=\"insideframe\"><div id=\"wplp_box_top_74_92\" class=\"wpcu-front-box top equalHeightImg\" ><div class=\"wplp-box-item\"><a href=\"https:\/\/www.b2b-shop-system.de\/blog\/2018\/07\/18\/b2b-shopsysteme-der-schnelle-schlaegt-den-langsamen\/\"  class=\"thumbnail\"><span class=\"img_cropper\" style=\"margin-right:4px;margin-bottom:4px;max-width:100%;\"><img decoding=\"async\" src=\"https:\/\/www.b2b-shop-system.de\/blog\/wp-content\/uploads\/2018\/07\/simple-server-300x88.png\" style=\"aspect-ratio:4\/3;\" srcset=\"\" alt=\"B2B Shopsysteme: Der Schnelle schl\u00e4gt den Langsamen\" class=\"wplp_thumb\" \/><\/span><\/a><a href=\"https:\/\/www.b2b-shop-system.de\/blog\/2018\/07\/18\/b2b-shopsysteme-der-schnelle-schlaegt-den-langsamen\/\"  class=\"title\">B2B Shopsysteme: Der Schnelle schl\u00e4gt den Langsamen<\/a><\/div><\/div><div id=\"wplp_box_left_74_92\" class=\"wpcu-front-box left wpcu-custom-position\" ><div class=\"wplp-box-item\"><\/div><\/div><div id=\"wplp_box_right_74_92\" class=\"wpcu-front-box right wpcu-custom-position\" ><div class=\"wplp-box-item\"><\/div><\/div><div id=\"wplp_box_bottom_74_92\" class=\"wpcu-front-box bottom \" ><div class=\"wplp-box-item\"><span class=\"date\">18. Juli 2018<\/span><span class=\"category\">Allgemein<\/span><span class=\"text\"><span style=\"max-height:2.8em\" class=\"line_limit\">Es sei vorweggesagt, das typische B2B-Shopsystem gibt es nicht. Jede Branche und zum Teil jede Firma hat in weiten Teilen andere Anforderungen. Das h\u00e4ngt einfach damit zusammen, dass es sich um gewachsene Firmen handelt, die ihr Gesch\u00e4ft schon viele Jahre erfolgreich betreiben und die \u00fcber eine Infrastruktur verf\u00fcgen, die dieses erm\u00f6glicht und den Betrieb am Laufen h\u00e4lt.\nDeshalb ist es abwegig ein Shopsystem einzusetzen, das \u00fcberhaupt nicht in diese Infrastruktur passt.\nDer Anbieter einer Shopl\u00f6sung muss zusammen mit dem Kunden die wirklichen Anforderungen herausarbeiten und umsetzen. Nach meiner Erfahrung wissen die Kunden oft sehr genau, was sie ben\u00f6tigen.\nDer wesentlichste Unterschied zum Endkundenshop ist die Optimierung auf Effizienz. &#8222;Time is money&#8220;, wie man so sch\u00f6n sagt. Hier trifft es zu 100% zu. Die Kunden in einem B2B Shop wollen sich nicht durch Shopping auf dem h\u00e4uslichen Sofa die Zeit vertreiben, sondern sind Angestellte von Kundenunternehmen deren Arbeitszeit bezahlt wird. Das bedeutet desto schneller und unkomplizierter der Bestellvorgang ausgef\u00fchrt werden kann, desto besser.\nWas bedeutet das f\u00fcr die Anforderungen an den Shop. Ich m\u00f6chte mal einige Punkte aufz\u00e4hlen, wobei die Liste sicher nicht vollst\u00e4ndig ist.\nSchneller Seitenaufbau\nDer Shop muss schnell im Seitenaufbau sein. Auch zu Tageszeiten, wo viele Besucher gleichzeitig im Shop sind. Grundvoraussetzung ist ein hinreichend schneller Server. Wichtig ist das die Leistungsf\u00e4higkeit nicht von Dritten negativ beeinflusst werden kann. Deshalb verbieten sich sog. Shared Hosting Systeme. Diese zeichnen sich dadurch aus, dass mehrere Kunden (manchmal Hunderte) einen Server teilen.\nOft reichen heutzutage schon sog. virtuelle Server, um eine ausreichende und stabile Leistung zu haben. Ich w\u00fcrde sogar virtuelle Server in der Cloud einem sog. dedicated Server (also einer eignen Hardware) \u00a0vorziehen. Denn diese Virtuellen Server haben noch eine wichtig zus\u00e4tzliche Eigenschaft. Die Leistung ist skalierbar. Man kann jederzeit Ressourcen hinzu buchen, z.B. mit einer einfachen Konfiguration starten und sp\u00e4ter bei Bedarf erweitern oder auch wieder reduzieren. Dies ist bei geeigneten Anbietern innerhalb weniger Stunden ohne Betriebsunterbrechung m\u00f6glich.\n\u00dcberfl\u00fcssiges streichen\nUm einen fl\u00fcssigen Seitenaufbau zu haben ist aber noch etwas anderes wichtig. Der Shop darf nicht mit Funktionen \u00fcberladen sein. Auf jeder Seite Crossselling-Artikel , Upselling-Artikel oder Angebote zu pr\u00e4sentieren verlangsamt nicht nur den Shop sondern st\u00f6rt auch letztendlich den Benutzer, den er wei\u00df zumeist sehr genau welche Artikel er kaufen will.\nGro\u00dfe Warenk\u00f6rbe handeln\nNicht selten haben Nutzer von B2B-Shops sehr gro\u00dfe Warenk\u00f6rbe. Da k\u00f6nnen schon mal 100 oder mehr Bestellpositionen im Warenkorb sein. Dies ist f\u00fcr einige Shopsysteme ein Problem, dass sich vor allem auf die Geschwindigkeit des Seitenaufbaus auswirkt. Mit zunehmender Anzahl der Warenkorbpositionen wird der Seitenaufbau immer langsamer. Das kann sogar so weit gehen, dass der Shop nicht mehr bedienbar ist.\nWarenkorb effizient bef\u00fcllen\nW\u00e4hrend man in einem Shop f\u00fcr Bekleidung die gew\u00fcnschte Gr\u00f6\u00dfe und die gew\u00fcnschte Farbe durch z.B. Pulldown-Buttons ausw\u00e4hlt und dann ein oder zwei Artikel in den Warenkorb legt, ist diese M\u00f6glichkeit f\u00fcr einen B2B-Shop f\u00fcr Bekleidung viel zu umst\u00e4ndlich. Hier m\u00f6chte der Kunde schnell mehrere Gr\u00f6\u00dfen bestellen k\u00f6nnen und diese zusammen in den Warenkorb legen.\n&nbsp;\nWarenkorb per Direkteingabe f\u00fcllen\nDas F\u00fcllen des Warenkorbs\u00a0geht noch schneller, wenn man die Artikel gar nicht mehr im Shop suchen muss. Man hat hierzu eine Eingabemaske in der die Artikelnummer und die Anzahl eingegeben werden kann, die Direkteingabe.\nWarenkorb per\u00a0Import einer Bestellliste\u00a0f\u00fcllen\nDies ist die effektivste Methode. Der Kunde l\u00e4sst sich \u00fcber seine Warenwirtschaft eine Liste der nachzubestellenden Artikel als CSV-Datei erstellen. Diese Liste\u00a0f\u00fchrt\u00a0\u00a0in jeder Zeile eine Artikelnummer und die gew\u00fcnschte Anzahl auf.\u00a0Diese Datei wird in den Shop hochgeladen und \u00fcberpr\u00fcft.\u00a0 Sollte\u00a0ein Bestellung einzelner Artikel nicht m\u00f6glich sein (z.B. falsche Artikelnummer, kein hinreichender Lagerbestand), \u00a0wird dies als Fehler ausgewiesen.\nSchnelles Checkout\nW\u00e4hrend man im B2C Shop einen mehrstufigen Bestellvorgang hat, um es f\u00fcr den Kunden m\u00f6glichst \u00fcbersichtlich zu gestalten und ihn zu leiten, ist dies beim B2B-Shop eher kontraproduktiv.\u00a0Beim B2B Shop ist es wichtig, dass das Checkout\u00a0\u00a0schnell geht.\u00a0 Nach dem Warenkorb sollte es deshalb nur eine Seite geben auf der der Kunde die Bestellung abschlie\u00dfen kann. Hier kann der Kunde noch eine abweichende Lieferanschrift eintragen oder aus seinen hinterlegten Lieferanschriften eine ausw\u00e4hlen.\n&nbsp;\n&nbsp;<\/span><span style=\"margin-left:3px; max-height:2.8em\" class=\"line_limit\"> [...]<\/span><\/span><span class=\"custom_fields\">\n<!-- WPLP Unknown field: Custom_Fields -->\n<\/span><\/div><\/div><\/div><\/div><\/div><div class=\"swiper-button-next\"><\/div><div class=\"swiper-button-prev\"><\/div><div class=\"swiper-pagination\"><\/div><\/div><\/div>\n<p><b><\/b><i><\/i><u><\/u><span style=\"text-decoration: line-through;\"><\/span><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nicht jedes Shop-System ist f\u00fcr jeden Anwendungsfall geeignet. Insbesondere bei Shops die f\u00fcr den Handel zwischen Firmen geplant sind, kann<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":3,"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":75,"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/pages\/7\/revisions\/75"}],"wp:attachment":[{"href":"https:\/\/www.b2b-shop-system.de\/blog\/wp-json\/wp\/v2\/media?parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}