Jump to content

[résolu]Personnalisation Module blockcart


Recommended Posts

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.

Link to comment
Share on other sites

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...

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 3 months later...

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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');
           }
       });
   },

Link to comment
Share on other sites

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}"

Link to comment
Share on other sites

  • 3 weeks later...
  • 1 year later...

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...