Je souhaite personnaliser mon minicart dans Magento 2. J'ai besoin d'ajouter 3 attributs

12

Je souhaite personnaliser mon minicart dans Magento 2. Je dois ajouter 3 attributs: SKU, Fabricant et Numéro de pièce du fabricant. Ce sont des attributs existants. Je vois où ajouter les valeurs de sortie mais pas d'où les appeler.

magento2  mini-cart  knockoutjs 
— Matthew McLennan
source

Réponses:

26

Vous pouvez créer un module pour ce faire. Il utilisera un plugin pour ajouter les attributs au tableau de données qui est lu par le modèle js knockout. Ensuite, nous devons remplacer le modèle pour afficher ces valeurs.

Voici le répertoire du module:

|   registration.php
|   
+---etc
|   |   module.xml
|   |   catalog_attributes.xml
|   |   
|   \---frontend
|           di.xml
|           
+---Plugin
|       DefaultItem.php
|       
\---view
    +---frontend
    |   \---layout
    |           checkout_cart_sidebar_item_renderers.xml
    |           
    \---web
        \---template
            \---mini cart
                \---item
                        default.html

catalog_attributes.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Catalog:etc/catalog_attributes.xsd">
    <group name="quote_item">
        <attribute name="manufacturer"/>
        <attribute name="part_number"/>
    </group>
</config>

di.xml

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\CustomerData\DefaultItem">
        <plugin name="AddAttPlug" type="Your\Module\Plugin\DefaultItem" disabled="false" sortOrder="10"/>
    </type>
</config>

DefaultItem.php

<?php

namespace Your\Module\Plugin;

use Magento\Quote\Model\Quote\Item;

class DefaultItem
{
    public function aroundGetItemData($subject, \Closure $proceed, Item $item)
    {
        $data = $proceed($item);
        $product = $item->getProduct();

        $atts = [
            "product_manufacturer" => $product->getAttributeText('manufacturer'),
            "product_part_number" => $product->getAttributeText('product_part_number')
        ];

        return array_merge($data, $atts);
    }
}

SKU existe déjà dans les données, donc pas besoin de l'ajouter.

checkout_cart_sidebar_item_renderers.xml

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="minicart">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="minicart_content" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="item.renderer" xsi:type="array">
                                    <item name="config" xsi:type="array">
                                        <item name="template" xsi:type="string">Your_Module/minicart/item/default</item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

default.html est une copie de Magento/Checkout/view/frontend/web/template/minicart/item/default.htmlavec les modifications apportées à la ligne 66

<li class="item product product-item" data-role="product-item">
    <div class="product">
        <!-- ko if: product_has_url -->
        <a data-bind="attr: {href: product_url, title: product_name}" tabindex="-1" class="product-item-photo">
            <!-- ko foreach: $parent.getRegion('itemImage') -->
                <!-- ko template: {name: getTemplate(), data: item.product_image} --><!-- /ko -->
            <!-- /ko -->
        </a>
        <!-- /ko -->
        <!-- ko ifnot: product_has_url -->
        <span class="product-item-photo">
            <!-- ko foreach: $parent.getRegion('itemImage') -->
                <!-- ko template: {name: getTemplate(), data: item.product_image} --><!-- /ko -->
            <!-- /ko -->
        </span>
        <!-- /ko -->

        <div class="product-item-details">
            <strong class="product-item-name">
                <!-- ko if: product_has_url -->
                <a data-bind="attr: {href: product_url}, text: 
                  product_name"></a>
                <!-- /ko -->
                <!-- ko ifnot: product_has_url -->
                    <!-- ko text: product_name --><!-- /ko -->
                <!-- /ko -->
            </strong>

            <!-- ko if: options.length -->
            <div class="product options" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}'>
                <span data-role="title" class="toggle"><!-- ko i18n: 'See Details' --><!-- /ko --></span>

                <div data-role="content" class="content">
                    <strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
                    <dl class="product options list">
                        <!-- ko foreach: { data: options, as: 'option' } -->
                        <dt class="label"><!-- ko text: option.label --><!-- /ko --></dt>
                        <dd class="values">
                            <!-- ko if: Array.isArray(option.value) -->
                                <span data-bind="html: option.value.join('<br>')"></span>
                            <!-- /ko -->
                            <!-- ko ifnot: Array.isArray(option.value) -->
                                <span data-bind="html: option.value"></span>
                            <!-- /ko -->
                        </dd>
                        <!-- /ko -->
                    </dl>
                </div>
            </div>
            <!-- /ko -->

            <div class="product-item-pricing">
                <!-- ko if: canApplyMsrp -->

                <div class="details-map">
                    <span class="label" data-bind="i18n: 'Price'"></span>
                    <span class="value" data-bind="i18n: 'See price before order confirmation.'"></span>
                </div>
                <!-- /ko -->
                <!-- ko ifnot: canApplyMsrp -->
                <!-- ko foreach: $parent.getRegion('priceSidebar') -->
                    <!-- ko template: {name: getTemplate(), data: item.product_price, as: 'price'} --><!-- /ko -->
                <!-- /ko -->
                <!-- /ko -->

                <div data-bind="html: 'SKU#: ' + item.product_sku"></div>
                <div data-bind="html: 'Manufacturer: ' + item.product_manufacturer"></div>
                <div data-bind="html: 'Part #: ' + item.product_part_number"></div>

                <div class="details-qty qty">
                    <label class="label" data-bind="i18n: 'Qty', attr: {
                           for: 'cart-item-'+item_id+'-qty'}"></label>
                    <input data-bind="attr: {
                           id: 'cart-item-'+item_id+'-qty',
                           'data-cart-item': item_id,
                           'data-item-qty': qty,
                           'data-cart-item-id': product_sku
                           }, value: qty"
                           type="number"
                           size="4"
                           class="item-qty cart-item-qty"
                           maxlength="12"/>
                    <button data-bind="attr: {
                           id: 'update-cart-item-'+item_id,
                           'data-cart-item': item_id,
                           title: $t('Update')
                           }"
                            class="update-cart-item"
                            style="display: none">
                        <span data-bind="i18n: 'Update'"></span>
                    </button>
                </div>
            </div>

            <div class="product actions">
                <!-- ko if: is_visible_in_site_visibility -->
                <div class="primary">
                    <a data-bind="attr: {href: configure_url, title: $t('Edit item')}" class="action edit">
                        <span data-bind="i18n: 'Edit'"></span>
                    </a>
                </div>
                <!-- /ko -->
                <div class="secondary">
                    <a href="#" data-bind="attr: {'data-cart-item': item_id, title: $t('Remove item')}"
                       class="action delete">
                        <span data-bind="i18n: 'Remove'"></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</li>
— Aaron Allen
source
Qu'y a-t-il dans registration.php et module.xml?
— Matthew McLennan
J'ai ajouté ceci et maintenant ma sortie indique "UNDEFINED". Cela signifie-t-il que cela fonctionne, mais mes attributs sont mal nommés?
— Matthew McLennan
Registration.php et module.xml sont des fichiers passe-partout, vous devriez consulter ce tutoriel alanstorm.com/magento_2_mvvm_mvc pour avoir une idée de la façon dont les modules m2 sont définis. Pourriez-vous peut-être poster une capture d'écran de l'erreur que vous obtenez ou être plus précis?
— Aaron Allen
@AaronAllen, son travail pour moi, mais je veux aussi remplacer le content.html du même minicart et ajouter des données dynamiques dans ce fichier. Pouvez-vous expliquer comment je peux y parvenir? Merci d'avance !
— Ashish Jagnani
2
Au lieu de cela, si vous chargez les attributs dans aroundGetItemData (), il est possible de les ajouter à etc / catalog_attributes.xml. Cela fait, les attributs sont accessibles avec $ item-> getProduct () -> getAttributeText ('attribute_code'); _productRepo n'est plus nécessaire.
— Andreas Riedmüller
0

j'ai glissé ma requête en 2 étapes simples dans magento 2.1:

Changer en fichier: ->

1.DefaultItem.php Ajouter une ligne: 

    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    $this->product = $objectManager->get('Magento\Catalog\Model\Product')-
    >load($this->item->getId());

   *Add element into return array result:*

   'short_description' => $this->product->getShortDescription(),

2.default.html Ajouter une ligne:

   <a data-bind="text: short_description"></a>

J'espère que cela t'aidera.

— Sejal Shah
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.