Erstellt man in Magento 2 ein konfigurier bares Produkt und weist diesem über ein ausgewähltes Attribut Einfache Produkte zu, so kann man eben diese Einfachen Produkte über ein Dropdown auf der Produktdetailseite auswählen. Es ändern sich Bilder und Preis, jedoch nicht die SKU, auch werden im Dropdown nur die Bezeichnungen des zugrunde liegenden Attributes angezeigt und nicht der Name des verknüpften Einfachen Produkts. Stattdessen wir die Differenz zum Preis des aktuell gewählten Einfachen Produkts angezeigt. Wir möchten nun erreichen, dass die Preisdifferenz nicht angezeigt und als Ersatz neben dem Attribut-Label der Name das jeweils verknüpften Einfache Produkts angezeigt wird: zuerst erstellen wir ein kleines Plugin und tragen hierbei in die Datei
\app\code\Vendorname\Modulename\etc\di.xml
die folgenden Zeilen an, um das Plugin zu aktivieren:
<type name="Magento\ConfigurableProduct\Block\Product\View\Type\Configurable">
<plugin disabled="false" name="Vendorname_Modulename_Plugin_Magento_ConfigurableProduct_Block_Product_View_Type_Configurable" sortOrder="10" type="Vendorname\Modulename\Plugin\Magento\ConfigurableProduct\Block\Product\View\Type\Configurable"/>
</type>
Die gewünschte Pluginklasse in der Datei
\app\code\Vendorname\Modulename\Plugin\Magento\ConfigurableProduct\Block\Product\View\Type\Configurable.php
sieht dann so aus:
<?php
namespace Vendorname\Modulename\Plugin\Magento\ConfigurableProduct\Block\Product\View\Type;
class Configurable
{
public function afterGetJsonConfig(
\Magento\ConfigurableProduct\Block\Product\View\Type\Configurable $subject,
$result
) {
$jsonResult = json_decode($result, true);
$jsonResult['skus'] = [];
$jsonResult['simple_product_names'] = [];
foreach ($subject->getAllowProducts() as $simpleProduct) {
$jsonResult['skus'][$simpleProduct->getId()] = $simpleProduct->getSku();
$jsonResult['simple_product_names'][$simpleProduct->getId()] = $simpleProduct->getName();
}
$result = json_encode($jsonResult);
return $result;
}
}
Heißt also, wir holen uns hier die Skus und die Namen der zugrundeliegenden Einfachen Produkte. Diese müssen wir nun einerseits in der Select-Box bereitstellen (die Namen), und tun dies in der Datei
\app\design\frontend\Packagename\Templatename\Magento_ConfigurableProduct\web\js\configurable.js
Hier fügen wir nach den Zeilen
if (typeof allowedProducts[0] !== 'undefined' &&
typeof optionPrices[allowedProducts[0]] !== 'undefined') {
allowedProductMinPrice = this._getAllowedProductWithMinPrice(allowedProducts);
optionFinalPrice = parseFloat(optionPrices[allowedProductMinPrice].finalPrice.amount);
optionPriceDiff = optionFinalPrice - basePrice;
die folgenden ein, um die Differenzpreise nicht auszugeben und diese durch die Produktnamen zu ersetzen:
options[i].label = options[i].label + ': ' + this.options.spConfig.simple_product_names[options[i].products[0]];options[i].label = options[i].label + ': ' + this.options.spConfig.simple_product_names[options[i].products[0]];
if (optionPriceDiff !== 0 && 1==2) {
Hier immer darauf achten, dass nach Änderung der Assets neu deployed werden muss, also hier die Datei
\pub\static\frontend\Packagename\Templatename\de_DE\Magento_ConfigurableProduct\js\configurable.js
gelöscht werden muss (de_DE natürlich anpassen, falls nötig bzw. andere Sprache im Storeview). Die configurable.js vor Erweiterung aus Core komplett übernehmen / kopieren.
Jetzt fehlt noch die SKU-Änderung:
Hierzu die Datei
\app\code\Vendorname\Modulename\view\frontend\requirejs-config.js
erstellen mit folgendem Inhalt:
var config = {
config: {
mixins: {
'Magento_ConfigurableProduct/js/configurable': {
'Vendorname_Modulename/js/model/skuswitch': true
}
}
}
};
und danach die bekannt gemachte Datei
\app\code\Vendorname\Modulename\view\frontend\web\js\model\skuswitch.js
erstellen mit dem Inhalt
/*jshint browser:true jquery:true*/
/*global alert*/
define([
'jquery',
'mage/utils/wrapper'
], function ($, wrapper) {
'use strict';
return function(targetModule){
var reloadPrice = targetModule.prototype._reloadPrice;
var reloadPriceWrapper = wrapper.wrap(reloadPrice, function(original){
//do extra stuff
//call original method
var result = original();
//do extra stuff
var simpleSku = this.options.spConfig.skus[this.simpleProduct];
if(simpleSku != '') {
$('div.product-info-main .sku .value').html(simpleSku);
}
//return original value
return result;
});
targetModule.prototype._reloadPrice = reloadPriceWrapper;
return targetModule;
};
});
Damit sind wir fertig. Getestet in unserer Internetagentur in einem Magento 2 Onlineshop CE 2.3.1..
