Cet article fait suite à celui traitant de la même opération pour la version 1.6 de Perstashop

La strucutre de la 1.7 étant très différente, le code l’est tout autant.

Comme le premier, la seule limitation concernant ce bout de code, les fichiers ne peuvent pas être traités, donc c’est limité, mais pour ceux qui n’ont pas besoin de fichiers, ce code leur permettra d’optimiser l’utilisation des champs de personnalisation sur leur boutique.

$(document).ready(function(){
    // Customization save for 1.7
    	if ( $('.product-customization').size() ) {
	        // customization and add to cart buttons are hidden and custom button is displayed
	        $('.product-customization button.btn.btn-primary').hide();
			$('.product-add-to-cart button.add-to-cart').hide();
			$('.product-add-to-cart button.add-to-cart').after($('.aiaas_add-to-cart').clone());
	
			// Check if all required fields are set if one change
			$('.product-message').off('change').on('change', function() {
				var ready = true;
				$('.product-message').each(function() {
					if ($(this).attr('required') && !$(this).val()) {
						ready = false;
					}
				});
				
				if (ready) {
					$('.btn.add-to-cart, .aiaas_add-to-cart').removeAttr('disabled');
				} else {
					$('.btn.add-to-cart, .aiaas_add-to-cart').attr('disabled', 'disabled');
				}
			});
			
			// Reset customization field
			$('#product_customization_id').val('');
					
	        // Add to cart methode is overriden
			$('.aiaas_add-to-cart').off('click').on('click', function(e) {
				e.preventDefault();
				
				var object = $(this);
				
				// Reset current values
				$('#aiaas_parameters').html('');

				// Set combination				
				var form = $('.product-customization form');
	            var data = form.serialize().split('%0D%0A').join(' ')+'&submitCustomizedData';
	            $.ajax({
	                url: form.attr('action'),
	                type: 'POST',
	                data: data,
	                success: function() {
						$.get(ajax_url+'?action=getCustomization&product_id='+aiattributesasfieldsClass.product_id+'&token='+prestashop.static_token, function(data) {
							// Update customization id
							$('#product_customization_id').val(data);
			
							// Add product to cart
							object.parent().find('[data-button-action="add-to-cart"]').click();
						});
	                }
	            });
	        });
		}
		}
});

Le fonctionnement sans champs obligatoire ne nécessite que le code javascript ci-dessus, par contre si votre formulaire contient des champs obligatoire, il va falloir empêcher l’affichage de l’alerte qui apparaitra lors du clic sur le bouton d’ajout au panier, pour cela j’ai ajouté un bout de code CSS.

.aiaas_add-to-cart {
	display: none;	
}

.product-add-to-cart .aiaas_add-to-cart {
	display: block;	
}

Cette version est la première et est perfectible ne serait ce que pour la partie soumission de l’ajout au panier qui pour le moment se fait en même temps que l’enregistrement des données, ce qui nécessite le code CSS, mais pas le temps de chercher comment supprimer ce premier appel

Répondre

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

+ 74 = quatre-vingt deux