CMS du commerce et des flèches configurés optimisation

Je suis maintenant quelques mois pour explorer le CMS du commerce et des flèches configurés optimisation. Autant que je suis à la vitesse avec le côté du commerce configuré (ayant une expérience passée avec le commerce personnalisé), le côté CMS de Spire est un peu intimidant, ayant travaillé avec l’optimizel CMS traditionnel pendant un certain temps. Nous sommes confrontés à des défis pour comprendre les gestionnaires, un concept clé à la fois dans le commerce personnalisé et les Spire CMS.

Et oui il y a documentationmais c’est plus haut de gamme et pas assez pour comprendre le fonctionnement intérieur du code (ou peut-être que je n’ai pas encore eu la patience de traverser tout cela :)).

Inutile de dire que j’ai pris une approche plutôt «comprendre par moi-même» ici. Je trouve que c’est une bien meilleure façon d’apprendre et de se souvenir des trucs :).

Voici pour comprendre les gestionnaires

Dans un site de commerce, il y a l’historique des commandes pour chaque client, avec une capacité de «réorganiser». Je vais modifier le comportement de cette action de réorganisation et éviter d’ajouter un SKU spécifique au panier lorsque l’utilisateur clique sur «Réorganiser».

Défi n ° 1 – Où le code est-il lié à la réorganisation en direct?

Selon ce que vous recherchez et ce que vous devez modifier, il peut s’agir de fichiers différents dans le code source Frontend.

Défi n ° 2 – Comment trouver le bon fichier?

Je commence par rechercher sur des mots clés comme «réorganiser» qui me conduisent à certains fichiers, mais ce sont principalement des fichiers .tsx alias react composants qui avaient le bouton de réorganisation dessus. Ce que je recherche à la place, c’est la méthode réelle qui passe les lignes de commande actuelles à ajouter au panier, afin d’intercepter et de modifier.

Défi n ° 3 – Comment trouver le fichier qui prend les lignes de commande et ajoute à CART?

J’ai décidé qu’il était temps de mettre à profit mes compétences de navigateur. Je lance le site, ouvre les outils de développement et j’appuie sur la réorganisation pour surveiller tous les appels réseau qui se produisent. Et Bravo .. Je vois l’appel de l’API à API CART pour la charge en vrac, ce que fait cette action. Voici à quoi cela ressemble:

API / V1 / CARTS / Current / Cartlines / Batch

avec une charge utile de cartlines envoyée pour ajouter au panier.

Ingénierie inverse en action

Étape n ° 1 – J’ai tracé cela en code. Recherché «cartlines / lot» et trouvé 1 fichier – CartService.ts

Son code OOTB, mais pour les gens de nouveau dans ce domaine comme moi, nous ne savons pas quel dossier a quoi. Donc, je vais vous faciliter cette étape en vous disant exactement où vit ce fichier. Vous le trouverez à

Frontend \ modules \ client-framework \ src \ services \ cartService.ts

La méthode qui fait l’appel de l’API est addlineCollection (paramètre: addcartLinesapiparamètre).

Étape n ° 2 – Je recherche maintenant des fichiers qui ont appelé cette méthode. J’ai trouvé pas mal de fichiers qui appellent cela, mais pour mon scénario spécifique, je suis resté spécifiquement à ceux qui disaient «réorganiser». Ce sont les Frontend Handlers dans Spire CMS.

Voici la liste et les chemins des fichiers qui sont pertinents pour le contexte ici:

• Frontend \ modules \ client-framework \ src \ {blueprintname} \ pages \ OrderDetails \ Handlers \ reorder.ts
• Frontend \ modules \ Client-Framework \ src \ {blueprintname} \ pages \ orderhistory \ handlers \ reorder.ts
• Frontend \ modules \ client-framework \ src \ {blueprintname} \ pages \ Orderstatus \ Handlers \ reorder.ts

Une fois que je vois la ligne qui passe l’appel à AddlineCollection (), je vérifie comment le paramètre est défini.

Étape # 3 – Il ne reste plus qu’à mettre à jour le code qui définit le AddCartLinesapiparamètre pour cet appel, à partir des lignes de commande de l’ordre existantes. J’ajoute un filtre pour exclure le SKU spécifique que je ne veux pas être réécrit pour le carter sur la réorganisation, sur la collection de lignes de commande. Ressemble à ceci:

Et c’était tout. J’enregistre les fichiers. Rebuilds WebPack, je rafraîchis mon site, je suis réorganisé sur la commande qui avait ce SKU et il ne s’ajoute plus à CART.

Conclusion

En théorie, cela semble assez simple. Vous devez connaître l’API qui est appelée, où les appels vivent dans le code, quels gestionnaires font ces appels pour chaque action, etc.

Mais pour les débutants comme moi, ce n’est vraiment pas le cas. Vous ne connaissez pas toujours la structure de la base de code CMS Spire, le concept de plans ou de gestionnaires, les appels d’API qui sont effectués par action, ou comment travailler avec le code React / TypeScript. Donc, à mon avis, il s’agit d’un petit exercice utile, d’apprentissage à partir de laquelle collent maintenant en mémoire pour d’autres cas d’utilisation similaires.

J’espère que vous le trouverez aussi utile!