M2C-22090 Translate Wishlist and Compare label in template

app/code/Magento/Catalog/CustomerData/CompareProducts.php

@@ -63,7 +63,6 @@ public function getSectionData()
         $count = $this->helper->getItemCount();
         return [
             'count' => $count,
-            'countCaption' => $count == 1 ? __('1 item') : __('%1 items', $count),
             'listUrl' => $this->helper->getListUrl(),
             'items' => $count ? $this->getItems() : [],
         ];

app/code/Magento/Catalog/Test/Unit/CustomerData/CompareProductsTest.php

@@ -3,7 +3,6 @@
  * Copyright © Magento, Inc. All rights reserved.
  * See COPYING.txt for license details.
  */
-
 declare(strict_types=1);
 
 namespace Magento\Catalog\Test\Unit\CustomerData;
@@ -30,22 +29,22 @@ class CompareProductsTest extends TestCase
     /**
      * @var Compare|MockObject
      */
-    private $helperMock;
+    private $objectManagerHelper;
 
     /**
      * @var Url|MockObject
      */
-    private $productUrlMock;
+    private $helperMock;
 
     /**
      * @var Output|MockObject
      */
-    private $outputHelperMock;
+    private $productUrlMock;
 
     /**
-     * @var \Magento\Framework\TestFramework\Unit\Helper\ObjectManager
+     * @var Output|MockObject
      */
-    private $objectManagerHelper;
+    private $outputHelperMock;
 
     /**
      * @var ScopeConfigInterface|MockObject
@@ -115,7 +114,7 @@ private function getItemCollectionMock(array $items) : MockObject
      * @param array $dataSet
      * @return array
      */
-    private function prepareProductsWithCorrespondingMocks(array $dataSet) : array
+    private function prepareProductsWithCorrespondingMocks(array $dataSet):array
     {
         $items = [];
         $urlMap = [];
@@ -171,7 +170,10 @@ private function getProductMock(array $data) : MockObject
         return $product;
     }
 
-    public function testGetSectionData()
+    /**
+     * @return void
+     */
+    public function testGetSectionData():void
     {
         $dataSet = [
             ['id' => 1, 'name' => 'product#1'],
@@ -200,7 +202,6 @@ public function testGetSectionData()
         $this->assertEquals(
             [
                 'count' => $count,
-                'countCaption' =>  __('%1 items', $count),
                 'listUrl' => 'http://list.url',
                 'items' => [
                     [
@@ -230,7 +231,10 @@ public function testGetSectionData()
         );
     }
 
-    public function testGetSectionDataNoItems()
+    /**
+     * @return void
+     */
+    public function testGetSectionDataNoItems():void
     {
         $count = 0;
 
@@ -248,15 +252,17 @@ public function testGetSectionDataNoItems()
         $this->assertEquals(
             [
                 'count' => $count,
-                'countCaption' =>  __('%1 items', $count),
                 'listUrl' => 'http://list.url',
                 'items' => []
             ],
             $this->model->getSectionData()
         );
     }
 
-    public function testGetSectionDataSingleItem()
+    /**
+     * @return void
+     */
+    public function testGetSectionDataSingleItem():void
     {
         $count = 1;
 
@@ -286,7 +292,6 @@ public function testGetSectionDataSingleItem()
         $this->assertEquals(
             [
                 'count' => 1,
-                'countCaption' =>  __('1 item'),
                 'listUrl' => 'http://list.url',
                 'items' => [
                     [

app/code/Magento/Catalog/ViewModel/Product/Compare/Sidebar.php

@@ -0,0 +1,39 @@
+<?php
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+namespace Magento\Catalog\ViewModel\Product\Compare;
+
+use Magento\Catalog\Helper\Product\Compare as CompareHelper;
+use Magento\Framework\View\Element\Block\ArgumentInterface;
+
+/**
+ * ViewModel for Compare Product List
+ */
+class Sidebar implements ArgumentInterface
+{
+    /**
+     * @var CompareHelper
+     */
+    private $compareHelper;
+
+    /**
+     * @param CompareHelper $compareHelper
+     */
+    public function __construct(CompareHelper $compareHelper)
+    {
+        $this->compareHelper = $compareHelper;
+    }
+
+    /**
+     * Get parameters to clear compare list
+     *
+     * @return string
+     */
+    public function getClearCompareListParameters()
+    {
+        return $this->compareHelper->getPostDataClearList();
+    }
+}

app/code/Magento/Catalog/view/frontend/layout/default.xml

@@ -59,6 +59,7 @@
                             </item>
                         </item>
                     </argument>
+                    <argument name="compare_view_model" xsi:type="object">Magento\Catalog\ViewModel\Product\Compare\Sidebar</argument>
                 </arguments>
             </block>
         </referenceContainer>

app/code/Magento/Catalog/view/frontend/templates/product/compare/link.phtml

@@ -11,9 +11,17 @@
        data-bind="attr: {'href': compareProducts().listUrl}, css: {'no-display': !compareProducts().count}"
     >
         <?= $block->escapeHtml(__('Compare Products')) ?>
-        <span class="counter qty" data-bind="text: compareProducts().countCaption"></span>
+        <!-- ko if: compareProducts().count -->
+        <span class="counter qty">
+            <span data-bind="text: getCounterLabel()"></span>
+        </span>
+        <!-- /ko -->
     </a>
 </li>
 <script type="text/x-magento-init">
-{"[data-role=compare-products-link]": {"Magento_Ui/js/core/app": <?= /* @noEscape */ $block->getJsLayout() ?>}}
+{
+    "[data-role=compare-products-link]": {
+        "Magento_Ui/js/core/app": <?= /* @noEscape */ $block->getJsLayout() ?>
+    }
+}
 </script>

app/code/Magento/Catalog/view/frontend/templates/product/compare/sidebar.phtml

@@ -5,16 +5,27 @@
  */
 
 // phpcs:disable Magento2.Templates.ThisInTemplate.FoundThis
-
-/* @var $block \Magento\Framework\View\Element\Template */
+?>
+<?php
+/** @var \Magento\Framework\View\Element\Template $block */
+/** @var \Magento\Catalog\ViewModel\Product\Compare\Sidebar $viewModel */
+$viewModel = $block->getData('compare_view_model');
 ?>
 <div class="block block-compare" data-bind="scope: 'compareProducts'" data-role="compare-products-sidebar">
     <div class="block-title">
-        <strong id="block-compare-heading" role="heading" aria-level="2"><?= $block->escapeHtml(__('Compare Products')) ?></strong>
-        <span class="counter qty no-display" data-bind="text: compareProducts().countCaption, css: {'no-display': !compareProducts().count}"></span>
+        <strong id="block-compare-heading" role="heading" aria-level="2">
+            <?= $block->escapeHtml(__('Compare Products')) ?>
+        </strong>
+        <!-- ko if: compareProducts().count -->
+        <span class="counter no-display" data-bind="css: {'no-display': !compareProducts().count}">
+            <span data-bind="text: getCounterLabel()"></span>
+        </span>
+        <!-- /ko -->
     </div>
     <!-- ko if: compareProducts().count -->
-    <div class="block-content no-display" aria-labelledby="block-compare-heading" data-bind="css: {'no-display': !compareProducts().count}">
+    <div class="block-content no-display"
+         aria-labelledby="block-compare-heading"
+         data-bind="css: {'no-display': !compareProducts().count}">
         <ol id="compare-items" class="product-items product-items-names" data-bind="foreach: compareProducts().items">
                 <li class="product-item">
                     <input type="hidden" class="compare-item-id" data-bind="value: id"/>
@@ -31,12 +42,16 @@
         </ol>
         <div class="actions-toolbar">
             <div class="primary">
-                <a data-bind="attr: {'href': compareProducts().listUrl}" class="action compare primary"><span><?= $block->escapeHtml(__('Compare')) ?></span></a>
+                <a data-bind="attr: {'href': compareProducts().listUrl}"
+                   class="action compare primary">
+                   <span><?= $block->escapeHtml(__('Compare')) ?></span>
+                </a>
             </div>
             <div class="secondary">
-                <a id="compare-clear-all" href="#" class="action clear" data-post="<?=$block->escapeHtml(
-                    $this->helper(Magento\Catalog\Helper\Product\Compare::class)->getPostDataClearList()
-                ) ?>">
+                <a id="compare-clear-all"
+                   href="#"
+                   class="action clear"
+                   data-post="<?=$block->escapeHtml($viewModel->getClearCompareListParameters()) ?>">
                     <span><?= $block->escapeHtml(__('Clear All')) ?></span>
                 </a>
             </div>

app/code/Magento/Catalog/view/frontend/web/js/view/compare-products.js

@@ -7,9 +7,10 @@ define([
     'uiComponent',
     'Magento_Customer/js/customer-data',
     'jquery',
+    'mage/translate',
     'mage/mage',
     'mage/decorate'
-], function (Component, customerData, $) {
+], function (Component, customerData, $, $t) {
     'use strict';
 
     var sidebarInitialized = false;
@@ -33,6 +34,21 @@ define([
             this.compareProducts = customerData.get('compare-products');
 
             initSidebar();
+        },
+
+        /**
+         * Get counter label
+         *
+         * @returns {String}
+         */
+        getCounterLabel: function () {
+            var counter = this.compareProducts().count;
+
+            if (counter === 1) {
+                return counter + ' ' + $t('item');
+            }
+
+            return $t('%1 items').replace('%1', counter);
         }
     });
 });

app/code/Magento/Wishlist/Block/Customer/Sidebar.php

@@ -4,15 +4,14 @@
  * See COPYING.txt for license details.
  */
 
-/**
- * Wishlist sidebar block
- */
 namespace Magento\Wishlist\Block\Customer;
 
 use Magento\Catalog\Model\Product;
 use Magento\Framework\Pricing\Render;
 
 /**
+ * Wishlist Sidebar block
+ *
  * @api
  * @since 100.0.2
  */

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

@@ -80,29 +80,13 @@ public function getSectionData()
     }
 
     /**
-     * Get counter
+     * Get number of Wishlist items
      *
      * @return string
      */
     protected function getCounter()
     {
-        return $this->createCounter($this->wishlistHelper->getItemCount());
-    }
-
-    /**
-     * Create button label based on wishlist item quantity
-     *
-     * @param int $count
-     * @return \Magento\Framework\Phrase|null
-     */
-    protected function createCounter($count)
-    {
-        if ($count > 1) {
-            return __('%1 items', $count);
-        } elseif ($count == 1) {
-            return __('1 item');
-        }
-        return null;
+        return (string) $this->wishlistHelper->getItemCount();
     }
 
     /**

app/code/Magento/Wishlist/Test/Unit/CustomerData/WishlistTest.php

@@ -103,7 +103,7 @@ public function testGetSectionData()
         $itemRemoveParams = ['remove_params'];
 
         $result = [
-            'counter' => __('1 item'),
+            'counter' => 1,
             'items' => [
                 [
                     'image' => [
@@ -289,7 +289,7 @@ public function testGetSectionDataWithTwoItems()
         $items = [$itemMock, $itemMock];
 
         $result = [
-            'counter' =>  __('%1 items', count($items)),
+            'counter' =>  2,
             'items' => [
                 [
                     'image' => [
@@ -466,7 +466,7 @@ public function testGetSectionDataWithoutItems()
         $items = [];
 
         $result = [
-            'counter' =>  null,
+            'counter' =>  0,
             'items' => [],
         ];
 

app/code/Magento/Wishlist/view/frontend/templates/link.phtml

@@ -9,13 +9,15 @@
 <li class="link wishlist" data-bind="scope: 'wishlist'">
     <a <?= /* @noEscape */ $block->getLinkAttributes() ?>><?= $block->escapeHtml($block->getLabel()) ?>
         <!-- ko if: wishlist().counter -->
-        <span data-bind="text: wishlist().counter" class="counter qty"></span>
+            <span class="counter qty">
+                <span data-bind="text: getCounterLabel()"></span>
+            </span>
         <!-- /ko -->
     </a>
 </li>
 <script type="text/x-magento-init">
     {
-        "*": {
+        ".wishlist.link": {
             "Magento_Ui/js/core/app": {
                 "components": {
                     "wishlist": {

app/code/Magento/Wishlist/view/frontend/templates/sidebar.phtml

@@ -3,8 +3,6 @@
  * Copyright © Magento, Inc. All rights reserved.
  * See COPYING.txt for license details.
  */
-
-/** @var \Magento\Wishlist\Block\Customer\Sidebar $block */
 ?>
 <?php
 $wishlstViewModel = $block->getData('wishlistDataViewModel');
@@ -14,7 +12,9 @@ $wishlstViewModel = $block->getData('wishlistDataViewModel');
         <div class="block-title">
             <strong role="heading" aria-level="2"><?= $block->escapeHtml($block->getTitle()) ?></strong>
             <!-- ko if: wishlist().counter -->
-            <span data-bind="text: wishlist().counter" class="counter"></span>
+            <span class="counter no-display" data-bind="css: {'no-display': !wishlist().counter}">
+                <span data-bind="text: getCounterLabel()"></span>
+            </span>
             <!-- /ko -->
         </div>
         <div class="block-content">