Jump to content

Edit History

vincent-letb

vincent-letb


simplifier la question en gardant l'essentiel

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.

Merci d'avance et bonne journée à vous.image.thumb.png.3366f83012cfe2772c1ef1688953f029.png

image.png

vincent-letb

vincent-letb

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.
  •  
  •  

Voici 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.

  async loadOrder(value) {
        this.selectedSort = value.label;
        console.log(this.filteredProducts);
        console.log('Loading order...');
        try {
            const response = await axios.post('/index.php?fc=module&module=blockwishlist&controller=action&action=loadOrder&wishlistid=' + this.listId);

          if (response.data.success) {
            const orderLoad = response.data.products;

            // Créer une copie des produits filtrés pour éviter les mutations directes
            const reorderedProducts = [...this.filteredProducts];

            // Parcourir chaque élément dans orderLoad
            orderLoad.forEach((item) => {
              // Trouver l'index du produit correspondant dans filteredProducts
              const index = reorderedProducts.findIndex((product) =>
                product.id_product == item.id_product &&
                product.id_product_attribute == item.id_product_attribute
              );

              // Si le produit correspondant est trouvé, réorganiser selon l'ordre personnalisé
              if (index !== -1) {
                // Supprimer le produit de sa position actuelle et le stocker
                const product = reorderedProducts.splice(index, 1)[0];
                // Insérer le produit à la nouvelle position
                reorderedProducts.splice(item.custom_order - 1, 0, product);
              }
            });
            // Mettre à jour filteredProducts avec les produits réorganisés
            this.filteredProducts = reorderedProducts;
            console.log('Order loaded successfully!');
          } else {
            console.error('Failed to load order:', response.data.message);
          }
        } catch (error) {
          console.error('Error loading order:', error);
        }
      },

Et saveOrder

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.

Merci d'avance et bonne journée à vous.image.thumb.png.3366f83012cfe2772c1ef1688953f029.png

image.png

vincent-letb

vincent-letb

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.
  •  
  •  

Voici 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.

 async loadOrder(value) {
        this.selectedSort = value.label;
        console.log(this.filteredProducts);
        console.log('Loading order...');
        try {
          const response = await axios.post('/index.php?fc=module&module=blockwishlist&controller=action&action=loadOrder&wishlistid=' + this.listId);

          if (response.data.success) {
            console.log('Order loaded successfully!');
            const orderLoad = response.data.orderData;

            // Créer une copie des produits filtrés pour éviter les mutations directes
            const reorderedProducts = [...this.filteredProducts];

            // Parcourir chaque élément dans orderLoad
            orderLoad.forEach((item) => {
              // Trouver l'index du produit correspondant dans filteredProducts
              const index = reorderedProducts.findIndex((product) =>
                product.id_product == item.id_product &&
                product.id_product_attribute == item.id_product_attribute
              );

              // Si le produit correspondant est trouvé, réorganiser selon l'ordre personnalisé
              if (index !== -1) {
                // Supprimer le produit de sa position actuelle et le stocker
                const product = reorderedProducts.splice(index, 1)[0];
                // Insérer le produit à la nouvelle position
                reorderedProducts.splice(item.custom_order - 1, 0, product);
              }
            });

            // Mettre à jour filteredProducts avec les produits réorganisés
            this.filteredProducts = reorderedProducts;
          } else {
            console.error('Failed to load order:', response.data.message);
          }
        } catch (error) {
          console.error('Error loading order:', error);
        }
      },

Et saveOrder

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.

Merci d'avance et bonne journée à vous.image.thumb.png.3366f83012cfe2772c1ef1688953f029.png

image.png

vincent-letb

vincent-letb

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.
  •  
  •  

Voici 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.

 async loadOrder(value) {
        this.selectedSort = value.label;
        console.log(this.filteredProducts);
        console.log('Loading order...');
        try {
          const response = await axios.post('/index.php?fc=module&module=blockwishlist&controller=action&action=loadOrder&wishlistid=' + this.listId);

          if (response.data.success) {
            console.log('Order loaded successfully!');
            const orderLoad = response.data.orderData;

            // Créer une copie des produits filtrés pour éviter les mutations directes
            const reorderedProducts = [...this.filteredProducts];

            // Parcourir chaque élément dans orderLoad
            orderLoad.forEach((item) => {
              // Trouver l'index du produit correspondant dans filteredProducts
              const index = reorderedProducts.findIndex((product) =>
                product.id_product == item.id_product &&
                product.id_product_attribute == item.id_product_attribute
              );

              // Si le produit correspondant est trouvé, réorganiser selon l'ordre personnalisé
              if (index !== -1) {
                // Supprimer le produit de sa position actuelle et le stocker
                const product = reorderedProducts.splice(index, 1)[0];
                // Insérer le produit à la nouvelle position
                reorderedProducts.splice(item.custom_order - 1, 0, product);
              }
            });

            // Mettre à jour filteredProducts avec les produits réorganisés
            this.filteredProducts = reorderedProducts;
          } else {
            console.error('Failed to load order:', response.data.message);
          }
        } catch (error) {
          console.error('Error loading order:', error);
        }
      },

Et saveOrder

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. 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.

Merci d'avance et bonne journée à vous.

vincent-letb

vincent-letb

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.
  •  
  •  

Voici 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.

 async loadOrder(value) {
        this.selectedSort = value.label;
        console.log(this.filteredProducts);
        console.log('Loading order...');
        try {
          const response = await axios.post('/index.php?fc=module&module=blockwishlist&controller=action&action=loadOrder&wishlistid=' + this.listId);

          if (response.data.success) {
            console.log('Order loaded successfully!');
            const orderLoad = response.data.orderData;

            // Créer une copie des produits filtrés pour éviter les mutations directes
            const reorderedProducts = [...this.filteredProducts];

            // Parcourir chaque élément dans orderLoad
            orderLoad.forEach((item) => {
              // Trouver l'index du produit correspondant dans filteredProducts
              const index = reorderedProducts.findIndex((product) =>
                product.id_product == item.id_product &&
                product.id_product_attribute == item.id_product_attribute
              );

              // Si le produit correspondant est trouvé, réorganiser selon l'ordre personnalisé
              if (index !== -1) {
                // Supprimer le produit de sa position actuelle et le stocker
                const product = reorderedProducts.splice(index, 1)[0];
                // Insérer le produit à la nouvelle position
                reorderedProducts.splice(item.custom_order - 1, 0, product);
              }
            });

            // Mettre à jour filteredProducts avec les produits réorganisés
            this.filteredProducts = reorderedProducts;
          } else {
            console.error('Failed to load order:', response.data.message);
          }
        } catch (error) {
          console.error('Error loading order:', error);
        }
      },

Et saveOrder

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 soucis c'est que les parametres entrée dans axios ne vont pas dans le contrôleur visiblement.
Apres different tests, la valeur qui entre dans

$wishlistId = $_POST['wishlistId'];
$orderData = json_decode($_POST['orderData'], true);

sont vides. (NULL)
J'aimerais bien savoir comment faire pour récupérer les valeurs de axios dans mon contrôleur php. J'ai vraiment envie d'utiliser axios parce qu'on m'a conseillé de partir sur graphQL mais ça l'air vraiment beaucoup plus complexe à mettre en place et axios semble répondre au besoin.

Merci d'avance,

Bonne journée à vous.

×
×
  • Create New...