Magento 2 installatie, upgrade en optimalisatie

Ergens halverwege 2020 wordt Magento 1.x niet langer ondersteunt worden met security patches en allerlei updates van de verschillende componenten. Wat dan ?

Na jarenlang Magento 1.x webshops te hebben gebouwd en geoptimaliseerd wordt het tijd om over te gaan op Magento 2 dus. In een vroeg stadium zijn we al bezig geweest om te proberen Magento 2 op te zetten in een test project maar nooit echt heeft dit vlekkeloos en fijn gewerkt, in mijn persoonlijke mening, totdat Magento 2.3.3 kwam. Inmiddels met wat extra security patches is het Magento 2.3.4.

Ik documenteer hier mijn eigen verhaal van een kale Magento 2.3.3 shop en ik zal zo veel mogelijk topics beschrijven die mijn leven makkelijker hebben gemaakt en de problemen die ik tegenkwam bij het overgaan met een Magento 1.x shop naar Magento 2.3.3 en een complete verse installatie van Magento 2.3.3 en een upgrade met een patch naar Magento 2.3.4, en zelfs nu naar 2.3.5-p1 in één moeite door.

Ben je zelf bezig met een Magento 2 store nieuw of upgrade, wellicht zie ik je hier dan regelmatig terug …

Magento 2 installatie

Aangezien ik van de ‘download je pakket zelf’ generatie ben koos ik ervoor om te beginnen met het downloaden van het Magento 2 pakket van de download pagina van Magento zelf.

Maar natuurlijk kan je ook gewoon een verse Magento 2 setup binnen halen door in je ssh shell te tikken:

composer create-project --repository-url=https://repo.magento.com/ magento/project-community-edition <installatie-directory-naam>

De webserver had ik al, dus na het creëren van een stukje ruimte en een MySQL database kon ik de zipfile van Magento 2 uitpakken in de root en de setup draaien via de web installation wizard: https://<je domeinnaam>/setup en dit start de installatie wizzard. Aangezien dit duidelijk omschreven staat op de Magento site zelf, ga ik dit niet inhoudelijk bespreken.

Magento 2 setup via de commandline

php bin/magento setup:install \
--base-url=<je-webshop-url> \
--db-host=localhost \
--db-name=<je-magento2-db-naam> \
--db-user=<je-magento2-db-gebruiker> \
--db-password=<je-magento2-db-gebruiker-wachtwoord> \
--admin-firstname=<admin-voornaam> \
--admin-lastname=<admin-achternaam> \
--admin-email=<admin-email-adres> \
--admin-user=<admin-gebruikersnaam> \
--admin-password=<admin-wachtwoord> \
--language=nl_NL \
--currency=EUR \
--timezone=Europe/Amsterdam \
--use-rewrites=1

Na een verse installatie zit je vrijwel gegarandeerd met een Magento 2 met het Luma thema waar alle CSS van stuk is omdat het statisch signen van elke versie van de webpage enabled is, dit kan je het beste meteen uitzetten door even naar de SQL database te gaan en deze regel toe te voegen.

INSERT INTO `core_config_data` (`config_id`, `scope`, `scope_id`, `path`, `value`, `updated_at`) VALUES ('0', 'default', '0', 'dev/static/sign', '0', CURRENT_TIMESTAMP);

Daarna komen de commando’s die je tot vervelens toe gaat gebruiken:

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy nl_NL en_US -f
php bin/magento cache:clean

Bijna meteen zal Magento klagen over een niet lopende cron-job, deze installeer je door in te tikken:

php bin/magento cron:install

Standaard Themes van Magento 2

Met Magento 2 krijg je 2 standaard templates, namelijk Blank en Luma. Out of the Box is Luma de default template en ondanks het perfect inrichten van je server zal je merken dat Luma enorm traag is en heel erg beroerd reageert. Na 2 dagen gezocht te hebben waarom dit is, heb ik besloten over te gaan op het standaard Blank thema.

Onze Magento 1.x shop https://www.medicinalewietolie.com/ heeft een laadtijd van ongeveer 1 seconde, soms er net wat boven, soms er net wat onder. Met de exact zelfde server configuratie neemt Luma 12 seconden de tijd om een kale frontpage te laden. Het Blank thema is zonder optimalisatie al rond de 4 seconden wat een betere start is voor dit test project.

Test Project

Na het opzetten van de standaard Blank template komt het vormgeven en instellen van de shop.  Natuurlijk willen we een zo Nederlands mogelijke shop, en gelukkig is er al een heel mooie vertaalset te downloaden en installeren via composer. Ik heb gekozen voor de Mageplaza set:

php composer require mageplaza/magento-2-dutch-language-pack:dev-master
php bin/magento setup:static-content:deploy nl_NL
php bin/magento indexer:reindex
php bin/magento cache:flush

Updaten van Magento 2.3.4 naar 2.3.5-p1

(Dit werkt ook direct vanuit 2.3.3 naar 2.3.5-p1 trouwens)

Afijn we zijn een tijdje bezig en er komt leuk nieuws, namelijk Magento 2.3.5-p1 is uit met security updates. Hmm, dat wordt dus updaten en dat kon afentoe met Magento 1.9.x wel eens een gedoe worden.
Gelukkig is dit in Magento 2 allemaal een stukje beter geregeld.
Log in op je SSH omgeving en volg dit stappenplan:

  1. Zet in je composer.json de nieuwe gewenste versie van Magento met dit commando:
    php composer require magento/product-community-edition=2.3.5-p1 --no-update
  2. Als het goed ging kreeg je een melding terug:
    ./composer.json has been updated
  3. Je kan nu beginnen met de update zelf, en misschien is het handig de webshop even in maintenance mode te zetten voordat je begint met het commando:
    php bin/magento maintenance:enabled
  4. Draai nu de update:
    php composer update
    Dit gaat een paar minuutjes duren …
  5. Dan de Magento 2 setup updaten:
    php bin/magento setup:upgrade
  6. Nu moet je even een verse compile doen, en een deploy er achter aan:
    php bin/magento setup:di:compile
    php bin/magento setup:static-content:deploy nl_NL en_US -f
  7. Clean nu even je cache en het zou redelijk vlekkeloos moeten zijn gegaan:
    php bin/magento cache:clean

Super handige GRATIS Magento2 plugins

Mageplaza heeft een mooie set gratis plugins voor Magento2 die ik echt fijn vindt om te gebruiken aangzien ze werk wegnemen van me:

  1. Mageplaza SEO & Sitemap plugin
  2. Mageplaza Delete Orders plugin
  3. Mageplaza NL taalpakket plugin (staat ook iets boven beschreven)
  4. Mconnect Media Canonical urls voor CMS paginas
  5. Hryvinskyi Defer.js verplaats JS naar de footer

Je kan ze eventueel na een verse Magento2 installatie in 1 klap allemaal installeren door deze regel te gebruiken:

php composer require mageplaza/magento-2-seo-extension mageplaza/module-sitemap mageplaza/module-delete-orders mageplaza/magento-2-dutch-language-pack:dev-master hryvinskyi/magento2-deferjs 

En hierna komt het meest favoriete riedeltje aan Magento2 commando’s dus:

php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy nl_NL en_US -f
php bin/magento index:reindex
php bin/magento cache:clean

Een gemakkelijke correcte implementatie van de hreflang tags kan je gratis binnen halen via:

php composer require staempfli/magento2-module-seo

Een ideale manier om je javascripts te verplaatsten naar de footer is het DeferJS script:

php composer require hryvinskyi/magento2-deferjs

CMS toevoegen aan je CMS pagina’s is wat moeilijker geworden sinds de verwijdering van Custom XML Layouts. Er is gelukkig een klein stukje code wat je kan implementeren om dat te fixen.

https://github.com/darshit21/Mconnectmedia_CmsPageCanonicalUrl

Migreren van Magento 1.x naar Magento 2.3.5-p1

De enige juiste volgorde om een migratie te doen is als volgt:

  1. Installeer Magento2
  2. Installeer eventueel je thema van keuze
  3. Installeer je plugins in Magento2 die je in Magento1 ook had en wilt blijven gebruiken
  4. Download de migratie tool
  5. Migreer je settings
  6. Migreer je data

Ik ga er even vanuit dat de eerste 3 stappen al gedaan zijn.

Allereerst moet je weten welke Magento 2.x versie je hebt. Ik heb Magento 2.3.5-p1 maar dit kan je checken door in te tikken:

php bin/magento --version

Bij mij reageert de server dus met: Magento CLI 2.3.5-p1
Dit is namelijk nodig om te weten welke versie van de migratie tool van Magento te moet ophalen.
Gebruik de commandline nu als volgt om deze tool binnen te halen:

php composer require magento/data-migration-tool:<versienummer>

Dus in mijn geval van 2.3.5-p1

php composer require magento/data-migration-tool:2.3.5

Na het kopiëren van je images van de Magento 1 webshop naar de Magento 2 webshop zal je zien dat ze nog niet meteen opgenomen zijn in de frontend, je zult ze opnieuw moeten indexeren en de caches opnieuw laten genereren. Dit kan je doen met behulp van de volgende commando’s:

php bin/magento catalog:image:resize
php bin/magento index:reindex

Hierna zou je je plaatjes na een cache refresh gewoon moeten zien.

Je Magento 2 Webshop optimaliseren

Description onder de productlijst op de categorie pagina

Eén van de kleinigheden waar een standaard Magento 2 template zoals Luma en Blank niet echt rekening mee houden is dat bij een categorie pagina de omschrijving ‘description’ boven de lijst met producten wordt neergezet. Dat is niet handig als je de tekst in je categorie pagina gebruikt als SEO tekst en dus lang maakt met zo’n 400 woorden of meer.

De oplossing is om deze tekst dan ook netjes te plaatsen onder de producten lijst door deze regel toe te voegen aan de file: vendor/<theme-naam>/Magento_Catalog/layout/catalog_category_view.xml , net voor de sluiting van de onderste </body> tag.

<move element="category.description" destination="content" after="category.products.list"/>
Compare ofwel Vergelijk functie compleet uitschakelen

In veel webshops is de compare ofwel vergelijk functie eigenlijk compleet overbodig. Deze is natuurlijk wel uit te schakelen maar de manier waarop, en om dit netjes te doen, is niet helemaal voor de hand liggend.

Wederom kan je eenvoudig genoeg een paar regels toevoegen aan een file  en je bent er, ga naar de aangeduidde files en open deze.
Voeg de volgende regel toe net voor de </body> sluit tag.

In de Layered Navigation
vendor/magento/module-catalog/view/frontend/layout/default.xml

<referenceBlock name="catalog.compare.sidebar" remove="true"/>
In de Product pagina

vendor/magento/<thema-naam>/Magento_Theme/layout/default.xml

<referenceBlock name="catalog.compare.sidebar" remove="true"/> <!-- Remove sidebar -->
<referenceBlock name="catalog.compare.link" remove="true"/> <!-- Remove link in header -->
<referenceBlock name="related.product.addto.compare" remove="true"/> <!-- Related product -->
<referenceBlock name="category.product.addto.compare" remove="true"/> <!-- Category add compare -->
<referenceBlock name="view.addto.compare" remove="true" /> <!-- Product addto compare -->

Updaten van Magento 2.3.x naar 2.4.2

Voorbereiding

Kopieer eerst even de composer.json naar een kopie zodat je niets kwijtraakt.

cp composer.json composer.json.bak

Installeer de composer update plugin

php composer require magento/composer-root-update-plugin=~1.0 --no-update

En daari de volledige update eerst om inlijn te komen met de laatste situatie voor je huidige installatie

php composer update
Dan de echte update !
php composer require magento/product-community-edition=2.4.2 --no-update --interactive-magento-conflicts

en dan natuurlijk de update van het hele systeem

php composer update

Dit gaat eventjes duren … en wellicht krijg je een aantal aanbevelingen dat je plugins te oud zijn, nite meer compatibel zijn of moeten worden ge-update. Dit is meestal niet zo’n probleem om even handmatig te doen.

Sluit dan af met je favoriete setje commando’s:
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deploy nl_NL en_US -f
php bin/magento index:reindex
php bin/magento cache:clean