J'ai une fonction Js. qui permet d'ajouter des échantillons dans un panier. Cette dernière fonctionne parfaitement mais lorsque je réalise un render avec react, ma fonction n'est jamais appelée.
Fonction Js :
const addProductToCart = document.querySelectorAll('.add-product-to-cart');
ProductToCart.forEach(el => {
el.addEventListener('click', e => {
const redirect = e.target.dataset.redirect;
if (!redirect) {
e.preventDefault();
}
let product = e.target.dataset.product
if (product) {
fetch(baseUrl + "cookie/product/" + product,
{method: 'POST'}
).then(r => console.log(r))
}
animateIcon.animate(translations["Your sample has been successfully added to your cart"], 'cart');
});
});
Résultat de l'event après rendu twig avec nom de la classe add-product-to-cart :
Je souhaitais alors ajouter le même nom de classe du côté react en espérant obtenir le même effet mais ce n'est pas le cas.
Bien sur il faudra écrire onClick et pas onClique mais le firewall de Openclassrooms me bloque quand j'essaie de posté un code Javascript avec un attribut inline alors je l'ai mal ortographié.
En admettant que la fonction onAddProductToCard et définit plus haut dans le composant.
- Edité par SamuelGaborieau3 16 juin 2021 à 20:54:48
Bien sur il faudra écrire onClick et pas onClique mais le firewall de Openclassrooms me bloque quand j'essaie de posté un code Javascript avec un attribut inline alors je l'ai mal ortographié.
En admettant que la fonction onAddProductToCard et définit plus haut dans le composant.
- Edité par SamuelGaborieau3 il y a environ 11 heures
Bonjour Samuel,
Je m'étais orienté vers cette optique :
Fonction :
addProductToCart = e => {
const baseUrl = document.getElementById('baseUrl').getAttribute('value');
const redirect = e.target.dataset.redirect;
if (!redirect) {
e.preventDefault();
}
let product = e.target.dataset.product
if (product) {
fetch(baseUrl + "/cookie/product/" + product, {method: 'POST'}).then(r => console.log(r))
}
Mais avec cette technique je n'ai absolument rien d'autre (pop-up, animation du pannier...). Il n'est pas possible d'importer le fichier Js (fichier où il y a tout le fonctionnement pour l'ajout d'échantillons). J'ai l'impression que le Js ne se charge pas en fait et je suis vraiment pas doué concernant le front...
En Reactjs lors d'un événement (comme le onClick) le premier paramètre que tu reçois n'est pas l'événement natif du navigateur mais un "SyntheticEvent" qui et une coquille de l'événement spécifique à React les attributs/méthode peuvent être différentes, mais tu peut récupéré l'event native avec la propriété nativeEvent
addProductToCart = e => {
const {nativeEvent} = e;
const baseUrl = document.getElementById('baseUrl').getAttribute('value');
const redirect = nativeEvent.target.dataset.redirect;
if (!redirect) {
nativeEvent.preventDefault();
}
let product = nativeEvent.target.dataset.product
if (product) {
fetch(baseUrl + "/cookie/product/" + product, {method: 'POST'}).then(r => console.log(r))
}
Est-ce que tu as des erreurs dans la console du navigateurs ? Si tu en as tu peut nous les indiqué elle peuvent aidé à débugé le code.
Le code que j'avais ainsi que celui que tu proposes fonctionne mais ça n'ajoute que l'échantillon dans lepannier (derrière je n'ai plus l'animation du panier, le pop-up disant que l'échantillon est ajouté) mais c'est normal, vu que je n'ai pas importé les fonctions dans le fichier .tsx.
En fait c'est là le problème, je ne suis pas convaincu de retaper ce code, celui du pannier, de l'animation... alors que ça existe déjà. La seule chose j'ai réussis à faire c'est :
Exporter une fonction dans mon fichier .js
export function myFunction() {
const addProductsToCart = document.querySelectorAll('.add-product-to-cart');
addProductsToCart.forEach(el => {
el.addEventListener('click', e => {
const redirect = e.target.dataset.redirect;
if (!redirect) {
e.preventDefault();
}
let product = e.target.dataset.product
if (product) {
fetch(baseUrl + "cookie/product/" + product,
{method: 'POST'}
).then(r => console.log(r))
}
animateIcon.animate(translations["Your sample has been successfully added to your cart"], 'cart');
});
});
}
L'importer dans mon fichier .tsx
import { myFunction } from '../../../js/others/downloadsAndCart.js';
class Product extends Component<ProductInterface, {}> {
componentDidMount (): void {
myFunction()
}
Par contre le coockie ne fonctionne pas, je n'ai pas le produit... Je ne comprends pas pourquoi la classe n'est pas sélectionnée. J'ai essayé un onLoad pour afficher une alert() et ça fonctionne, donc mon fichier est bien appelé. Mais rien en se passe sur classe add-product-to-cart.
Si j'enlève le onClick (ce que je souhaite faire car je renseigne className et j'aimerai que le js provenant de downloadsAndCart.js soit appelé) l'event n'apparaît pas mais je vois un event avec error.
Return dans fichier tsx :
Error (est-ce possible que ça influence l'event de ma classe add-product-to-cart ?)
- Edité par batcatthecat 18 juin 2021 à 10:41:31
Render react
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
suggestion de présentation.
suggestion de présentation.