Bonjour à vous,
Je suis en train de travailler sur le module natif de wishlist BlockWishlist. L'idée est d'ajouter une option dans le système de filtrage en le rendant personnalisable par le client. J'ai ajouté une colonne "custom_order" à la table "ps_wishlist_product" avec la valeur par défaut de 10000 (afin que lors du tri les produits non triés se retrouvent en dernier). Lorsque l'option "personnalisable" est activée, des flèches apparaissent à côté des produits pour déplacer de haut en bas les produits et créer un nouvel ordre. L'idée est d'enregistrer à chaque déplacement le nouvel ordre dans la base de données. Au départ, je voulais le faire dans le stockage local, mais si le client change de poste, cela peut être agaçant pour lui de perdre sa liste.
J'ai édité la vue VueJS de ProductListContainer.vue afin d'ajouter l'option et également pour pouvoir ordonner grâce au module vue-draggable. J'arrive bien à déplacer mes éléments. J'utilise Axios parce que je comprends comment ça fonctionne, contrairement à GraphQL qui semble déjà plus technique pour ce que je veux faire. J'ai donc deux fonctions : saveOrder et loadOrder.
- saveOrder permet de sauvegarder la position dans la liste dans custom_order (dans la BDD)
- loadOrder permet d'afficher dans l'ordre quand l'utilisateur choisie "Personnalisée" dans les options de trie.
Le code de loardOrder dans vueJS
J'ai une fonction qui compare les ID du produits dans la base de données et celle affichée afin de réordonner. ça fonctionne.
Ma fonction loadOrder fonctionne bien mais c'est saveOrder sur laquelle je rencontre un soucis.
Voici la method de saveOrder dans mon VueJS :
async saveOrder() { console.log('Saving order...'); const orderData = this.filteredProducts.map((product, index) => ({ productId: product.id, customOrder: index + 1, })); try { await axios.post('/index.php?fc=module&module=blockwishlist&controller=action&action=saveOrder', { wishlistId: this.listId, orderData: JSON.stringify(orderData), }).then((response) => { if (response.data.success) { console.log('Order saved successfully!'); } else { console.error('Failed to save order:', response.data.message); } }); } catch (error) { console.error('Error saving order:', error); } },
Coté contrôleur je travail dans /blockwishlist/controllers/front/action.php_dev/front/js/action.php
j'ai ajouté des fonctions à postProcess et j'ai 2 fonctions
public function postProcess() { if (false === $this->context->customer->isLogged()) { $this->ajaxRender( json_encode([ 'success' => false, 'message' => $this->trans('You aren\'t logged in', [], 'Modules.Blockwishlist.Shop'), ]) ); exit; } $params = Tools::getValue('params'); $action = Tools::getValue('action'); if ($_SERVER['REQUEST_METHOD'] === 'POST') { if (isset($_POST['wishlistId']) && isset($_POST['orderData'])) { // Récupérez les valeurs de 'wishlistId' et 'orderData' $wishlistId = $_POST['wishlistId']; $orderData = json_decode($_POST['orderData'], true); } } // Here we call all methods dynamically given by the path if ($action === 'loadOrder') { call_user_func([$this, 'loadCustomOrder']); exit; } if ($action === 'saveOrder') { call_user_func([$this, 'saveCustomOrder'], $wishlistId, $orderData); exit; } if (method_exists($this, $action . 'Action')) { call_user_func([$this, $action . 'Action'], $params); exit; } $this->ajaxRender( json_encode([ 'success' => false, 'message' => $this->trans('Unknown action', [], 'Modules.Blockwishlist.Shop'), ]) ); exit; } // Function to save the custom order of products protected function saveCustomOrder($wishlistId, $orderData) { // Parcourir chaque élément de la commande foreach ($orderData as $item) { // Mettre à jour la table ps_wishlist_product avec le nouvel ordre personnalisé Db::getInstance()->update( 'ps_wishlist_product', ['custom_order' => (int)$item['customOrder']], // Nouvelle valeur de custom_order 'id_wishlist = ' . (int)$wishlistId . ' AND id_product = ' . (int)$item['productId'] // Conditions de mise à jour ); } // Renvoyer une réponse JSON indiquant le succès de l'opération $this->ajaxRender(json_encode(['success' => true])); } // Function to load the custom order of products protected function loadCustomOrder() { $wishlistId = Tools::getValue('wishlistid'); $products = Db::getInstance()->executeS( 'SELECT id_wishlist_product, id_wishlist, id_product, id_product_attribute, quantity, priority, custom_order FROM ps_wishlist_product WHERE id_wishlist = ' . $wishlistId . ' ORDER BY custom_order ASC' ); $this->ajaxRender(json_encode(['success' => true, 'products' => $products])); }
Le souci, c'est que les paramètres entrés dans Axios ne semblent pas atteindre le contrôleur. Après différents tests, les valeurs qui entrent dans :
$wishlistId = $_POST['wishlistId']; $orderData = json_decode($_POST['orderData'], true);
sont vides (NULL). J'aimerais bien savoir comment récupérer les valeurs d'Axios dans mon contrôleur PHP.
Je vous mets ce que le saveOrder envoie et reçois en pieces jointes.
J'ai vraiment envie d'utiliser Axios parce qu'on m'a conseillé de passer à GraphQL, mais ça semble beaucoup plus complexe à mettre en place, et Axios semble répondre à mes besoins.