E-veikals bez maksas rīkiem

Interesanti, kā ir taisīt e-komercijas vietni jeb interneta veikalu, neizmantojot nekādus maksas rīkus? Reāls stāsts par reāla e-veikala tapšanu.

 

Darba uzdevums

Tātad jātaisa uzlīmju veikals. Precīzāk tas nozīmē, ka cilvēks webā izvēlas attēlu un pasūta uzlīmi. Veikals tad ir attēlu kolekcija, un katra produkta izvēlnēs var norādīt, cik lielu uzlīmi vajag, uz kāda materiāla un ar kādu apstrādes veidu jāizgatavo.

 

Satura meklēšana

Sāku ar to, ka meklēju, kas vispār ir dabūjams un ko cilvēki pērk kā uzlīmes. Mums ir envanto. Tad nu meklēju tur. Jā, derīgi zīmējumi ir. Bet jautājums – kā pie viņiem dabūt tieši to attēlu, kādu man vajag, ja es jau vienreiz esmu to paņēmis? Atklājās, ka tāda mehānisma viņiem nav. Vismaz pirms gada nebija.

Tātad jāvelk pie sevis un jāglabā lokāli. Principā tas ir ideāls risinājums, jo tie ārpakalpojumi grozās kā vējrādītāji un balstīt uz tiem biznesu nav saprātīgi. Lai arī maksas pakalpojums, tomēr "pēc klientu vēlēšanās" visu laiku kaut kas tiek uzlabots, kaut kas tiek mainīts, un nav garantijas, ka varēs tikt pie vajadzīgā tieši tad, kad vajag.

Tad nu daudzi mēneši pagāja, velkot attēlus, taisot mazas izšķirtspējas attēlus veikalam un kārtojot, pie reizes mēģinot saprast, ko cilvēki varētu vēlēties un kā sakārtot tā, lai viņi varētu vieglāk sameklēt. Darba ātrums lielā mērā bija atkarīgs no interneta ātruma.

 

Cenu jautājums

Saistībā ar cenām, pētot, ko var un ko nevar, jāsecina, ka labāk ir rēķināt pēc formulas, nekā taisīt milzum daudz variāciju. Tātad no esošās trūcīgās cenu informācijas jāizdomā formula.

Tagad modē ir mākslīgais intelekts. Prasīju tam, lai izdomā. Bet viņš man deva tikai funkciju kopas, tātad tās pašas variācijas. Te nu bija intelekts, vienkāršāk pašam izdomāt, nekā iestāstīt viņam, ko man vajag...

Ņēmu ekseli, savadīju zināmās cenas un sāku meklēt līkni, kas līdzinās tai, kādu vajag. Tālu nebija jāmeklē. Atlika tikai piedzīt koeficientus. Un formula gatava.

 

Vietnes izstrāde

Tā kā viss tiek darīts pilnīgi par velti (neskaitot domēnu un hostingu), tad nekāda lielā plānošana neiznāk, jo nevar taču zināt, ko varēs izdarīt un ko ne.

Veikals tika taisīts vispopulārākajā CMS – Wordpress, kas ir par velti un kam ir daudz pluginu arī par velti.

Skaidra lieta, ka par velti uztaisīt var ļoti ātri – uzliek Woocommerce un gatavs... Bet tas ir garlaicīgi, jo nav nekāda dizaina, turklāt vajag taču visu latviski un vēl tās dinamiskās cenas.

Nolēmu taisīt ar Elementor. Man ļoti iepatikās par velti dabūjamais Header & Footer Builder, kurā var brīvi taisīt tādas galvenes un kājenes, kādas patīk. Tēmās, arī populārajā Astra, tas nav tik vienkārši.

Tātad vispirms pamatlietas. Vajag webp failu atbalstu, kas Wordpresā vēl arvien nav. Palīdz Support WebP plugins.

Pēc tam Duplicate Page pluginu, kas ļauj vienkārši nokopēt jau gatavu lapu, nevis katru reizi taisīt jaunu, kopējot elementus un uzstādījumus. Duplicē lapu, iekš quick edit nomaina nosaukumu un slugu, pēc tam rediģē Elementorā.

Protams, vajag rezerves kopijas. Tās mani daudzas reizes ir glābušas. Vispopulārākais ir UpdraftPlus, bet tam nav tādas vienkāršas lietas kā rezerves kopijas lejupielādēšana savā datorā, ir tikai visādi mākoņpakalpojumi, kuriem es neuzticos. Taisnība, augšuplādēt no sava datora ir lēni, toties es zinu, ka kopija ir manā kabatā, nevis kaut kur nezin kur. Tāpēc atradu citu rezerves kopiju pluginu, kas saucas WPvivid Backup. Turklāt tas glabā vietnē vairāk par divām kopijām atšķirībā no Updraft. Protams, glabāt vajag ar mēru, bet labāk ir tā, nekā nejauši atklāt, ka plugins automātiski izdzēš iepriekšiepriekšējo, taisot jaunu...

Kontaktu lapā vajag ievadformu. Ar Elementor labi sadarbojas WPForms Lite. Tas pievieno bloku, ko var izmantot Elementorā.

Elementor Header & Footer Builder – ar to uztaisa visām SEO prasībām atbilstošu hederi un fūteri. Ļoti elastīgs, responsīvs, var uztaisīt atsevišķus variantus datoram, planšetei un mobilajam.

Pats galvenais e-veikalā ir meklētājs. Fibosearch ir ļoti labs meklētājs, kas uzreiz parāda iespējamos rezultātus un meklē aprakstos. Tātad svarīgi ir apraksti, lai būtu iespējams atrast to, ko vēlas.

Loco Translate – pārtulko vietni vienā valodā. Darbam var izmantot angļu valodu, iznākumam (tam, ko redz pircēji) – latviešu. Tulkošanas pamatā ir PO un MO failu labošana. Populārākajām tēmām un pluginiem tulkojumi jau ir, tāpēc pietiek tikai ar plugina uzinstalēšanu un valodas norādīšanu pareizajās vietās. Pēc tam pluginu var deaktivizēt, tulkojumi paliek.

Lai tēma un plugini varētu apdeitoties un kustomizētais kods nepazustu, vajag taisīt bērnu tēmu. Tam noder Child Theme Configurator plugins. To vajag tikai taisīšanai, pēc tam var izmest.

Meklējot risinājumu dinamiskajām cenām, atradu Calculated Fields Form – prot rēķināt, izmantojot ievadītos datus. Ideāli kalkulatoriem lapā un kustomizējamu preču pasūtīšanai.

Beigās nonāci pie WC Kalkulator. Tas ir diezgan universāls. Var uztaisīt, ka rēķina cenas, ja ieraksta izmēru, norāda skaitu un citus parametrus. Pēc tam stipri jāpiestrādā ar css, lai izskatītos normāli. Parametru {quantity} nevajag lietot, viņš rēķina kaut ko galīgi aplam, tāpēc produkta lapā jāizņem daudzums un jāieliek kalkulatorā savs daudzuma lauks. Lauks Value of Formula rādās tikai grozā, un nosacījumi tajā nestrādā. Woo defaulto cenu lauku lapā arī ne vienmēr rāda, atkarīgs no dizaina pluginiem, tāpēc tas no produkta lapas jāņem ārā. Tā ka mazliet kodēt arī ir nepieciešams. Nē, php es nemāku, bet gatavus risinājumus iekopēt vajadzīgajā vietā varu.

Kalkulatora teksti iziet ārpus mazu mobilo ekrānu robežām. Par laimi ne pārāk daudz. Zāļu nav, jāsadzīvo.

Vēl e-veikalā vajag filtru kreisajā malā. Tam pēc ilgas meklēšanas atradu Themify – WooCommerce Product Filter.

Produkta lapai vajag templeitu. Elementorā viss, kas saistīts ar e-komerciju, ir par maksu. Tātad Shop Engine, kas ļauj Elementorā uztaisīt produkta lapas templeitu. Vispār variantu nav daudz – vai nu šis, vai WooLentor, kas ļauj to templeitu uztaisīt, lai var taisīt dizainu Elementorā. Šortkods [product] nav paredzēts produkta lapas taisīšanai, ar to var parādīt noteiktu produktu, norādot id.

Čekauta lapu nolēmu uztaisīt vienu, kurā kopā ir gan grozs, gan pasūtījuma forma. Maksāšana būs ar rēķinu, jo onlaina sistēmas visas ir par maksu. Arī pakomātu plugini nav par velti. Tātad vienā lapā vienkārši ir salikti divi šortkodi – groza un čekauta. Un viss. Woo dizains šeit ir pietiekams, neko vairāk nevajag. Galvenais atkal ar kodu iznīdēt visu lieko – nevajadzīgus ievadlaukus, woo cenas un daudzumu.

Tā kā preces veikalā faktiski ir tikai attēli, tad produktu sarakstos nav nepieciešami nosaukumi, vispār nekas, tikai pats attēls. Cenas arī nē, jo tās ir dinamiskas un visiem attēliem vienādas. Tāda opcija, kā izrādās, ir neredzēts retums. Atkal jāķeras pie koda.

Ir pavisam prasts pēc skata plugins Woo Products Slider Pro. Tajā var saražot šortkodus dažādām produktu grupām, filtrējot pēc kategorijām, tegiem, atribūtiem. Var labot teksta failā un saglabāt, lai nepazūd. Attēlojas kā slaideris. Pogas sānos ir uzkrītošas, tās var noņemt. Punktus apakšā arī. Produktu kārtību mainīt nevar.

Ļoti labs slaideris, tieši tas, ko vajag. Taču, pēc jaunas, skaistas lapas izveidošanas ar tiem, atklājās, ka tas nav savietojams ar jaunu WordPress funkciju. "This plugin is incompatible with the enabled WooCommerce feature 'High-Performance order storage', it shouldn't be activated." It kā strādā, viss kārtībā, nekas slikts nenotiek, bet sarkani sistēmas brībinājumi nav uz labu, tāpēc nācās meklēt citu pluginu.

Bet neko neatradu. Jāiztiek ar to, kas ir. Vēlāk, daudz vēlāk šim pluginam uzradās apdeits, kas problēmu atrisināja.

Atklājās, ka mobilajā skatā tas dažu produktu vietā rāda citus atkārtoti.

Un mierīgi rāda 3 produktus rindā mobilajā skatā. Lai cik dīvaini nebūtu, tā bija problēma. Beigās paliku pie Woo defaultajiem šortkodiem produktu sarakstu rādīšanai, un tajos mobilajā skatā rāda tikai divus vienā rindā. Nomainīt nevar, kaut ieskrienies. Tāpēc īpaši veidotajās katalogu lapās izmantoju tieši šo pluginu produktu izkārtošanai.

SEO lietām vispopulārākais ir Yoast, bet es nolēmu izmantot citu, nemaz ne sliktāku – Rank Math SEO.

Tas palīdz ievietot lapās tā saucamās garoziņas jeb atrašanās vietu ar šādu šortkodu: [rank_math_breadcrumb]

 

Kas nestrādā

Protams, ka nebija viss tā vienkārši – rodas vajadzība, ņemam pluginu, un viss kārtībā. Uzskaitīšu lietas, pret kurām atdūros.

Woostify tēmai ir viss, ko vajag, bet Elementora lapās nerādās uzpeldošais grozs un, kas pats sliktākais, pēc ielikšanas grozā produkta lapa sasalst – pazūd skrollbāri, nevar paritināt, var tikai uzklikšķināt uz tā, kas ir redzams.

Buy One Click nestrādā kopā ar WCK – neņem izrēķināto cenu, bet to, kas norādīta Woo.

Filter Everything nestrādā kopā ar Elementor – filtrs nerāda Elementor lapās ne par ko. Woo lapās filtri parādās un strādā. Labs plugins, glīti izskatās, bet nekā.

Wooelementor par brīvu ir pieejami tikai nedaudzi bloki, ar kuriem nepietiek, lai noformētu sarakstu, produktu un pasūtījumu lapas.

Cart Flows ir komplekss risinājums, ko teorētiski var izmantot lapu kustomizēšanai, bet praksē tas izrādās pārāk darbietilpīgi – piedāvātie dizaini ir uzreiz visai lapai.

Elementora Sidebar bloks nerāda Woo atribūtus.

WOOP vispār neaktivizējas.

Polify pēc bloka filtra apdeitošanas viss pazūd.

ShopEngine filtrs ir tikai pro. Citi filtri neietekmē produktu sarakstus, kas veidoti ar Shopengine vidžetiem. Un vidžetos, kas pieejami atsevišķām lapām, nevar tikt vaļā no produkta nosaukuma un cenas. Savukārt vidžetā, kas pieejams templeitā, to izdarīt var, bet templeits nav pielietojams, neizdodas to izsaukt. Labi, ka vismaz produkta lapu ar to templetu var uztaisīt. Groza vidžetā nevar izņemt kolonnas, var vienīgi ierakstīt kolonnu nosaukumus.

Custom Layouts – Post + Product grids made easy nestrādā kopā ar Themify filtru. Un mazā ekrānā produkti kaut kur pazūd.

Iekš Ultimate Store kit par brīvu ir Shiny grid produktu saraksta veidošanai. Bet tas nestrādā ar filtriem, tam vajag atsevišķu funkciju kodā, kurā ierakstīt pieprasījumu. Nevar kropot attēlus, lai būtu vienādi kvadrāti.

Iekš WP Carousel ir Grid, bet tam ir savs filtrs, par brīvu ir tikai latest. Produktu tekstus brīvi pieejamajā versijā nav iespējams atslēgt, neko nevar kustomizēt. Nevar kropot attēlus, lai būtu vienādi kvadrāti.

Product Layouts for Woocommerce arī ir tikai savs iekšējais filtrs. Nevar kropot attēlus, lai būtu vienādi kvadrāti.

Post Grid for Elementor & Product Grid | PowerGrids - tas pats.

Widgets for WooCommerce Products on Elementor ir labi kustomizējams, var strādāt par slaideri, bet arī ir tikai iekšējais filtrs.

Shoplentor (agrākais Woolentor)

- produktu sarakstā nestrādā filtri, pat savējie, kas pieejami par brīvu.

- produktu lapā poga "ielikt grozā" iet kopā ar daudzumu. Pēdējo noņemt nevar. Iekš Shopengine to var izdarīt.

- produktu sarakstā, klikšķinot uz produkta, bieži atveras cita produkta lapa.

- ir forša iespēja - par brīvu produktu sarakstā hover uz attēla parāda divas pogas - grozu un lupu. Pēdējā nevis palielina, bet piedāvā ātro pirkšanu, kuru nevar konfigurēt. Pogas rādās tikai komplektā.

Essential addons for elementor pieliek klāt savas novērtējuma zvaigznītes produktu katalogā, no kurām neizdodas tikt vaļā. Slaideris ļoti labs, var plašām konfigurācijas un filtru iespējām, tādu citur neatrast, bet jāatsakās.

 

Veikala piepildīšana

Kad ir saprasts, ko var un ko nevar, kad ir skaidrs, kāds dizains iznāk, tad var domāt, kā dabūt iekšā vairākus tūkstošus attēlu ar sakarīgiem aprakstiem. Vajag ne vien produkta nosaukumu, bet arī alt tegu katrai bildei.

Woocommerce ir savs produktu imports un eksports. Bet ko iesākt ar alt tegiem? Kā tos vairumā dabūt iekšā?

E-komercijas datu imports un eksports jau ir lauciņš, kurā bezmaksas instrumentu gandrīz nemaz nav.

WP Ultimate Exporter nemāk eksportēt attēlu alt tegus. Eksportētais materiāls par produktiem neatšķiras no Woo iebūvētā.

WP All Export var dabūt attēlu alt tegus. Jānorāda īpašs query:

"post_type" => "attachment",

"post_status" => "inherit",

"post_mime_type" => array( "image/jpeg", "image/gif", "image/png", "image/bmp", "image/tiff", "image/webp" )

(https://gist.github.com/trey8611/b2d92961da869b632fda0dfe17a1c7b8)

WP All Import attēlu lietas importē par maksu. Tā ka rakstā teiktais ir taisnība, pareizāk, bija. Tagad tas vairs nestrādā.

Atliek to darīt ar roku. Par laimi, Rank Math dod iespēju media katalogā labot title un alt uzreiz, neverot vaļā katru attēlu.

Bet, par laimi, nav tik traki. Uzgāju mazu koda gabaliņu, kas importē alt tegus no csv faila, ja ir norādīts attēla id. Kopā ar programmētāju uzlabojām kodu, lai importē arī title tegu un rāda progresu uz ekrāna. Lai to visu iedarbinātu, ir jāuztaisa lapas templeits un jāuzliek plugins, kas ļauj operēt ar failiem, saucas WP File manager.

Tātad kā notiek alt tegu un produktu ražošana:

- Attēlu failus sagatavo datorā, iedod pareizos nosaukumus.

- Augšupielādē Wordpress media katalogā visus vajadzīgos vienā paņēmienā.

- Ar WP All Export dabū csv failu ar visiem attēliem, kas ir vietnē, tajā skaitā jaunajiem, tikko augšupielādētajiem. Šajā failā ir attēlu id.

- Ekselī atstāj tikai id un faila nosaukumu.

- Raksta produkta nosaukumu un vajadzīgos atribūtus, kategoriju.

- Kad viss sarakstīts, nokopē rezultātu vēl vienā darblapā.

- Ar replace darbību noņem pēdiņas un komatus.

- Atstāj tikai id un iegūtos alt tegu tekstus. Noteikti saglabā.

- Saglabā kā Unicode txt un aizver.

- Atver iegūto txt failu, ar replace nomaina tab simbolus ar komatiem un saglabā kā utf-8 failu. Tādējādi ir iegūts csv fails alt tegu importam.

- Atver vēlreiz to pašu ekseli.

- Otrajā darblapā esošos datus iekopē iepriekš sagatavotā citā ekselī, kurā ir pareizās, ar produktu eksportu iegūtās kolonnas, un aizpilda. Pievieno cenu (neīstu, nedinamisku, ko rādīs gūglis) un aprakstu (visiem produktiem vienādu. Ar ekseli uztaisa unikālus SKU jeb artikulus. Noteikti saglabā.

- Saglabā kā Unicode txt un aizver.

- Atver iegūto txt failu, ar replace nomaina tab simbolus ar semikoliem un saglabā kā utf-8 failu. Tādējādi ir iegūts csv fails produktu importam.

Kā redzams, uzreiz top gan produktu nosaukumi, gan attēlu alt un title tegi, kā arī apraksti, cenas un artikuli. Ekselī strādājot, vidējais tekstu ražošanas ātrums ir 50-100 bildes stundā.

Protams, ir plugini, kas alt tegus taisa no attēlu failu nosaukumiem. Bet manā gadījumā failu nosaukumi neder, jo pēc tiem tiks meklēti oriģināli, kas lejupielādēti projekta sākumā, tāpēc tie satur daudz ciparu un nosaukumi nav tik saturīgi, kā vajadzētu.

 

Veikala pabeigšana

Kad dati ir savā vietā, ir jānoformē sākumlapa un kategoriju lapas. Tās manā gadījumā ir unikālas, bez automātikas, kā dara parasti. Tāpēc, ka unikāls dizains vienmēr ir skaistāks un tā var vieglāk uzsvērt pievilcīgākos produktus.

Izlēmu, ka vislabāk ir savākt interesantākos attēlus manuāli. Jā, darbs, bet neko skaistu un saturīgu ar vienu klikšķi uztaisīt nevar. Pie viena izgāju cauri visiem produktiem, izķēru kļūdas. Mērķis ir salasīt produktu id, lai var likt Woo Products Slider šortkodos. Tos taisu ar roku, nekā gudra tur nav. Pirmo uztaisīju viņa vizārdā – saliku tādus settingus, kādi man šķiet labi. Pēc tam tikai mainu produktu id sarakstu un kopēju lapā.

Par cenām uzrakstīju, kā tās tiek veidotas.

Dabiski šķiet ielikt apakšējā labajā stūrī jautājumu: "Neko neatradi?" Tas ved uz rakstu ar daudzām saitēm, kurās var atrast attēlus bez maksas.

Kad viss ir gatavs, jāuzliek pēdējais triepiens – kešotājs un drošība. Tas ir, LiteSpeed Cache, iThemes Security (kas pavisam nesen ir pārdēvēts par Solid Security Basic) un, tā kā pēdējam aplikāciju ugunsmūris ir par maksu, tad BBQ Firewall.

It kā viss. Pēdējie apdeiti. Un – kaut kas atkal ir angliski. Un Loco vairs nestrādā, saglabājot ilgi domā un neko neizdomā. Pabakstoties izrādījās, ka traucē BBQ. Ja to dezaktivē, tad var iztulkot, saglabāt, un pēc tam ugunsmūri var atkal aktivēt.

Pēc tam importēju visus produktus, lai uztaisītu ekseli, pēc kura meklēt oriģinālus, kurus laist uz druku. Varēja arī izmantot jau gatavos ekseļa failus, bet vēlāk atklājās, ka ir drukas kļūdas un attēli samainīti vietām. Tas tika izlabots jau webā.

 

Ko varēja izdarīt labāk

Dabiski būtu sameklēt risinājumu, kā rēķināt cenas, ja cilvēks izvēlas daudz dažādu uzlīmju pa vienai. Šobrīd skaistie rēķini strādā tikai, ja vienu uzlīmi pērk lielā daudzumā.

Vēl var ielikt daudz darba, veidojot līdzīgu produktu sarakstus. Tas arī ir jādara ar roku.

Tagad varēs taisīt dažādas izlases atsevišķās lapās, lai veicinātu SEO un maksas reklāmu efektivitāti.

Turklāt būs vieta, kur likt pašu veidotas uzlīmes.

 

Nobeigums

Iznāca pielāgots klasiskais Woocommerce veikals Elementora ierāmējumā, kas labi izskatās gan datorā, gan telefonā. Mazajā telefona ekrāniņā daudzas lietas vienkārši netiek parādītas, jo nav vietas. Man žēl cilvēku, kas bojā acis, mēģinot saskatīt to, ko nav praktiski parādīt.

Kopā veikals tapa veselu gadu. Tas pie pusslodzes un paralēli darot citus darbus. Aptuveni trešdaļa laika pagāja attēlu meklējumos, trešdaļa – tehniskās lietās, vietnes veidošanā, un pēdējā trešdaļa – sakarīgu attēlu aprakstu veidošanā un importēšanā. Un viss, izmantojot vienīgi bezmaksas risinājumus. Skaidra lieta, ka daudz laika pagāja, meklējot strādātspējīgas pluginu kombinācijas.

05.04.2024.

Team3 grupa

Seko mums : vai