Personnalisation des options avancées du produit Mageworx

Quelle que soit la robustesse d'une solution, une personnalisation peut être nécessaire pour atteindre des objectifs ou des préférences spécifiques à l'entreprise.

Suite à certaines demandes reçues par notre équipe d'assistance concernant la possibilité de prendre les champs Poids et Type de poids de la fenêtre modale dans l'extension Options de produit avancées Magento 2, nous sommes heureux de partager un guide pratique rapide sur les moyens d'atteindre cet objectif facilement. Lisez la suite pour des directives faciles à suivre.

Guide étape par étape sur la personnalisation des options avancées du produit

Voici à quoi ressemblent les champs Poids et Type de poids dans l'extension Options produit avancées prête à l'emploi :

Pour afficher ces champs en dehors de la fenêtre modale, vous devrez suivre ces cinq étapes simples :

Étape 1. Création de nouveaux modules

Commencez par créer un nouveau module : VendorName_OptionCustomFieldWeight .

Pour ça,

1. Créez le répertoire app/code/VendorName/OptionCustomFieldWeight ,
2. Générez et remplissez trois fichiers standard qui sont normalement utilisés pour enregistrer un module, c'est-à-dire composer.json , etc/module.xml , registration.php .

1) composer.json

 "name": "vendorname/module-optioncustomfieldweight", "description": "N/A", "require": { "magento/framework" : ">=101.0.0 <103", "mageworx/module-optionfeatures" : ">=2.16.1" }, "type": "magento2-module", "version": "1.0.0", "license": [ "OSL-3.0", "AFL-3.0" ], "autoload": { "files": [ "registration.php" ], "psr-4": { "VendorName\\OptionCustomFieldWeight\\": "" } } }

2) etc/module.xml

 <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="VendorName_OptionCustomFieldWeight" setup_version="2.0.0"> <sequence> <module name="Magento_Catalog"/> <module name="MageWorx_OptionBase"/> <module name="MageWorx_OptionFeatures"/> </sequence> </module> </config>

3) registration.php

 <?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'VendorName_OptionCustomFieldWeight', __DIR__ );

Étape 2. Copie de classe

Ensuite, vous devez trouver et copier la classe suivante : /app/code/MageWorx/OptionFeatures/Ui/DataProvider/Product/Form/Modifier/Features.php   à /app/code/VendorName/OptionCustomFieldWight/Ui/DataProvider/Product/Form/Modifier/Features.php .

Étape 3. Modification de classe

Maintenant, modifions la classe copiée. Pour ce faire, vous devez :

a) Changez l'espace de namespace de notre classe en VendorName\OptionCustomFieldWeight\Ui\DataProvider\Product\Form\Modifier;

et ajouter les classes dont nous aurons besoin un peu plus tard. Ces cours sont

use MageWorx\OptionFeatures\Model\Config\Source\Product\Options\Weight as ProductOptionsWeight;

et

use Magento\Ui\Component\Form\Element\Input;

Si tout est fait correctement, cela devrait ressembler à ceci :

 …. namespace VendorName\OptionCustomFieldWeight\Ui\DataProvider\Product\Form\Modifier; use MageWorx\OptionBase\Ui\DataProvider\Product\Form\Modifier\ModifierInterface; use MageWorx\OptionFeatures\Helper\Data as Helper; use Magento\Ui\Component\Form\Element\Hidden; use Magento\Ui\Component\Modal; use Magento\Framework\UrlInterface; use Magento\Framework\App\Request\Http; use MageWorx\OptionFeatures\Model\Config\Source\ShareableLinkMode as SourceConfig; use MageWorx\OptionFeatures\Model\Config\Source\Product\Options\Weight as ProductOptionsWeight; use Magento\Ui\Component\Form\Element\Input; class Features extends AbstractModifier implements ModifierInterface { ….

b) Ajoutez l'objet de MageWorx\OptionFeatures\Model\Config\Source\Product\Options\Weight à notre constructeur :

 …. /** * @var ProductOptionsWeight */ protected $productOptionsWeight; /** * @param ArrayManager $arrayManager * @param StoreManagerInterface $storeManager * @param LocatorInterface $locator * @param Helper $helper * @param Http $request * @param UrlInterface $urlBuilder * @param SourceConfig $sourceConfig * @param ProductOptionsWeight $productOptionsWeight */ public function __construct( ArrayManager $arrayManager, StoreManagerInterface $storeManager, LocatorInterface $locator, Helper $helper, Http $request, SourceConfig $sourceConfig, UrlInterface $urlBuilder, ProductOptionsWeight $productOptionsWeight ) { $this->arrayManager = $arrayManager; $this->storeManager = $storeManager; $this->locator = $locator; $this->helper = $helper; $this->request = $request; $this->sourceConfig = $sourceConfig; $this->urlBuilder = $urlBuilder; $this->productOptionsWeight = $productOptionsWeight; } …..

c) Trouvez la méthode getValueFeaturesFieldsConfig() :

 /** * The custom option value fields config * * @return array */ protected function getValueFeaturesFieldsConfig() { $fields = []; $fields[Helper::KEY_IS_DEFAULT] = $this->getIsDefaultConfig(148); return $fields; }

Et ajoutez les getWeightConfig() et getWeightTypeConfig() au tableau avec des champs personnalisés pour les valeurs d'options personnalisées. Ces méthodes implémenteront une configuration correspondante. Maintenant, la méthode getValueFeaturesFieldsConfig() doit ressembler à ceci :

 /** * The custom option value fields config * * @return array */ protected function getValueFeaturesFieldsConfig() { $fields = []; $fields[Helper::KEY_IS_DEFAULT] = $this->getIsDefaultConfig(148); if ($this->helper->isWeightEnabled()) { $fields[Helper::KEY_WEIGHT] = $this->getWeightConfig(34); $fields[Helper::KEY_WEIGHT_TYPE] = $this->getWeightTypeConfig(35); } return $fields; }

d) Après la méthode getValueFeaturesFieldsConfig() , implémentons getWeightConfig() et getWeightTypeConfig() de configuration des champs :

 /** * Get weight unit name * * @return mixed */ protected function getWeightUnit() { try { $unit = $this->locator->getStore()->getConfig('general/locale/weight_unit'); } catch (\Exception $e) { $unit = $this->storeManager->getStore()->getConfig('general/locale/weight_unit'); } return $unit; } /** * Weight field config * * @param $sortOrder * @return array */ protected function getWeightConfig($sortOrder) { return [ 'arguments' => [ 'data' => [ 'config' => [ 'label' => __('Weight'), 'componentType' => Field::NAME, 'component' => 'Magento_Catalog/js/components/custom-options-component', 'template' => 'Magento_Catalog/form/field', 'formElement' => Input::NAME, 'dataScope' => Helper::KEY_WEIGHT, 'dataType' => Number::NAME, 'validation' => [ 'validate-number' => true, 'validate-zero-or-greater' => true, ], 'sortOrder' => $sortOrder, 'additionalClasses' => 'admin__field-small', 'addbefore' => $this->getWeightUnit(), 'addbeforePool' => $this->productOptionsWeight ->prefixesToOptionArray($this->getWeightUnit()), 'imports' => [ 'disabled' => '!${$.provider}:' . self::DATA_SCOPE_PRODUCT . '.product_has_weight:value', ], ], ], ], ]; } /** * Weight field config * * @param $sortOrder * @return array */ protected function getWeightTypeConfig($sortOrder) { return [ 'arguments' => [ 'data' => [ 'config' => [ 'label' => __('Weight Type'), 'component' => 'MageWorx_OptionFeatures/js/component/custom-options-weight-type', 'componentType' => Field::NAME, 'formElement' => Select::NAME, 'dataScope' => Helper::KEY_WEIGHT_TYPE, 'dataType' => Text::NAME, 'sortOrder' => $sortOrder, 'options' => $this->productOptionsWeight->toOptionArray(), 'imports' => [ 'weightIndex' => Helper::KEY_WEIGHT, ], ], ], ], ]; }

Étape 4. Remplacer la classe

Il est grand temps que notre classe modifiée /app/code/VendorName/OptionCustomFieldWight/Ui/DataProvider/Product/Form/Modifier/Features.php commence à fonctionner à la place de l'original /app/code/VendorName/OptionCustomFieldWight/Ui/DataProvider/Product/Form/Modifier/Features.php . Pour y parvenir, nous devons le remplacer dans le fichier de configuration des dépendances. Pour cela, créons le fichier /app/code/VendorName/OptionCustomFieldWeight/etc/adminhtml/di.xml et ajoutons le code suivant :

 <?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <preference for="MageWorx\OptionFeatures\Ui\DataProvider\Product\Form\Modifier\Features" type="VendorName\OptionCustomFieldWeight\Ui\DataProvider\Product\Form\Modifier\Features"/> </config>

Étape #5. Installation de nouveaux modules

Nous y sommes presque! Il ne reste plus qu'à installer notre nouveau module.

Pour commencer, exécutez la commande suivante :

php bin/magento module:status

Vous verrez une liste des modules activés et désactivés. Notre nouveau module VendorName_OptionCustomFieldWight devrait être situé parmi ceux qui sont désactivés.

Activons-le :

php bin/magento module:enable VendorName_OptionCustomFieldWeight

Après avoir mis à jour la base de données,

php bin/magento setup:upgrade

vous verrez le résultat suivant :

Toutes nos félicitations! Vous avez supprimé avec succès les champs Poids et Type de poids de la fenêtre modale.

Conclusion

Nous espérons que ce guide étape par étape vous a aidé à personnaliser facilement l'extension Advanced Product Options et ainsi atteindre vos préférences. Si vous avez des questions ou des difficultés, n'hésitez pas à laisser un commentaire dans la boîte de commentaires ci-dessous. Sinon, notre équipe d'assistance est toujours heureuse de vous aider à [email protected] ! =)