[Visual Merchandiser] Add product from sku #ESP-288

src/module-elasticsuite-virtual-category/Plugin/Block/Category/RemovePosition.php

@@ -0,0 +1,43 @@
+<?php
+/**
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade Smile ElasticSuite to newer
+ * versions in the future.
+ *
+ * @category  Smile
+ * @package   Smile\ElasticsuiteVirtualCategory
+ * @author    Pierre Gauthier <pigau@smile.fr>
+ * @copyright 2020 Smile
+ * @license   Open Software License ("OSL") v. 3.0
+ */
+namespace Smile\ElasticsuiteVirtualCategory\Plugin\Block\Category;
+
+use Magento\Catalog\Block\Adminhtml\Category\Tab\Product as ProductGrid;
+
+/**
+ * Remove position from category product grid if the visual merchandiser module is enabled.
+ *
+ * @category Smile
+ * @package  Smile\ElasticsuiteVirtualCategory
+ * @author   Pierre Gauthier <pigau@smile.fr>
+ */
+class RemovePosition
+{
+    /**
+     * Remove position column from
+     *
+     * @param ProductGrid $subject  Plugin subject.
+     * @param ProductGrid $result   Result.
+     * @param string      $columnId Column Id.
+     * @return ProductGrid
+     */
+    public function afterAddColumn(ProductGrid $subject, $result, $columnId)
+    {
+        if (in_array($columnId, ['position', 'draggable-position'])) {
+            $subject->removeColumn($columnId);
+        }
+
+        return $result;
+    }
+}

src/module-elasticsuite-virtual-category/etc/adminhtml/di.xml

@@ -28,4 +28,8 @@
     <type name="\Magento\CatalogRule\Controller\Adminhtml\Promo\Widget\Chooser">
         <plugin name="category_chooser_plugin" type="Smile\ElasticsuiteVirtualCategory\Plugin\Catalog\Category\ChooserPlugin"/>
     </type>
+
+    <type name="\Magento\VisualMerchandiser\Block\Adminhtml\Category\Merchandiser\Grid">
+        <plugin name="remove_position_column" type="Smile\ElasticsuiteVirtualCategory\Plugin\Block\Category\RemovePosition"/>
+    </type>
 </config>

src/module-elasticsuite-virtual-category/i18n/de_DE.csv

@@ -1,8 +1,9 @@
+"Add/Remove Products","Produkte hinzufügen/entfernen"
 "Virtual rule","Virtuelle Regel"
 "Virtual Category","Virtuelle Kategorie"
 "Virtual Category Root","Virtuelle Root-Kategorie"
 "Products List Preview and Sorting","Produktliste Vorschau und Sortierung"
 "Your product selection is empty for the selected Store View. If you are running a multi-store setup, please check this <a href='https://github.com/Smile-SA/elasticsuite/wiki/VirtualCategories#previewing-virtual-categories-on-a-multi-store-setup'>manual page</a> for more informations.","Für die gewählte Store View ist die Produktauswahl leer. Bei Einsatz eines Multi-Store Setups bitte folgende <a href='https://github.com/Smile-SA/elasticsuite/wiki/VirtualCategories#previewing-virtual-categories-on-a-multi-store-setup'>Anleitung</a> berücksichtigen."
 "Cannot move the category : '%2' is using '%1' as virtual root category.","Kategorie kann nicht verschoben werden: '%2' verwendet '%1' als virtuelle Root-Kategorie."
 "Use default positions","Standardpositionen verwenden"
-"In this mode, you can only preview products position and visibility but not change them. If you want to change them globally, switch to the 'All Store Views' Store View. If you want to change them for the currently selected Store View, change 'Use default positions' to 'No'.","In diesem Modus können Sie nur eine Vorschau der Produktposition und der Sichtbarkeit anzeigen, sie jedoch nicht ändern. Wenn Sie sie global ändern möchten, wechseln Sie in die Store View 'All Store Views'. Wenn Sie sie für die aktuell ausgewählte Store View ändern möchten, ändern Sie "Standardpositionen verwenden" in 'Nein'."
+"In this mode, you can only preview products position and visibility but not change them. If you want to change them globally, switch to the 'All Store Views' Store View. If you want to change them for the currently selected Store View, change 'Use default positions' to 'No'.","In diesem Modus können Sie nur eine Vorschau der Produktposition und der Sichtbarkeit anzeigen, sie jedoch nicht ändern. Wenn Sie sie global ändern möchten, wechseln Sie in die Store View 'All Store Views'. Wenn Sie sie für die aktuell ausgewählte Store View ändern möchten, ändern Sie "Standardpositionen verwenden" in 'Nein'."

src/module-elasticsuite-virtual-category/i18n/en_US.csv

@@ -1,8 +1,9 @@
+"Add/Remove Products","Add/Remove Products"
 "Virtual rule","Virtual rule"
 "Virtual Category","Virtual Category"
 "Virtual Category Root","Virtual Category Root"
 "Products List Preview and Sorting","Products List Preview and Sorting"
 "Your product selection is empty for the selected Store View. If you are running a multi-store setup, please check this <a href='https://github.com/Smile-SA/elasticsuite/wiki/VirtualCategories#previewing-virtual-categories-on-a-multi-store-setup'>manual page</a> for more informations.","Your product selection is empty for the selected Store View. If you are running a multi-store setup, please check this <a href='https://github.com/Smile-SA/elasticsuite/wiki/VirtualCategories#previewing-virtual-categories-on-a-multi-store-setup'>manual page</a> for more informations."
 "Cannot move the category : '%2' is using '%1' as virtual root category.","Cannot move the category : '%2' is using '%1' as virtual root category."
 "Use default positions","Use default positions"
-"In this mode, you can only preview products position and visibility but not change them. If you want to change them globally, switch to the 'All Store Views' Store View. If you want to change them for the currently selected Store View, change 'Use default positions' to 'No'.","In this mode, you can only preview products position and visibility but not change them. If you want to change them globally, switch to the 'All Store Views' Store View. If you want to change them for the currently selected Store View, change 'Use default positions' to 'No'."
+"In this mode, you can only preview products position and visibility but not change them. If you want to change them globally, switch to the 'All Store Views' Store View. If you want to change them for the currently selected Store View, change 'Use default positions' to 'No'.","In this mode, you can only preview products position and visibility but not change them. If you want to change them globally, switch to the 'All Store Views' Store View. If you want to change them for the currently selected Store View, change 'Use default positions' to 'No'."

src/module-elasticsuite-virtual-category/i18n/fr_FR.csv

@@ -1,8 +1,9 @@
+"Add/Remove Products","Ajouter/Supprimer des produits"
 "Virtual rule","Règle à appliquer"
 "Virtual Category","Catégorie virtuelle"
 "Virtual Category Root","Racine de la catégorie virtuelle"
 "Products List Preview and Sorting","Prévisualisation et tri"
 "Your product selection is empty for the selected Store View. If you are running a multi-store setup, please check this <a href='https://github.com/Smile-SA/elasticsuite/wiki/VirtualCategories#previewing-virtual-categories-on-a-multi-store-setup'>manual page</a> for more informations.","Votre sélection de produits est vide pour la vue magasin actuellement sélectionnée. Si votre site comporte plusieurs vues magasin, consultez cette <a href='https://github.com/Smile-SA/elasticsuite/wiki/VirtualCategories#previewing-virtual-categories-on-a-multi-store-setup'>page du manuel</a> pour plus d'informations."
 "Cannot move the category : '%2' is using '%1' as virtual root category.","Impossible de déplacer la catégorie : '%2' utilise actuellement '%1' comme racine."
 "Use default positions","Utiliser les positions par défaut"
-"In this mode, you can only preview products position and visibility but not change them. If you want to change them globally, switch to the 'All Store Views' Store View. If you want to change them for the currently selected Store View, change 'Use default positions' to 'No'.","Dans ce mode, vous ne pouvez que prévisualiser la position des produits et leur visibilité. Si vous souhaitez les modifier de façon globale, basculer sur la Vue Magasin 'Toutes les vues magasin'. Si vous souhaitez les modifier pour la Vue Magasin actuellement sélectionnée, basculez 'Utiliser les positions par défaut' à 'Non'."
+"In this mode, you can only preview products position and visibility but not change them. If you want to change them globally, switch to the 'All Store Views' Store View. If you want to change them for the currently selected Store View, change 'Use default positions' to 'No'.","Dans ce mode, vous ne pouvez que prévisualiser la position des produits et leur visibilité. Si vous souhaitez les modifier de façon globale, basculer sur la Vue Magasin 'Toutes les vues magasin'. Si vous souhaitez les modifier pour la Vue Magasin actuellement sélectionnée, basculez 'Utiliser les positions par défaut' à 'Non'."

src/module-elasticsuite-virtual-category/view/adminhtml/layout/merchandiser.xml

@@ -0,0 +1,30 @@
+<?xml version="1.0"?>
+<!--
+/**
+ * Smile_ElasticsuiteVirtualCategory category form modifications.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade Smile ElasticSuite to newer
+ * versions in the future.
+ *
+ * @category  Smile
+ * @package   Smile\ElasticsuiteVirtualCategory
+ * @author    Pierre Gauthier <pigau@smile.fr>
+ * @copyright 2021 Smile
+ * @license   Open Software License ("OSL") v. 3.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="category.merchandiser.smart_category" remove="true" />
+        <referenceBlock name="category.merchandiser.sort_products_button" remove="true" />
+        <referenceBlock name="category.merchandiser.sort_order" remove="true" />
+
+        <referenceBlock name="category.merchandiser.add_product_button">
+            <arguments>
+                <argument name="label" translate="true" xsi:type="string">Add/Remove Products</argument>
+            </arguments>
+        </referenceBlock>
+    </body>
+</page>

src/module-elasticsuite-virtual-category/view/adminhtml/requirejs-config.js

@@ -21,6 +21,9 @@ var config = {
         mixins: {
             'Magento_PageBuilder/js/form/provider/conditions-data-processor': {
                 'Smile_ElasticsuiteVirtualCategory/js/form/provider/conditions-data-processor-mixin': true
+            },
+            'Magento_VisualMerchandiser/js/merchandiser': {
+                'Smile_ElasticsuiteVirtualCategory/js/merchandiser-mixin': true
             }
         }
     }

src/module-elasticsuite-virtual-category/view/adminhtml/ui_component/category_form.xml

@@ -16,7 +16,7 @@
  * @license   Open Software License ("OSL") v. 3.0
  */
  -->
- 
+
 <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
 
@@ -26,7 +26,7 @@
                 <item name="opened" xsi:type="boolean">true</item>
             </item>
         </argument>
-    
+
         <field name="is_virtual_category">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
@@ -50,7 +50,7 @@
                 </item>
             </argument>
         </field>
-        
+
         <container name="assign_products_container">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
@@ -76,7 +76,7 @@
                     <item name="sortOrder" xsi:type="number">20</item>
                 </item>
             </argument>
-            
+
             <field name="virtual_category_root">
                 <argument name="data" xsi:type="array">
                     <!-- Options provider is a virtualType defined in DI -->
@@ -107,7 +107,7 @@
                     </item>
                 </argument>
             </field>
-            
+
             <htmlContent name="virtual_rule">
                 <argument name="block" xsi:type="object">Smile\ElasticsuiteVirtualCategory\Block\Adminhtml\Catalog\Category\VirtualRule</argument>
                 <argument name="data" xsi:type="array">
@@ -121,9 +121,9 @@
                     </item>
                 </argument>
             </htmlContent>
-            
+
         </container>
-        
+
         <container name="product_sorter_container" template="Smile_ElasticsuiteVirtualCategory/form/element/container">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">

src/module-elasticsuite-virtual-category/view/adminhtml/web/css/source/_module.less

@@ -60,3 +60,15 @@
         }
     }
 }
+
+.merchandiser-app {
+    .merchandiser-tabs {
+        border-top: none;
+        > .tabs {
+            display: none;
+        }
+    }
+    .regular-category-settings {
+        width: ~'calc( (100%) * 0.25 - 20px )';
+    }
+}

src/module-elasticsuite-virtual-category/view/adminhtml/web/js/component/catalog/category/form/assigned_products.js

@@ -21,6 +21,7 @@ define([
     return Component.extend({
         defaults: {
             formField: "in_category_products",
+            visualMerchandiserFormField: "vm_category_products",
             links: {
                 addedProducts: '${ $.provider }:${ $.dataScope }.added_products',
                 deletedProducts: '${ $.provider }:${ $.dataScope }.deleted_products'
@@ -30,40 +31,49 @@ define([
             this._super();
             this.initAssignedProductsListener();
         },
-        
+
         initObservable: function () {
             this._super();
             this.addedProducts   = {};
             this.deletedProducts = {};
             this.observe('addedProducts');
             this.observe('deletedProducts');
-            
+
             return this;
         },
-        
+
         initAssignedProductsListener: function () {
             var observer = new MutationObserver(function () {
-                var selectedProductsField = document.getElementById(this.formField);
+                // Change listened field when visual merchandiser is enabled
+                var selectedProductsField = document.getElementById(this.formField)
+                    ? document.getElementById(this.formField)
+                    : document.getElementById(this.visualMerchandiserFormField);
                 if (selectedProductsField) {
                     observer.disconnect();
                     observer = new MutationObserver(this.onProductIdsUpdated.bind(this));
                     observerConfig = {attributes: true, attributeFilter: ['value']};
                     observer.observe(selectedProductsField, observerConfig);
+
+                    // Initialize initialProductIds in visual merchandising mode
+                    if (!document.getElementById(this.formField)) {
+                        let selectedProductsFieldVal = selectedProductsField.value ? selectedProductsField.value : '{}';
+                        this.initialProductIds = Object.keys(JSON.parse(selectedProductsFieldVal));
+                    }
                 }
             }.bind(this));
-            
+
             var observerConfig = {childList: true, subtree: true};
             observer.observe(document, observerConfig);
         },
-        
+
         onProductIdsUpdated: function (mutations) {
             while (mutations.length > 0) {
                 var currentMutation = mutations.shift();
                 var productIds = Object.keys(JSON.parse(currentMutation.target.value));
                 this.updateProductIds(productIds);
             }
         },
-        
+
         updateProductIds: function (productIds) {
             if (this.initialProductIds === undefined) {
                 this.initialProductIds = productIds;

src/module-elasticsuite-virtual-category/view/adminhtml/web/js/merchandiser-mixin.js

@@ -0,0 +1,48 @@
+define(
+    ['jquery'],
+    function ($) {
+
+        'use strict';
+
+        return function (targetWidget) {
+            $.widget('mage.visualMerchandiser', targetWidget, {
+                /**
+                 * Don't run smart category setup if block has been removed
+                 *
+                 * @returns void
+                 */
+                setupSmartCategory: function () {
+                    if ($('#smart_category_rules').val() !== undefined) {
+                        this._super();
+                    }
+                },
+
+                /**
+                 * Don't run tile view setup if block has been removed
+                 *
+                 * @returns void
+                 */
+                setupTileView: function () {
+                    // Disable tile view
+                },
+
+                /**
+                 * Remove product by refresing the grids
+                 * Fix find entity_id because position column has been removed
+                 *
+                 * @param {Object} row
+                 */
+                removeRow: function (row) {
+                    var data = this.getSortData();
+                    data.unset(parseInt(row.find('.col-entity_id').text()));
+                    $('#vm_category_products').val(Object.toJSON(data));
+                    this.savePositionCache(function () {
+                        this.reloadViews();
+                    }.bind(this));
+                },
+            });
+
+            return $.mage.visualMerchandiser;
+        };
+    }
+);