Jump to content
Sign in to follow this  
marider

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

Share this post


Link to post
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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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

Share this post


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

Share this post


Link to post
Share on other sites

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

ProductImage_"id du produit"

Share this post


Link to post
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}"

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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
Sign in to follow this  

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More