Bouton add to cart variantes

  • Posts: 426
  • Thank you received: 29
  • Hikamarket Multivendor Hikashop Business
1 year 11 months ago #345588

Bonjour,

j'ai modifié la vue produit avec une liste des variantes disponibles et pour chacune d'elles les caractéristiques, un bouton de quantité et d'ajout au panier



tout est ok y compris l'indentation dans le champ quantité sauf le bouton d'ajout au panier qui n'ajoute que la caractéristique de la page actuelle et non celle avec l'id dans le lien du bouton, pourtant le html généré des boutons sont ok avec le bon ID de produit

voici le bout de code qui génère le champ quantité et le bouton, j'ai juste changé la valeur de this-row
$this->row = json_decode(json_encode($variant));
$this->ajax = 'if(hikashopCheckChangeForm(\'item\',\'hikashop_product_form\')){ return hikashopModifyQuantity(\'' . $this->row->product_id . '\',field,1' . $form . ',\'cart\'); } else { return false; }';
$this->setLayout('quantity');
echo $this->loadTemplate();

a l'inspection le html des boutons portent bien chacun l'id de sa variante, en théorie tout est ok, sauf au test, le produit ajouté n'est pas le bon, exemple, mon produit main (1) a deux variantes 2(default) et 3

Si je suis sur la page 2, ma liste comporte bien les bouton avec l'id 2 et le bouton avec l'id 3, mais peut importe sur lequel je clique, j'ajoute 2 au panier
Si je suis sur la page 3, ma liste comporte bien les bouton avec l'id 2 et le bouton avec l'id 3, mais peut importe sur lequel je clique, j'ajoute 3 au panier

Merci d'avance pour votre clairvoyance :)

Attachments:
Last edit: 1 year 11 months ago by Minie.

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

  • Posts: 82431
  • Thank you received: 13274
  • MODERATOR
1 year 11 months ago #345600

Bonjour,

Le champs quantité et le bouton d'ajout au panier doivent être dans un form propre à chaque élément du tableau avec comme action l'URL de l'ajout au panier, et dans ce form, il doit y avoir un champ caché avec l'id du produit à ajouter au panier. Aussi, le "a" du bouton doit avoir un attribut data-addToCart avec l'id du produit à ajouter.
C'est par exemple ce qu'il y a dans la vue product / add_to_cart_ajax.php pour l'ajout au panier sur les listings des produits.

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

  • Posts: 426
  • Thank you received: 29
  • Hikamarket Multivendor Hikashop Business
1 year 11 months ago #345657

Bonjour,

merci Nicolas, j'ai donc fait des modifications, je peux maintenant ajouter chaque produit, merci beaucoup :)

Un nouveau souci s'est créé avec les modifications, je ne peux plus ajouter des produits avec quantité minimum > 2, j'ai pourtant bien la liaison qui est faite entre l'id du champ quantité et le bouton panier grâce à $attributes .= ' id="'.$this->last_quantity_field_id.'_add_to_cart_button"';

voici le nouveau code

<!-- ADD TO CART -->
<?php if (empty($this->element->characteristics) || $this->params->get('characteristic_display') != 'list') { ?>
	<?php
	$this->row = json_decode(json_encode($variant));
	$classical_url = 'product&task=updatecart&add=1&product_id='.$this->row->product_id;	$attributes = ' class="' . $css_button . '" onclick="if(window.hikashop.addToCart) { return window.hikashop.addToCart(this); }" data-addToCart="'.$this->row->product_id.'" data-addTo-div="'.$this->params->get('main_div_name').'" data-addTo-class="add_in_progress"';
	?>
	<div id="hikashop_product_quantity_main" class="hikashop_product_quantity_main">
		<form action="<?= $classical_url; ?>" method="post" name="hikashop_product_form_<?= $this->row->product_id; ?>_hikashop_category_information_module_" enctype="multipart/form-data">
			<?php 
			$this->setLayout('show_quantity');
			echo $this->loadTemplate();
			?><input type="hidden" name="add" value="<?php echo !$this->config->get('synchronized_add_to_cart', 0); ?>"/><?php
			if(!empty($this->last_quantity_field_id))
				$attributes .= ' id="'.$this->last_quantity_field_id.'_add_to_cart_button"';
			if(!empty($this->row->product_addtocart_message))
				$content = JText::_($this->row->product_addtocart_message);
			else if(!empty($this->row->main->product_addtocart_message))
				$content = JText::_($this->row->main->product_addtocart_message);
			else
				$content = JText::_('ADD_TO_CART');
			echo $this->loadHkLayout('button', array( 'attributes' => $attributes, 'content' => $content, 'fallback_url' => hikashop_completeLink($classical_url)));
			?>
		</form>
	</div>
<?php
}
?>
<!-- EO ADD TO CART -->

et deux html généré dans la liste, le deuxième est en min_quantity 2, et l'ajout au panier affiche un message d'erreur "pas assez de quantité selectionnée..."
<div id="hikashop_product_quantity_main" class="hikashop_product_quantity_main">
	<form action="product&task=updatecart&add=1&product_id=982" method="post" name="hikashop_product_form_982_hikashop_category_information_module_" enctype="multipart/form-data">
		<div id="hikashop_product_quantity_field_2_area" class="input-prepend input-append hikashop_product_quantity_div hikashop_product_quantity_change_div_leftright ">
			<span class="add-on">
			<a class="hikashop_product_quantity_field_change_minus hikashop_product_quantity_field_change" href="#" data-hk-qty-mod="-1" onclick="return window.hikashop.updateQuantity(this,'hikashop_product_quantity_field_2');">&ndash;</a>
			</span>
			<input id="hikashop_product_quantity_field_2" type="text" value="1" onfocus="this.select()" class="hikashop_product_quantity_field" name="quantity" data-hk-qty-min="1" data-hk-qty-max="14" onchange="window.hikashop.checkQuantity(this);" />
			<span class="add-on">
			<a class="hikashop_product_quantity_field_change_plus hikashop_product_quantity_field_change" href="#" data-hk-qty-mod="1" onclick="return window.hikashop.updateQuantity(this,'hikashop_product_quantity_field_2');">+</a>
			</span>
		</div>
		<div id="hikashop_product_quantity_field_2_buttons" class="hikashop_product_quantity_div hikashop_product_quantity_add_to_cart_div hikashop_product_quantity_add_to_cart_div_leftright"></div>
		<input type="hidden" name="add" value="1"/>	<button type="button"  class="btn" onclick="if(window.hikashop.addToCart) { return window.hikashop.addToCart(this); }" data-addToCart="982" data-addTo-div="" data-addTo-class="add_in_progress" id="hikashop_product_quantity_field_2_add_to_cart_button" data-href="/fr/tous-les-produits/product/updatecart/add-1/cid-982"><span>Ajouter au panier</span></button>
	</form>
</div>

<div id="hikashop_product_quantity_main" class="hikashop_product_quantity_main">
	<form action="product&task=updatecart&add=1&product_id=983" method="post" name="hikashop_product_form_983_hikashop_category_information_module_" enctype="multipart/form-data">
		<div id="hikashop_product_quantity_field_3_area" class="input-prepend input-append hikashop_product_quantity_div hikashop_product_quantity_change_div_leftright ">
			<span class="add-on">
			<a class="hikashop_product_quantity_field_change_minus hikashop_product_quantity_field_change" href="#" data-hk-qty-mod="-2" onclick="return window.hikashop.updateQuantity(this,'hikashop_product_quantity_field_3');">&ndash;</a>
			</span>
			<input id="hikashop_product_quantity_field_3" type="text" value="2" onfocus="this.select()" class="hikashop_product_quantity_field" name="quantity" data-hk-qty-min="2" data-hk-qty-max="16" onchange="window.hikashop.checkQuantity(this);" />
			<span class="add-on">
			<a class="hikashop_product_quantity_field_change_plus hikashop_product_quantity_field_change" href="#" data-hk-qty-mod="2" onclick="return window.hikashop.updateQuantity(this,'hikashop_product_quantity_field_3');">+</a>
			</span>
		</div>
		<div id="hikashop_product_quantity_field_3_buttons" class="hikashop_product_quantity_div hikashop_product_quantity_add_to_cart_div hikashop_product_quantity_add_to_cart_div_leftright"></div>
		<input type="hidden" name="add" value="1"/>	<button type="button"  class="btn" onclick="if(window.hikashop.addToCart) { return window.hikashop.addToCart(this); }" data-addToCart="983" data-addTo-div="" data-addTo-class="add_in_progress" id="hikashop_product_quantity_field_3_add_to_cart_button" data-href="/fr/tous-les-produits/product/updatecart/add-1/cid-983"><span>Ajouter au panier</span></button>
	</form>
</div>

pourtant l'id du deuxième bouton indique bien la pris en compte du champ quantity 3

Last edit: 1 year 11 months ago by Minie.

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

  • Posts: 82431
  • Thank you received: 13274
  • MODERATOR
1 year 11 months ago #345658

Bonjour,

Dans data-addTo-div vous devez avoir l'id d'un div qui englobe la zone.
Idéalement, il faudrait mettre hikashop_product_quantity_main mais il faut que cet id soit unique, là vous avez le même id pour chaque produit, ce qui n'est pas possible.

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

  • Posts: 426
  • Thank you received: 29
  • Hikamarket Multivendor Hikashop Business
1 year 11 months ago #345661

Bonjour,

effectivement le data-addTo-div n'etait pas indiqué dans la variable attributes puisque $this->params->get('main_div_name'), sortit de son contexte, n'avait plus de valeur.

Mais j'ai toujours le même souci avec le code corrigé comme ceci :

<!-- ADD TO CART -->
<?php if (empty($this->element->characteristics) || $this->params->get('characteristic_display') != 'list') { ?>
	<?php
	$this->row		= json_decode(json_encode($variant));
	$classical_url	= 'product&task=updatecart&add=1&product_id='.$this->row->product_id;
	$attributes		= ' class="' . $css_button . '" onclick="if(window.hikashop.addToCart) { return window.hikashop.addToCart(this); }" data-addToCart="'.$this->row->product_id.'" data-addTo-div="hikashop_product_quantity_main_'.$this->row->product_id.'" data-addTo-class="add_in_progress"';
	?>
	<div id="hikashop_product_quantity_main_<?= $this->row->product_id; ?>" class="hikashop_product_quantity_main">
		<form action="<?= $classical_url; ?>" method="post" name="hikashop_product_form_<?= $this->row->product_id; ?>_hikashop_category_information_module_" enctype="multipart/form-data">
			<?php 
			$this->setLayout('show_quantity');
			echo $this->loadTemplate();
			?><input type="hidden" name="add" value="<?php echo !$this->config->get('synchronized_add_to_cart', 0); ?>"/><?php
			if(!empty($this->last_quantity_field_id))
				$attributes .= ' id="'.$this->last_quantity_field_id.'_add_to_cart_button"';
			if(!empty($this->row->product_addtocart_message))
				$content = JText::_($this->row->product_addtocart_message);
			else if(!empty($this->row->main->product_addtocart_message))
				$content = JText::_($this->row->main->product_addtocart_message);
			else
				$content = JText::_('ADD_TO_CART');
			echo $this->loadHkLayout('button', array( 'attributes' => $attributes, 'content' => $content, 'fallback_url' => hikashop_completeLink($classical_url)));
			?>
		</form>
	</div>
<?php
}
?>
<!-- EO ADD TO CART -->

le html généré
<div id="hikashop_product_quantity_main_982" class="hikashop_product_quantity_main">
	<form action="product&task=updatecart&add=1&product_id=982" method="post" name="hikashop_product_form_982_hikashop_category_information_module_" enctype="multipart/form-data">
		<div id="hikashop_product_quantity_field_2_area" class="input-prepend input-append hikashop_product_quantity_div hikashop_product_quantity_change_div_leftright ">
			<span class="add-on">
			<a class="hikashop_product_quantity_field_change_minus hikashop_product_quantity_field_change" href="#" data-hk-qty-mod="-1" onclick="return window.hikashop.updateQuantity(this,'hikashop_product_quantity_field_2');">&ndash;</a>
			</span>
			<input id="hikashop_product_quantity_field_2" type="text" value="1" onfocus="this.select()" class="hikashop_product_quantity_field" name="quantity" data-hk-qty-min="1" data-hk-qty-max="14" onchange="window.hikashop.checkQuantity(this);" />
			<span class="add-on">
			<a class="hikashop_product_quantity_field_change_plus hikashop_product_quantity_field_change" href="#" data-hk-qty-mod="1" onclick="return window.hikashop.updateQuantity(this,'hikashop_product_quantity_field_2');">+</a>
			</span>
		</div>
		<div id="hikashop_product_quantity_field_2_buttons" class="hikashop_product_quantity_div hikashop_product_quantity_add_to_cart_div hikashop_product_quantity_add_to_cart_div_leftright"></div>
		<input type="hidden" name="add" value="1"/>	<button type="button"  class="btn" onclick="if(window.hikashop.addToCart) { return window.hikashop.addToCart(this); }" data-addToCart="982" data-addTo-div="hikashop_product_quantity_main_982" data-addTo-class="add_in_progress" id="hikashop_product_quantity_field_2_add_to_cart_button" data-href="/fr/tous-les-produits/product/updatecart/add-1/cid-982"><span>Ajouter au panier</span></button>
	</form>
</div>

<div id="hikashop_product_quantity_main_983" class="hikashop_product_quantity_main">
	<form action="product&task=updatecart&add=1&product_id=983" method="post" name="hikashop_product_form_983_hikashop_category_information_module_" enctype="multipart/form-data">
		<div id="hikashop_product_quantity_field_3_area" class="input-prepend input-append hikashop_product_quantity_div hikashop_product_quantity_change_div_leftright ">
			<span class="add-on">
			<a class="hikashop_product_quantity_field_change_minus hikashop_product_quantity_field_change" href="#" data-hk-qty-mod="-2" onclick="return window.hikashop.updateQuantity(this,'hikashop_product_quantity_field_3');">&ndash;</a>
			</span>
			<input id="hikashop_product_quantity_field_3" type="text" value="2" onfocus="this.select()" class="hikashop_product_quantity_field" name="quantity" data-hk-qty-min="2" data-hk-qty-max="16" onchange="window.hikashop.checkQuantity(this);" />
			<span class="add-on">
			<a class="hikashop_product_quantity_field_change_plus hikashop_product_quantity_field_change" href="#" data-hk-qty-mod="2" onclick="return window.hikashop.updateQuantity(this,'hikashop_product_quantity_field_3');">+</a>
			</span>
		</div>
		<div id="hikashop_product_quantity_field_3_buttons" class="hikashop_product_quantity_div hikashop_product_quantity_add_to_cart_div hikashop_product_quantity_add_to_cart_div_leftright"></div>
		<input type="hidden" name="add" value="1"/>	<button type="button"  class="btn" onclick="if(window.hikashop.addToCart) { return window.hikashop.addToCart(this); }" data-addToCart="983" data-addTo-div="hikashop_product_quantity_main_983" data-addTo-class="add_in_progress" id="hikashop_product_quantity_field_3_add_to_cart_button" data-href="/fr/tous-les-produits/product/updatecart/add-1/cid-983"><span>Ajouter au panier</span></button>
	</form>
</div>

Last edit: 1 year 11 months ago by Minie.

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

  • Posts: 82431
  • Thank you received: 13274
  • MODERATOR
1 year 11 months ago #345662

Le code à l'air bien. Il faudrait que je regarde la situation directement sur la page pour étudier ce qu'il se passe.
Pourriez-vous fournir l'URL ?

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

  • Posts: 426
  • Thank you received: 29
  • Hikamarket Multivendor Hikashop Business
1 year 11 months ago #345675

Je viens d'envoyer le lien en privé via le formulaire de contact.

Merci beaucoup

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

  • Posts: 82431
  • Thank you received: 13274
  • MODERATOR
1 year 11 months ago #345680

Bonjour,

Je me suis trompé au sujet de data-addTo-div
Il faut y mettre le name du form qui englobe la zone.

Notez que dans l'option "Characteristics selection method" de la configuration HikaShop vous avez le choix "list". En sélectionnant ce choix, le système affichera automatiquement un listing des variantes sur la page produit, avec un bouton d'ajout au panier par variante si l'ajout au panier est disponible pour la variante. Donc exactement ce que vous avez développé là. Je n'avez pas compris dans votre premier message que vous essayiez de faire la même chose :/

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

  • Posts: 426
  • Thank you received: 29
  • Hikamarket Multivendor Hikashop Business
1 year 11 months ago #345686

Bonjour,

ca fonctionne maintenant, merci beaucoup.

Comment dire .. je suis dégoutée :woohoo: Si j'avais su je me serais épargnée pas mal de temps de développement, et le résultat serait bien plus propre !

C'est vrai que hikashop est tellement complet que même si nous l'utilisons depuis des années nous ne l'avons toujours pas exploré entièrement. Peut être puis- je me consoler en me disant que mon client voulait plusieurs mises en page différentes pour ses produits à gérer lui même par produit ou catégories dans hikamarket (ce que nous avons développé aussi du coup) donc si l'option se trouve dans la config hikashop, elle s'appliquerait à tous les produits.

En tout cas merci beaucoup, nous chercherons plus longtemps dans les options avant de développer :lol:

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

  • Posts: 82431
  • Thank you received: 13274
  • MODERATOR
1 year 11 months ago #345688

En effet, Cela s'appliquerait à tous les produits. Donc il aurait quand même fallu faire un peu de développement pour changer le mode d'affichage en fonction du produit.

Ce que je recommande, c'est que si vous pensez qu'il va falloir faire un développement conséquent comme ici, faites nous un message pour présenter la problématique et ce que vous voulez faire. Nous pourrons vous dire si c'est une bonne idée, ou s'il y a plus simple, etc.

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

  • Posts: 426
  • Thank you received: 29
  • Hikamarket Multivendor Hikashop Business
1 year 11 months ago #345704

Merci beaucoup, je prendrais donc plutôt ce chemin avec plaisir paracerque ce n'est pas la première fois que je prends des chemins détournés alors que des solutions sont déjà prévues dans hikashop :)

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

Time to create page: 0.079 seconds
Powered by Kunena Forum