How to override core files into custom module app/code?

Question

I am added a custom attribute in my wishlist knockout core file,

Code : https://codeshare.io/5ZlEv7 Line Number: 142

I want to override into my custom module,

I am created a custom module, how to properly included my changes

app/code/Vendor/Wishlist/etc/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\Wishlist\CustomerData\Wishlist">
        <plugin disabled="false" name="Vendor_Wishlist_Plugin_Magento_Wishlist_CustomerData_Wishlist" sortOrder="10" type="Vendor\Wishlist\Plugin\Magento\Wishlist\CustomerData\Wishlist"/>
    </type>
</config>

app/code/Vendor/Wishlist/Plugin/Magento/Wishlist/CustomerData/Wishlist.php

  <?php
/**
 * Copyright ©  All rights reserved.
 * See COPYING.txt for license details.
 */
declare(strict_types=1);

namespace Vendor\Wishlist\Plugin\Magento\Wishlist\CustomerData;


class Wishlist
{

    protected $wishlistHelper;

    public function __construct(
        \Magento\Wishlist\Helper\Data $wishlistHelper
    )
    {
        $this->wishlistHelper = $wishlistHelper;
    }


    public function afterGetSectionData(
        \Magento\Wishlist\CustomerData\Wishlist $subject,
        $result
    ) {

        // Your code here

        return $result;
    }
}

My question, how to include my changes into app/code/Vendor/Wishlist/Plugin/Magento/Wishlist/CustomerData/Wishlist.php

Should i add the whole function, code : https://codeshare.io/29AL38

or

should i add a specific line of change?

'product_brand' => $product->getResource()->getAttribute('brand')->getFrontend()->getValue($product),

New to module customization, anyone help thanks.

Answer 1

You just need to consider what is data being returned from the original Magento\Wishlist\CustomerData\Wishlist::getSectionData function. You see, it returns an array, which contains an array of item data, which comes as ajax response in browser. The item data comes from the getItems function which calls getItemData. Since they are protected methods, you can't overwrite them directly - but you can manipulate the result by using afterGetSectionData plugin, as its a public function. The data looks like this:

Since you don't need to get all the data again, you just want to append the product's brand onto the result from the original function. $result is the array you need to work with. $result['items'] contains the wishlist items. Since we just have an array to work with, we'll need to load the product model - the array contains the product_id, so we can use that to get the data we need.

Your plugin file app/code/Vendor/Wishlist/Plugin/Magento/Wishlist/CustomerData/Wishlist.php

public function __construct(
    \Magento\Catalog\Api\ProductRepositoryInterface $productRepository
) {
    $this->productRepository = $productRepository;
}

public function afterGetSectionData(
    \Magento\Wishlist\CustomerData\Wishlist $subject,
    $result
) {
    
    foreach ($result['items'] as $id => $item) {
        $productId = $item['product_id'];
        $product = $this->productRepository->getById($productId);
        $brandAttr = $product->getResource()->getAttribute('brand');
        $item['product_brand'] = $brandAttr->getFrontend()->getValue($product);
        $result['items'][$id] = $item;
    }

    return $result;
}

Now, your brand comes in ajax call. But you want to put it in your wishlist sidebar template. You will need a new js file to define it so it's available for knockout binding. In app/code/Vendor/Wishlist/view/frontend/web/js/wishlist.js

define([
  'uiComponent',
  'Magento_Customer/js/customer-data',
  'Magento_Wishlist/js/view/wishlist'
], function (Component, customerData) {
  'use strict';

  return Component.extend({
    /** @inheritdoc */
    initialize: function () {
      this._super();
      this.wishlist = customerData.get('wishlist');
      if (this.wishlist) {
        var items = this.wishlist().items;
        var product_brand;
        if (items !== undefined) {
          items.forEach(item =>
            product_brand = item.product_brand
          );
        }
      }
    }
  });
});

Now you can call your product_brand in your sidebar phtml file

<!-- ko if: product_brand -->
 <span data-bind="text: product_brand"></span>
<!-- /ko -->

And you will have to call your new js file in your sidebar phtml file as well

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "wishlist": {
                    "component": "Vendor_Wishlist/js/wishlist"
                }
            }
        }
    }
}
</script>