Share
Wenn Sie Ihren Shopify-Shop intuitiver gestalten, können Sie mehr Umsatz erzielen und mehr Artikel pro Kasse kaufen. Kombiniert mit der Anzeige Ihrer Produkte in einer einfachen Liste können Sie das Hinzufügen zum Warenkorb so einfach wie nur einen Klick machen, ohne zur Produktlistenseite navigieren zu müssen.
Diese Änderung kann in einer Raster- oder Listendarstellung ausgeführt werden und erfordert nur wenige Änderungen, um sie zum Laufen zu bringen, und sie ist leicht erweiterbar. Beginnen wir also damit, die Monetarisierung Ihres Shops zu maximieren!
Hier ist ein Beispiel, was Sie mit dieser Änderung erstellen können. Wir haben einen Laden, der Gedenkmünzen verkauft, und der Benutzer kann die Anzahl der Münzen auswählen und in den Warenkorb legen, ohne die Seite zu verlassen.
Dies wird durch einen in JavaScript geschriebenen AJAX-Aufruf erreicht, der eine Anfrage an die Shopify-API sendet. Grundsätzlich kann der Browser das Formular über eine Hintergrundanfrage absenden und den Benutzer auf der Seite halten.
Dazu müssen wir das Shopify-Design ändern. Melden Sie sich bei Ihrem Administrator an und gehen Sie in den Online-Shop und dann die Themes Abschnitt (oder für eine Verknüpfung drücken Sie G W T).
Klicken Sie nun auf die … klicken Sie auf das Thema und wählen Sie Bearbeiten Sie HTML / CSS. Suchen Sie in diesem Abschnitt nach links und klicken Sie auf die Schaltfläche Schnipsel Ordner und fügen Sie einen neuen Ausschnitt hinzu.
Rufen Sie Ihr Snippet an ajaxify-cart und klicken Sie auf Schnipsel erstellen.
Öffnen Sie nun diese Datei, wählen Sie alles aus und kopieren Sie den Inhalt in das ajaxify-cart.liquid Ausschnitt, der gerade erstellt wurde.
Stell sicher, dass du sparen Ihre Änderungen vor dem Beenden. Wenn Sie den Text des Ajaxify-Warenkorbs ändern möchten, können Sie die Zeichenfolgen in dieser Datei ändern, z. B. addToCartBtnLabel. Weitere Informationen zur Konfiguration finden Sie in der Readme-Datei für den Ajaxify-Einkaufswagen.
Klicken Sie nun in Ihrem Layoutordner auf die Datei theme.liquid. Finde das Ende
% include 'ajaxify-cart'%
Dies schließt die ajaxify-cart Das gerade auf allen Seiten hinzugefügte Snippet, damit der Code verfügbar ist, wenn wir ihn im nächsten Schritt aufrufen.
Sie können das einschließen ajaxify-cart und andere Schnipsel auch im Inneren
Stellen Sie sicher, dass Sie Ihre gespeichert haben Theme.liquid Datei, bevor Sie das Fenster verlassen.
Nachdem Sie nun die Basis für den ajax-Warenkorb eingerichtet haben, können wir weitere Modifikationen hinzufügen, um weitere Funktionen der Shopify-API zu nutzen.
Fügen Sie dem Formular ein Mengenfeld hinzu, indem Sie das Thema Produktauflistung ändern. Durchsuchen Sie Ihre Design-Snippet-Dateien nach dem Formular, das Sie in den Warenkorb legen möchten. Sie können es wie folgt ändern:
Speichern Sie nun die Datei und werfen Sie einen Blick in den Browser. Außerdem haben Sie ein Mengenfeld in Ihrem Formular.
Besuchen Sie Ihren Shop und gehen Sie zu einem beliebigen Produkt. Wenn alles nach Plan verläuft, wird die Schaltfläche "In den Warenkorb" mit dem Mengenfeld jetzt in den Warenkorb gelegt, ohne die Seite zu aktualisieren.
Wenn dies nicht funktioniert, überprüfen Sie die vorherigen Schritte und suchen Sie in der Fehlerkonsole der Webentwickler-Tools Ihres Browsers nach Fehlern.
Um Ihre Sammlung in einer Liste anzuzeigen, benötigen wir CSS, um dies zu ermöglichen. Ändern Sie die CSS-Datei Ihres Themas und fügen Sie Folgendes hinzu, um dies zu erreichen.
Hinweis: Denken Sie daran, dass einige Themen möglicherweise anders angezeigt werden als das Thema, das wir im Pazifikraum verwendet haben. Wenn Sie dieses Wissen jedoch an Ihr Thema anpassen möchten, sollten Sie wissen, dass das Grundprinzip das Hinzufügen von a ist Schwimmer: links; mit Breiteneinstellungen kombiniert.
.product-list-item-title Schriftgröße: 16px; Zeilenhöhe: 22px; Marge: 5px 0 0; Schwimmer: links; Breite: 50%; .product-list-item-price float: left; Breite: 10%; margin-top: 5px .product-list-item-details form float: left; Breite: 30%;
Um dies für die Arbeit auf mobilen Geräten und Desktops zu ermöglichen, müssen Sie Medienabfragen wie die folgenden verwenden, um den Float zu löschen:
@media (min-width: 1020px) .product-list-item-title-list Schriftgröße: 16px; Zeilenhöhe: 22px; Marge: 5px 0 0; Schwimmer: links; Breite: 50%; Farbe: # 000 .product-list-item-price-list float: left; Breite: 10%; margin-top: 5px .product-list-item-details-list-form float: left; Breite: 30%; @media only screen und (min-device-width: 320px) und (max-device-width: 480px) und (-webkit-min-device-pixel-ratio: 2) .product-list-item-title -list Schriftgröße: 16px; Zeilenhöhe: 22px; Marge: 20px 0 0; float: none; .product-list-item .product-list-item-price-list float: none; .product-list-item-details-list-Formular float: none; Polsterung links: 90px;
Angenommen, Sie möchten nur die Schaltflächen in den Sammlungen anzeigen, nicht auf Ihrer Startseite. Dies kann leicht durch Hinzufügen einer Bedingung zu Ihrer flüssigen Vorlagendatei erfolgen.
Öffnen Sie Ihre Vorlage und fügen Sie die folgende Bedingung hinzu, an der die Schaltfläche "In den Warenkorb" angezeigt werden soll, z. B. in Ihrem Produktlisten-Layout, an dem die Menge angehängt wurde. Ergänzen Sie die % if collection.title% bedingt wie im folgenden Code:
% if collection.title%% endif%
Sie können beliebige Kriterien angeben, die Sie anstelle von verwenden möchten % if collection.title% wenn Sie lieber nach einem anderen Wert suchen, z. B. ob das Produkt auf Lager ist oder welche Kategorie oder Tags es angewendet hat.
Sie können das CSS Ihres Designs ändern, um die Anzeige des ajax-Warenkorbs zu ändern und an den Inhalt Ihres Herzens anzupassen. Einige nützliche Klassen zum Ändern sind .Kartenzählung und # cart-count a: zuerst.
Um den Wert des Warenkorbs anzugeben, können Sie auch den Link ändern, um den Warenkorb mit den Klassen anzuzeigen #gocart p a, #Wagen, und .Kasse em.
Um die Gesamtzahl der Elemente zu ändern, sehen Sie sich das an .Stückzahl Klasse.
Zusätzlich am Ende des ajaxify-cart.liquid Schnipsel sind die folgenden Farben, die Sie bearbeiten können.
.ajaxified-cart-feedback display: block; Zeilenhöhe: 36px; Schriftgröße: 90%; vertikal ausrichten: Mitte; .ajaxified-cart-feedback.success color: # 3D9970; .ajaxified-cart-feedback.error color: # FF4136; .ajaxified-cart-feedback a border-bottom: 1px solide;
Ändern Sie die Ausrichtung, die Ränder und die Auffüllung so, dass sie zu Ihrem Thema passen, und erhalten Sie die bestmögliche Anzeige für Ihre Endbenutzer.
Vergessen Sie nicht, die mobilen Auflösungen zu überprüfen, um zu sehen, wie der Ajax-Wagen funktioniert. Möglicherweise müssen Sie einige Medienabfragen hinzufügen, damit sie auf allen Anzeigen gut angezeigt werden.
Wie bereits erwähnt, können Sie die folgenden Medienbedingungen verwenden, um dies zu überprüfen:
@media (min-width: 1020px) / * Klassen hier für Breitbildschirm * / @media only screen und (min-device-width: 320px) und (max-device-width: 480px) und (-webkit-) Min-Geräte-Pixel-Verhältnis: 2) / * Klassen hier für mobile Geräte * /
Sie haben jetzt eine ajaxifizierte Einkaufswagenkomponente in Ihrem Shop, was bedeutet, dass der Einkaufsablauf für den Endbenutzer etwas vereinfacht wird. Hoffentlich führt dies zu mehr Conversions. In Kombination mit der Anzeige Ihrer Produkte in einer Liste mit der Mengeneinstellung ist die Wahrscheinlichkeit für eine größere Bestellung etwas gestiegen.
Für Websites, die häufig gekaufte Verbrauchsmaterialien anbieten, und solche, die versuchen, eine Vielzahl von Einkäufen in einer Kasse anzubieten, funktioniert der Ajaxify-Wagen sehr gut.
In der Zukunft können Sie Ihrer Site weitere Ajax-Elemente hinzufügen. In diesem Fall wäre Ihr erster Bezugspunkt die Shopify-API - und die Quelle für den Einkaufswagen (ajaxify-cart.liquid) genauer zu untersuchen, wie die Anrufe getätigt werden.
Ein grundlegendes Verständnis von JavaScript und AJAX wäre dafür erforderlich, aber machen Sie sich keine Sorgen, wenn Sie ein Neuling sind - es ist wirklich sehr grundlegendes Material.
Die gesamte Verarbeitung für einen AJAX-Anruf finden Sie im $ .ajax Weitere Informationen zur Funktionsweise finden Sie auf der jQuery-Website.
Ich hoffe, es gefällt Ihnen, Ihre Geschäfte zu modifizieren und Ihren Umsatz mit diesen neuen Konzepten zu steigern!
Accentsconagua