AMP amp-form en mode POST : Quel action-xhr ?

ortolojf · 14 Novembre 2016

Bonjour

Je suis en train de développer mon formulaire ( en mode POST obligatoirement ) à étoiles en AMP.

Théoriquement, action-xhr doit être un script Ajax du type : XMLHttpRequest ou : Fetch API.

Mais, je n'ai jamais vu d'exemple d'un tel script.

Je ne vois pas comment si je programme un script Ajax de ce type, il pourrait être compatible AMP.

Merci beaucoup de votre aide.

Respectueusement.

ortolojf · 15 Novembre 2016

Rebonjour

1- Les scripts de type JSON sont les seuls acceptés par la norme AMP, dans les amp-form.

2- action-xhr doit lancer un script de la page, donc de type JSON.

Mais... Est-il possible de lancer dans un script JSON, un autre script à distance, sur le même site indeed ?

Je vais voir sur internet et mes exemples de David Walsh.

Merci beaucoup de vos réponses.

Amicalement.

ortolojf · 15 Novembre 2016

Bonjour

Voilà, j'ai refait l'interface sans fichier graphique, et quand je clique, il y a une erreur " Subscription failed",
ce qui prouve que l'input a réagi correctement.

Maintenant je dois faire un ( théoriquement simple ) script JSON dans cette page, qui permette à la form de lancer un script à distance ( en https ).

Je pourrais m'inspirer du script JSON ci-dessous, mais je ne sais pas transmettre de paramètre à ce script.

Le paramètre, serait param ( nombre d'étoiles ), le paramètre transmis par l'event : "submit".

Merci beaucoup de votre aide.

Respectueusement.

Code:

<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<title>Nouvelles Courses</title>
<link rel="canonical" href="new_tmp.php">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lora">
<style amp-custom>
html,body,header,section,article,aside,h1,h2,h3,h4,h5,h6,nav,p,ul,button,figure {
box-sizing: border-box;
    margin: 0;
    border: none;
    padding: 0;
}
a {
text-decoration: none;
}
ul,ol {
list-style: none;
}
body {
font-family: Lora, sans-serif;
font-size:20px;
}
@media screen and (max-width:640px){
body, button.header-button, button.menu-button, li.menu-item {
font-size:16px;
}
}
form.amp-form-submit-success [submit-success],
form.amp-form-submit-error [submit-error]{
margin-top: 16px;
}
form.amp-form-submit-success [submit-success] {
color: green;
}
form.amp-form-submit-error [submit-error] {
color: red;
}
form.amp-form-submit-success.hide-inputs > input {
display: none
}
#staring_form
{
display:inline-block;
background-color:rgb(255, 255, 255);
border-collapse:collapse;
border-radius:6px;
border:thin solid rgb(0, 0, 0);
font-size:18px;
margin-left:auto;
margin-right:auto;
padding: 8px 6px;
text-align:center;
max-width:90%;
}
form#form_votes fieldset
{
border:thin solid rgb(0, 0, 0);
border-radius:4px;
padding:7px 0;
margin:15px 0px 0px 0px;
}
/*  
 * Rating styles
 */
.votes_rating {
direction: rtl;
width: 210px;
margin: auto;
font-size: 25px;
/* overflow:hidden;   */
}
.votes_rating input {
opacity: 0;
position: absolute;
}
.votes_rating label {
color: green;
text-decoration: none;
}
.votes_rating label:hover ~ label,
.votes_rating input:focus ~ label,
.votes_rating input:checked ~ label,
.votes_rating label:hover {
color: orange;
cursor: pointer;
}
ul#current-rating
{
text-align:center;
width: 275px;
margin: 0 auto;
font-size: 22px;
}
ul#current-rating li
{
display:inline-block;
text-align:center;
width: 23.5px;
margin: 0 auto;
font-weight:600;
color:rgb(225,169,0);
}
div.centered
{
display:block;
margin-left:auto;
margin-right:auto;
text-align:center;
}
</style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-anim" src="https://cdn.ampproject.org/v0/amp-anim-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
</head>
<body>

<p><br /></p>

<amp-analytics>
    <script type="application/json">
        {
            "requests": {
                "event": "https://www.ampproject.org/static/img/logo-blue.svg?eid=${eventId}"
            },
            "triggers": {
                "formSubmitSuccess": {
                    "on": "amp-form-submit-success",
                    "request": "event",
                    "vars": {
                        "eventId": "form-submit-success"
                    }
                },
                "formSubmitError": {
                    "on": "amp-form-submit-error",
                    "request": "event",
                    "vars": {
                        "eventId": "form-submit-error"
                    }
                }
            }
        }
    </script>
</amp-analytics>

<p><br /></p>

<div class="centered">

<div id="staring_form" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
<div class="sous_titre" itemprop="itemreviewed">Page d'Accueil</div>
<br/>
<div class="sous_titre" itemprop="votes">162</div>
<div class="sous_titre">Votes</div>
&nbsp;&nbsp;<div class="sous_titre">3.5 / 7</div>
<div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
<form method="post"
	id="form_votes" action-xhr="https://www.pronostics-courses.fr/new_tmp.php"
	target="_blank"
	custom-validation-reporting="as-you-go">
      <fieldset>
	<p>Votre vote :</p>
	<div class="votes_rating">
	<input name="param" value="7" id="e7" type="submit"><label for="e7">&starf;</label>
	<input name="param" value="6" id="e6" type="submit"><label for="e6">&starf;</label>
	<input name="param" value="5" id="e5" type="submit"><label for="e5">&starf;</label>
	<input name="param" value="4" id="e4" type="submit"><label for="e4">&starf;</label>
	<input name="param" value="3" id="e3" type="submit"><label for="e3">&starf;</label>
	<input name="param" value="2" id="e2" type="submit"><label for="e2">&starf;</label>
	<input name="param" value="1" id="e1" type="submit"><label for="e1">&starf;</label>
	</div>
	<ul id="current-rating">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	</ul>
     </fieldset>

     <div submit-success>
	<template type="amp-mustache">
	Subscription successful!
	</template>
     </div>
     <div submit-error>
	<template type="amp-mustache">
	Subscription failed!
	</template>
     </div>
</form>
<meta itemprop="average" content="3.5"/>
<meta itemprop="best" content="7"/>
<meta itemprop="worst" content="1"/>
</div>

</div>
</div>

<p><br /></p>

</body>
</html>

ortolojf · 16 Novembre 2016

Bonjour

La nouvelle norme AMP de Google, fait que les formulaires html ( <form etc... ), ne sont plus supportés, au profit des <amp-form> , et que pour les formulaires de type POST, l'action doit être de la forme : "action-xhr", qui déclenche un sript JSON sur la page.

Merci de me détromper si je suis dans l'erreur.

Mon problème ( avec une "<amp-form type="POST", serait de déclencher, avec le script JSON, un script php ( du même site ) qui se charge de prendre en compte le paramètre "param" , qui est la seule donnée fournie par le formulaire lors de la submission.

Ce problème a trois facettes :

1) Transmission de "param" du formulaire au script JSON,

2) Lancement du script php avec le paramètre "param",

3) Récupération des résultats du calcul/traitement du script php.

Il faut ajouter, qu'avec amp-form et un autre composant AMP ( lequel je ne sais pas ), la submission de l'amp-form, entraîne bien l'activation du script JSON, de manière automatique.

Ceci ( d'après la documentation de Google ), soit en mode Fetch API, soit en mode XMLHttpRequest, suivant ce que le navigateur supporte.

Mais... Je n'arrive pas à trouver sur le net, d'exemples de scripts JSON qui accèdent à un script tiers externe.

Après, il resterait la transmission de la donnée de l'amp-form au script JSON.

Merci de m'éclairer par rapport à cette problématique particulière aux amp-form en mode post, qui n'accèdent pas directement à des urls externes. ( l'attribut "action" est interdit dans ce cas ).

Merci beaucoup de vos réponses.

Amicalement.

niap · 17 Novembre 2016

J'ai un peu regardé les formulaires AMP ce matin et j'ai réussi à le faire fonctionner.
Pas de script JSON à mettre en place. AMP fonctionne avec HTML 5 CORS, donc la communication entre PHP et le fichier doit être définie et les entêtes doivent préciser l'origine acceptée des fichiers.

J'ai crée un exemple bidon.
Le formulaire envoi un champ de texte et PHP renvoi cette donnée. Rien d'extra c'est juste pour la démo.

Démo ici : http://cresel-cms.com/amp/

Testé avec Firefox, Chrome. Avec Safari 5 ça ne fonctionne pas (mais c'est plutôt logique).

Voici mon fichier html :

Code:

<!doctype html>
<html amp lang="fr">
<head>
    <title>Test formulaire AMP</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
	<link rel="canonical" href="/test_amp.html">
	<script async src="https://cdn.ampproject.org/v0.js"></script>
	<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
	<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
	<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
body{
	width: auto;
	margin: 0;
	padding: 0;
}
</style>
</head>
<body>
<form method="post" action-xhr="https://www.cresel-cms.com/amp/form.php" target="_blank">
	<p><label for="email">Un texte : </label><input type="text" name="name" value="" required></p>
	<p><label> </label><input type="submit" value="Envoyer"></p>
	
	<div submit-success>
		<template type="amp-mustache">Le texte renvoyé par PHP : {{name}}</template>
	</div>
	<div submit-error>
		<template type="amp-mustache">Erreur !</template>
	</div>
</form>
</body>
</html>

Et voici mon fichier PHP

Code:

<?php
// on génère du JSON
header('Content-Type: application/json');
// défini les entêtes CORS
// il s'agit de s'assurer que le script et le fichier HTML sont copains https://www.html5rocks.com/en/tutorials/cors
header('Access-Control-Allow-Origin: http://cresel-cms.com'); // ici il faut mettre ton serveur
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin');
header('AMP-Access-Control-Allow-Source-Origin: http://cresel-cms.com'); // ici il faut mettre ton serveur. Tu peux utiliser 'https://'.$_SERVER['HTTP_HOST']

// ici on fait ce qu'on à faire avec nos données $_POST
$data = array();
$data['name'] = $_POST['name'];
// quand c'est fini on renvois le résultat au fichier HTML
// encode le résultat au format JSON
echo json_encode($data);
?>

En fait c'est très simple,il n'y a que les histoires d'entête qui sont un peu prise de tête à définir quand on ne sait pas.

ortolojf · 17 Novembre 2016

Bonjour Monsieur

Une seule question :

{{name}} est le paramètre lancé par le formulaire, ou le résultat affiché par le script php ?

Merci beaucoup de votre aide.

Chaleureusement.

niap · 17 Novembre 2016

C'est une variable du résultat JSON généré par le fichier PHP.

ortolojf · 17 Novembre 2016

Bonjour Monsieur

Je vais tester ( après le déjeuner ) sur mon site.

Je croyais que le script lancé par action-xhr, ne pouvait pas être un script externe, mais je me trompais.

Super merci beaucoup de ton aide.

Respectueusement et chaleureusement.

ortolojf · 19 Novembre 2016

Rebonjour niap

Ton exemple fonctionne.

Ma form ci-dessous ne fonctionne pas.

C'est l'url suivante :

https://www.pronostics-courses.fr/php/form_amp/old_courses.php

Le script est lancé, les deux valeurs hidden "request_uri" et "id-session" sont reçues par le script, mais la donnée: "star" n'est pas reçue. J'ai testé en loguant avec la fonction syslog().

C'est le seul problème qui reste à résoudre.

Voici les headers lancés par le script :

Code:

header('Content-Type: application/json');
// défini les entêtes CORS
header('Access-Control-Allow-Origin: https://' . $_SERVER['HTTP_HOST']); // ici il faut mettre ton serveur
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin');
header('AMP-Access-Control-Allow-Source-Origin: https://' . $_SERVER['HTTP_HOST']); // ici il faut mettre ton serveur. Tu peux utiliser 'https://'.$_SERVER['HTTP_HOST']

Voici le code du formulaire :

Code:

<form method="post" action-xhr="https://www.pronostics-courses.fr/php/form_amp/form_script.php" target="_blank">
<fieldset>
<input type="hidden" name="request_uri" value="/php/form_amp/old_courses">
<input type="hidden" name="id_session" value="mj742r4ndd2kageq4tuc30j0nvkppaa9r603jcaeas2kj17ti8k0">
<div class="votes_rating">
<input name="star" value="7" id="e7" type="submit"><label for="e7">&starf;</label><input name="star" value="6" id="e6" type="submit"><label for="e6">&starf;</label><input name="star" value="5" id="e5" type="submit"><label for="e5">&starf;</label><input name="star" value="4" id="e4" type="submit"><label for="e4">&starf;</label><input name="star" value="3" id="e3" type="submit"><label for="e3">&starf;</label><input name="star" value="2" id="e2" type="submit"><label for="e2">&starf;</label><input name="star" value="1" id="e1" type="submit"><label for="e1">&starf;</label></div>
<ul id="current-rating">
<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>
</fieldset>

<div submit-success>
<template type="amp-mustache">
<meta itemprop="average" content="{{arrondi_vote_moyen}}"/>
<meta itemprop="best" content="7"/>
<meta itemprop="worst" content="1"/>
&nbsp;&nbsp;<div id="message">
{{message2}}<br/>
{{message1}}</div>
</template>
</div>
<div submit-error>
<template type="amp-mustache">
<p>Erreur !</p>
</template>
</div>
</form>

Dans "journalctl -f" il n'y a aucune erreur.

Je me tire les cheveux.

Merci beaucoup de ton aide.

Respectueusement.

niap · 19 Novembre 2016

Bonsoir,

Remplace les input type submit par des input type radio. Apparement AMP ne laissent pas passer des multiples input type submit... ou alors mal :roll:

https://www.cresel-cms.com/amp-form/

Code:

<!doctype html>
<html amp lang="fr">
<head>
	<title>Test formulaire AMP</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
	<link rel="canonical" href="/test_amp.html">
	<script async src="https://cdn.ampproject.org/v0.js"></script>
	<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
	<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
	<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<form method="post" action-xhr="https://www.cresel-cms.com/amp-form/form.php" target="_blank">
	<fieldset>
		<input type="hidden" name="request_uri" value="/php/form_amp/old_courses">
		<input type="hidden" name="id_session" value="mj742r4ndd2kageq4tuc30j0nvkppaa9r603jcaeas2kj17ti8k0">
		<div class="votes_rating">
			<input name="star" value="7" id="e7" type="radio"><label for="e7">&starf;</label>
			<input name="star" value="6" id="e6" type="radio"><label for="e6">&starf;</label>
			<input name="star" value="5" id="e5" type="radio"><label for="e5">&starf;</label>
			<input name="star" value="4" id="e4" type="radio"><label for="e4">&starf;</label>
			<input name="star" value="3" id="e3" type="radio"><label for="e3">&starf;</label>
			<input name="star" value="2" id="e2" type="radio"><label for="e2">&starf;</label>
			<input name="star" value="1" id="e1" type="radio"><label for="e1">&starf;</label>
		</div>
		<input name="Submit" value="Voter" type="submit">
		<ul id="current-rating">
		<li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li>
		</ul>
	</fieldset>
	<div submit-success>
		<template type="amp-mustache">Star : {{star}}</template>
	</div>
	<div submit-error>
		<template type="amp-mustache">Erreur !</template>
	</div>
</form>
</body>
</html>

Code:

<?php
header('Content-Type: application/json');
header('Access-Control-Allow-Origin: https://'.$_SERVER['HTTP_HOST']);
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin');
header('AMP-Access-Control-Allow-Source-Origin: https://'.$_SERVER['HTTP_HOST']);

$data = array();
$data['star'] = $_POST['star'];
echo json_encode($data);
?>

ortolojf · 20 Novembre 2016

Bonjor niap

C'est ok, j'ai obtenu/logué la chaîne Json suivante :

Code:

 {"star":"3","id_session":"6ggpqbkut587fq1cv77bi27c53passpjh08qbaupnrc64acq2bu0","arrondi_vote_moyen":"4.5","message1":"","message2":""}

Mais le formulaire répond toujours obstinément : "Erreur".

Voici l'url du formulaire :

https://www.pronostics-courses.fr/php/form_amp/old_courses.php

J'ai mis en dessous dans le <template-success> les trois valeurs dont j'ai besoin :

{{arrondi_vote_moyen}} , {{message2}} et {{message1}}

Comme je suis obligé d'activer la session dans le script ( form_script.php ), j'ai mis un ob_start() et un ob_end_flush() à la fin.

Cependant la valeur "id_session" je n'en ai pas besoin.

Peut-être l'amp-form n'aime pas les variables vides ?

Ou bien le id="message" encadrant ces variables vides, cet id n'est pas fixé.

Merci beaucoup de ton aide.

Respecteusement.

niap · 20 Novembre 2016

Tu as des erreurs dans tes fichiers, regarde la console (sous Chrome)
log.js:399
Uncaught SyntaxError: Form submission failed:: Unexpected token <

old_courses.php:1
Refused to load the image 'https://amp-error-reporting.appspot.com/r?v=1478801557976&noAmp=0&m=Script%…onostics-courses.fr%2Fphp%2Fform_amp%2Fold_courses.php&f=&l=&c=&r=&ae=&fr=' because it violates the following Content Security Policy directive: "img-src 'self' data: localhost https://www.pronostics-courses.fr https://cdn.ampproject.org https://s3.eu-central-1.amazonaws.com https://www.google-analytics.com https://syndication.twitter.com https://www.facebook.com".

ortolojf · 21 Novembre 2016

Bonjour niap

Je vais de ce pas corriger les CSP directives de mon serveur VPS.

Merci beaucoup de ton aide.

Respectueusement.

ortolojf · 22 Novembre 2016

Bonjour niap

Super çà marche.

Je vais changer les libellés et apparences, et corriger les css.

Après, je vais adapter ce formulaire à mon site, sachant que le reste du site n'est pas compatible AMP.

Sur mon ordinateur, je ne pourrai pas encore mettre cette version en ligne, ( de peur d'indisposer Google avec un site AMP non compatible ).

Merci beaucoup de ton aide.

Respectueusement.

ortolojf · 24 Novembre 2016

Bonjour

Voici l'url : https://www.pronostics-courses.fr/php/form_amp/old_courses.php

Je détecte automatiquement ( mobile ou desktop ) si le navigateur est compatible AMP, sinon c'est la version classique.

Actuellement, je détecte les navigateurs suivants :

Chrome >=28.0
Firefox >= 38.0
Android >= 4.0

J'aurais besoin de savoir pour d'autres navigateurs ( Safari, IE, Edge, Opera ), lesquels sont compatibles AMP.

Mon formulaire ( version AMP ), a un problème, les indications en dessous du formulaire, sont dédoublés en statique et dynamique après choix par le visiteur.

Egalement, le vote est valable 30 jours, ne peut pas être répété, sauf ( c'est mon cas ), lorsque que j'ai une adresse ipv4 puis ipv6 ( ou le contraire ).

Je ne sais pas mettre un amp-form en mode disabled, aussi la version AM du formulaire peut être lancée n'importe quand, mais si le vote est déjà enregistré, il n'est pas pris en compte.

Les ip ne sont pas enregistrée, seulement un hash code.

Merci beaucoup de vos avis.

Merci beaucoup à niap de son aide.

Amicalement.

ortolojf · 30 Novembre 2016

Bonjour

Maintenant, ( c'est un autre topic ), j'ai terminé de fiabiliser ma version full PHP de tarteaucitron.

La logique est la suivante :

Les clics sur des lien/boutons ( sur l'ancienne interface ), sont remplacés par des clics sur des boutons ( de même apparence ), déclenchant chacun un formulaire avec un paramètre hidden composite.

Au lieu de prendre en compte les clics en déclenchant des fonctions Javascript, les clics sur les boutons, déclenchent un rechargement de la page en cours, et le paramètre ( en mode POST ), interprété, fait que la bonne fonction ( avec son paramètre ), est lancée, ce qui modifie dynamiquement les classes du code html de tarteaucitron, tout en agissant comme il faut sur le cookie.

Les formulaires sont obligatoirement en mode POST, c'est la seule façon de ne pas avoir de paramètres supplémentaires dans l'url.

J'ai l'intention, de porter cette version de tarteaucitron ( full PHP, sans Javascript ), en mode AMP, ce qui nécessite plusieurs choses :

- Les formulaires en mode POST, ne peuvent plus recharger la page entièrement.

- Les données issues de ces formulaires, ne peuvent pas être propagées pour modifier les classes du code html.

Je suis dans la mouise, je ne vois pas comment faire pour adapter ce script au mode AMP.

Merci beaucoup de votre aide.

Amicalement.

niap · 30 Novembre 2016

Miam de la tarte au citron :-D
C'est quoi l'adresse du site ?

Alors pour ton problème, le but est de faire quoi ? On peut voir un exemple pour avoir une idée ?

ortolojf · 1 Décembre 2016

Bonjour Monsieur

Voici l'adresse du site : https://www.pronostics-courses.fr

Il faudrait d'abord vérifier si ma version de ce système de gestion des cookies, est pleinement compliante avec la Directive Européenne sur les cookies, et avec les desiderata de la CNIL.

Tarteaucitron est le nom du script original, donné par son inventeur, et qui est en license GPL.

Le problème, consiste à convertir ma version de tarteaucitron, vers une version compatible avec la norme AMP de Google.

Les formulaires seront encore comme actuellement en mode POST, mais en mode AMP ce serait des "action-xhr" et non pas des "action" simples.,

Pour ma deuxième question : La propagation du paramètre hidden transmis par le formulaire ( AMP ) , peut se faire simplement par une variable de session, qui serait affectée par le script lancé.

Et ma première question : Est-il possible ( par exemple avec une amp-lightbox ), que le formulaire déclenche une fenêtre surgissante ?

Cette fenêtre surgissante, est actuellement simulée par la modification dynamique des classes css, elle-même permise par le rechargement de la page induit par le formulaire ( non AMP ).

C'est le cas quand on clique sur le bouton "Personnaliser", ou "Gestion des cookies".

Cette fenêtre, permet de visualiser plusieurs boutons d'activation/désactivation des services.

Si c'est impossible d'avoir la main sur plusieurs boutons de ce type, à ce moment-là c'est un problème pur d'interface, qui serait réduite à une portion de l'écran, qui ne permettrait que d'agir sur tous les services en même temps ( Universal Analytics, Google+, Facebook etc... ) et non pas individuellement.

Tout le problème est là : Avec un formulaire AMP ( plus autres composants AMP si nécessaire ), est-il possible de déclencher l'équivalent d'une fenêtre surgissante ( modale.. ) ?

Ceci, pour avoir le choix d'activation ou désactivation de chaque services ?

Voici donc ma question : Un formulaire AMP peut-il déclencher une autre page, ou la même page ?

Merci beaucoup de ton aide.

Respectueusement.

ortolojf · 1 Décembre 2016

Rebonjour

En théorie, un formulaire AMP peut activer une amp-lightbox.

Mais comment passer un paramètre à une amp-lightbox ?

Ceci à partir d'un amp-form ?

Merci beaucoup de votre aide.

Amicalement.

niap · 1 Décembre 2016

Tu as besoin de traiter les données de retour ?
Sinon avec amp-mustache

ortolojf · 1 Décembre 2016

Bonjour Niap

En fait traiter les données ( un seul paramètre ) de retour de l'amp-form , ce serait pouvoir les transmettre à l'amp-lightbox et les traiter en aval. Pas possible avec amp-mustache.

Sinon, deux composant simultanés : l'amp-form et l'amp-lightbox, qui puissent être déclenchés en même temps par un clic.

Sinon, sans amp-form je fixe les données des amp-lighbox en amont ( une amp-ligthbox par bouton actif ).

Mais... 1) une amp-lighbox est destinée à contenir des boutons, qui ne pourraient être que des amp-form ( en mode POST ).

Et... 2) Problème de traitements différents ( un par amp-lightbox ) dans la page initiale en amont pour le cookie.

Il y a plusieurs problèmes :

- Quels objets interfaces ?

- Transmission ( éventuelle ) des données aux objets fils,

- Traitement des données en fonction des choix utilisateurs.

- Ajoutons aussi : les objets fils sont censés ne pas être passifs, c-à-d qu'ils peuvent contenir des amp-form ( simples ).

Merci beaucoup de ton aide.

ortolojf · 1 Décembre 2016

Rebonjour

Il semblerait d'après l'exemple ci-dessous de Stackoverflow , que l'on puisse mette un formulaire non AMP dans une amp-ligtbox.

Voici l'exemple :

Code:

<body>
 <button class="lightClick" on="tap:my-lightbox"
      role="button"
      tabindex="0">
    Subscribe
  </button>


  <amp-lightbox id="my-lightbox"
      layout="nodisplay">
    <div class="lightbox">

    <div class="setUpForm">
    <div class="cansle" on="tap:my-lightbox.close"
        role="button"
        tabindex="0">X</div>
    <h2>Subscribe and get 20% off on your first order</h2>
     <form method="post"
      action=""
      target="_top">
    <input type="text"
        name="name"
        placeholder="Name..."
        required>
    <input type="email"
        name="email"
        placeholder="Email..."
        required>
    <input type="submit"
        value="Subscribe"
        class="button button-primary">
  </form>
  </div>
    </div>
  </amp-lightbox>
  </body>
  </html>

Si c'était vrai, mon problème serait théoriquement résolu, car les formulaires paramétrés seraient tous dans cette lightbox, et pourraient chacun avoir un paramètre différent.

Leur déclenchement pourrait faire disparaître la lightbox, tout en rechargeant la page de départ ?

Les deux boutons de la page père "Personnaliser" et "Gestion des cookies" ( <button> ... </button> ) gérant l'amp-ligthbox, n'ont pas de paramètre.

Confirmez-vous, qu'il est possible d'avoir un <form> non AMP de type post avec un attribut "action" ( et non pas action-xhr ) ?

Merci beaucoup de votre réponse.

Amicalement.

ortolojf · 1 Décembre 2016

Bonjour

Après test : Cà ne marche pas.

Les forms dans la lightbox doivent être de type AMP ( "action-xhr" au lieu de "action" ).

Normalement ( espérons ) tout formulaire ( AMP ) déclenché dans une amp-lightbox ( avec target="_blank" ), devrait rester dans la lightbox ( ouverte ).

Je vais faire une maquette.

Respectueusement.

niap · 2 Décembre 2016

Alors tu t'en sors ?

ortolojf · 2 Décembre 2016

Bonjour Monsieur

Je suis en train de coder, j'ai des amp-lightbox ou <div> avec des id, et le clic sur l'un d'entre eux, doit pouvoir faire disparaître celui cliqué, et d'autres light-box ou <div> en même temps.

Je sais qu'il faut ajouter au <div> ( ou à l' <amp-lightbox> suivant le cas ), un : "on:tamp.classe_ligthbox.close".

Pour des classes, c'est possible de déclencher plusieurs actions en même temps ( je ne sais pas comment ).

Et, pour des id je ne sais pas du tout comment faire.

A part les amp-ligtbox, j'ai des <amp-form> ( nécessaire pour transmettre un paramètre POST ), je peux prendre en compte le traitement du script déclenché, mais si l'action-xhr est la page entière, je ne sais pas ce qui se passe.

Le script /page entière sera-t-il relancé, et comment déclencher en plus les actions sur les display ( comme ci-dessus ) ?

Comment aussi, changer la couleur de certains éléments d'interface, qui ne sont pas nécessairement dans les <amp-form> ?

Avant je le faisais en changeant l'élément de classe css.

Pour l'instant, c'est surtout la syntaxe pour des déclenchements multiples ( voir au début ) pour les id et on:tap. dont j'aurais besoin.

J'y vais pas à pas.

Merci beaucoup de ton aide.

Respectueusement.

ortolojf · 2 Décembre 2016

Rebonjour

En fait, je n'aurai qu'une amp-lighbox ( pour l'interface contenant les formulaires ), et puis des <div> et <span> pour la ligne : "Personnaliser" et "Gestion des cookies".

Il y a deux problèmes :

1) Comment déclencher, en même temps que les <amp-form> , des modifications des classes css définissant les couleurs ?

Ajout : Je veux dire, modifier les noms des classes css affectées aux éléments html.

2) Est-il possible de déclencher un amp-form ( sans choix ), tout en faisant l'équivalent d'un "on:tap" ?

Merci beaucoup de vos réponses.

Amicalement.

ortolojf · 3 Décembre 2016

Rebonjour

Est-ce que l'on peut ( en mode AMP ), déclencher un amp-form en faisant ( sur un<div> ):

Code:

  <div id="mon-div" on="tap:mon-form.submit;">

  </div>

  <form div="mon-form"
             method="post"
             action-xhr="https..."
             target="_blank">
      <input etc... 
      <input type="submit">
  </form>

Je corrige.

Le submit est un event, pas une action.

Il faudrait donc déclencher les actions à partir du submit ( et non pas l'inverse ).

Donc :

Code:

  <div id="mon-div"
             layout:nodisplay>
   ...
  </div>

  <form div="mon-form"
             method="post"
             action-xhr="https..."
             target="_blank" on="submit-success.mon-div.open;">
      <input etc... 
      <input type="submit">
  </form>

Mon problème serait de faire apparaître ou disparaître certains éléments d'interface au moment du submit.

Mais, ces éléments devraient être limités en surface, et pas surgissant. Exit les amp-ligthbox.

Quels balises HTML ( ou components AMP ) supportent l'action open ( ou close ) ?

Super merci pour vos réponses.

Respectueusement.

ortolojf · 3 Décembre 2016

Bonjour

D'après la doc de Google, l'action "hide" est permise pour tous les éléments html :

---------------------------------------------------------------------------------------------------------
Globally defined Events and Actions

Currently AMP defines tap event globally that you can listen to on any HTML element (including amp-elements).

AMP also defines a hide action globally that you can trigger on any HTML element.

For example, the following is possible in AMP.

Code:

<div id="warning-message">Warning...</div>

<button on="tap:warning-message.hide">Cool, thanks!</button>

---------------------------------------------------------------------------------------------------------

C'est ok, mais quel est l'équivalent de "hide" pour faire apparaître la <div> au lieu de la cacher ?

C'est peut-être la dernière information dont j'ai besoin pour mettre au point ma version AMP de tarteaucitron.

Merci beaucoup de vos réponses.

Amicalement.

ortolojf · 4 Décembre 2016

Bonjour

Pour ma version "full PHP AMP compliant" de tartecitron, j'aurais besoin de savoir cacher ou montrer un élément html ( classique ou amp component je ne sais pas ).

J'ai utilisé ci-dessous, l'event AMP : "tap:", qui d'après la documentation, peut s'appliquer à tout élément html ( même non AMP ), à un élément <div>, avec l'action "hide" ( également dans la doc ), qui permet effectivement de cacher la div.

Mon problème, est de trouver l'action ( contraire de hide ), qui appliqué à l'event "tap:" , qui permettait de remontrer la div.

L'action "hide" provoque ( d'après l'inspecteur de Chrome ) l'ajout de "display:none;" à l'élément cible.

Le problème, consiste à trouver une action acceptée par AMP ( et associée à "tap:" ) qui soit le contraire de "hide".

SI c'est possible, soit le display deviendrait le même qu'au départ, soit il serait spécifié dans l'action ( contraire de "hide" ).

Code:

<body>
<div id="mon-div1">
        Essai reussi.
</div>

<div id="mon-div2">
        <button on="tap:mon-div1.hide;" role="button" tabindex="0">
        Cacher.
        </button>
</div>

<div id="mon-div3">
        <button on="tap:mon-div1.;" role="button" tabindex="1">
        Montrer.
        </button>
</div>

</body>

Merci beaucoup pour vos réponses.

Respectueusement.

niap · 4 Décembre 2016

Regarde peut-être aussi du côté d'amp experiment :
https://ampbyexample.com/components/amp-experiment/

L'exemple de la page semble aller dans ton sens... mais chez moi je ne vois que du jaune...

Code:

  <style amp-custom>
    body[amp-x-button-color-experiment="yellow"] .button-color-experiment {
      background-color: yellow;
      color: black;
    }
    body[amp-x-button-color-experiment="red"] .button-color-experiment {
      background-color: red;
    }
    body[amp-x-button-color-experiment="blue"] .button-color-experiment {
      background-color: blue;
    }
    button {
      background-color: grey;
    }
  </style>
</head>
<body>
 <amp-experiment>
    <script type="application/json">
      {
        "button-color-experiment": {
          "variants": {
            "yellow": 30,
            "red": 30,
            "blue": 30
          }
        }
      }
    </script>
  </amp-experiment>
  <button class="button button-color-experiment">Click here</button>

ortolojf · 4 Décembre 2016

Bonjour niap

Mais... Je ne veux pas modifier des classes css de manière semi-aléatoire, mais de manière déterministe.

Et puis, j'ai besoin de faire ces modifications de css, sur plusieurs éléments html.

Merci beaucoup de ton aide.

Respectivement.

niap · 4 Décembre 2016

A toi d'adapter l'exemple en fonction de tes besoins ;-)
Cet exemple montre comment changer une classe d'après une valeur aléatoire. Tu n'as "plus qu'à" le modifier pour que ça ne soit plus aléatoire.

ortolojf · 4 Décembre 2016

Bonjour niap

Même à supposer que ce soit possible de faire un traitement déterministe au lieu d'aléatoire, il ne peut y avoir qu'un seul amp-experiment par document AMP.

Si effectivement un traitement était déterministe, il n'y aurait qu'un seul choix ( 100 ). A la rigueur.

Mais, faire des traitements sur plusieurs éléments html en même temps ( un traitement par élément ) ?

Celà signifierait plusieurs amp-experiment ?

Merci beaucoup de ton aide.

Respectivement.

ortolojf · 5 Décembre 2016

Bonjour niap

En fait, mon problème résiduel, est de visualiser sur la lightbox les intitulés et choix ( actif / inactif ) des services ( Facebook, Google+ etc... ).

Les couleurs de background des intitulés et des boutons "Autoriser", "Interdire" des services changent quand le bouton est cliqué.

Il y a également une action sur le display d'une autre div.

Ces boutons ( en même temps que de changer ces couleurs ), sont censés lancer un script en mode POST, qui positionnera le cookie de gestion des cookies pour refléter le clic du bouton.

Pour changer les couleurs, j'imaginais afficher ou cacher les div qui vont bien, puisqu'il est impossible d'agir de manière dynamique sur les css.

J'aurais besoin de faire en sorte, que le lancement d'un formulaire ( POST ), se fasse en même temps que ces modifications de couleurs ou de display, je sais seulement faire disparaître ( hide ) une div, pas la faire réapparaître.

Comment faire ?

Merci beaucoup de vos réponses.

Respectueusement.

niap · 5 Décembre 2016

Est-ce que tu as un exemple en ligne de ce que tu as déjà fait ?

ortolojf · 5 Décembre 2016

Bonjour niap

Je n'ai pas encore mis en ligne le moindre petit exemple.

De toute manière ce ne serait pas compatible AMP.

Je cherche à ce que les éléments dans la lightbox ( le reste c'est fait sur mon ordi mais c'est pas beau... ), soient gérables comme maintenant ( mode non AMP ).

Tel qu'il est, pour voir l'interface ( la lightbox ) théorique, il suffit de lancer : https://www.pronostics-courses.fr

Pour visualiser la théorique lightbox :

Si "Personnaliser" s'affiche, cliquer dessus.

Sinon, cliquer sur "Gestion des cookies".

Merci beaucoup pour ton aide.

Respectueusement.

scam34000 · 17 Juin 2017

Super discussion, je vois que vous maitrisez le sujet d'AMP-form

J'en profite pour savoir si vous pouvez jeter un oeil sur mon sujet plus basique

https://www.webrankinfo.com/forum/amp-form-comment-marche-t191120.html