[12.0.09] - Problème avec Snipcart (hors module)

augras · janvier 2023

Il y a un bouton ajouté à la barre d'outils de TinyMCE pour mettre en forme ce que l'on vend.

ClementL · janvier 2023

@fred, si @ortesse utilise le module, je crois me souvenir que l'ajout du bouton d'achat se passe dans l'éditeur de texte et ça ouvre les options de configuration.

@ortesse : je suis revenu à la version zwii 11, la mise au panier fonctionne, mais je ne sais pas si le processus d'achat peut être finalisé (pas encore eu de retour)

ClementL · janvier 2023

@fred, @augras, @ortesse

Suite à un échange de message, j'ai testé mon processus snipcart sur la boutique de l'association, j'ai arrêté juste au moment de l'inscription de la carte de paiement ; ce genre de processus génère normalement un panier abandonné du côté de snipcart ; ce qui est bien la cas ici !

Image: https://forum.zwiicms.fr/uploads/editor/fs/fcclavn0kmhf.png

Ce qui tend à dire que mon processus Snipcart semble encore opérationnel sur la boutique.

De ce que j'ai pu constater, peut-être une solution temporaire : rester sur ZWII 11, coder en dur (<>) toutes vos options de produits pour le panier (sans passer par le module utilisant TINYMCE)*, rester sur les anciens codes de connexion de SNIPCART** ; ça a l'air de continuer à marcher ? à priori...

** Ancien Code script dans Head

Ce code-là semble éviter les erreurs CORS dans la console JS

Le panier fonctionne jusqu'au processus de paiement, le lien semble fait entre la plateforme Snipcart et le site puisque les paniers (ici abandonnés) sont pris en compte (dans le dashboard).

* rajouter les éléments de cette manière, éditer la page, touche éditeur <> -> Code Source HTML et le faire en HTML dans l'éditeur
<button class="snipcart-add-item" data-item-id="starry-night" data-item-price="79.99" data-item-description="High-quality replica of The Starry Night by the Dutch post-impressionist painter Vincent van Gogh." data-item-image="/assets/images/starry-night.jpg" data-item-name="The Starry Night"> Add to cart </button>
Un autre moyen pour obtenir l'ancien code de connexion de snipcart => utiliser la WayBack Machine d'Archive.org
https://web.archive.org/web/20210624211534/https://docs.snipcart.com/v3/setup/installation

Voilà, A vous lire pour vos REX
Clément

augras · janvier 2023

Je viens de remettre en fonction une sauvegarde de mon site de tests avec la boutique snipcart : zwii en version 11.3.07 et tout fonctionne parfaitement avec le module (bouton snipcart présent dans TinyMCE pour insérer des objets facilement dans la boutique, et paramétrages de snipcart via l'interface de gestion du module fonctionnels).

Lors de l'installation du module les lignes que tu indiques @ClementL sont strictement les mêmes : elles sont simplement inscrites automatiquement (il y a une seule différence sur la ligne dans le BODY : c'est v3.0.25 au lieu de v3.0.23.

Le module n'est en fait "que" une interface pour insérer les objets dans la boutique et faciliter certains paramétrages de snipcart : mais c'est bougrement pratique.

À aucun moment je n'ai essayé de remplacer ce code dans HEAD et BODY par le code actuellement proposé par snipcart.

Il y a donc pour moi 2 dysfonctionnements avec snipcart à partir de la version 12 de zwii :
- le code tel que tu l'as donné, qui est le même avec ou sans le module, génère les erreurs CORS
- le bouton snipcart dans TinyMCE génère une erreur et du coup n'est plus présent : mais ça n'interfère pas avec le fonctionnement de snipcart... on n'a simplement plus la génération simplifiée des objets à mettre dans la boutique.

J'ai récupéré le zip de la dernière version de zwii dans la branche 11, la 11.5.13 et vais mettre à jour la version 11.3.07.
Lorsque j'ai fait la maj initiale et constaté le problème j'était en 11.5.11 et je suis passé directement à la 12.0.09.
Dans l'idéal se serait peut-être bien de pouvoir tester version par version depuis la 12.0.0 pour voir avec quelle version exactement le problème arrive : c'est peut-être la 12.0.0 mais peut-être une autre.
Je n'ai pas le zip de la première version 12 ni les suivants.

Thispy · janvier 2023

Bonjour,

Pour info snipcart fonctionne en 11.5.13 ave le module version 1.4

Ne fonctionne plus avec les versions supérieures.
J'ai un site test avant de faire la maj sur le site de vente en ligne en direct.

Cordialement,

fred · janvier 2023

Holà,
Je vous laisse creuser le problème, je me concentre sur les modules "grand public", notamment la réécriture des modules qui ne sont plus suivis.
Honnêtement, vous avez du courage.

augras · janvier 2023

Ce module, ou un autre similaire, est tout de même un sacré plus.

J'ai passé ma version 11.3.07 en 11.5.13 et tout fonctionne effectivement normalement, comme indiqué par @Thispy.

J'aimerai maintenant faire le test avec la première version de la branche 12 pour voir si ça dysfonctionne à partir de là ou ultérieurement.
@fred est-ce que tu peux peut passer le zip ?

Mais je me dis qu'il est fort probale que ça démarre avec cette première version 12 car dans la console le message d'erreur est en fait sur un problème de langue :

la politique « Same Origin » ne permet pas de consulter la ressource distante située sur https://cdn.snipcart.com/themes/v3.0.23/l10n/fr_FR.json

Et comme la grande nouveauté de la version 12 c'est la nouvelle gestion des langues...

augras · janvier 2023

Juste avant le message d'erreur donné juste au-dessus à propos de fr_FR.json il y a une autre info :

Locale fr_FR was not found, falling back to fr.

J'en déduis que snipcart cherche la locale fr_FR mais ne la trouve pas : il y a un renommage qui a été fait au niveau des langues je suppose entre la version 11 et 12 ?
En 11 on ne serait pas en fr_FR et plus en 12 ?

fred · janvier 2023

@augras, Cela n'a rien à voir avec Zwii, c'est une erreur qui est levée par snipcard, je l'avais vue lors des premiers tests.
Attention avec les premières versions 12, il y a un double appel qui faussera les tests.

augras · janvier 2023

Oui, c'est snipcart qui cherche ce fr_FR.json et ne le trouve pas... dans zwii 12, car dans zwii 11.5.13 soit il ne cherche pas, pourquoi, soit il cherche et trouve, ce qui n'a pas trop de sens puisque la même chose avec zwii 12 il ne trouve plus : bêtement peut-être je me dis que du coup il ne le cherche pas en 11.5.13.
À noter que le lien direct dans la barre d'adresse du navigateur retourne une page blanche, même pas d'erreur.
Snipcart fonctionnant en 11.5.13 et sans rien changer ne fonctionnant plus avec zwii 12, il y a bien quelque chose qui explique cela dans zwii : je sais bien que "la lumière ne t'es pas encore venue", et comme la gestion des langues est un grand changement, parmi d'autres, à partir de zwii 12 je cherchais dans ce sens.

augras · janvier 2023

@ClementL indique plus haut de rester sur les anciens codes de Snipcart.
Je viens de faire le test sur une version 11.5.13 avec les nouveaux codes, donc la dernière version de snipcart, et ça fonctionne : j'ai uniquement noté un soucis pour saisir un code promo, sinon tout est ok. Hors module snipcart.

J'ai fait la même chose avec la dernière version de la branche 12 et exactement les mêmes erreurs qu'avec le code snipcart ancien.

augras · janvier 2023

Quelle que soit la version du code snipcart il y a en version 11.5.13 tout de même une erreur dans la console, qui n'empêche pas le fonctionnement manifestement :

The #snipcart div was removed from the document. This may happen when a frontend library is used to render the div. You should only render it once, or it might prevent the cart from working.

Est-ce que c'est dû à la duplication du script ?

fred · février 2023

Demain jeudi, je reprends le module pour le corriger.

augras · février 2023

Un grand MERCI @fred !

Désolé pour le boulot !

augras · février 2023

Par rapport à mon message un peu plus haut, sur l'usage de la dernière version de snipcart tel qu'indiqué sur leur site https://docs.snipcart.com/v3/setup/installation (plus rien dans le head et tout dans le body), j'ai contacté le support de snipcart à propos de la partie sur la saisie du code promo qui n'était pas facile voir impossible puisque le formulaire est chamboulé, la réponse :
"Après avoir regardé votre site Web, j'ai remarqué que vos classes CSS dans les fichiers theme.css et common.css entrent en conflit avec le thème Snipcart. Pour résoudre ce problème, veuillez vous assurer de limiter le portée de vos classes afin qu'elles ne ciblent que les éléments que vous souhaitez modifier."
Cela n'a rien à voir avec le fait que snipcart ne fonctionne pas en version 12 de zwii, juste avec la mise en forme du formulaire de saisie du code promo en utilisant la dernière version de snipcart.
La version de snipcart installée avec le module initial est toujours fonctionnelle et n'a pas ce problème : on ne sait pas combien de temps elle sera encore supportée.

augras · février 2023

Afin d'essayer d'avancer, un peu et à mon niveau, j'ai décidé de faire un page html toute simple avec quelques articles, hors de zwii.
Les articles ne sont ni plus ni moins que du copier/coller du code de la boutique sur mon site de tests, avec simplement modification des chemins pour les images.
C'est le code pour la dernière version de snipcart que j'ai pris.
Une petite nouveauté, entre autre je suppose, est de pouvoir afficher le bouton pour voir son Panier avec le nombre d'articles et le prix total (il ne me semble pas que cela existait dans la version antérieure qui est celle du plugin).

Et bien tout fonctionne !

Vous pouvez vous en rendre compte là : https://augras.eu/boutiquefr.html

Le code de la page est très simple (la partie SCRIPT est donnée par snipcart, de même que le code pour afficher le contenu du panier avec le nombre d'articles et le prix total)

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Boutique</title>
</head>
<body>
  <script>
  window.SnipcartSettings = {
    publicApiKey: "METTRE_VOTRE_CLÉ",
    loadStrategy: "on-user-interaction",
  };

  (function(){var c,d;(d=(c=window.SnipcartSettings).version)!=null||(c.version="3.0");var s,S;(S=(s=window.SnipcartSettings).timeoutDuration)!=null||(s.timeoutDuration=2750);var l,p;(p=(l=window.SnipcartSettings).domain)!=null||(l.domain="cdn.snipcart.com");var w,u;(u=(w=window.SnipcartSettings).protocol)!=null||(w.protocol="https");var m,g;(g=(m=window.SnipcartSettings).loadCSS)!=null||(m.loadCSS=!0);var y=window.SnipcartSettings.version.includes("v3.0.0-ci")||window.SnipcartSettings.version!="3.0"&&window.SnipcartSettings.version.localeCompare("3.4.0",void 0,{numeric:!0,sensitivity:"base"})===-1,f=["focus","mouseover","touchmove","scroll","keydown"];window.LoadSnipcart=o;document.readyState==="loading"?document.addEventListener("DOMContentLoaded",r):r();function r(){window.SnipcartSettings.loadStrategy?window.SnipcartSettings.loadStrategy==="on-user-interaction"&&(f.forEach(function(t){return document.addEventListener(t,o)}),setTimeout(o,window.SnipcartSettings.timeoutDuration)):o()}var a=!1;function o(){if(a)return;a=!0;let t=document.getElementsByTagName("head")[0],n=document.querySelector("#snipcart"),i=document.querySelector('src[src^="'.concat(window.SnipcartSettings.protocol,"://").concat(window.SnipcartSettings.domain,'"][src$="snipcart.js"]')),e=document.querySelector('link[href^="'.concat(window.SnipcartSettings.protocol,"://").concat(window.SnipcartSettings.domain,'"][href$="snipcart.css"]'));n||(n=document.createElement("div"),n.id="snipcart",n.setAttribute("hidden","true"),document.body.appendChild(n)),h(n),i||(i=document.createElement("script"),i.src="".concat(window.SnipcartSettings.protocol,"://").concat(window.SnipcartSettings.domain,"/themes/v").concat(window.SnipcartSettings.version,"/default/snipcart.js"),i.async=!0,t.appendChild(i)),!e&&window.SnipcartSettings.loadCSS&&(e=document.createElement("link"),e.rel="stylesheet",e.type="text/css",e.href="".concat(window.SnipcartSettings.protocol,"://").concat(window.SnipcartSettings.domain,"/themes/v").concat(window.SnipcartSettings.version,"/default/snipcart.css"),t.prepend(e)),f.forEach(function(v){return document.removeEventListener(v,o)})}function h(t){!y||(t.dataset.apiKey=window.SnipcartSettings.publicApiKey,window.SnipcartSettings.addProductBehavior&&(t.dataset.configAddProductBehavior=window.SnipcartSettings.addProductBehavior),window.SnipcartSettings.modalStyle&&(t.dataset.configModalStyle=window.SnipcartSettings.modalStyle),window.SnipcartSettings.currency&&(t.dataset.currency=window.SnipcartSettings.currency),window.SnipcartSettings.templatesUrl&&(t.dataset.templatesUrl=window.SnipcartSettings.templatesUrl))}})();
</script>
<!-- Ajout d'un bouton pour voir tout le panier avec affichage du nombre d'articles et du prix total du panier -->
<button class="snipcart-checkout">Voir votre panier
<span class="snipcart-items-count"></span> article(s)
Prix total <span class="snipcart-total-price"></span></button>

<!-- 2 produits dans la boutique -->
<div class="row" align="center">
		<div class="col" style="margin: 10px 10px;">
				<div class="block" style="border: 1px #000 solid;">
						<h4 style="text-align: center;">Pantoufles</h4>
						<p><img src="/boutique/site/file/source/pantoufles.png" title="Pantoufles" alt="" style="display: block; margin-left: auto; margin-right: auto;" width="177" height="177" /></p>
						<p>Charentaises : on est bien dedans mais il ne vaut mieux pas sortir avec :) !</p>
						<p>Pointures : du 38 au 48</p>
						<p>Prix : &agrave; partir de 20,00&euro;</p>
						<p style="text-align: center;"></p>
						<p style="text-align: center;"><button class="snipcart-add-item" data-item-id="50" data-item-price="20" data-item-url="https://augras.eu/ZwiiCMS/boutique" data-item-description="De belles charentaises" data-item-image="/boutique/site/file/source/pantoufles.png" data-item-name="Pantoufles" data-item-weight="1" data-item-taxes="TVA20%" data-item-has-taxes-included="true" data-item-shippable="true" data-currency="eur" data-item-custom1-name="Pointures" data-item-custom1-options="38|39|40(+5&euro;)[+5]|41(+5&euro;)[+5]|42(+5&euro;)[+5]|43(+10&euro;)[+10]|44(+10&euro;)[+10]|45(+10&euro;)[+10]|46(+15&euro;)[+15]|47(+15&euro;)[+15]|48(+15&euro;)[+15]" labelstart="textFree" style="color: #000000; background-color: #aae69a; width: 100%px;">Ajouter au panier</button></p>
				</div>
		</div>
		<div class="col" style="margin: 10px 10px;">
				<div class="block" style="border: 1px #000 solid;">
						<h4 style="text-align: center;">Ch&acirc;teau Lafite-Rotschild</h4>
						<p><img src="/boutique/site/file/source/vin.png" alt="" style="display: block; margin-left: auto; margin-right: auto;" width="77" height="187" /></p>
						<p>Rouge</p>
						<p>Bordeaux Pauillac</p>
						<p>Ann&eacute;e : 2014</p>
						<p>A consommer id&eacute;alement : 2024/2054</p>
						<p>De 0,5l &agrave; 12l</p>
						<p>Prix unitaire &agrave; partir de 850,00&euro;</p>
						<p style="text-align: center;"><button class="snipcart-add-item" data-item-id="12" data-item-price="850" data-item-url="https://augras.eu/ZwiiCMS/boutique" data-item-description="Vin rouge d'excellence. Ann&eacute;e 2014." data-item-image="/boutique/site/file/source/vin.png" data-item-name="Vin Ch&acirc;teau Lafite-Rotschild" data-item-weight="1000" data-item-taxes="TVA20%" data-item-has-taxes-included="true" data-item-shippable="true" data-currency="eur" data-item-custom1-name="Bouteilles" data-item-custom1-options="0,5l|0,75l(+150&euro;)[+150]|1l(+300&euro;)[+300]|6l(+6900&euro;)[+6900]|12l(+13000&euro;)[+13000]" labelstart="textFree" style="color: #000000; background-color: #bfebb0; width: 100%px;">Ajouter au panier</button></p>
						<p>&nbsp;</p>
				</div>
		</div>
</div>


</body>
</html>

C'est donc un grand mystère pour moi que tout ça ne fonctionne plus depuis la version 12 de zwii.
Car même sans utiliser le plugin il n'est plus du tout possible d'utiliser snipcart en mettant le code ci-dessus dans le Body pour le script et dans une page de zwii pour les articles et la mise en page.

Le grand intérêt du plugin étant tout de rendre cela accessible à n'importe qui en paramétrant snipcart et ajoutant des articles directement depuis TinyMCE, sans une lettre de code, et de profiter des diverses mises en page de façon quasi automatique.

Mystère et boule de gomme !

augras · février 2023

Peut-être l'explication !
Dans mon fichier exemple ci-dessus j'ai

<html lang="fr">

J'ai mis "fr" sans y prêter attention.
Mais cela a manifestement son importance car si je mets "fr_FR" et bien snipcart ne fonctionne plus et retourne alors l'erreur déjà relevée :

- Access to XMLHttpRequest at 'https://cdn.snipcart.com/themes/v3.4.1/l10n/fr_FR.json' from origin 'https://augras.eu' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.                                                       boutique.html:1
- Locale fr_FR was not found, falling back to fr.           snipcart.js:36
- Failed to load resource: net::ERR_FAILED                  cdn.snipcart.com/themes/v3.4.1/l10n/fr_FR.json:1

Et si je remets "fr" et bien tout fonctionne.

Et à partir de la version 12 de zwii on a <html lang="fr_FR">.

Pour autant snipcart fonctionne avec les langues régionales et devrait donc fonctionner avec fr_FR dans l'entête html : je viens d'interroger le support.

Une grande part de l'explication donc.
Par contre cela n'a je pense rien à voir avec le dysfonctionnement du template TinyMCE.

fred · février 2023

Bonjour,
Effectivement, la langue déclarée dans la balise html ne devrait prendre que la racine du code de langue, soit fr au lieu de fr_FR, je viens de vérifier après ton message. Erreur de ma part donc.
Le pire, c'est que tu avais mis le doigt dessus depuis un moment.
Le bug est corrigé dans la branche 12204 que tu peux télécharger à nouveau. Je déplace dans les bugs.

augras · février 2023

Je vais la télécharger de ce pas.
Et surtout regarder ce que ça donne du coup côté TinyMCE.
Curieux de la réponse du support Snipcart tout de même.
Le lien de la doc Snipcart qui m'a mis la puce à l'oreille : https://docs.snipcart.com/v3/fr/configuration/localisation

augras · février 2023

Installation neuve de Zwii avec installation également neuve du plugin (pas d'importation de site) : snipcart fonctionne et la configuration du module aussi. Il y a simplement un petit décalage lorsque l'on clique sur le bouton Promo mais ça fonctionne.
Par contre pas le template dans TinyMCE : le init.js du plugin ne doit plus correspondre à ce qu'attend la nouvelle version de TinyMCE, je suppose...

Mais c'est l'ancienne version de snipcart ! Après suppression de la partie snipcart dans Head et Body puis intégration du nouveau code uniquement dans Body snipcart fonctionne toujours.
Mais le bouton Promo n'est plus utilisable cette fois : chevauchement complet du bouton Appliquer avec la zone de saisie du code de promo.

J'avais signalé ça déjà au support snipcart qui avait répondu

"Après avoir regardé votre site Web, j'ai remarqué que vos classes CSS dans les fichiers theme.css et common.css entrent en conflit avec le thème Snipcart. Pour résoudre ce problème, veuillez vous assurer de limiter le portée de vos classes afin qu'elles ne ciblent que les éléments que vous souhaitez modifier."

Apparemment çe ne concerne que le bouton Promo : j'ai trouver comment améliorer les choses pour que cela soit fonctionnel en agissant au niveau du css de snipcart en personnalisant le css de la page :

.snipcart-discount-box__submit { width:17%;}.snipcart-discount-box__cancel { width:14%;}

Le bouton est alors utilisable.

Mais il y a une couleur qui s'applique au bouton Appliquer qui vient de je ne sais où dans le thème de Zwii qui persiste, et un autre petit parasitage : il y a manifestement du code css de zwii qui s'applique très largement, ce qui doit correspondre "à la portée de vos classes" évoquée par le support.

Le positif est que snipcart fonctionne désormais, avec un "petit" soucis de css sur la fonction Promo (tout à fait fonctionnelle avec le code donnée ci-dessus) et par contre la partie template de TinyMCE qui est KO.

ClementL · février 2023

Félicitation @augras ! Super boulot ! On tournait autour depuis pas mal de temps ! :-)

augras · février 2023

Merci @ClementL : en fait c'était clairement écrit dans leur doc que la langue est fixée en fonction du paramètre lang dans la balise html !

J'ai eu une première réponse du support snipcart et normalement il n'aurait pas dû y avoir ce problème : snipcart cherchait le fichier fr_FR.json et ne le trouvait pas puisqu'il n'existe effectivement pas, automatiquement il cherche alors le fichier fr.json qui lui existe bien mais il ne le trouve pas et c'est là qu'il perd les pédales, alors que dans le pire des cas il bascule sur le en.json.
Et c'est la même erreur si on est en en_GB, en_US et je suppose pas mal d'autres : du coup là ils planchent sur le truc.

Pour l'astuce css à propos du bouton Promo je l'avais validée sur ma version 11.5.13 en faisant la modification dans l'éditeur css, custom.css donc : il se trouve que dans la 12.2.04 j'ai voulu faire cette modification avec l'éditeur css de la page via l'onglet Extension... et ça ne marche pas, obliger de passer par l'éditeur général.

Toi qui n'utilises pas le plugin tu as dû voir que le nombre d'articles et le total du panier peuvent être ajoutés au bouton Panier :

<button class="snipcart-checkout">Voir votre panier
<span class="snipcart-items-count"></span> article(s)
Montant <span class="snipcart-total-price"></span></button>

Je trouve ça super pratique : par contre c'est encore une modif côté plugin.

augras · février 2023

Je trouve ça super pratique : par contre c'est encore une modif côté plugin.

Ça j'ai trouvé ! C'est dans le fichier /module/snipcart/view/index/index.php

fred · février 2023

@augras va nous livrer une version publiable du plugin pour la v12, bravo à toi.

TipO · février 2023

Chapeau à tous pour ce boulot de limier ! La plupart du temps, j'admire en silence…

augras · février 2023

@augras va nous livrer une version publiable du plugin pour la v12, bravo à toi.

Malheureusement je ne crois pas que cela soit à ma portée !
Ce satané init.js ne veut rien savoir : il y a bien quelques différences entre celui de la nouvelle version et l'ancien mais mes adaptations sur celui du plugin ne fonctionnent pas ! Les différences sont trop hermétiques pour moi.
Et au niveau des conflits css entre zwii et snipcart je suis au bout de ce que je "comprends".

J'ai eu le retour du support snipcart à propos de fr_FR :

Le standard ISO pour l'attribut lang de la balise HTML est d'utiliser un format avec un tiret plutôt qu'un underscore, par exemple "fr-FR". Utiliser un underscore cause un conflit avec un API de formatage que nous utilisons.

Et je viens de vérifier en mettant dans mon fichier lang="fr-FR" et effectivement ça fonctionne sans sourciller.
C'est vrai que l'on voit souvent le underscore dans les fichiers de langues, manifestement à tort (je n'ai pas vérifié le coup de l'iso mais on doit pouvoir avoir confiance).

fred · février 2023

En effet, la préférence est pour le tiret plutôt que le soulignement mais uniquement pour le html pas pour les locales. De toutes manières, désormais, la langue déclarée dans html ne contiendra que les deux premières lettres. Donc fr_FR affichera fr.

augras · février 2023

Bon, j'essaye d'avancer et je croyais avoir vaincu... mais non ! Mais on s'approche... peut-être.
Quand l'erreur sur l'initialisation du plugin snipcart s'affiche dans zwii/TinyMCE il y a également une erreur qui apparaît dans la console du navigateur :

Échec d'initialisation du plug-in : snipcart Error: editor.addButton has been removed in tinymce 5x, use editor.ui.registry.addButton or editor.ui.registry.addToggleButton or editor.ui.registry.addSplitButton instead

Je comprends qu'il faut donc remplacer editor.addbutton par editor.ui.registry.addbutton.
Ce code se trouve dans le fichier /core/vendor/tinymce/plugins/snipcart/plugin.js
Il y a également une correction à faire dans /core/vendor/tinymce/plugins/snipcart/plugin.min.js

Ça a l'air de convenir car maintenant la console râle pour autre chose !

Uncaught Error: Errors Failed path: (toolbarbutton)  Could not find valid *required* value for "onAction" in {
"tooltip": "Snipcart",
"image": "https://augras.eu/zwiicms/core/vendor/tinymce/plugins/snipcart/img/snipcart.png",
"type": "button"
}
Input object: {
"tooltip": "Snipcart",
 "image": "https://augras.eu/zwiicms/core/vendor/tinymce/plugins/snipcart/img/snipcart.png",
 "type": "button"

Pour moi cela fait référence au code dans plugin.js :

editor.ui.registry.addButton('snipcart', {
tooltip: 'Snipcart',
image: url + '/img/snipcart.png',
onclick: _onAction
});
// Icône et texte Snipcart dans le menu
editor.ui.registry.addMenuItem('snipcart', {
text: 'Snipcart',
context: 'insert',
image: url + '/img/snipcart.png',
onclick: _onAction
});

La console indique

Could not find valid *required* value for "onAction"

et je dirai normal car dans le code pour le bouton on a "onclick: _onAction" mais rien pour "onAction: valeur attendue"
Je suppose donc qu'il faut remplacer onclick par onAction mais quoi mettre comme action justement ?
Là je sèche.

augras · février 2023

Bon, d'après la doc TinyMCE la valeur attendue est une fonction et ici cette fonction est la fonction _onAction donc simplement remplacer onclick par onAction devrait faire l'affaire... mais non ! L'erreur persiste.

augras · février 2023

Cette erreur est résolue et consiste effectivement à remplacer onclick par onAction : mais quand on modifie dans plugin.js... il faut également modifier en conséquence dans plugin.min.js !

L'icône Snipcart apparaît maintenant dans la barre d'outils de TinyMCE : enfin une icône, car l'icône est une petite bombe au lieu de celle de snipcart !
Chemins bons, dans les deux fichiers, entrée "image remplacée par "icon". Mais secondaire si le clic que le bouton affichait la fenêtre tant désirée... sauf que nenni !
Il y a finalement pas mal de différences entre les versions 4 et 5 de TinyMCE puisque la console retourne maintenant :

Uncaught Error: Errors: 

Failed path: (dialog > body)

Choice schema did not contain choice key: "type"

Failed path: (dialog > buttons > [0])

Choice schema did not contain choice key: "type"

Failed path: (dialog > buttons > [1])

Choice schema did not contain choice key: "type"

Failed path: (dialog > buttons > [2])

Choice schema did not contain choice key: "type"


Input object: {

  "title": "Création d'un produit Snipcart",

......... puis suite du contenu de la fenêtre et des onglets

Sauf que les "key type" qui manquent, même en parcourant la doc depuis ce matin (il n'y a pas tant de trucs que ça en plus), me restent complètement obscurs et que je ne vois même pas ou les mettre et quoi mettre.

Ci-dessous le fichier plugin.js tel qu'il est actuellement : évidemment si une bonne âme y voit plus clair que moi qu'elle se manifeste.

Mes modifications sont là :

// Icône Snipcart dans le toolbar

editor.ui.registry.addButton('snipcart', {

tooltip: 'Snipcart',

icon: '/img/snipcart.png',

//image: url + '/img/snipcart.png',

//onclick: _onAction

onAction: _onAction

});

// Icône et texte Snipcart dans le menu

editor.ui.registry.addMenuItem('snipcart', {

text: 'Snipcart',

context: 'insert',

icon: '/img/snipcart.png',

//image: url +'/img/snipcart.png',

//onclick: _onAction

onAction: _onAction

});

[12.0.09] - Problème avec Snipcart (hors module)

Commentaires

Salutations, Étranger !

Catégories

Dans cette Discussion