THELIA Forum

Welcome to the THELIA support and discusssion forum

Announcement

Rejoignez la communauté sur le Discord Thelia : https://discord.gg/YgwpYEE3y3

Offline

#1 PanierAjax

(31-07-2007 04:22:32)


Bonjour, voila en fait, je voudrais fair que mon panier s'actualise sans changer de page (par ex tout en restant dans ma page cat.html ou prod.html ...)

J'ai voulu donc suivre la methode http://wiki.thelia.fr/index.php/PanierAjax
Mais en faite elle ne me convient pas telement, je voudrais ne pas avoir a 'glisser' le fichier mais juste cliquer sur 'ajouté au panier', et je ne vois pas comment modifier ce code pour que ca soit fesable, auriez vous une petite idée de la marche a suivre ?

Merci d'avance !


</tyn0r>
Romain Fluttaz <r.fluttaz@gmail.com>
www.romain-fluttaz.com
En Dev: www.produitsdesavoie.com

Offline

#2 Re: PanierAjax

(31-07-2007 06:57:37)


Une fonction ajouter au panier que j'adore c'est chez woodbrass : -http://www.woodbrass.com/
Testes voir l'ajout d'un produit au panier je suis sur que tu vas aimer

Offline

#3 Re: PanierAjax

(31-07-2007 09:32:50)


salut tynOr

1- inutile de rendre les images draggables (1er point du wiki),
2- au lieu de créer la fonctionDroppable.add (2eme point du wiki), crée une fonction "ajoutPanier(element)" qui est en fait une copie de la fonction que tu vois dans "onDrop":

function ajoutPanier(element)
    {
        new Ajax.Updater('monPanier','ajaxvuepanier.php',
       {
        evalScripts:true,
           parameters:'action=ajouter&ref='+encodeURIComponent(element)  ==> attention ici j'ai remplacé "element.id" par "element"
       });
     }
3- modifie tous tes boutons "ajouter" en remplacant les liens href par un # (ex: <a href="#" onclick="ajoutPanier('#REF')">)

et normalement ton panier se mets à jour au fur et à mesure smile

tout le reste du tutoriel est a suivre à la lettre (création des fichiers php et html), a noter également que 'monpanier' est l'id de ton div ou s'affiche ton panier.... chez moi j'avais id=monPanier donc dans ma fonction ajax j'ai mis une majuscule a Panier...

voila voila, j'espere avoir répondu a ta question smile

Last edited by stefan (31-07-2007 09:37:06)

Offline

#4 Re: PanierAjax

(31-07-2007 09:42:47)


Bonjour,
Est ce qu'il ne serai pas judicieux de mettre directement dans la distrib THELIA l'ajout dans le panier via AJAX ?
Merci

Offline

#5 Re: PanierAjax

(31-07-2007 10:02:42)


judicieux.... ca dépend pour qui smile

personnellement j'utilise mootools pour tout ce qui est ajax et web2 ... l'exemple du wiki est fait avec scriptaculous.... il existe plusieurs librairies javascript qui font les memes choses plus ou moins de la meme maniere... mais avec des syntaxes différentes...

compte tenu de la relative simplicité(rapidité) de la mise en place d'une solution d'ajout au panier par ajax, je pense que c'est mieux de faire une page de wiki (éventuellement pour plusieurs librairies javascript) et de laisser au choix de l'utilisateur la librairie à utiliser...

d'ailleurs pour ceux que ca intéresse, la fonction citée précédemment, qui utilise scriptaculous, peut etre modifiee comme suit pour fonctionner avec mootools.v1.11 :

function ajoutPanier (element)
         {
             new Ajax('ajaxvuepanier.php',
                    {
                      method: 'get',
                      update: $('monPanier'),
                      data: 'action=ajouter&ref='+encodeURIComponent(element)
                     }).request();
         }

et dans la <div id='monPanier'>  on a:

<script type="text/javascript" language="javascript">
                              new Ajax('ajaxvuepanier.php',{method: 'get',update: 'monPanier'}).request();
</script>

et enfin, dans notre entete de page, on inclu la librairie en question (mootools.V1.11):

<script type="text/javascript" src="#mootools.v1.11.js"></script>

lien de téléchargement:

http://mootools.net/download

(sélectionner les librairies dont vous avez besoin ou toutes si vous ne savez pas smile)

  • yoan
  • Cofondateur Thelia

Offline

#6 Re: PanierAjax

(31-07-2007 10:15:52)


L'ajout dans THELIA d'un panier ajax (sans drag&drop) existe.

Les boucles peuvent être de type AJAX wink

Imaginons un lien du type

<a href="javascript:ajouter('999')">Ajouter au panier</a>


Une fonction javascript

function ajouter(ref){
	do_ajout(ref); 
	do_analyse('panier');
	alert("Votre produit a bien été ajouté au panier.");
}

</script>

#SAJAX

un petit

<STHELIA_panier type="PANIER">
#TITRE <br />
</STHELIA_panier>

Et voilà le tour est joué.

Il faut activer ajax dans le fichier php associé au squelette avec :

$sajax=1;

Toutes les boucles THELIA peuvent être analysées en Ajax via l'appel javascript do_analyse.


http://yoandemacedo.com

Cofondateur de la solution Thelia 1.x

Offline

#7 Re: PanierAjax

(31-07-2007 13:33:34)


c'est quoi <STHELIA ? neutral

  • yoan
  • Cofondateur Thelia

Offline

#8 Re: PanierAjax

(31-07-2007 14:02:29)


Une boucle THELIA mais ajax, elle n'est pas interpreté au chargement de la page mais via des appels javascripts.


http://yoandemacedo.com

Cofondateur de la solution Thelia 1.x

Offline

#9 Re: PanierAjax

(31-07-2007 14:32:31)


Merci...=D

Offline

#10 Re: PanierAjax

(01-08-2007 07:25:07)


wahou ! tant de possibilité s'offre a moi tongue
J'essay ca, et je vous tient au courant ! merci pour tout !


</tyn0r>
Romain Fluttaz <r.fluttaz@gmail.com>
www.romain-fluttaz.com
En Dev: www.produitsdesavoie.com

Offline

#11 Re: PanierAjax

(01-08-2007 09:14:18)


Bon, alors, je crois que je ne gere pas trop ... (moi et le js ca fai 100 000 ....)

Donc, en fait, voila ce que j'ai essayer de faire (avec mootools) :

J'ai modifier ma boucle thelia_prod de mon produit.html de la maniere suivante :

			<THELIA_PROD type="PRODUIT" ref="#PRODUIT_REF"> 
			
<!-- Titre du produit -->

				<div class="titrePage">
				<h2>#TITRE</h2>
				</div>

			
<!-- Détail du produit -->

				<div>
					<div id="imageprod">
					<THELIA_img type="IMAGE" num="1" produit="#ID" largeur="300">
			 		<a href="#" onclick="window.open('imgpop.php?ref=#PRODUIT_REF&id_image=#ID', '', 'toolbar,width=600,height=840')">
					<img src="#IMAGE"  alt="#PRODTITRE" title="#PRODTITRE" border="0" class="contourImageGrand"  id="photozoom" /></a>		   
					</THELIA_img>
					</div>
					<div class="ficheProduit">
				 		<div class="descriptionProduit">
						#DESCRIPTION
						</div>
				 		<div class="prixProduit">
						#PRIX €
						</div>
				 	<a href="panier.php?action=ajouter&ref=#REF" class="LIEN_commander">Ajouter</a>
					<a href="#" onclick="ajoutPanier('#REF')">ajouté test</a>
					</div> 
					<script type="text/javascript" language="javascript">
					function ajoutPanier (element)
					{
             new Ajax('blokcompte.php',
                    {
                      method: 'get',
                      update: $('monPanier'),
                      data: 'action=ajouter&ref='+encodeURIComponent(element)
                     }).request();
					}
					</script>
				</div>
			</THELIA_PROD>

et mon panier ce trouve dans un fichier 'blokcompte.html' qui est en include dans mes pages, je l'ai donc modifier :

<!-- Bloc Panier -->
		<div id="monPanierh">
			<script type="text/javascript" language="javascript">
            new Ajax('blokcompte.php',{method: 'get',update: 'monPanier'}).request();
			</script>
	  		<T_PANIER>
			<div align="center">
			<a href="#URLPANIER"><img align="center" src="images/panier.png" alt="panier" /></a>
			</div>
			<THELIA_PANIER type="PANIER">
			<div id="pan_#ARTICLE">
				<table border="0" width="150">
				<tr>
					<td width="10">#QUANTITE</td>
					<td width="100">#TITRE</td>
					<td width="50" align="right">#TOTAL &euro</td>
				</tr>
				</table>
			</div>
			</THELIA_PANIER>
			<div class="total_panier_style" align="right">
			<a href="#URLPANIER" class="LIEN_entete_menu">Prix Total : #PANIER_TOTAL €</a>
			</div>
	  		</T_PANIER>
			<div align="center">
		  	<a align="center" href="#URLPANIER"><img align="center" src="images/panier.png" alt="panier" /></a>
			<a href="#URLPANIER" class="LIEN_panier">Votre panier est vide !</a>
			</div>
			<//T_PANIER>
		</div>

j'ai creer le blokmoncompte.php (car il l'existait pas avant) en pensant que pour moi sa remplace le ajaxpanier.php ...

et j'ai rajouter dans mon meta.html :

<!-- MooTools -->
<script type="text/javascript" src="js/mootools.v1.11.js"></script>

Donc si j'ai bien compris le fonctionnement ca devrait passer ... Mais ce me met juste en haut de ma page, sans rien ajouter au panier ... pourriez vous juste m'indiquer ou peu se trouver mon erreur ? (une fois que j'aurais bien compris comment ca marche, je ferais une 'tite page sur le wiki tongue)

Encore une fois merci pour tout !

edit : en fait, mon produit s'ajoute bien au panier, mais que quand j'actualise la page ... et bien sur l'effet remonte en haut de page est assé desagreable ... (c'est deja ca ! il sajoute au panier tongue)

edit² : donc, en fait ma div et <div id="monPanierh"> et j'avais zappé de modifier ca dans les scripts ... mais bizarment, quand je rajoute le h dans le blokmoncompte.html (qui contient aussi mon bloc compte et nouveauté) j'ai quelque probleme d'affichage ...  en gros ca saffiche a peu prés 2 fois et superposé dans tous les sens ...)
J'y arrive doucement mais surement !

edit v3: donc ca avance encore ! en fait vue que mon bloc 'complet' (le blokcompte.html) a une div 'blok' j'ai remplacer le monpanierh du script pas blok et ca a l'air de passé !!!! YAHOU !!! (mais bizarement ca me deplace un peut tout ... (mais rien de bien mechant !)
Youpiya !

Last edited by tyn0r (01-08-2007 09:29:29)


</tyn0r>
Romain Fluttaz <r.fluttaz@gmail.com>
www.romain-fluttaz.com
En Dev: www.produitsdesavoie.com

Offline

#12 Re: PanierAjax

(06-08-2007 12:04:38)


Quelqu'un a un truc pour faire passer dans le panier par le systeme ajax un article avec  une declidisp ou une caracdisp definie par le client dans une liste déroulante
(j'utilise des forms select et ma foi ,je me trouve tout  bête en face d'ajax) ?=(

Edit:

  ok ;voilà une piste:


on recupère la valeur du form select avec une id='declinaison1'  (par exemple,)

       avec  document.getElementById("declinaison1" ).value et on l'envoie en parametre    smile

Last edited by david49 (06-08-2007 18:03:43)

Offline

#13 Re: PanierAjax

(07-08-2007 18:10:10)


Sans aller aussi loin, et en gardant ce que propose Yoan, je souhaiterais simplement sur ma fiche produit ou liste de produits, avoir un menu déroulant pour le choix de la quantité, et mon bouton ajouter au panier. Lors de l'appuis, on reste sur la même page mais le produit et sa quantité choisi est ajouté au panier. Le panier est mis à jour le message apparait au visiteur : quantité ajouté ! (par exemple).

Si j'ai donc bien compris, sur les pages .php de rubrique et produit j'ajoute dans un premier temps :

$sajax=1;

J'ajoute sur mes pages .html rubrique et produit dans une paire de balises <script> :

function ajouter(ref){
    do_ajout(ref); 
    do_analyse('panier');
    alert("Votre produit a bien été ajouté au panier.");
}

Et je remplace le lien de mon bouton ajouter par :

<a href="javascript:ajouter('$qte')">Ajouter au panier</a>

???

Offline

#14 Re: PanierAjax

(08-08-2007 13:39:21)


Petite remarque:

Attention à l'accessibilité, dans un cas comme celui-ci, il est conseillé d'appeler la fonction JavaScript via l'évènement "onclick" du lien et conserver un panier classique en tant que cible.

Exemple:

<a href="panier.php?etc." onclick="javascript:fonction(...);return false;">lien</a>

L'instruction "return false" ne rend pas la main au navigateur, et empêchera donc de suivre le lien pour les personnes ayant javascript activé, dans le cas contraire, les autres pourront donc toujours ajouter leur produit au panier.

(Faudrait pas passer à côté des clients potentiels smile)

Last edited by bob (08-08-2007 13:44:46)

Offline

#15 Re: PanierAjax

(22-08-2007 00:29:55)


david49 wrote:

Quelqu'un a un truc pour faire passer dans le panier par le systeme ajax un article avec  une declidisp ou une caracdisp definie par le client dans une liste déroulante ?

on recupère la valeur du form select avec une id='declinaison1'  (par exemple,)

avec  document.getElementById("declinaison1" ).value et on l'envoie en parametre    smile

Peux tu me dire comment tu le passe en parametre ?
Sur le onclick="javascript:ajoutpanier(#REF)" de la balise a href ? ou dans le formulaire par un Onchange ? ou carrement dans le script de la fonction ?

je dois louper un truc parce que j'ai beau triturer mon code dans tout les sens, en rajoutant :

document.getElementById("selectdeclin").value   

un peu partout, je ne vois pas comment utiliser mon panier ajax avec mes declinaisons.
Alors que si je met juste onclick="document.getElementById("formdeclin").submit()"
ça marche tres bien mais sans le panier ajax

<THELIA_sistock type="PRODUIT" ref="#REF" num="1" declistockmini="1">
			 		 
	<form action="panier.php" method="post" id="formdeclin>
   	<input type="hidden" name="action" value="ajouter" />
   	<input type="hidden" name="ref" value="#REF" />
    		
	<THELIA_DECLI type="DECLINAISON" rubrique="#RUBRIQUE_ID" produit="#ID" >
				
                    #TITRE :
         <select name="declinaison#ID" id="selectdeclin">

                    <THELIA_DECLIDISP type="DECLIDISP" declinaison="#ID" produit="#PRODUIT" stockmini="1">
					
                        <option value="#ID">#TITRE /

			<THELIA_STOCK type="STOCK" declidisp="#ID"  produit="#PRODUIT" >
						
			#VALEUR

			/THELIA_STOCK>

			</option>

                    </THELIA_DECLIDISP>
					
                    </select>

                </THELIA_DECLI>
				
          </form>

   
<a href="panier.php?action=ajouter&ref=#REF" onclick="javascript:ajoutpanier(#REF); return false;"> 
<img src="../grafikstyle/panierose.jpg" alt="Ajouter au panier" name="Panier" width="20" height="20" align="right" id="Panier" />	
</a>
	
</THELIA_sistock>

{TETE DE LARD} Concept store/Galerie {Designer toys, Livres d'art, Badges, T-shirts et curiosités...}

Offline

#16 Re: PanierAjax

(22-08-2007 08:59:50)


Je l'ai mis dans le script de la fonction ondrop.

  Mais j'ai encore un petit souci de ce côté, car le systeme fonctionne très bien avec ie, mais pas avec firefox, ni avec opera , ni avec safari(ça vient probablement du getElementById)...Il faut probablement detecter le navigateur et adapter le script ...

Offline

#17 Re: PanierAjax

(22-08-2007 10:17:07)


Ok, merci de la reponse...

est ce que tu le rajoute apres le dans la ligne de parametres ?
est ce que ajoute un nouveau parametre ?

Ne faut il pas envoyer en parametre tout le formulaire ? vu qu'il recupere deja la ref et la passe dans l'url ?

en fait... je ne vois pas le parametre supplementaire dans l'url... je veux dire la declinaison est elle accessible avec une url genre:

gnagnagna.php?ref=une_ref&decli=la_declinaison_choisie


{TETE DE LARD} Concept store/Galerie {Designer toys, Livres d'art, Badges, T-shirts et curiosités...}