Tôi muốn tùy chỉnh minicart của mình trong Magento 2. Tôi cần thêm 3 thuộc tính


11

Tôi muốn tùy chỉnh minicart của mình trong Magento 2. Tôi cần thêm 3 thuộc tính: SKU, Nhà sản xuất và số phần của Nhà sản xuất. Đây là những thuộc tính hiện có. Tôi thấy nơi để thêm các giá trị đầu ra nhưng không phải gọi chúng từ đâu.

Câu trả lời:


25

Bạn có thể tạo một mô-đun để làm điều này. Nó sẽ sử dụng một plugin để thêm các thuộc tính vào mảng dữ liệu được đọc bởi mẫu js loại trực tiếp. Sau đó, chúng ta cần ghi đè lên mẫu để hiển thị các giá trị này.

Đây là thư mục mô-đun:

|   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_attribut.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>

Mặc địnhItem.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 đã tồn tại trong dữ liệu nên không cần thêm nó.

checkout_cart_sidebar_item_Vnderers.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 là bản sao Magento/Checkout/view/frontend/web/template/minicart/item/default.htmlvới các thay đổi được thực hiện ở dòng 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>

Có gì trong register.php và module.xml?
Matthew McLennan

Tôi đã thêm cái này và bây giờ đầu ra của tôi nói "HIỂU". Điều đó có nghĩa là nó hoạt động nhưng tôi có thuộc tính của tôi được đặt tên sai?
Matthew McLennan

Registration.php và module.xml là các tệp soạn sẵn, bạn nên xem hướng dẫn này alanstorm.com/magento_2_mvvm_mvc để biết cách xác định mô-đun m2. Bạn có thể đăng một ảnh chụp màn hình về lỗi của bạn hoặc nếu không cụ thể hơn?
Aaron Allen

@AaronAllen, nó hoạt động với tôi, nhưng tôi cũng muốn ghi đè nội dung.html của cùng một minicart và muốn thêm một số dữ liệu động trong tệp đó. Bạn có thể vui lòng giải thích làm thế nào tôi có thể đạt được điều này. Cảm ơn trước !
Ashish Jagnani

2
Thay vào đó, nếu tải các thuộc tính trong khoảngGetItemData (), có thể thêm chúng vào etc / catalog_attribut.xml. Đã thực hiện xong các thuộc tính có thể được truy cập bằng $ item-> get SẢNt () -> getAttributionText ('property_code'); _productRepo không còn cần thiết.
Andreas Riedmüller

0

Tôi có slove truy vấn của tôi bằng 2 bước đơn giản trong magento 2.1:

Thay đổi thành tập tin: ->

1.DefaultItem.php Thêm dòng:

    $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 Thêm dòng:

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

Tôi hy vọng điều này sẽ giúp bạn.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.