Unofficial WebSite X5

WebSite X5 versioni obsolete => WebSite X5 [v10] Evolution - Discussioni generali => Topic aperto da: pino105 - 01 Luglio, 2014, 18:39:17

Titolo: Inserire "grafica processo di acquisto" in Evolution
Inserito da: pino105 - 01 Luglio, 2014, 18:39:17

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

Titolo: Re:Inserire "grafica processo di acquisto" in Evolution
Inserito da: lemonsong - 02 Luglio, 2014, 18:31:40

Citazione da: pino105 - 01 Luglio, 2014, 18:39:17

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/ (http://lemonsong.altervista.org/test_cart_grafica_step/) puoi procedere in questo modo:

1. prepari 4 immagini tipo queste cart-step1.png (http://lemonsong.altervista.org/test_cart_grafica_step/files/cart-step1.png) cart-step2.png (http://lemonsong.altervista.org/test_cart_grafica_step/files/cart-step2.png) cart-step3.png (http://lemonsong.altervista.org/test_cart_grafica_step/files/cart-step3.png) cart-step4.png (http://lemonsong.altervista.org/test_cart_grafica_step/files/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

Citazione

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

Citazione

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

Titolo: Re:Inserire "grafica processo di acquisto" in Evolution
Inserito da: pino105 - 03 Luglio, 2014, 11:15:42

Ottimo tutorial !! Grazie per la disponibilità  ;)