Tutorial: Creare progress bar pentru shopping cart-ul unui magazin web

Ai un magazin web unde vinzi produse sau servicii si te-ai gandit ca ar avea un efect pozitiv asupra ratei de conversie sa afisezi pe pagina de shopping cart din siteul tau, o bara care sa indice cat mai are clientul de adaugat in cart, pentru a beneficia de livrate gratuita pentru comanda.
Indiferent ca siteul tau este dezvoltat pe o platforma open-source, gen Magento, WordPress, Prestashop sau este dezvoltat custom, poti adauga aceasta sectiune urmand cativa pasi.
Daca stii cu ce se mananca html-ul, ai habar si de un pic de php, cu siguranta poti face asta fara sa apelezi la ajutorul unui programator. Desigur, daca vrei sa nu risti sa strici ceva, te putem ajuta cu placere. Tot ce trebuie sa faci este sa ne trimiti un mesaj cu datele siteului (adresa URL, platforma pe care este construit, etc) si iti vom raspunde cu o estimare de pret/timp pentru aceasta modificare.

Pasul 1

Identifica fisierul din tema folosita folosit ca template pentru pagina de shopping cart. In functie de platforma folosita, il poti gasi in diferite locuri. De exemplu, pentru un site construit pe wordpress, folosit modulul Woocommerce, acesta va fi aici:

\wp-content\themes\[ tema utilizata in siteul tau ]\core\libraries\vendors\woocommerce\templates\cart\cart.php

* Hint: daca ai siteul descarcat local, pe calculatorul tau, este usor sa identifici o sectiune pe pagina pentru care vrei sa gasesti fisierul template, cauti in sursa paginii (view source sau click dreapta si inspect) o bucata de cod unica, ce e putin probabil sa se regaseasca in alte pagini si dai cautare in toate fisierele siteului, pentru acel string.

Pasul 2

Insereaza codul de mai jos, deasupra sectiunii care afiseaza continutul cartului:

<div class="progress"> <progress class="full" value="<?php echo min($subtotal, $freeShippingThreshold); ?>" max="<?php echo $freeShippingThreshold; ?>"></progress> </div>

In codul de mai sus, am folosit variabilele:
$subtotal – valoarea cartului la momentul incarcarii paginii
$freeShippingThreshold – pragul dorit peste care se ofera livrare gratuita.

Din nou, in functie de platforma utilizata, aceste valori pot fi extrase din informatiile disponibile pe pagina curenta. De exemplu, in cazul WordPress/Woocommerce, avem la dispozitie functia get_cart_subtotal().

Daca doresti, poti prefata acest progress bar, cu un titlu, de exemplu:

<h2>Ai <?php echo $count; ?> produs<?php echo ( $count > 1 ? "e" : "" ); ?> în coș.</h2>

unde din nou, variabila $count a primit in prealabil valoarea numarului de elemente din cartul de cumparaturi.

Pasul 3

Sub sectiunea agaugata, poti adauga o informatie suplimentara, de ajutor cumparatorului, adica valoarea necesara a fi adaugata in cos pentru a beneficia de livrare gratuita.

<?php if ( $subtotal >= $freeShippingThreshold ) { ?> 
<span class="value-progress">Felicitări! Ai făcut cumpărături în valoare de <?php echo $subtotal; ?> Lei și beneficiezi de transport gratuit.</span>
<?php } else { ?>
<span class="value-progress">Mai ai de adăugat <?php echo number_format( $freeShippingThreshold - $subtotal, 2); ?> Lei pentru transport gratuit!</span>
<?php } ?>

Pasul 4

Acum sa adaugam cateva stiluri CSS pentru ca totul sa arate asa cum ne dorim. Adauga sectiunea de mai jos in fisierul tau de stiluri css.

progress[value]::-webkit-progress-bar { background-color: #eee; border-radius: 2px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; }
progress[value]::-webkit-progress-value { background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%,  rgba(0,0, 0, .1) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #009343, #64E09C); border-radius: 2px; background-size: 70px 35px, 100% 100%, 100% 100%; }
::-moz-progress-bar { background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #009343, #64E09C); border-radius: 2px; background-size: 70px 35px, 100% 100%, 100% 100%; }
progress { text-align: center; height: 50px; width: 100%; -webkit-appearance: none; border: none; position: relative; display: inline-block;vertical-align: -0.2em; }
.progress { height:30px !Important; margin: 0 auto; }
.value-progress { display:block; margin:5px auto; font-size:19px; }

Cam asta ar fi tot, rezultatul va fi ca in imaginea de mai sus, captata direct de pe pagina de shopping cart a unui site dezvoltat de Manifest Media Cluj-Napoca.
Daca doresti sa te ajutam sa implementezi acest widget pe pagina ta, te rugam sa nu ezitezi sa folosesti formularul nostru de contact.