Produit avec options - conditions sur l'affichage du bouton "ajouter au panier"

  • Posts: 18
  • Thank you received: 1
  • Hikashop Business
2 years 9 months ago #339241

-- HikaShop version -- : 4.4.5
-- Joomla version -- : 4.0.6

Bonjour,
Je fabrique des portes clés en corde de plusieurs couleurs.
Je souhaite que les clients puissent choisir les couleurs.
J'ai réussi à le faire avec les caractéristiques, J'ai crée 2 caractéristiques, 1ère couleur et 2ème couleur avec le choix des couleurs comme valeurs.
Cela fonctionne très bien et le bouton ajouter au panier n'apparait que lorsque le choix du client est fait. Très bien. Seul hic, le stock est impossible à gérer sur les couleurs (lorsque le jaune manque, je dois gérer le stock dans toutes les variantes ou le jaune apparaît. Il y a plus de 20 couleurs...)
J'ai essayé avec les options. Je crée mon produit porte clés avec un prix, je crée un produit 1ère couleur avec les variantes des couleurs et je crée un autre produit 2ème couleur avec les variantes des couleurs. Le stock est facile à gérer, lorsque le jaune manque je mets le stock à 0 dans les 2 produits couleurs. Seul hic, le bouton ajouter au panier appara6it avant que le client choisisse. J'aimerai qu'il apparaisse uniquement après le choix du client, pour obliger le client à choisir les 2 couleurs.
Est-ce faisable ?
Si vous avez une piste n'hésitez pas. Par avance je vous en remercie.
Cordialement
Noël

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
2 years 9 months ago #339246

Bonjour,

Oui, c'est faisable avec un peu de javascript.
Vous pouvez ajouter ce code dans le fichier de vue product / option via le menu Affichage>Vues et cela devrait le faire (pas tester) :

<script>
window.Oby.registerAjax(['hkContentChanged'], function(params){
	if(typeof params.selection === 'undefined') {
		window.hikashop.checkOptions();
	}
});
window.hikashop.ready( function() { window.hikashop.checkOptions(); });
window.hikashop.checkOptions = function() {
		var addToCart = document.getElementById('hikashop_product_quantity_main');
		var options = hikaProductOptions.getOptions();
		var optionsSelected = true;
		if(options.length != hikaProductOptions.total) {
			optionsSelected = false;
		} else {
			for(var i = 0; i < options.length; i++) {
				if(!options[i].length)
					optionsSelected = false;
			}
		}
		if(optionsSelected) {
			addToCart.style.display = '';
		} else {
			addToCart.style.display = 'none';
		}
}
</script>

Please Log in or Create an account to join the conversation.

  • Posts: 18
  • Thank you received: 1
  • Hikashop Business
2 years 9 months ago #339250

Bonjour Nicolas,

Merci beaucoup pour la rapidité de la réponse.
Dés que j'ai 5 minutes je teste et je te tiens au courant.
Merci.
Bonne journée
Cordialement
Noël

Please Log in or Create an account to join the conversation.

  • Posts: 18
  • Thank you received: 1
  • Hikashop Business
2 years 9 months ago #339265

Bonjour,

J'ai rajouté le script à la fin du fichier concerné.
C'est toujours pareil. Le bouton s'affiche car lorsqu'on affiche le produit, les options sont activés par défaut.
Comment peut-on mettre une option avec le paramètre 'Undefined' pour reprendre les 1ères lignes du script.

Attention, je comprends l'écriture du javascript mais incapable de l'écrire.

Je joints l'image à l'ouverture du produit concerné.
Merci encore pour vos réponses.
Cordialement
Noël

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
2 years 9 months ago #339266

Bonjour,

Vous pouvez faire comme expliqué ici:
www.hikashop.com/forum/product-category-...t-option.html#329209

Please Log in or Create an account to join the conversation.

  • Posts: 18
  • Thank you received: 1
  • Hikashop Business
2 years 9 months ago #339274

Bonjour,

J'ai ajouté et mis par défaut l'option dans la liste des choix possible des options. Cela fonctionne (voir capture d'écran).
Merci pour l'astuce.

Par contre le bouton ajouter au panier est toujours actif, il est possible d'ajouter un produit au panier sans options.

A bientôt
Cordialement
Noël

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
2 years 9 months ago #339282

Bonjour,

C'est soit que le code que j'ai fourni plus haut ne fonctionne pas, soit qu'il n'est pas ajouté comme il faut.
Pourriez-vous fournir un lien vers la page en question pour que nous puissions regarder la situation ?

Please Log in or Create an account to join the conversation.

  • Posts: 18
  • Thank you received: 1
  • Hikashop Business
2 years 9 months ago #339301

Bonsoir,

Voici le lien LM Ouest développement
Le site est en développement, mercredi soir je dois mettre une version plus abouti.

Merci encore pour votre aide.
Cordialement
Noël

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
2 years 9 months ago #339308

Bonjour,

Le problème vient de votre coté.
Si je compare le code sur votre page et le code que j'ai mis dans mon précédent message, j'obtiens ceci:
i.imgur.com/jHdizaQ.png
Comme vous pouvez le voir, il y a pas mal de code traduit en français et du coup PHP ne comprend pas.
J'imagine que c'est à cause d'un système de traduction automatique actif de votre coté.
Refaites l'ajout de code avec le bon code et cela devrait mieux fonctionner.

Please Log in or Create an account to join the conversation.

  • Posts: 18
  • Thank you received: 1
  • Hikashop Business
2 years 9 months ago #339312

Bonsoir,

Merci pour cette précision. Oui j'ai envie de traduire le site en 4 langues et j'ai fait des tests.
La prochaine version n'est pas encore traduite et je vais faire un test dessus et je vous tiens au courant.

Ce qui veut dire que cela fonctionne uniquement pour le français ?
Autre petit détail. Est-il possible de rapporter une image de l'option sélectionné. Comme les futurs clients vont choisir des couleur dans l'option, si c'est possible j'aimerai montrer l'image de la couleur.

A bientôt.
Cordialement
Noël

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
2 years 9 months ago #339317

Bonjour,

Non, le code fonctionnera pour toutes les langues.
Le souci, c'est que vous avez changé le code.
Par exemple, dans le code que je vous ai fourni, j'ai créé une variable avec le nom "optionsSelected". Or vers la fin du code sur votre site, le nom a été remplacé par "options sélectionnées" au lieu de "optionsSelected". Du coup, le javascript du navigateur ne comprend pas ce qu'il se passe, stoppe, et génère une erreur indiquant que le code est faux.

Il n'y a pas d'option pour afficher une image en fonction de l'option sélectionnée. Cela demanderait un développement spécifique.

Please Log in or Create an account to join the conversation.

  • Posts: 18
  • Thank you received: 1
  • Hikashop Business
2 years 9 months ago #339433

Bonjour,
Je viens de mettre mon site avec une version plus aboutie. Petit à petit j'avance.
Ce site n'est pas encore traduit, j'ai essayé le code et cela ne fonctionne pas. Par contre dans le code envoyé, il y avait du français mélangé avec le reste, comme "option sélectionné" que j'ai remplacé par le nom de la variable. J'ai également remplacé "faux" par "false", "si" par "if", "autre" par "else", "longueur" par "length". Par contre pour le mot "aucun" je ne sais pas par quoi le remplacé...
Je ne sais pas si c'est bien. Est-il possible de me retourne le code modifié ?

Voici l'adresse de cette nouvelle version LM Ouest développement LM Ouest
Le visiteur doit choisir les couleurs pour composer son porte clé. La 4ème option est pour sélectionner une perle gravée ou pas, et les champs personnalisé en dessous permettent au client de personnaliser la perle.
Est-il possible de n'afficher la partie de champs personnaliser uniquement que si l'option perle est sur oui ? J'ai regardé avec l'inspecteur de la page, chaque donnée à un ID, en javascript je peux peut-être récupérer la valeur de l'option perle et si oui j'affiche les champs. Est-ce que cela aurait des conséquences sur d'autres élément du programme ?

Je vous remercie pour votre aide.
Bonne journée.
Cordialement
Noël

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
2 years 9 months ago #339437

Bonjour,

Non, non, non. Il n'y a pas de français dans le code que j'ai écrit dans mon message :
www.hikashop.com/forum/product-category-...u-panier.html#339246
Si vous voyez du français à cet endroit, c'est que vous avez un système de traduction automatique sur la page et du coup il change le texte de mon code. Il faut afficher l'original de la page.
Voici une capture d'écran de mon message:
i.imgur.com/0TzoA4K.png
Comme cela, sur l'image vous aurez le code original.

C'est possible possible d'afficher ou cacher les champs personnalisés en fonction de la sélection de l'option perle.
Un code javascript similaire est nécessaire:

<script>
window.Oby.registerAjax(['hkContentChanged'], function(params){
	window.hikashop.checkPerle();
});
window.hikashop.ready( function() { window.hikashop.checkPerle(); });
window.hikashop.checkPerle = function() {
		var customFields = document.getElementById('hikashop_product_custom_item_info');
		var perleOption = document.getElementById('hikashop_product_option_3');
		if(perleOption) {
			if(perleOption.value == '580') {
				customFields.style.display = '';
			} else {
				customFields.style.display = 'none';
			}
		}
};
</script>

Last edit: 2 years 9 months ago by nicolas.

Please Log in or Create an account to join the conversation.

  • Posts: 18
  • Thank you received: 1
  • Hikashop Business
2 years 9 months ago #339485

Bonjour Nicolas,
Je vous demande de m'excuser pour avoir eu une telle pensée "mettre du code en français", je n'ai jamais pensé à la traduction automatique, mais alors pas du tout...
De plus dés la première j'ai trouvé ça bizarre lorsque j'ai lu le code. Du français dans le code, je suis nul en codage, je comprends les boucles simple, les conditions mais c'est tout. Je me suis dit que peut-être... Et lorsque tu m'as dit qu'il y avait du français à cause de la traduction, j'ai pensé aux test que j'avais fait pour traduire le site mais pas à la traduction automatique... Je suis nul, j'aurais ud y penser. Je vous renouvelle et vous demande d'accepter mes excuses.

Merci pour le 2ème code. J'ai mis les deux en places (avec les originaux) et cela ne fonctionne pas. Pour le 2ème, si j'intervertis les valeurs "none" et " " dans la condition, cela fonctionne mais pas dans le bon sens et non pas sur le changement de la page mais sur la ré-actualisation de la page. Avec les valeurs inversé, les chmaps personnalisé disparaisse sur le oui et apparaisse sur le non.
Pour le 1er code c'est toujours pareil, le bouton ajouter au panier est toujours actifs lorsqu'il y a aucune option de sélectionner.

Je vous souhaite une agréable journée.
Cordialement
Noël

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
2 years 9 months ago #339509

Bonjour,

Pas de souci. C'est juste que j'avais du mal à vous faire comprendre le problème :)

Concernant le premier code, en fait j'utilise la fonction hikaProductOptions.getOptions() pour récupérer la liste des options sélectionnées actuellement sur la page, mais cette fonction ne sera disponible que dans la prochaine version d'HikaShop. D'où le fait que cela ne fonctionne pas du tout.
Vous pouvez rajouter le code:

getOptions: function() {
		var d = document, w = window, o = w.Oby, t = this;
		var el = null, ret = [];
		for(var i = 0; i < t.total; i++) {
			el = d.getElementById("hikashop_product_option_"+i);
			if(el) {
				ret.push(parseInt(el.value));
			}
			if(!el && !d.querySelectorAll)
				continue;
			var els = d.querySelectorAll("[data-product-option=\""+i+"\"]");
			if(els.length == 0)
				continue;
			for(var j = els.length - 1; j >= 0; j--) {
				if(!els[j].checked)
					continue;
				ret.push(parseInt(els[j].value));
			}
		}
		return ret;
	},
avant la ligne:
refreshPrice: function() {
dans la vue product / option pour la rajouter.

Pour le second code, j'ai modifié le code dans mon précédent message pour corriger deux / trois trucs. Cela devrait mieux fonctionner avec ce nouveau code.

Please Log in or Create an account to join the conversation.

  • Posts: 18
  • Thank you received: 1
  • Hikashop Business
2 years 6 months ago #341841

Bonjour,
Me revoilà , 3 mois après votre réponse... Il a fallu que j'installe la boutique car la saison approche et j'ai un peu délaissé le site. en prenant un peu de recul je l'ai entièrement refait en essayant de me faciliter la construction et surtout la gestion par la suite et j'arrive au résultat que je veux. J'ai également pris le temps de documenter tout le site, de cette manière je pense pouvoir le modifier sans perdre de temps... Il ne faut pas faire uniquement la construction, il faut savoir le gérer par la suite.

Pour rappel, je fabrique des portes clé touline, un nœud marin, avec des cordages de différentes couleurs. Le visiteur peut choisir 1, 2 ou 3 couleurs et ceci en 3 tailles différentes.

Ma 1ère demande était de n'afficher le bouton "ajouter au panier" une fois que le visiteur a sélectionné les options, les couleurs. Cela fonctionne mieux depuis la nouvelle version, le bouton est absent lorsque les options ne sont pas sélectionnées, par contre il n'apparait pas non plus lorsque les options sont sélectionnées. Juste une petite coquille je pense...

Ma 2ème demande était de n'afficher les champs personnalisés uniquement lorsque l'option perle est positive.
J'ai modifié la valeur de perleOption.value, dans votre code elle était de 580 et cela ne fonctionnait pas, Via l'inspecteur de la page, je me suis aperçu que la valeur était 176. J'ai modifié et cela fonctionne. Super. Les champs personnalisés apparaissent lorsque l'option perle personnlaisée est positive. Super

Je vous avais également demandé s'il était possible d'afficher des photos correspondant aux options. Vous m'aviez répondu que cela demandait un développement personnel.
J'ai pu contourner la chose avec les champs personnalisés. Un champ liste indique les couleurs disponibles et ensuite chaque couleur à un champ personnalisé conditionné à la liste au dessus. Lorsque le visiteur choisi une couleur, elle apparait juste en dessous. Cela fonctionne pas trop mal, cela se mélange un peu, mais j'ai fini par y arriver.
On peut voir le résultat sur la page bi-color . On peut voir sur cette page que le bouton "ajouter au panier" n'apparait pas.
Le souci est que les champs ne sont pas affichés lorsque l'option perle n'est pas sélectionné... Est-ce faisable que le code ci-dessus ne fonctionne uniquement pour certain champs, mais pas pour tous les champs.

Pour le modèle tri-color, j'ai fait autrement. J'ai affiché les couleurs dans la description et utiliser les options. On peut le voir sur cette page.
Je préfère l'autre solution mais celle-ci me convient également. Et je privilégie l'affichage des champs personnalisés conditionné au choix de l'utilisateur.

Par avance je vous remercie de votre aide.
Passez une agréable journée.
Cordialement.
Noël

Please Log in or Create an account to join the conversation.

  • Posts: 18
  • Thank you received: 1
  • Hikashop Business
2 years 6 months ago #341843

Re-bonjour,
J'ai oublié de vous poser la principale question :
Est-il possible avec les champs personnalisés de conditionné l'affichage du bouton "ajouter au panier", Comme pour les options ?

Je vous souhaite une agréable journée.
Noël

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
2 years 6 months ago #341848

Bonjour,

Donc ce que je comprend de votre message et ce que vous avez actuellement sur la page, je pense que ce que vous voulez:
- afficher le bouton "ajouter au panier" lorsque l'option "perle personnalisable" est sur "non".
- cacher le bouton "ajouter au panier" lorsque l'option "perle personnalisable" est sur "oui" et afficher les champs personnalisés.
- si les champs personnalisés sont affichés et qu'ils ont été remplis, afficher le bouton "ajouter au panier".
Est-ce exact ?
Si oui, il va falloir revoir tout le code fourni. Le premier morceau doit être revu pour gérer l'option comme il faut, et un nouveau morceau encore plus gros doit être écrit pour gérer l'affichage du bouton d'ajout au panier lorsque les champs sont remplis.
Si vous voulez que nous travaillons la dessus pour vous c'est possible pour un coût de développement de 120€.
Je vous invite à passer par notre formulaire de contact pour la suite dans ce cas:
www.hikashop.com/support/contact-us.html
Merci d'inclure un lien vers ce sujet pour référence.

Please Log in or Create an account to join the conversation.

  • Posts: 18
  • Thank you received: 1
  • Hikashop Business
2 years 6 months ago #341888

Bonjour Nicolas,

Merci pour cette réponse rapide.
Votre analyse est juste, c'est ce qu'il me faudrait mais je ne suis pas prêt à le faire aujourd'hui. Je n'ai pas assez de recul de comment vont réagir les visiteurs pour un tel développement. Je prévois plus une sorte de tunnel de création, un peu comme les tunnel de paiement où chaque page est dédié à une action.

Dans l'immédiat je vais prendre l'option des portes clés tri-color et sur ce modèle j'aimerais que le bouton ajouter au panier apparaisse lorsque les trois options couleur ont été défini, ne pas tenir compte du choix de l'option perle. Attention, pour le modéle bi-color, il n'y a que 2 options de couleur et pour le modèle uni color il n'y pas d'options couleur. Seul l'option perle apparait pour cet article.
À noter que l'option perle est toujours en 1er et ensuite les options couleurs.
Bien évidement si c'est possible. Si ce n'est pas possible de la faire dans le contexte d'un support basique alors que le bouton "ajouter au panier" apparaisse sans tenir compte du nombre d'option. Je supprimerai l'option perle et en ferait un article à part entière.

Je vous souhaite une agréable journée.
Cordialement
Noël

Please Log in or Create an account to join the conversation.

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
2 years 6 months ago #341906

Bonjour,

Notez que normalement, le support inclut dans HikaShop est uniquement là pour répondre aux questions d'utilisation et guider les utilisateurs et corriger les soucis éventuels.
Mais bon, j'essaie d'aider les utilisateurs même quand cela va un peu plus loin. Mais ici, j'ai déjà travaillé sur plusieurs morceaux de code pour vous et en plus vous changez de demande entre les morceaux de code. Donc désolé mais sur ce sujet d'affichage/masquage des champs / du bouton d'ajout au panier, nous vous demanderons de passer par une prestation payante pour la suite.

Please Log in or Create an account to join the conversation.

Time to create page: 0.090 seconds
Powered by Kunena Forum