Erstellen Sie eine unendliche Schriftrollenliste für Oxid Eshop - Grundlagen

Key Takeaways

• oxid -eShop oder oxidsales ist eine hoch anpassbare und skalierbare E -Commerce -Plattform. Dieses Tutorial bietet eine Schritt-für-Schritt-Anleitung zum Erstellen einer neuen Oxidmodulverlängerung, die das unendliche Scrollen für die Artikelliste implementiert, wodurch die traditionelle Pagination ersetzt wird.
• Der erste Teil des Tutorials deckt die Erstellung einer ordnungsgemäßen Ordnerstruktur für die neue Modulerweiterung ab und arbeitet mit metadata.php zusammen, um einen erforderlichen Controller zu erweitern, die vorhandene Vorlage durch eine neue zu ersetzen und eine neue Modulkonfigurationsoption hinzuzufügen . Es wird auch erläutert, wie Sie mit Back-End-Sprachdateien arbeiten, um einen Anzeignamen und den Text für die Einstellungen des Moduls zu erstellen und mit dem neuen Modulcontroller zu arbeiten.
• Der zweite Teil des Tutorials konzentriert sich auf die Arbeit mit der neuen Vorlage, einschließlich der ordnungsgemäßen Erhöhung der Modul -URL, der Arbeit mit der Oxid -Vorlage -Engine, Hinzufügen von Inhalten für die neue Vorlage und Hinzufügen von JavaScript, um die Ausführung von Infinite Scrolling zu verarbeiten In der Artikelliste und Aktualisierung der Datenbankansichten und Aktivierung des Moduls.
• Das Tutorial setzt eine gewisse Arbeitserfahrung mit Oxid Eshop aus und konzentriert sich auf die Back-End-Implementierung, um eine neue Modulerweiterung zu entwickeln. Der nächste Teil wird in Details zur wesentlichen Front-End-Implementierung eingehen, die aus der Anpassung der Vorlage und dem Hinzufügen von JavaScript zum Verarbeiten von Workflows für das unendliche Scrollen besteht.

Oxid Eshop , offiziell als Oxid Esales bekannt, ist eine leistungsstarke und skalierbare E -Commerce -Standardplattform, die für jedes Segment des Online -Geschäfts optimiert ist. Als Entwickler, der die meisten meiner 9-zu-5-Aufgaben mit Oxid ausgab, stellte ich fest, dass dieses E-Commerce-System extrem einfach anpassen und auszudehnen ist.

Wenn Sie neu in Oxid sind oder nach einer einfachen, aber effektiven Plattform für Ihr eigenes Online -Geschäft suchen, empfehle ich Ihnen, die Serie von Matthew Setter auf Oxid Esales zu lesen, die eine Standardimplementierung entwickelt hat, um loszulegen, um loszulegen mit Oxidsystem.

In diesem zweiteiligen Tutorial werden wir eine neue Oxidmodulverlängerung erstellen, die

unendlich scrolling in die Artikelliste anstelle einer herkömmlichen Pagination implementiert. Während dieses Artikels versuche ich, meine persönlichen Erfahrungen zu teilen, die Ihnen helfen können, Ihren Arbeitsprozess zu beschleunigen, wenn Sie später auf eine Oxidentwicklung stoßen.

Hier ist was Sie erreichen werden.

Der gesamte Quellcode wird am Ende der Serie verfügbar sein.

Die Tutorials behandeln die folgenden Bereiche:

Teil 1:

• Erstellen der richtigen Ordnerstruktur für die Erweiterung der neuen Modul.
• mit metadata.php arbeiten zu:
  
  • einen notwendigen Controller erweitern.
  • Ersetzen Sie die vorhandene Vorlage durch eine neue Vorlage.
  • Fügen Sie eine neue Modulkonfigurationsoption hinzu.
• Wie man mit Back-End-Sprachdateien arbeitet, um einen Anzeignamen zu erstellen und Text für die Einstellungen des Moduls zu helfen.
• mit dem neuen Modulcontroller arbeiten.

Teil 2:

• Mit der neuen Vorlage arbeiten:
  
  • So erhalten Sie die Modul -URL richtig.
  • Zusammenfassung zur Arbeit mit Oxid -Template -Engine.
  • Inhalt für die neue Vorlage hinzufügen.
• JavaScript hinzufügen, um die Ausführung von unendlichem Bildschirm in der Artikelliste zu verarbeiten.
• Aktualisieren der Datenbankansichten und Aktivierung des Moduls.

HINWEIS: Ich gehe davon aus, dass Sie einige Arbeitserfahrungen mit Oxid -Eshop haben (wenn nicht, siehe Matthews Artikel, der oben verlinkt ist). Somit wird es für grundlegende Oxidkonzepte nicht viel Erklärung geben.

Oxidmodulordnerstruktur

Die wichtigste Aufgabe, die Sie zuerst ausführen müssen, ist, eine Standardordnerstruktur zu erstellen.

Bitte gehen Sie zu {your_web_root}/oxid/modules/
Erstellen Sie einen neuen Ordner namens aho_infinitescroll, gefolgt von den nachfolgenden Ordnern/Dateien.

aho_infinitescroll/
|	
|--- controllers/
|		|-- aho_infinite_alist.php 	# A new controller that extends alist.php
|
|--- out/
|	|--admin/
|		|--en/
|			|-- aho_infinitescroll_lang.php 	# Back-end English text.
|		|--de/
|			|-- aho_infinitescroll_lang.php 	# Back-end Deustch text.
|
|	|--css/
|		|--> infinitescroll.css  	# Style for infinite scrolling elements.
|		
|	|--img/
|		|--> ajax-loader.gif     # image indicates the loading status.
|	|--js/
|
|--- translations/
|		|--de/
|			|--> aho_infinitescroll_lang.php  # Front-end Deustch text.     
|		|--en/ 
|			|--> aho_infinitescroll_lang.php  # Front-end English text.
|
|--- views/
|		|-- page/
|			|-- list/
|				|--> aho_infinitescroll_list.tpl  # new template file.
|	
|--- metadata.php  # Define extension name, classes and other infos. 
|--- picture.jpg   # A thumbnail for the module's functionality.

Hinweis:

Die beste Praxis, ein neues Modul zu benennen, besteht darin, den Namen des Anbieters/Entwicklers/der Gruppe und der Funktionalität des Moduls zu kombinieren. Es hilft, den Anbieter und die Funktionalität des neuen Moduls für die Teamzusammenarbeit sofort zu enthüllen.
Somit kann die Formel wie folgt sein:

Lieferantenname Unterstrich Funktionalität

d.h.
Lieferantenname kann entweder durch den Entwicklernamen oder den Gruppennamen ersetzt werden. Es liegt an dir.

Arbeiten mit metadata.php

metadata.php ist für jede Modulentwicklung von wesentlicher Bedeutung. Diese Datei enthält grundlegende Details zum Modul, Klassen, die erweitert werden sollen, Blöcke zu überfahren, Vorlagen ersetzt werden, Einstellungen für Front-End- und Back-End-Seiten usw.

Bitte öffnen Sie die Datei metadata.php und fügen Sie die folgenden Codezeilen hinzu:

<span><span><?php
</span></span><span>
</span><span><span>$sMetadataVersion = '1.0';  # Define version of this file
</span></span><span>
</span><span><span>// An array to store modules' details
</span></span><span><span>$aModule = array
</span></span><span><span>(
</span></span><span>    <span>'id' => 'aho_infinitescroll',
</span></span><span>    <span>'title' => '[AHO] Infinite Scrolling List', 
</span></span><span>    <span>'description' => 'Infinite Scrolling for article list',
</span></span><span>    <span>'thumbnail' => 'picture.jpg',
</span></span><span>    <span>'version' => '1.0.0',
</span></span><span>    <span>'author' => 'Tuan Anh Ho',
</span></span><span>    <span>'url' => '',
</span></span><span>    <span>'email' => 'anhhothai@gmail.com'
</span></span><span><span>);</span></span>

Wir haben gerade grundlegende Informationen für unser neues Modul eingefügt, und alle Elemente sind nach ihren Begriffen selbst beschreibend.
Bitte beachten Sie, dass die ID und der Titel obligatorische Variablen sind. Insbesondere muss der Wert der ID mit dem Ordnernamen des Moduls übereinstimmen.
Vorschaubild ist ein optionales Element, das Ihr Modul visuell beschreibt. Normalerweise bereite ich ein gut aussehendes Miniaturbild vor, weil ich glaube, dass ein Bild mehr als tausend Worte wert ist. Manchmal beabsichtigen Sie, einige Ihrer bevorzugten selbst entwickelten Module über den Oxidmarkt zu verkaufen, und ein besser gestaltetes Miniaturansatz leistet mehr Käufer.
Als nächstes werden wir gleich nach der E -Mail einige weitere Elemente definieren.

aho_infinitescroll/
|	
|--- controllers/
|		|-- aho_infinite_alist.php 	# A new controller that extends alist.php
|
|--- out/
|	|--admin/
|		|--en/
|			|-- aho_infinitescroll_lang.php 	# Back-end English text.
|		|--de/
|			|-- aho_infinitescroll_lang.php 	# Back-end Deustch text.
|
|	|--css/
|		|--> infinitescroll.css  	# Style for infinite scrolling elements.
|		
|	|--img/
|		|--> ajax-loader.gif     # image indicates the loading status.
|	|--js/
|
|--- translations/
|		|--de/
|			|--> aho_infinitescroll_lang.php  # Front-end Deustch text.     
|		|--en/ 
|			|--> aho_infinitescroll_lang.php  # Front-end English text.
|
|--- views/
|		|-- page/
|			|-- list/
|				|--> aho_infinitescroll_list.tpl  # new template file.
|	
|--- metadata.php  # Define extension name, classes and other infos. 
|--- picture.jpg   # A thumbnail for the module's functionality.

• Der Wertverlängerung gibt eine bestimmte Kern-/Controller -Klasse an, von der das neue Modul erweitert wird. In diesem Fall wird es alist.php sein, das sich an/oxid/application/controller/.

befindet

• Die Wertvorlagen sind ein Array, in dem alle registrierten Vorlagen des neuen Moduls gespeichert sind. Es wird empfohlen, dass wir dieselbe Ordnerstruktur der ersetzt werden, um die Zusammenarbeit mit der Teamzusammenstellung zu ersetzen. Bitte beachten Sie, dass beide Elemente und Werte von Vorlagen die Dateinamenweiterung einschließen müssen .tpl

  Hinweis:

  • Die richtige Möglichkeit, eine neue Vorlage zu benennen d.h.
  Wir lassen die neue Vorlagendatei momentan leer und setzen die Datei metadata.php fort. Bitte geben Sie ein Array mit dem Namen "Einstellungen" direkt nach den Elementvorlagen ein:

Die Werteinstellungen sind ein Ort, um alle Konfigurationsoptionen eines neuen Moduls zu registrieren. Gruppe hat immer den Wert mit der ID des Moduls.

<span><span><?php
</span></span><span>
</span><span><span>$sMetadataVersion = '1.0';  # Define version of this file
</span></span><span>
</span><span><span>// An array to store modules' details
</span></span><span><span>$aModule = array
</span></span><span><span>(
</span></span><span>    <span>'id' => 'aho_infinitescroll',
</span></span><span>    <span>'title' => '[AHO] Infinite Scrolling List', 
</span></span><span>    <span>'description' => 'Infinite Scrolling for article list',
</span></span><span>    <span>'thumbnail' => 'picture.jpg',
</span></span><span>    <span>'version' => '1.0.0',
</span></span><span>    <span>'author' => 'Tuan Anh Ho',
</span></span><span>    <span>'url' => '',
</span></span><span>    <span>'email' => 'anhhothai@gmail.com'
</span></span><span><span>);</span></span>

• Wert: Diese neue Einstellung hilft beim Verwalten der Ansichtstyp der Liste. Im Geltungsbereich dieses Tutorials werde ich den Standardwert als

  Zeile

  festlegen und ihn bis zum Ende verwenden.

• Da wir das Modul zum ersten Mal aktivieren, wird diese Einstellung in zwei Tabellen oxconfig

  und
oxFigDisplay
• eingefügt. Oxid fügt das Wertmodul automatisch ein: AHO_Infinitescroll in Spalten

  oxmodul (Tabelle oxconfig) und oxcfgmodul (Tabelle oxconfigdisplay) mit dem Wertmodul: AHO_InfinitesCroll. Dies ist sehr praktisch, da es automatisch passiert. Sie können diesem Online -Dokument der Erweiterungsmetadaten folgen, um mehr über andere mögliche Argumente zu lesen.

  Als nächstes schauen wir uns die Back-End-Übersetzungen an.

Hinzufügen von Back-End-Übersetzungen

Im letzten Abschnitt haben wir die Einstellungen für das neue Modul hinzugefügt. Jetzt ist es Zeit, mit seiner Übersetzung zu arbeiten.

Bitte öffnen Sie die Datei AHO_Infinitescroll/out/admin/en/aho_infinitescroll_lang.phpand Fügen Sie die folgenden Zeilen hinzu.

syntax So addieren Übersetzungen für eine Konfigurationsoption Shop_module _ Setting_Column_Name.

<span>'extend' => array(
</span>        <span>'alist' => 'aho_infinitescroll/controllers/aho_infinitescroll_alist'
</span>    <span>),
</span>    <span>'templates' => array(
</span>        <span>'aho_infinitescroll_list.tpl' 
</span>            <span>=> 'aho_infinitescroll/views/page/list/aho_infinitescroll_list.tpl'
</span>    <span>)</span>

• syntax So addieren Sie den Hilftext für eine Konfigurationsoption Help_shop_module _ Setting_Colum_Name.

• Die obigen Codes -Zeilen führen zu Ausgabe wie in der folgenden Abbildung. Später, wenn Sie das Modul aktivieren, geben Sie bitte die Zeile in das Textfeld ein:

---

Bitte machen Sie dasselbe für die Datei AHO_Infinitescroll/out/admin/de/aho_infinitescroll_lang.php. Weisen Sie den Variablen $ slangnamen mit Value Deustch zu und lassen Sie jemanden, der sich auf Sprache spezialisiert hat

Arbeiten mit dem neuen Controller

arbeiten

Bitte öffnen Sie aho_infinitescroll/Controller/aho_infinite_alist.php und fügen Sie die folgenden Zeilen hinzu:

aho_infinitescroll/
|	
|--- controllers/
|		|-- aho_infinite_alist.php 	# A new controller that extends alist.php
|
|--- out/
|	|--admin/
|		|--en/
|			|-- aho_infinitescroll_lang.php 	# Back-end English text.
|		|--de/
|			|-- aho_infinitescroll_lang.php 	# Back-end Deustch text.
|
|	|--css/
|		|--> infinitescroll.css  	# Style for infinite scrolling elements.
|		
|	|--img/
|		|--> ajax-loader.gif     # image indicates the loading status.
|	|--js/
|
|--- translations/
|		|--de/
|			|--> aho_infinitescroll_lang.php  # Front-end Deustch text.     
|		|--en/ 
|			|--> aho_infinitescroll_lang.php  # Front-end English text.
|
|--- views/
|		|-- page/
|			|-- list/
|				|--> aho_infinitescroll_list.tpl  # new template file.
|	
|--- metadata.php  # Define extension name, classes and other infos. 
|--- picture.jpg   # A thumbnail for the module's functionality.

Dieser neue Controller macht nur ein paar Dinge:

• Ändern Sie den Wert von $ _Sthistemplate in aho_infinitescroll.tpl, den wir in metadata.php definiert haben: Bitte beachten Sie, dass wir hier nur den Vorlagennamen angeben müssen. Daher sollte der Vorlagenname eindeutig sein. Es hilft dem System, die richtige Vorlage schnell zu finden.

• Der Funktionsrender tut nichts anderes, als nur den neuen Vorlagennamen zurückzugeben.

• Die Funktion GetViewTypelist gibt den Wert der Datenspalte SinfiniteCrollListType zurück, die in metadata.php definiert ist. Die Vorlage aho_infinitescroll.tpl verwendet diesen Wert, um festzustellen, welcher Ansichtstyp für die Artikelliste angewendet wird.

• Sie können beachten, dass der Name der erweiterten Klasse aho_infinitescroll_alist_parent ist. Die Formel ist der Modul -Controller -Name _ Parent.

Tipps, um die erforderliche Klasse zu finden, um

zu erweitern

• Sie müssen normalerweise wissen, welche Klassen erweitert werden müssen. Es gibt eine einfache Möglichkeit, herauszufinden, welche Klasse in der aktuellen Ansicht ausgeführt wird. Sie stöbern einfach die Datei /application/views/ /tpl/layout/page.tpl und fügen Sie die folgende Zeile oben in der Datei ein:

<span><span><?php
</span></span><span>
</span><span><span>$sMetadataVersion = '1.0';  # Define version of this file
</span></span><span>
</span><span><span>// An array to store modules' details
</span></span><span><span>$aModule = array
</span></span><span><span>(
</span></span><span>    <span>'id' => 'aho_infinitescroll',
</span></span><span>    <span>'title' => '[AHO] Infinite Scrolling List', 
</span></span><span>    <span>'description' => 'Infinite Scrolling for article list',
</span></span><span>    <span>'thumbnail' => 'picture.jpg',
</span></span><span>    <span>'version' => '1.0.0',
</span></span><span>    <span>'author' => 'Tuan Anh Ho',
</span></span><span>    <span>'url' => '',
</span></span><span>    <span>'email' => 'anhhothai@gmail.com'
</span></span><span><span>);</span></span>

Die obige Zeile hilft auszudrucken, welche Kernklasse in der aktuellen Ansicht verwendet wird. Wenn Sie die Kernklasse erkennen möchten, die AJAX -Anfragen ausführt, benötigen Sie ein wenig mehr Aufwand mit Chromedev -Tools.

Schlussfolgerung

Bisher haben wir die schrittweise Back-End-Implementierung durchlaufen, um eine neue Modulerweiterung zu entwickeln. Im Moment können wir das Modul aktivieren, um zu sehen, was wir im Administration Dashboard haben werden. Wenn Probleme auftreten, können Sie Ihren Kommentar hier hinterlassen. Ich werde mein Bestes geben, um dir zu helfen.

Der nächste Teil wird in Details zur wesentlichen Front-End-Implementierung eingehen, die aus der Anpassung der Vorlage und dem Hinzufügen von JavaScript für den Workflow für das unendliche Scrollen besteht.

häufig gestellte Fragen zum Erstellen einer unendlichen Schriftrollenliste in Oxid Eshop

Was ist der Zweck der Verwendung von unendlicher Schriftrolle in Oxid Eshop? Inhalt stattdessen. Im Kontext von Oxid -ESHOP kann diese Technik verwendet werden, um Produkte kontinuierlich als Benutzer auf die Seite zu zeigen und die Benutzererfahrung zu verbessern, indem sie nahtlose Navigation und Erforschung von Produkten ermöglicht.

Wie verbessert Infinite Scroll die Leistung einer E-Commerce-Website? Anstatt alle Produkte auf einmal zu laden, die die Site verlangsamen können, lädt unendlich scroll eine bestimmte Anzahl von Produkten zunächst und lädt dann mehr, wenn der Benutzer weiter scrollt. Dies verbessert nicht nur die Site -Geschwindigkeit, sondern verbessert auch das Engagement und die Aufbewahrung von Benutzern. Ajax Calls und das Paginationssystem. Sie müssen die Funktionen im Listencontroller und in der Produktlistenvorlage ändern, um die AJAX -Anforderungen zu verarbeiten und die Produktliste zu aktualisieren. Die detaillierten Schritte und Codeausschnitte finden Sie im Artikel. Geeignet für alle Arten von E-Commerce-Websites. Wenn Ihre Website beispielsweise eine Fußzeile mit wichtigen Links hat, kann es den Benutzern schwierig machen, die Fußzeile zu erreichen. Außerdem kann Infinite Scroll für Benutzer, die zu bestimmten Produkten oder Seiten navigieren möchten, manchmal verwirrend sein. Infinite Scroll kann in verschiedenen E-Commerce-Plattformen implementiert werden, die die benutzerdefinierte Codierung unterstützen. Der Implementierungsprozess kann jedoch je nach Architektur und Codierungssprache der Plattform variieren. Es wird empfohlen, sich auf die Dokumentation der jeweiligen Plattform zu verweisen oder Hilfe eines professionellen Entwicklers zu suchen. Richtig kriechen und indexe Inhalte über Ajax geladen. Dies kann jedoch durch die Implementierung einer paginierten Version Ihrer Website für Suchmaschinen zusammen mit der Infinite Scroll-Version für Benutzer gemindert werden. Beliebte Auswahl für E-Commerce-Websites aufgrund seiner Flexibilität, Skalierbarkeit und Robustheit. Es unterstützt eine breite Palette von Datenbanken und ist mit verschiedenen E-Commerce-Plattformen, einschließlich Oxid-ESHOP, kompatibel. Die Auswahl der Programmiersprache sollte jedoch von Ihren spezifischen Anforderungen und Ihren Fachkenntnissen abhängen. Bei der Pagination werden Inhalte in separate Seiten aufgeteilt, während „More“ -Stasten den Benutzern ermöglicht, mehr Inhalte manuell zu laden. Die Wahl zwischen diesen Optionen hängt vom Design Ihrer Website und den Einstellungen Ihrer Benutzer ab.

Wie kann ich das Erscheinungsbild der unendlichen Schriftrolle in Oxid -Eshop anpassen? Sie können die Stile des Ladeindikators, der Produktliste und anderer Elemente so ändern, dass sie dem Design Ihrer Website entsprechen. Kann für bestimmte Seiten in Oxid -ESHop eine unendliche Schriftrolle deaktivieren. Dies kann durchgeführt werden, indem die Bedingungen im List -Controller und in der Produktlistenvorlage geändert werden, um die spezifischen Seiten auszuschließen.

Das obige ist der detaillierte Inhalt vonErstellen Sie eine unendliche Schriftrollenliste für Oxid Eshop - Grundlagen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!