[résolu]Personnalisation Module blockcart

[marider]

Bonjour à tous
je voudrais modifié quelque chose concernant le blockcard.
Explication : quand on met un article au panier il y a un carré vide qui ce déplace de la photo jusqu'au panier quand le mode ajax est activé. La question est comment on arrive à personnaliser ce carré vide qui ce déplace par une image perso.

[BVince]

Bonjour,

Tu pourras remplacer le cadre par une image dans ton global.css :

/* transfert effect*/
.transferProduct { border: 2px solid #888; }

remplacer par exemple par :

/* transfert effect*/
.transferProduct { border: 0px solid #888; background: url('../img/ton_image.gif') no-repeat; }

Bye...

[marider]

Salut BVince
Merci pour la soluce Vince trop fort j'en doutais pas . Merci et je pense à toi dans la journée.
J'ai un ou 2 truc à prendre sur ton site. D'ailleurs je vous le conseille à tous.
Merci encore.

[thibault]

Bonsoir,
Dans la même idée, comment faire pour remplacer ce cadre par l'image du produit qui est commandé ?
Merci d'avance

[BVince]

C'est possible mais il va falloir ajouter du code dans le fichier ajax-cart.js du module blockcart, en effet il va falloir modifier la class TransfertProduct contenue dans le global css en javascript, par exemple en intégrant ce code au début de la fonction add :

var ss = document.styleSheets;
for (var i=0; i     var rules = ss[i].cssRules || ss[i].rules;

    for (var j=0; j         if (rules[j].selectorText === ".transferProduct") {
                      rules[j].style.background = "url("+$(".ProductImage_" + idProduct).attr("src")+") no-repeat";
        }
    }
}

ensuite il faut modifier le code un peu plus bas (10 15 lignes) pour modifier le elementToTransfert afin qu'il correcponde à l'image :

elementToTransfert = $(".ProductImage_" + idProduct);

dans cet exemple, l'image du produit a comme class : ProductImage_17 si 17 = id produit.

[thibault]

Bonjour et merci.
J'aurai du préciser que je suis débutant. Je viens de faire les modifs, mais pas de changements, donc je ne dois pas faire comme il faut.
Avez-vous tester la fonction ?
Merci d'avance

[BVince]

Oui, testé et validé, quelques modifs à réaliser dans des modules persos pour réaliser le même effet, mais tout est OK...

[thibault]

J'abuse de ton temps encore un peu.
J'ai fait les modifs indiqués dans ajax-cart.js dans le dossier module/blockcart :

add : function(idProduct, idCombination, addedFromProductPage, callerElement, quantity, whishlist){
if (addedFromProductPage && !checkCustomizations())
{
alert(fieldRequired);
return ;
}

//disabled the button when adding to do not double add if user double click
if (addedFromProductPage)
{
$('body#product p#add_to_cart input').attr('disabled', 'disabled').removeClass('exclusive').addClass('exclusive_disabled');
$('.filled').removeClass('filled');
}
else
$('.ajax_add_to_cart_button').attr('disabled', 'disabled');

//send the ajax request to the server
$.ajax({
type: 'GET',
url: baseDir + 'cart.php',
async: true,
cache: false,
dataType : "json",
data: 'add&ajax=true&qty;=' + ( (quantity && quantity != null) ? quantity : '1') + '&id;_product=' + idProduct + '&token;=' + static_token + ( (parseInt(idCombination) && idCombination != null) ? '&ipa;=' + parseInt(idCombination): ''),
success: function(jsonData)
{
// add appliance to whishlist module
var ss = document.styleSheets;
for (var i=0; i var rules = ss.cssRules || ss.rules;

for (var j=0; j if (rules[j].selectorText === ".transferProduct") {
rules[j].style.background = "url("+$(".ProductImage_" + idProduct).attr("src")+") no-repeat";
}
}
}
if (whishlist && !jsonData.errors)
WishlistAddProductCart(whishlist[0], idProduct, idCombination, whishlist[1]);
//apply 'transfert' effect
var elementToTransfert = null;
if (callerElement && callerElement != null)
$(callerElement).parents().each( function() {
if ($(this).is('.ajax_block_product')) elementToTransfert = $(this);
});
else
elementToTransfert = $(".ProductImage_" + idProduct);
elementToTransfert.TransferTo({
to: $('#cart_block').get(0),
className:'transferProduct',
duration: 800,
complete: function () {
ajaxCart.updateCart(jsonData);
//reactive the button when adding has finished
if (addedFromProductPage)
$('body#product p#add_to_cart input').removeAttr('disabled').addClass('exclusive').removeClass('exclusive_disabled');
else
$('.ajax_add_to_cart_button').removeAttr('disabled');
}
});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("TECHNICAL ERROR: unable to add the product.\n\nDetails:\nError thrown: " + XMLHttpRequest + "\n" + 'Text status: ' + textStatus);
//reactive the button when adding has finished
if (addedFromProductPage)
$('body#product p#add_to_cart input').removeAttr('disabled').addClass('exclusive').removeClass('exclusive_disabled');
else
$('.ajax_add_to_cart_button').removeAttr('disabled');
}
});
},

mais cela ne fonctionne pas !
Merci d'avance

[thibault]

add : function(idProduct, idCombination, addedFromProductPage, callerElement, quantity, whishlist){
       if (addedFromProductPage && !checkCustomizations())
       {
           alert(fieldRequired);
           return ;
       }

       //disabled the button when adding to do not double add if user double click
       if (addedFromProductPage)
       {
           $('body#product p#add_to_cart input').attr('disabled', 'disabled').removeClass('exclusive').addClass('exclusive_disabled');
           $('.filled').removeClass('filled');
       }
       else
           $('.ajax_add_to_cart_button').attr('disabled', 'disabled');

       //send the ajax request to the server
       $.ajax({
           type: 'GET',
           url: baseDir + 'cart.php',
           async: true,
           cache: false,
           dataType : "json",
           data: 'add&ajax=true&qty;=' + ( (quantity && quantity != null) ? quantity : '1') + '&id;_product=' + idProduct + '&token;=' + static_token + ( (parseInt(idCombination) && idCombination != null) ? '&ipa;=' + parseInt(idCombination): ''),
           success: function(jsonData)
           {
               // add appliance to whishlist module
               var ss = document.styleSheets;
for (var i=0; i     var rules = ss[i].cssRules || ss[i].rules;

    for (var j=0; j         if (rules[j].selectorText === ".transferProduct") {
                      rules[j].style.background = "url("+$(".ProductImage_" + idProduct).attr("src")+") no-repeat";
        }
    }
} 
               if (whishlist && !jsonData.errors) 
                   WishlistAddProductCart(whishlist[0], idProduct, idCombination, whishlist[1]);
               //apply 'transfert' effect
               var elementToTransfert = null;
               if (callerElement && callerElement != null)
                   $(callerElement).parents().each( function() {
                       if ($(this).is('.ajax_block_product')) elementToTransfert = $(this);
                   });
               else
                   elementToTransfert = $(".ProductImage_" + idProduct); 
               elementToTransfert.TransferTo({
                           to: $('#cart_block').get(0),
                           className:'transferProduct',
                           duration: 800,
                           complete: function () {
                               ajaxCart.updateCart(jsonData);
                               //reactive the button when adding has finished
                               if (addedFromProductPage)
                                   $('body#product p#add_to_cart input').removeAttr('disabled').addClass('exclusive').removeClass('exclusive_disabled');
                               else
                                   $('.ajax_add_to_cart_button').removeAttr('disabled');
                           }
               });
           },
           error: function(XMLHttpRequest, textStatus, errorThrown) {
               alert("TECHNICAL ERROR: unable to add the product.\n\nDetails:\nError thrown: " + XMLHttpRequest + "\n" + 'Text status: ' + textStatus);
               //reactive the button when adding has finished
               if (addedFromProductPage)
                   $('body#product p#add_to_cart input').removeAttr('disabled').addClass('exclusive').removeClass('exclusive_disabled');
               else
                   $('.ajax_add_to_cart_button').removeAttr('disabled');
           }
       });
   },

[BVince]

Ok, mais il faut aussi que les images aient la classe

ProductImage_"id du produit"

[thibault]

Euh ! d'accord et merci mais je fais comment ?

[BVince]

Bon,
il va falloir modifier tous les tpl qui contiennent une image produit et un bouton "ajouter au panier" pour ajouter sur toutes les images la classe correspondante, par exemple dans product-list.tpl :

 class="ProductImage_{$product.id_product}"

[thibault]

OK, merci beaucoup pour avoir pris du temps. Je vais tenter ces modifs

[shaka]

Question bête... si on oublie un .tpl, est-ce que ça plante tout le site ?

J'en rêve de cette petite fonction sympathique, mais me lancer dans la customisation ... gasp, je redoute le pire

[arnaudmb]

pour tous ceux qui tomberai sur ce topic en recherche d'une solution, j'ai tester et mis ça en place, ca fonctionne nickel avec juste une petite modif du CSS

 

 

 

Bonjour,

Tu pourras remplacer le cadre par une image dans ton global.css :

/* transfert effect*/
.transferProduct { border: 2px solid #888; }

remplacer par exemple par :

/* transfert effect*/
.transferProduct { border: 0px solid #888; background: url('../img/ton_image.gif') no-repeat; }

Bye...

 

Arnaud