Fix #24091 - Selected configurable product attribute options are not displaying in wishlist page.

Author: Bartlomiejsz

app/code/Magento/Wishlist/Block/AddToWishlist.php

@@ -6,13 +6,15 @@
 
 namespace Magento\Wishlist\Block;
 
+use Magento\Framework\View\Element\Template;
+
 /**
  * Wishlist js plugin initialization block
  *
  * @api
  * @since 100.1.0
  */
-class AddToWishlist extends \Magento\Framework\View\Element\Template
+class AddToWishlist extends Template
 {
     /**
      * Product types
@@ -21,20 +23,6 @@ class AddToWishlist extends \Magento\Framework\View\Element\Template
      */
     private $productTypes;
 
-    /**
-     * @param \Magento\Framework\View\Element\Template\Context $context
-     * @param array $data
-     */
-    public function __construct(
-        \Magento\Framework\View\Element\Template\Context $context,
-        array $data = []
-    ) {
-        parent::__construct(
-            $context,
-            $data
-        );
-    }
-
     /**
      * Returns wishlist widget options
      *
@@ -43,7 +31,10 @@ public function __construct(
      */
     public function getWishlistOptions()
     {
-        return ['productType' => $this->getProductTypes()];
+        return [
+            'productType' => $this->getProductTypes(),
+            'isProductList' => (bool)$this->getData('is_product_list')
+        ];
     }
 
     /**
@@ -56,7 +47,7 @@ private function getProductTypes()
     {
         if ($this->productTypes === null) {
             $this->productTypes = [];
-            $block = $this->getLayout()->getBlock('category.products.list');
+            $block = $this->getLayout()->getBlock($this->getProductListBlockName());
             if ($block) {
                 $productCollection = $block->getLoadedProductCollection();
                 $productTypes = [];
@@ -71,7 +62,18 @@ private function getProductTypes()
     }
 
     /**
-     * {@inheritdoc}
+     * Get product list block name in layout
+     *
+     * @return string
+     */
+    private function getProductListBlockName(): string
+    {
+        return $this->getData('product_list_block') ?: 'category.products.list';
+    }
+
+    /**
+     * @inheritDoc
+     *
      * @since 100.1.0
      */
     protected function _toHtml()

app/code/Magento/Wishlist/view/frontend/layout/catalog_category_view.xml

@@ -21,7 +21,15 @@
                        template="Magento_Wishlist::catalog/product/list/addto/wishlist.phtml"/>
             </referenceBlock>
             <referenceContainer name="category.product.list.additional">
-                <block class="Magento\Wishlist\Block\AddToWishlist" name="category.product.list.additional.wishlist_addto" template="Magento_Wishlist::addto.phtml" />
+                <block
+                    class="Magento\Wishlist\Block\AddToWishlist"
+                    name="category.product.list.additional.wishlist_addto"
+                    template="Magento_Wishlist::addto.phtml"
+                >
+                    <arguments>
+                        <argument name="is_product_list" xsi:type="boolean">true</argument>
+                    </arguments>
+                </block>
             </referenceContainer>
         </referenceContainer>
     </body>

app/code/Magento/Wishlist/view/frontend/layout/catalogsearch_result_index.xml

@@ -14,5 +14,17 @@
                        template="Magento_Wishlist::catalog/product/list/addto/wishlist.phtml"/>
             </referenceBlock>
         </referenceContainer>
+        <referenceBlock name="wishlist_page_head_components">
+            <block
+                class="Magento\Wishlist\Block\AddToWishlist"
+                name="catalogsearch.wishlist_addto"
+                template="Magento_Wishlist::addto.phtml"
+            >
+                <arguments>
+                    <argument name="is_product_list" xsi:type="boolean">true</argument>
+                    <argument name="product_list_block" xsi:type="string">search_result_list</argument>
+                </arguments>
+            </block>
+        </referenceBlock>
     </body>
 </page>

app/code/Magento/Wishlist/view/frontend/web/js/add-to-wishlist.js

@@ -17,7 +17,10 @@ define([
             downloadableInfo: '#downloadable-links-list input',
             customOptionsInfo: '.product-custom-option',
             qtyInfo: '#qty',
-            actionElement: '[data-action="add-to-wishlist"]'
+            actionElement: '[data-action="add-to-wishlist"]',
+            productListItem: '.item.product-item',
+            productListPriceBox: '.price-box',
+            isProductList: false
         },
 
         /** @inheritdoc */
@@ -65,6 +68,7 @@ define([
         _updateWishlistData: function (event) {
             var dataToAdd = {},
                 isFileUploaded = false,
+                productId = null,
                 self = this;
 
             if (event.handleObj.selector == this.options.qtyInfo) { //eslint-disable-line eqeqeq
@@ -83,7 +87,19 @@ define([
                     $(element).is('textarea') ||
                     $('#' + element.id + ' option:selected').length
                 ) {
-                    if ($(element).data('selector') || $(element).attr('name')) {
+                    if (!($(element).data('selector') || $(element).attr('name'))) {
+                        return;
+                    }
+
+                    if (self.options.isProductList) {
+                        productId = self.retrieveListProductId(this);
+
+                        dataToAdd[productId] = $.extend(
+                            {},
+                            dataToAdd[productId] ? dataToAdd[productId] : {},
+                            self._getElementData(element)
+                        );
+                    } else {
                         dataToAdd = $.extend({}, dataToAdd, self._getElementData(element));
                     }
 
@@ -107,18 +123,25 @@ define([
          * @private
          */
         _updateAddToWishlistButton: function (dataToAdd) {
-            var self = this;
+            var productId = null,
+                self = this;
 
             $('[data-action="add-to-wishlist"]').each(function (index, element) {
-                var params = $(element).data('post');
+                var params = $(element).data('post'),
+                    dataToAddObj = dataToAdd;
+
+                if (self.options.isProductList) {
+                    productId = self.retrieveListProductId(element);
+                    dataToAddObj = typeof dataToAdd[productId] !== 'undefined' ? dataToAdd[productId] : {};
+                }
 
                 if (!params) {
                     params = {
                         'data': {}
                     };
                 }
 
-                params.data = $.extend({}, params.data, dataToAdd, {
+                params.data = $.extend({}, params.data, dataToAddObj, {
                     'qty': $(self.options.qtyInfo).val()
                 });
                 $(element).data('post', params);
@@ -241,6 +264,21 @@ define([
 
                 return;
             }
+        },
+
+        /**
+         * Retrieve product id from element on products list
+         *
+         * @param {jQuery.Object} element
+         * @private
+         */
+        retrieveListProductId: function (element) {
+            return parseInt(
+                $(element).closest(this.options.productListItem)
+                    .find(this.options.productListPriceBox)
+                    .data('product-id'),
+                10
+            );
         }
     });