Afficher un délai supplémentaire si commande au-delà de la quantité en stock

Denys06 · December 17, 2013

Bonjour à tous, je poste ce topic car je fais face à un problème avec le panier de prestashop.

J'ai actuellement adapté le code pour que dans mon panier les produits affichent une pastille de couleur selon la disponibilité du produit :

Mon soucis est que pour le premier produit présent dans mon panier, il n'y a qu'un seul exemplaire en stock, hors ici en indiquant 3 dans la quantité souhaité, il indique toujours que le produit est en stock ce qui n'est pas correct vis-à-vis du client.

J'aimerais que si le client indique une quantité au-dessus du stock disponible, que la pastille soit remplacé par une orange, ou bien encore mieux : que le produit soit dupliqué avec pour le premier une quantité de 1 en vert et le second une quantité de 2 en orange.

Voici la ligne de code de mon fichier shopping-cart-product-line.tpl

    <td class="cart_ref" align="center">
    {if $product.quantity_available > 0}
        <img src="{$img_dir}pr_avail.png" alt="{l s='Available'}" title="{l s='Available'}">
    {else if $product.quantity_available <= 0 && $product.allow_oosp}
        <img src="{$img_dir}pr_preorder.png" alt="{l s='On Backorder'}" title="{l s='On Backorder'}">
    {else if $product.quantity_available <= 0 && !$product.allow_oosp}
        <img src="{$img_dir}pr_oost.png" alt="{l s='Out of stock'}" title="{l s='Out of stock'}">
    {/if}
</td>

Merci d'avance pour votre aide

Edited December 17, 2013 by Denys06 (see edit history)

Denys06 · December 21, 2013

Up s'il vous plait, pouvez-vous m'aider ?

djform · December 24, 2013

Bonjour.

tu es sous quelle version de Presta ?

Moi, je suis sous 1.5.6.1

J'ai développé ce que tu recherches. Pour que ça fonctionne, il faut adapter le js. En fait, quand tu veux mettre à jour les données du panier, il faut le faire à la fois dans le tpl et le js : le tpl c'est ce qui va s'afficher quand tu vas afficher la page du panier la 1ère fois (ou quand tu la rafraichit manuellement) et le js va prendre le relai quand tu modifies une quantité.

Il va donc falloir modifier cart-summary.js, qui se trouve dans /themes/js.

Tout d'abord, au début, voici ce qu'il faut avoir :

$(document).ready(function()
{
	// If block cart isn't used, we don't bind the handle actions
	if (window.ajaxCart !== undefined)
	{
		$('.cart_quantity_up').unbind('click').live('click', function(){ upQuantity($(this).attr('id').replace('cart_quantity_up_', '')); return false;	});
		$('.cart_quantity_down').unbind('click').live('click', function(){ downQuantity($(this).attr('id').replace('cart_quantity_down_', '')); return false; });
		$('.cart_quantity_delete' ).unbind('click').live('click', function(){ deleteProductFromSummary($(this).attr('id')); return false; });
		$('.cart_quantity_input').typeWatch({ highlight: true, wait: 600, captureLength: 0, callback: function(val) { updateQty(val, true, this.el); } });
	}
	
	$('.cart_address_delivery').live('change', function(){ changeAddressDelivery($(this)); });
	
	cleanSelectAddressDelivery();
	checkAvailability();
});

Ensuite, on ajoute la fonction suivante :

function checkAvailability()
{
	$.ajax({
		type: 'POST',
		headers: { "cache-control": "no-cache" },
		url: baseUri + '?rand=' + new Date().getTime(),
		async: true,
		cache: false,
		dataType: 'json',
		data: 'controller=cart'
			+ '&ajax=true'
			+ '&getproductprice=true'
			+ '&summary=true'
			+ '&token=' + static_token
			+ '&allow_refresh=1',
		success: function(jsonData)
		{
			if (jsonData.hasError)
			{
				var errors = '';
				for(var error in jsonData.errors)
					//IE6 bug fix
					if(error !== 'indexOf')
						errors += $('<div />').html(jsonData.errors[error]).text() + "\n";
				alert(errors);
			}
			else
			{
				updateCartAvailability(jsonData.summary);		
			}
		},
		error: function(XMLHttpRequest, textStatus, errorThrown) {
			if (textStatus !== 'abort') {
				//alert("TECHNICAL ERROR: unable to verify quantity \n\nDetails:\nError thrown: " + XMLHttpRequest + "\n" + 'Text status: ' + textStatus);
				}
		}
	});
	setTimeout ('checkAvailability()', 1000);
}

Puis celle-ci :

function updateCartAvailability(json)
{
	var i;
	var product_list = new Array();

	if (typeof json == 'undefined')
		return;
		
	$('div.error').fadeOut();		

	for (i=0;i<json.products.length;i++)
		product_list[json.products[i].id_product + '_' + json.products[i].id_product_attribute + '_' + json.products[i].id_address_delivery] = json.products[i];
		
	for (i in product_list)
	{
		var key_for_blockcart_nocustom = product_list[i].id_product + '_' + product_list[i].id_product_attribute + '_' + ((product_list[i].quantity_without_customization != product_list[i].quantity)? 'nocustom' : '0') + '_' + product_list[i].id_address_delivery;
		
		if (product_list[i].quantity_available - product_list[i].cart_quantity >= 0) {
				$('#product_' + key_for_blockcart_nocustom + ' .cart_ref').html('<img src="'+ img_dir + 'pr_avail.png" alt="En Stock" title="En Stock">');
			} else if (product_list[i].quantity_available - product_list[i].cart_quantity < 0 && product_list[i].allow_oosp) {
				$('#product_' + key_for_blockcart_nocustom + ' .cart_ref').html('<img src="' + img_dir + 'pr_preorder.png" alt="En Cours de réapprovisionnement" title="En Cours de réapprovisionnement">');
			} else if (product_list[i].quantity_available - product_list[i].cart_quantity < 0 && !product_list[i].allow_oosp) {
				$('#product_' + key_for_blockcart_nocustom + ' .cart_ref').html('<img src="' + img_dir + 'pr_oost.png" alt="En rupture de stock" title="En rupture de stock">');
			}
	}

}

Il faut ensuite ajouter le bout de code suivant, dans la fonction updateCartSummary :

if (product_list[i].quantity_available - product_list[i].cart_quantity >= 0) {
			$('#product_' + key_for_blockcart_nocustom + ' .cart_ref').html('<img src="'+ img_dir + 'pr_avail.png" alt="{l s=\'Available\'}" title="{l s=\'Available\'}">');
		} else if (product_list[i].quantity_available - product_list[i].cart_quantity < 0 && product_list[i].allow_oosp) {
			$('#product_' + key_for_blockcart_nocustom + ' .cart_ref').html('<img src="' + img_dir + 'pr_preorder.png" alt="{l s=\'On Backorder\'}" title="{l s=\'On Backorder\'}">');
		} else if (product_list[i].quantity_available - product_list[i].cart_quantity < 0 && !product_list[i].allow_oosp) {
			$('#product_' + key_for_blockcart_nocustom + ' .cart_ref').html('<img src="' + img_dir + 'pr_oost.png" alt="{l s=\'Out Of Stock\'}" title="{l s=\'Out Of Stock\'}">');
		}

juste avant la fin de la boucle :

for (i in product_list)
{

....

Ajouter bout de code ici

}

// Update discounts
if (json.discounts.length == 0)

Voilà, je pense n'avoir rien oublié.

Denys06 · December 24, 2013

Salut, c'est un cadeau de noël que tu me fait là en postant ta réponse le 24 Décembre

Alors je suis comme toi en 1.5.6.1 de Prestashop, ça c'est cool. Ma première difficulté et que je ne retrouve pas la première ligne de code que tu m'à indiquée. Dans mon code j'ai à la place :

$(document).ready(function()
{
	$('.cart_quantity_up').unbind('click').live('click', function(){upQuantity($(this).attr('id').replace('cart_quantity_up_', '')); return false;});
	$('.cart_quantity_down').unbind('click').live('click', function(){downQuantity($(this).attr('id').replace('cart_quantity_down_', '')); return false;});
	$('.cart_quantity_delete' ).unbind('click').live('click', function(){deleteProductFromSummary($(this).attr('id')); return false;});
	$('.cart_quantity_input').typeWatch({highlight: true, wait: 600, captureLength: 0, callback: function(val) { updateQty(val, true, this.el);[spam-filter]);
	$('.cart_address_delivery').live('change', function(){changeAddressDelivery($(this));});
	cleanSelectAddressDelivery();
});

Dois-je ajouter le reste de ton code à la suite de ce code et modifier cette fonction comme ta première ligne ?

Merci et vive Noël

Edit : Je viens d'ajouter toutes les lignes de code que tu m'à indiquées mais en remplaçant ma fonction $(document).ready(function() écrite plus haut par la tienne. Cela ne fonctionne pour le moment pas, je n'ai pas de modification dans mon panier...

Edit 2 : Débutant que je suis, je n'avais pas vider le cache du navigateur, cela fonctionne maintenant, j'ai 2 pastilles qui s'affichent dans mon template côte à côte ce qui devrais plutôt être une pastille remplacée par une autre, je vais essayer de résoudre ce petit problème d'affichage et je te tient au courant.

Edited December 24, 2013 by Denys06 (see edit history)

Denys06 · December 24, 2013

Re djform,

Je tiens tout d'abord à te dire un grand merci en ce jour de noël, tu m'a fait un très beau cadeau, qui ça y est, FONCTIONNE !

Le code marche bien, quand j'ajoute un produit de trop par rapport à la quantité disponible, le bouton se change en orange ce qui convient parfaitement

Petit bémol, et peut être vas-tu pouvoir m'aider la dessus

Le alt et title du code :

else if (product_list[i].quantity_available - product_list[i].cart_quantity < 0 && product_list[i].allow_oosp) {
				$('#product_' + key_for_blockcart_nocustom + ' .cart_availability').html('<img src="' + img_dir + 'pr_preorder.png" alt="{l s=\'On Backorder\'}" title="{l s=\'On Backorder\'}" style="cursor:help;">');

Ne fonctionne pas chez moi, quand je passe la souris dessus, il m'affiche bêtement {l s='On Backorder'} et n'utilise pas la traduction associée

C'est tu comment résoudre cela ?

Edited December 24, 2013 by Denys06 (see edit history)

djform · December 24, 2013

Heureux que ça fonctionne presque.

Tu as effectué les traductions ?

Pour rappel, il faut aller dans le BO dans "Localisation - >Traductions".

Là, tu choisis "Traduction du Front Office", puis le nom de ton thème éventuel, puis tu cliques sur le drapeau tricolore à droite.

Dans la page tu cherches "shopping-cart-product-line" et tu vas y trouver les traductions à faire.

Edited December 24, 2013 by djform (see edit history)

Denys06 · December 24, 2013

Salut, oui j'ai bien effectué la traduction, mais même lorsqu'elles ne sont pas présentent, le passage de souris devrais m'afficher On Backorder et non pas {l s='On Backorder'}. On dirais qu'il y à un problème d'interprétation avec les symboles \'. C'est bizarre que chez toi ça marche mais pas chez moi

Edited December 24, 2013 by Denys06 (see edit history)

djform · December 24, 2013

Je pense que j'avais ce problème et c'est pour ça que j'ai enlevé la traduction dans la partie qui se trouve dans la fonction updateCartAvailability

Comme tu peux le voir :

function updateCartAvailability(json)
{
	var i;
	var product_list = new Array();

	if (typeof json == 'undefined')
		return;
		
	$('div.error').fadeOut();		

	for (i=0;i<json.products.length;i++)
		product_list[json.products[i].id_product + '_' + json.products[i].id_product_attribute + '_' + json.products[i].id_address_delivery] = json.products[i];
		
	for (i in product_list)
	{
		var key_for_blockcart_nocustom = product_list[i].id_product + '_' + product_list[i].id_product_attribute + '_' + ((product_list[i].quantity_without_customization != product_list[i].quantity)? 'nocustom' : '0') + '_' + product_list[i].id_address_delivery;
		
		if (product_list[i].quantity_available - product_list[i].cart_quantity >= 0) {
				$('#product_' + key_for_blockcart_nocustom + ' .cart_ref').html('<img src="'+ img_dir + 'pr_avail.png" alt="En Stock" title="En Stock">');
			} else if (product_list[i].quantity_available - product_list[i].cart_quantity < 0 && product_list[i].allow_oosp) {
				$('#product_' + key_for_blockcart_nocustom + ' .cart_ref').html('<img src="' + img_dir + 'pr_preorder.png" alt="En Cours de réapprovisionnement" title="En Cours de réapprovisionnement">');
			} else if (product_list[i].quantity_available - product_list[i].cart_quantity < 0 && !product_list[i].allow_oosp) {
				$('#product_' + key_for_blockcart_nocustom + ' .cart_ref').html('<img src="' + img_dir + 'pr_oost.png" alt="En rupture de stock" title="En rupture de stock">');
			}
	}

}

N'ayant pas trouvé la raison de ce bug, j'ai changé

{l s=\'Available\'}

par

En Stock

et pareil pour les 2 autres.

Denys06 · December 24, 2013

Ha ok en effet c'est pour ça, mince je vais continuer à chercher de mon côté comment faire fonctionner la traduction et je te tiens au courant si j'ai la réponse

J'ai un deuxième petit soucis, sous Internet Explorer, lorsque ma souris reste sur l'image de disponibilité, le {l s='On Backorder'} clignote. Cela vient surement de la ligne de code setTimeout ('checkAvailability()', 1000); la aussi y a t'il un moyen pour ne pas faire clignoter l'infobulle ? Si la ligne de code setTimeout ('checkAvailability()', 1000); est la cause, est-elle obligatoire ?

djform · December 24, 2013

On peut la supprimer. En fait, ça permet de vérifier toutes les secondes si la disponibilité est bonne, en fonction des autres commandes éventuelles. Supposons que tu aies un gros site avec 1000 ou 10000 commandes par jour, ton stock variera quasiment à chaque minute.

Mais c'est vrai que pour un "petit" site, on peut la supprimer.

thierryAD · December 24, 2013

Possible d'avoir un petit screenshot du résultat de la modif ?

Merci

Edited December 24, 2013 by thierryAD (see edit history)

Denys06 · December 24, 2013

Voici une image

Merci beaucoup djform pour ton aide.

Je recherche la solution pour la traduction et la clignotement de l'infobulle, si je trouve je t'indiquerais la solution.

Joyeux Noël

djform · December 24, 2013

J'ai parlé un peu trop vide plus haut. Si on supprime cette ligne :

setTimeout ('checkAvailability()', 1000);

la traduction ne se fait plus quand on modifie une quantité. D'ailleurs, c'est pour ça que ça ne fonctionne pas dans la fonction que j'ai traduite.

Du coup, au lieu de mettre 1000, on peut mettre 3000. Ca ne clignotera plus aussi vite.

Denys06 · December 24, 2013

Oui, j'ai vu ça en essayant de l'enlevée... j'essaie de trouver un superfuge pour enlever le clignotement

Concernant la traduction j'ai trouvé ce message qui permet de faire ce que je désire :

http://www.prestashop.com/forums/topic/175834-traduction-dans-du-js-un-petit-coup-de-main-svp/?p=866946

toutefois je n'arrive pas à l'appliquer à mon exemple.

J'ai créé au tout début de shopping-cart-product-line.tpl

<script type="text/javascript">
// <![CDATA[
var available = '{l s='Available' js=1}';
var onbackorder = '{l s='On Backorder' js=1}';
var outofstock = '{l s='Out Of Stock' js=1}';
//]]>
</script>

Mais ensuite je ne sais pas comment appeler la fonction dans les ALT et TITLE de cart-summary.js

Edited December 24, 2013 by Denys06 (see edit history)

Denys06 · December 24, 2013

Je poste sur l'avancement de ma recherche pour savoir si quelqu'un à la solution au petit soucis que je rencontre.

En remplaçant

$('#product_' + key_for_blockcart_nocustom + ' .cart_availability').html('<img src="' + img_dir + 'pr_preorder.png" alt="{l s=\'On Backorder\'}" title="{l s=\'On Backorder\'}" style="cursor:help;">');

par

$('#product_' + key_for_blockcart_nocustom + ' .cart_availability').text(available);

J'arrive à utiliser les traductions grâce à la variable .text(available)
Malheureusement cela se fait au détriment de l'image qui disparait.

Comment intégrer

.text(available)

dans

.html('<img src="' + img_dir + 'pr_preorder.png" alt="{l s=\'On Backorder\'}" title="{l s=\'On Backorder\'}" style="cursor:help;">');

pour enfin voir apparaitre les traductions ?

Edited December 24, 2013 by Denys06 (see edit history)

Denys06 · December 26, 2013

Up s'il vous plait, je sent que la réponse n'est pas loin, j'y suis presque ! Il ne me manque plus que la solution à mon message précédent pour clore ce topic.

Edited December 26, 2013 by Denys06 (see edit history)

Afficher un délai supplémentaire si commande au-delà de la quantité en stock

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in