HTMLJavaScript

Updating von jQuery und Lodash eines Shopify Themes

Wer so manch ein Theme für Shopify genauer analysiert findet unter Umständen heraus das total veraltete JavaScript Librarys genutzt werden. Ein aktualisieren sollte mit einer Anpassung der URL zum Script eigentlich keine große Herrausforderung sein.

Solange wie es keine Breaking Changes gibt, ist das Aktualisieren in den meisten Fällen selbst für Anfänger keine große Schwierigkeit. In diesem Beispiel ist Lodash jedoch nicht offensichtlich verlinkt und das Finden kann sich dann für den ein oder anderen zum Problem herausstellen.

Dieser Beitrag widmet sich dem Shopify "Simple" Theme
image

Gegebenenfalls werde ich mir auch noch einige weitere kostenlose Shopify Themes ansehen und über etwaige Unterschiede berichten.

jQuery bei Shopify hochladen

imageWenn man nicht auf ein CDN setzen mag und die Library selbst zur Verfügung stellen möchte, kann man diese direkt bei Shopify hosten. Als erstes laden wir uns eine aktuelle version von jQuery herunter. Danach öffnen wir den Ordner Assets auf Shopify, klicken auf den Link "Ein neues asset hinzufügen" und laden jQuery dort hoch.

Deprecated .size()

Wer denn seinen Shop noch nicht Live hat, wird auf der Passwort-Seite einen Fehler in der Browserkonsole finden. Das veraltete und entfernte Funktionen kleinere Fehler verursachen könnten war bei einem Versionssprung von 1.11.0 zu 3.5.1 zu erwarten. Der Fehler ist in der Datei theme.js.liquid im Ordner assets zu finden. Im Editor drücken wir einmal CTRL+F und geben im Suchfeld .size() ein. Der erste Treffer sollte es direkt sein. Wir ändern .size() in .length.

Deprecated
if ( $('.storefront-password-form .errors').size() ) {
  $('.password-login-toggle').click();
}
Aktuell
if ( $('.storefront-password-form .errors').length ) {
  $('.password-login-toggle').click();
}
theme.js.liquid
image

Lodash aktualisieren

Von https://lodash.com/ laden wir uns den aktuellen Core build in der gzipped Variante von Lodash runter bzw. kopieren es in die Zwischenablage. In der theme.js.liquid ist dann auch Lodash versteckt. Mit einem Druck auf CTRL+F öffnen wir wieder das Suchfeld, falls es denn nicht schon offen ist, und suchen nach lodash. Auch hier sollte der erste Treffer direkt die gesuchte Code-Passage sein. Wir ersetzen nun den vorhanden Code mit dem aus der Zwischenablage. Damit ist Lodash nun upgedated.

theme.js.liquid
image

Aktuelles jQuery im Template verlinken

Wir öffnen im Ordner Layout die Datei theme.liquid. Dort ändern wir {{ 'jquery-1.11.0.min.js' | asset_url | script_tag }} in <script src="{{ 'jquery-3.5.1.min.js' | asset_url }}"></script> um.

image
Um das ganze noch zu vervollständigen ändern wir auch {{ 'modernizr.min.js' | asset_url | script_tag }} und {{ 'theme.js' | asset_url | script_tag }}.

Mit der Eigenschaft async können wir zumindest das blockieren des renderns durch die theme.js vermeiden.

Der komplette angepasste Code Abschnitt
<script src="{{ 'jquery-3.5.1.min.js' | asset_url }}"></script>
<script src="{{ 'modernizr.min.js' | asset_url }}"></script>
<script src="{{ 'theme.js' | asset_url }}" async></script>