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.

Realizare website – 10 motive pentru care afacerea ta depinde de asta

De ce fiecare start-up sau firma mica/medie nu poate ignora nevoia de realizare website?

Traim intr-o lume dependenta de tehnologie digitala, aproape totul din jurul nostru are legatura directa cu lumea „online”. Internetul a ajuns atat de intrepatruns in vietile noastre incat multi dintre noi nici nu ne mai aducem aminte de vremurile de dinaintea acestei „revolutii”. In aceste vremuri, nimeni nu mai pune la indoiala faptul ca daca nu existi „online”, nu existi de fel, a avea un website nu mai este o optiune pentru nicio firma, indiferent ca este start-up sau o firma deja consacrata. Siteul web – fie ca este unul de prezentare sau un magazin online, este cartea de vizita a firmei, cel mai facil mod de a fi gasit de potentialii clienti.

O nevoie pe care nu o mai poti ignora

Daca acum cativa ani inca, afacerile mai puteau prospera in comunitati locale, bazandu-se pe recomandari si metode clasice de marketing, cu cresterea accentuata a numarului de utilizatori de internet, afacerile nu mai pot ignora prezenta online, daca nu ai facut-o pana acum, niciodata nu a fost un moment mai bun pentru a investi in imaginea firmei tale. Prezenta online este vitala succesului firmei tale. Prezentam in continuare cateva motive pentru care este atat de important sa ai in vedere realizare website pentru afacerea ta. Ordinea este aleatorie.

1. Este magazinul tau cu program de functionare non-stop

Comanda-ti acum un website de prezentare si nu vei mai avea usa inchisa. Vei intampina clientii la orice ora, oferindu-le informatii valoroase despre produse si servicii.

2. Acoperire globala

Odata ce ai pasit pe taramul „online”, prezenta ta devine una globala, poti fi gasit de catre oricine, din orice parte a lumii, acest fapt crescand baza ta potentiala de a atrage clienti intr-un fel care nu mai poate fi ignorat.

3. Ofera credibilitate afacerii tale.

Chiar si acei clienti abordati in piata locala, sau recomandati de cunostinte, vor cauta afacerea ta in mediul online. Daca nu ai o prezenta online, acest lucru va fi interpretat ca un aspect negativ, scazand sansele de a „convinge” potentialul client de avantajele serviciilor/produselor tale.

4. Vinde online cu cateva clickuri

Este relativ usor sa transformi siteul tau intr-un magazin virtual, unde poti sa iti promovezi produsele si serviciile, astfel incat clientii tai sa poata cumpara direct de pe site tot ce au nevoie. Exista atatea solutii pentru integrarea de module „shopping cart”, procesari de plata sau alte unelte specifice unui site e-commerce. Contacteaza-ne pentru o oferta daca vrei sa transformi astfel siteul tau de prezentare.

5. Creeaza o comunitate online in jurul afacerii tale

Daca ai o pagina pe una dintre retelele de socializare, integreaza acest profil cu siteul tau de prezentare, iti va creste atat siteul cat si popularitatea profilului tau pe acea retea. Daca ai deja un profil popular dar iti lipseste site-ul, ratezi o oportunitate imensa, multe lead-uri pot veni din partea vizitatorilor profilului tau, posibili clienti care in prezenta unui site web pot interactiona mai usor devenind clientii de care ai atata nevoie.

6. Economisesti bani prin realizare website

Daca ai incercat in trecut metode de promovare clasice, cu materiale tiparite si impartite pe strada sau trimise prin posta, vei aprecia oportunitatea adusa de site-ul tau web, care iti va pune la dispozitie metode noi de promovare, cu un control mai bun al bugetului si o urmarire exacta a rezultatelor promovarii. Aceste informatii le vei gasi foarte valoroase, pentru a putea directiona viitoarele campanii de promovare in directiile unde ai obtinut cel mai bun raspuns, economisind astfel resurse valoroase.

7. Ajungi la potentiali clienti la care nu ai avea acces altfel

In aceste vremuri digitale, foarte multi potentiali clienti isi cauta produsele si serviciile de care au nevoie doar in mediul online. Neavand un site online de prezentare a produselor, ratezi contactul cu acesti clienti potentiali. Remediaza de indata, apeland la serviciile noastre de realizare website.

8. Ai o modalitate foarte rapida de a intra in legatura cu clientii

Pui la dispozitia potentialilor clienti o diversitate de metode de a intra in contact cu tine, fie ca este vorba de o adresa de email, numar de telefon, formular de contact, profile pe retelele de socializare, clientii vor fi la un click distanta de tine.

9. Iti poti prezenta mai bine si mai usor serviciile si produsele

Poti avea propriul tau showroom virtual, o sectiune dedicata pe siteul tau unde vei putea prezenta in detaliu produsele si serviciile ofertie precum si exemple de lucrari realizate. Poti actualiza acest showroom foarte usor, de cate ori ai nevoie.

10. Poti oferi informatii valoroase, care pot atrage la randul lor alti clienti

Indiferent in ce domeniu activezi, poti avea o sectiune speciala pe siteul tau unde sa oferi sfaturi utile, articole competente in domeniu, noutati, chiar sa permiti vizitatorilor sa interactioneze cu afacerea ta prin intermediul unor sectiuni de comentarii, toate acestea te vor ajuta sa adaugi credibilitate afaceriit tale, sporind in acelasi timp vizibilitatea siteului tau in cautarile organice.

Daca nu ai inca un site web, sau poate ai unul depasit tehnic, neconform cu ultimele tendinte si cerinte, nu mai este vreme de pierdut – contacteaza-ne azi pentru a primi in cel mai scurt timp (24 ore) o oferta personalizata pentru realizare website pentru afacerea ta.