Inserire "grafica processo di acquisto" in Evolution

[pino105]

Lo so ! Acquista Professional ! Solo per inserire la grafica che segue il processo di acquisto ?. Essendo un novellino, sarebbe possibile inserire nella pagina del carrello la suddetta grafica. Un grazie doveroso a chi mi illuminerà...

[lemonsong]

Lo so ! Acquista Professional ! Solo per inserire la grafica che segue il processo di acquisto ?

Sì! 

Se invece ti basta una cosa del genere http://lemonsong.altervista.org/test_cart_grafica_step/ puoi procedere in questo modo:

1. prepari 4 immagini tipo queste cart-step1.png cart-step2.png cart-step3.png cart-step4.png  e le alleghi attraverso un oggetto HTML e Widgets

2. in Impostazioni Generali - Esperto - Prima della chiusura del tag HEAD i CSS

<style>
#my-cart-steps {
   height:45px;
   background-position:center center;
   background-repeat:no-repeat;
}
</style>

3. in Proprietà Pagina (carrello) - Esperto - Prima della chiusura del tag BODY lo script jQuery:

<script>
function graficaCart() {
   var lHash = location.hash;
   switch (lHash) {
       case '#step1':
           $('#my-cart-steps').css('background-image', 'url("../files/cart-step1.png")');
           break;
       case '#step2':
           $('#my-cart-steps').css('background-image', 'url("../files/cart-step2.png")');
           break;
       case '#step3':
           $('#my-cart-steps').css('background-image', 'url("../files/cart-step3.png")');
           break;
       case '#step4':
           $('#my-cart-steps').css('background-image', 'url("../files/cart-step4.png")');
           break;
       default:
           $('#my-cart-steps').css('display', 'none');
           break;
   }
}
$(function () {
   $('#imContent').prepend('<div id="my-cart-steps"></div>');
   graficaCart();
   $(window).on('hashchange', function () {
       graficaCart();
   });
});
</script>

In rosso i valori da personalizzare.

Da notare che usando "Svuota carello" rimarrà visibile l'immagine relativa allo step 1.


Grazie a stesil per l'aiuto.

[pino105]

Ottimo tutorial !! Grazie per la disponibilità