Inhaltsverzeichnis
Einführung
In der sich ständig weiterentwickelnden Welt des E-Commerce ist es wichtig, zu verstehen, wie man Daten effizient verwaltet und anzeigt. Magento 2.4, eine robuste und flexible E-Commerce-Plattform, ermöglicht eine umfangreiche Anpassung, und eine Möglichkeit, Ihre Benutzeroberfläche zu verbessern, besteht darin, KnockoutJS für dynamisches Datenbinding zu verwenden. In diesem Blogbeitrag erfahren Sie, wie Sie benutzerdefinierte Tabellendaten unter Verwendung von KnockoutJS in Magento 2.4 anzeigen können. Am Ende dieses Beitrags sind Sie mit dem Wissen ausgestattet, um ein dynamisches Dropdown-Menü zu erstellen, das Daten filtert und basierend auf der Benutzerwahl anzeigt.
Verständnis des Datenmanagements in Magento
Das Datenmanagement in Magento umfasst die Verwendung von Modellen, Ressourcenmodellen, Sammlungen und Blöcken, um Daten zu handhaben und anzuzeigen. Hier integrieren wir diese Elemente mit KnockoutJS, um einen nahtlosen Datenbindungsprozess zu ermöglichen.
Erstellen einer benutzerdefinierten Tabelle
Zunächst benötigen Sie eine benutzerdefinierte Tabelle, um die Daten zu speichern, die Sie anzeigen möchten. Für dieses Beispiel nehmen wir an, dass unsere Tabelle die folgenden Felder enthält: entity_id, code, title, description und image_path. Diese Tabelle kann mithilfe eines Installationskripts in Ihrem benutzerdefinierten Modul erstellt werden.
Definition Ihres Modells und Ressourcenmodells
Der nächste Schritt besteht darin, ein Modell und sein entsprechendes Ressourcenmodell für Ihre benutzerdefinierte Tabelle zu definieren.
// app/code/Vendor/Module/Model/CustomTable.php
namespace Vendor\Module\Model;
use Magento\Framework\Model\AbstractModel;
class CustomTable extends AbstractModel
{
protected function _construct()
{
$this->_init(\Vendor\Module\Model\ResourceModel\CustomTable::class);
}
}
// app/code/Vendor/Module/Model/ResourceModel/CustomTable.php
namespace Vendor\Module\Model\ResourceModel;
use Magento\Framework\Model\ResourceModel\Db\AbstractDb;
class CustomTable extends AbstractDb
{
protected function _construct()
{
$this->_init('custom_table', 'entity_id');
}
}Erstellen der Sammlungsklasse
Eine Sammlungsklasse ermöglicht es Ihnen, mehrere Datensätze aus Ihrer benutzerdefinierten Tabelle abzurufen.
// app/code/Vendor/Module/Model/ResourceModel/CustomTable/Collection.php
namespace Vendor\Module\Model\ResourceModel\CustomTable;
use Magento\Framework\Model\ResourceModel\Db\Collection\AbstractCollection;
use Vendor\Module\Model\CustomTable as Model;
use Vendor\Module\Model\ResourceModel\CustomTable as ResourceModel;
class Collection extends AbstractCollection
{
protected function _construct()
{
$this->_init(Model::class, ResourceModel::class);
}
}Erstellen des Blocks
Blöcke in Magento dienen als Verbindung zwischen Daten und Vorlagen. Erstellen Sie einen Block, um Daten aus der benutzerdefinierten Tabelle abzurufen und an die Vorlage zu übergeben.
// app/code/Vendor/Module/Block/Custom.php
namespace Vendor\Module\Block;
use Magento\Framework\View\Element\Template;
use Vendor\Module\Model\ResourceModel\CustomTable\CollectionFactory;
class Custom extends Template
{
protected $collectionFactory;
public function __construct(
Template\Context $context,
CollectionFactory $collectionFactory,
array $data = []
) {
$this->collectionFactory = $collectionFactory;
parent::__construct($context, $data);
}
public function getCustomData()
{
$collection = $this->collectionFactory->create();
return $collection->getItems();
}
}Erstellen der Vorlage
Erstellen Sie nun eine Vorlage, um das Dropdown und die erforderlichen Daten anzuzeigen.
<!-- app/code/Vendor/Module/view/frontend/templates/custom.phtml -->
<div id="custom-dropdown" data-bind="with: customTableData">
<select data-bind="options: options, value: selectedOption, optionsText: 'title'"></select>
<div data-bind="foreach: filteredData">
<p data-bind="text: title"></p>
<p data-bind="text: description"></p>
<img data-bind="attr: { src: image_path }" alt="" />
</div>
</div>Erstellen des ViewModel mit KnockoutJS
Für das Datenbinding und UI-Updates erstellen Sie ein ViewModel.
// app/code/Vendor/Module/view/frontend/web/js/view/custom-table-data.js
define(['uiComponent', 'ko'], function(Component, ko) {
return Component.extend({
defaults: {
template: 'Vendor_Module/custom-component'
},
customTableData: ko.observableArray([]),
selectedOption: ko.observable(),
initialize: function() {
this._super();
this.selectedOption.subscribe(this.filterData, this);
this.getCustomData();
},
getCustomData: function() {
// Ihre benutzerdefinierten Daten über AJAX oder REST-API abrufen
var self = this;
fetch('/path/to/your/api')
.then(response => response.json())
.then(data => self.customTableData(data));
},
filterData: function() {
var selected = this.selectedOption();
var filtered = this.customTableData().filter(function(item) {
return item.code === selected;
});
this.customTableData(filtered);
}
});
});Aktualisierung des Layout XML
Um die KnockoutJS-Komponente in Ihr Layout einzubeziehen, aktualisieren Sie das Layout-XML.
<!-- app/code/Vendor/Module/view/frontend/layout/default.xml -->
<referenceContainer name="content">
<block class="Vendor\Module\Block\Custom" name="custom_block" template="Vendor_Module::custom.phtml">
<arguments>
<argument name="jsLayout" xsi:type="array">
<item name="components" xsi:type="array">
<item name="customComponent" xsi:type="array">
<item name="component" xsi:type="string">Vendor_Module/js/view/custom-table-data</item>
</item>
</item>
</argument>
</arguments>
</block>
</referenceContainer>Durchführen eines Setup-Upgrades
Stellen Sie abschließend sicher, dass Sie die erforderlichen Befehle ausführen, um Ihr Modul zu installieren und die Datenbank zu aktualisieren.
php bin/magento setup:upgrade
php bin/magento setup:di:compile
php bin/magento setup:static-content:deployFazit
Die Integration von KnockoutJS mit Magento 2.4 ermöglicht dynamische und interaktive Benutzererfahrungen. Indem Sie diesen Schritten folgen, können Sie eine benutzerdefinierte Tabelle erstellen, Daten mit KnockoutJS anzeigen und sicherstellen, dass Ihre E-Commerce-Website funktional ist und Benutzern ansprechend präsentiert wird.
FAQ
F: Was sind die Hauptvorteile von KnockoutJS in Magento 2.4?
A: KnockoutJS bietet dynamisches Datenbinding, das den Prozess der Erstellung interaktiver Benutzeroberflächen vereinfacht, indem das UI automatisch aktualisiert wird, wann immer sich die zugrunde liegenden Daten ändern.
F: Wie kann ich Daten asynchron in KnockoutJS abrufen?
A: Sie können Daten asynchron über AJAX-Aufrufe oder REST-APIs abrufen. Im bereitgestellten Beispiel werden Daten mithilfe der Fetch-API innerhalb der getCustomData-Methode abgerufen.
F: Warum ist das Layout XML notwendig?
A: Das Layout XML ist entscheidend, da es Ihre benutzerdefinierte KnockoutJS-Komponente in das Magento-Seitenlayout integriert und sicherstellt, dass Ihre Komponente korrekt innerhalb des festgelegten Bereichs geladen wird.
