Kosár és Pénztár oldal módosítása, csinosítása – Blog: 11. nap

2022.01.19Blog

Ami tegnap kimaradt, most belevágtam. Módosítottam a Divi CSS-t, létrehoztam Theme Builderben az új Kosár és Pénztár oldalakat, DE még messze a várt eredmény. Nem vagyok grafikus, DE nagyon is érzem, hogy valami nem kerek. Ehhez még hozzájön az is, hogy a Pénztár oldal hibaüzenetei asztali és mobil nézetben máshogy és máshol jelennek meg. Érdekes, DE legalább lesz belőle hasznos cikk.

WooCommerce kosár oldal

  • Theme Builderben létrehoztam egy sablont
  • A fejlécben a szokásos kép + cím megoldással
  • 2 oszlopra bontottam a tartalmi részeket (nagyjából megmaradt az eredeti elrendezés, viszont így most már szabadon designolhatom az egyes blokkokat)
  • Bal oldalra került a termék lista:
    • változtattam a törlés gomb színét
    • a bal oldali padding és margó 0px-re lett állítva
    • a táblázat keretéből CSAK a vízszintes elválasztók maradtak
    • változtattam a betűstílust
    • nagyobb lett a kép
    • a gombokat itt is tudnám módosítani, DE a globális Divi beállításoknál maradtam
  • Ide kerültek az értesítések is, amelyek megkapták a sablon színeit, DE nem vagyok elégedett
  • Mivel nincs még upsell, ezért azt a blokkot még mutatóba se tettem be (viszont, ami késik az nem múlik – nincs elfelejtve)
  • Jobb oldalon kapott helyet az összesítő blokk és a Tovább a pénztárra gomb

Ezzel nem történt hatalmas változás, viszont a színekkel, betűtípus váltásokkal, mobilra optimalizálva és a kis átrendezéssel kezdi elnyerni a tetszésem. Gondolkozok azon, hogy egy léptető grafikát is el fogok helyezni, ami 3 részből áll: vissza a Szolgáltatások oldalra (további szolgáltatások kerülhetnek a kosárban), a Kosár (ahol éppen vagyunk, ezért nem link) és a Pénztár. A jobb megjelenés érdekében kapni fognak kis ikonokat (lehet nem készítem el, mert így is elég nyilvánvaló a haladási irány, DE szeretném megkönnyíteni a navigációt = lehet CSAK egy kis belső menü lesz). A változás megindult, viszont még mindig nincs egységes arculat.

WooCommerce pénztár oldal

Lényegében itt is hasonlóan jártam el, annyi különbséggel, hogy a form mezőit nem módosítottam, ezért itt is CSAK részeredmények vannak:

  • Bal oszlopban a Számlázási adatok és a Megjegyzés kapott helyet. Már tegnap kivettem a szállítási címet, mert jelenleg nem tervezek fizikai termékeket értékesítni, a szolgáltatáshoz meg elegendő ennyi adat.
  • Teszteltem és már országra váltva kicsit bugyuta lesz a rendszer, DE mivel jelenleg nincs többnyelvűsítés és valószínűleg csak magyar (és remélhetőleg Magyarországon élő) hallgatóim lesznek, így erre nem mostanság fog sor kerülni.
  • Jobb oldalra került a kosár tartalma és az összesítő táblázat. Ezt kicsit formáztam, DE itt is van még feladat. (a célját ellátja, DE még lehet vele játszani). Alatta a bankkártyás fizetési lehetőség (ha nem 0 Ft a kosárérték) és a megrendelés gomb. Ezzel a folyamat végére is értem.

Drasztikus változás még itt sem valósult meg, DE már egy fokkal jobban tetszik. Természetesen ahogy haladok előre majd a fizetési rendszert is le fogom tesztelni (fizetős és ingyenes megoldásokkal, kuponnal és anélkül stb.) Nem is nagyon aggódnék, ha nem kergült volna meg Pénztár oldal és két különböző hibaüzenetet mutat.

Pénztár oldal anomália

A jelenség a következő:

  • Asztali gépen nem a bordó hátterű, fehér betűs blokkot mutatja, hanem egy alap színezésű szürke hátterű, fehér szöveges angol szöveget
  • A design sem egység, nem azonos helyen mutatja, az egyik magyar, míg a másik angol – tippre a Stripe fizetésnél akadhatott be valami, mert még ott vannak angol kifejezések, valamint a WooCommerce Bookings-nál
  • A tesztelés során beigazolódott, hogy ha foglalásos szolgáltatás is van a kosárban, akkor vált angolra (a hiba megvan, most meg kell találni a forrását és megoldani)
  • Valószínűleg, amikor fordítom a WooCommerce Bookings bővítményt, akkor fogok belefutni ebben a Hibajegybe is (gyorsan megnéztem, hogy hátha van ilyen beállítási lehetőség, DE nem volt = lesz bőven feladat ezzel is)

Összefoglalva

Sikeresen módosítottam a két oldalt. Nem érték el a végleges formájukat, DE alakulnak (napok, hetek alatt szépen össze fog állni). Az anomália okára is rájöttem, viszont már most érzem, hogy nem lesz egyszerű a megoldás (bár ne lenne igazan, DE nézzük a jó oldalát: szeretem a kihívásokat és minden ilyen újabb cikk alapanyag) Haladok tovább a saját tempómba és fel fog épülni az, amit évek óta halogatok, “ámen” (nem vagyok vallásos, DE ide passzolt).

0 hozzászólás

Szolgáltatások

HelloPack WordPress bővítmény csomag

További bejegyzések

Végre nem üresbe pörgetem az agyam – BLOG #41

Végre nem üresbe pörgetem az agyam – BLOG #41

Már egy ideje pazarlásra adtam a fejem, amit a legtöbben úgy hívnak, hogy brainstorming, agyalás, tervezés, elméleti maszturbáció és még sorolhatnám a hangzatosnál-hangzatosabb neveket a halogatásra, a produktivitás teljes hiányára. Lényegében két végéről égettem a...

Google táblázat segédlet 1.0 – BLOG #40

Google táblázat segédlet 1.0 – BLOG #40

Ahogy tanulok vállalkozni, úgy kerülök szembe kisebb-nagyobb problémákkal, nehézségekkel. Ebben a cikkben két kisebbel kerültem szembe, viszont ezek megoldása hosszútávon fog megtérülni, mert egyszerűsítik majd a munkámat. Ráadásul, ha valakinek tudok segíteni, akkor...

Munka közben jön meg az étvágy?  – BLOG #39

Munka közben jön meg az étvágy?  – BLOG #39

Volt egy kisebb kihagyás a leckék írásával, mert egy saját projekt elvitte a fókuszt. Voltak adminisztrációs jellegű feladatok, amelyek számlázást (örömteli a bevételhez jutni) takartak egy kis komplikációval és új projektre való szerződést (ugye ez is pozitív, DE...

Ajánlatkérés/visszahívás

Csatlakozz a közösséghez!

Iratkozz fel még ma!

Pin It on Pinterest