Reference za programere
Sustav BizzyBeeShop Vam omogućuje (ili Vašem web developeru) izmjenu grafičkog dizajna Vaše web trgovine. Također vam omogućuje izmjenu postojećih funkcionalnosti ili dodavanje novih funkcionalnosti vašem web shopu.
Ako ste upoznati s tehnologijama kao što su HTML, CSS, JavaScript, JQuery - možete postići nevjerojatne rezultate.
Pokazat ćemo vam kako to učiniti. Pokazat ćemo vam primjere videa. Čak ćemo vam dati i uzorke isječaka koda koje smo koristili u našim demonstracijama, kao i kod koji smo koristili u stvarnim, živim produkcijskim webovima.
Sadržaj
- Upravljanje s više trgovaca i webova
- Custom CSS
- Umetanje Custom koda u BizzyBeeShop templejt (predložak)
- Programiranje sa punim pristupom HTML/CSS/JS kodu
- Dodatak 1 – Definicije CUSTOMCODE snippeta
Logiranje u Green Panel
U svom web pregledniku otvorite poveznicu na Green Panel koju ste dobili na svoju e-poštu kada ste kreirali svoju web trgovinu.
Prijavite se u sustav sa svojim korisničkim imenom i lozinkom koje ste dobili na e-mail. Odaberite „Zapamti prijavu“ kako bi vas sustav mogao zapamtiti u budućnosti.
Nakon uspješne prijave, dobili ste pristup sustavu Green Panel, gdje možete obavljati sve poslove upravljanja Vašim webshopom.
Upravljanje s više trgovaca i webova
Obično, kada otvorite novog trgovca i prvu web trgovinu, dobivate svoje korisničko ime i lozinku za Green Panel.
Ako ste programer, web dizajner ili SEO stručnjak… radite za nekoliko trgovaca u sustavu BizzyBeeShop, možete dobiti jedinstveni pristup za nekoliko trgovaca sa svojim jedinstvenim korisničkim imenom/lozinkom.
Ova se značajka naziva Multi-Merchant admin. Da biste postali administrator za više trgovaca, kontaktirajte našu podršku i zatražite pristup jednom računu za više trgovaca za više trgovaca.
Custom CSS
Ako znate nešto o HTML/CSS tehnologijama, lako možete redizajnirati svoj BizzyBeeShop predložak.
Ovisno o dubini vašeg znanja, možete napraviti male ili vrlo velike promjene dizajna.
Svaka CSS klasa u predlošku BizzyBeeShop može se pre-pisati (override) vašom prilagođenom deklaracijom za poništavanje CSS-a.
Svaki web shop mora imati svoju CSS prilagođenu deklaraciju.
Kako to postići, predstavljeno je u sljedećem YouTube videu.
Video upućuje na primjer kako potpuno modificirati ELEGANCE skin prilagođenim dizajnom.
Kod i datoteke korištene u ovom primjeru:
- CustomCss_elegance_jewelry_css_small
- CustomCss_elegance_jewelry_css
- CustomCss_elegance_jewelry_font
- CustomCss_elegance_jewelry_logo
Molimo obratite pažnju Implementacija lošeg CSS koda u Custom CSS editoru može ozbiljno upropastiti dizajn vašeg web shopa.
Stoga, zamolite stručnog web programera sa znanjem CSS-a da vam u tome pomogne.
Umetanje Custom koda u BizzyBeeShop templejt (predložak)
BizzyBeeShop predlošci sadrže određena, unaprijed definirana područja u koja možete umetnuti svoj prilagođeni kod.
Ovaj prilagođeni kod može biti bilo koji HTML, CSS, JavaScript, JQuery kod koji se može izvoditi na strani klijenta. Ne možete umetnuti kod na strani poslužitelja.
Za upravljanje svojim web trgovinama koristite menu-opciju Web Postavke u Green Panel sustavu.
Kako koristiti Custom code snippete predstavljeno je u našem YouTube videu:
Kod korišten u ovom primjeru:
- CUSTOMCODE_header_links_right
- CUSTOMCODE_footer_links_right
- CUSTOMCODE_footer
- CUSTOMCODE_header__add_to_header
Definicija regija Custom code snippeta i kako ih koristiti možete pronaći u Dodatak 1 – Definicije CUSTOMCODE snippeta.
Molimo obratite pažnju: Implementacija loših skripti i koda u Custom code snippetima može ozbiljno upropastiti dizajn i funkcionalnost vašeg web shopa.
Stoga, zamolite iskusnog web programera sa znanjem o HTML-u i JavaScriptu da vam pomogne u tome.
Da biste mogli pisati i implementirati Custom code snippete, morate biti uključeni u Green Panel Rolu Web developera. Kontaktirajte nas za to.
Programiranje sa punim pristupom HTML/CSS/JS kodu
Sustav BizzyBeeShop razvili smo tako da je kod aplikacije potpuno odvojen od koda web dizajna. To daje priliku web dizajnerima da rade samo na HTML/CSS/JS kodu, bez potrebe dublje kopati u C# kod na strani poslužitelja.
Svakom web shopu dodijeljen je svoj Skin. Skin je grafički predložak koji već radi i potpuno je dizajniran. Bez Skina niti jedan webshop ne može raditi.
Skin se sastoji od nekoliko vrsta datoteka:
- .ASCX kontrole – sadrže običan HTML, kao i poslužiteljske kontrole koje će generirati izlazni HTML
- .CSS – CSS datoteke
- .JS – JavaScript datoteke
- .PNG, .JPG, .SVG... – slike koje sadrže web grafiku za web shop
Ako vi, kao web programer, ne smatrate da je izrada Custom CSS-a ili korištenje Custom code snippeta dovoljna za vas – tada biste mogli biti zainteresirani za potpuni pristup kodu Skina. Na taj način ćete moći izraditi kompletan web dizajn i funkcionalnosti koje želite.
Ovim načinom rada možete napraviti sjajne web stranice. Web trgovine kao ove, napravljene su s čistom modifikacijom Skina:
www.se-mark.hr,
www.sport-moda.hr,
shop.zel-cos.hr,
www.sudoper.hr,
www.pet-centar.hr,
www.maxi-pet.ro.
www.dobarpartner.hr.
Ima ih mnogo više.
Kako razviti svoj web shop s punim pristupom Skin kodu prikazano je u ovom videu:
ASP.NET
Danas na webu postoji mnogo platformi za razvoj aplikacija. Platforma BizzyBeeShop temelji se na Microsoft ASP.NET© tehnologiji. Skin koristi mnoge kontrole na strani ASP.NET poslužitelja za renderiranje svog HTML sadržaja. Programer koji planira graditi web shop rješenja, temeljena na platformi BizzyBeeShop trebao bi se upoznati s ASP.NET kontrolama; kako su definirane, korištene i najvažnije – kako će one generirati HTML. Najbolji način da dobijete Reference za ASP.NET kontrole je ovdje:
https://docs.microsoft.com/en-us/troubleshoot/aspnet/server-controls
Programer neće morati stvarati nove ASP.NET kontrole, pa čak ni mijenjati postojeće ASP.NET kontrole. Iako i to može.
Međutim, programer bi trebao biti jako upoznat s načinom na koji će ove ASP.NET kontrole generirati HTML kod na kraju. Zato predlažemo da se upoznate s ASP.NET kontrolama.
VS.NET
Možete koristiti bilo koji HTML alat za kodiranje za izmjenu datoteka Skina. Međutim, preporučujemo Microsoftov izvorni razvojni alat - Visual Studio code.
Ovdje ga možete besplatno preuzeti: https://code.visualstudio.com/.
Partnerski program za programere i certifikat razvojnog programera BizzyBeeShop
Kako bismo bili sigurni da ćete dobiti pravu podršku s razvojem Skinova, gradimo BizzyBeeShop partnerski program. Partnerski program će vam dati:
- Pristup internom razvojnom okruženju BizzyBeeShop sustava
- Edukaciju za početak razvoja Skinova webshopa
- Podršku u procesu razvoja Skinova
- Pristup mnogim drugim resursima koje možete koristiti kao primjer u svojim web projektima
Partnerski program za razvojne programere namijenjen je stručnjacima vještim u tehnologijama kao što su HTML, CSS, JavaScript i jQuery. Poznavanje ASP.NET poslužiteljskih kontrola nije potrebno, ali je dobrodošlo.
BizzyBeeShop Developeri primarni su Frontend programeri. Nema potrebe i nema mogućnosti za kodiranje, izgradnju ili modificiranje koda na strani poslužitelja ili Back-end koda.
Partnerski program namijenjen je programerima koji će blisko surađivati s BizzyBeeShopom kako bi svojim klijentima pružili kvalitetne eCommerce projekte. Programeri će dobiti pristup resursima tvrtke kao što je razvojno okruženje za početak rada i isporuku projekata.
We want our Developer partners to earn money on quality projects by-themselves. BizzyBeeShop will provide the support needed.
Programeri nas mogu kontaktirati radi upisa u naš partnerski program, jednostavnim slanjem e-maila na info@bizzybeeshop.com. Najbolji način da započnete razgovor je slanjem nekoliko referentnih projekata na kojima ste radili u prošlosti. Mi ćemo ih pogledati.
Programeri tada mogu dobiti 30-dnevni probni pristup razvojnoj platformi. U svom razvojnom okruženju možete dobiti jedan Skin za testiranje i rad. Vi birate Skin. Nakon 30 dana izgradnje i testiranja, BizzyBeeShop će ocijeniti vaš rad. Programeri koji su u stanju dobro raditi na razvoju Skinova će dobiti BizzyBeeShop Certified Developer certificate i trajniji pristup svim njihovim budućim projektima e-trgovine.
Dodatak 1 – Definicije CUSTOMCODE snippeta
CUSTOMCODE_header |
Header je kontrola koja se nalazi na vrhu svih webshop stranica na kojima možete pregledavati proizvode, čitati Novosti i slično. Kontrola Headera nije postavljena u stranice Checkout sekcije. CUSTOMCODE_header je PlaceHolder za vaš kod koji će se postaviti odmah nakon zatvaranja </header> taga. ![]() |
---|---|
CUSTOMCODE_header__add_to_header |
Ovaj je PlaceHolder također smješten u Header kontrolu. Međutim, postavljanje unutar Header kontrole nije toliko važno. Sve što postavite u ovaj PlaceHolder, biti će postavljeno unutar <head></head> taga stranice. ![]() |
CUSTOMCODE_footer |
Footer je kontrola koja je postavljena blizu donjeg djela svih stranica webshopa na kojima možete pregledavati proizvode, čitati Novosti i slično. Footer kontrola nije postavljena u stranice Checkout sekcije. CUSTOMCODE_footer je PlaceHolder za vaš kod koji će se postaviti odmah nakon zatvaranja </footer> taga. ![]() |
CUSTOMCODE_header_links_right |
Webshop sadrži Header linkove. Možete bilo koje od njih pokazati ili sakriti. Isto tako, možete dodati bilo koji novi sadržaj, kao <a> tagove ili slično, s desne strane već postojećih linkova.![]() ![]() |
CUSTOMCODE_footer_links_right |
Webshop sadrži Footer linkove. Možete bilo koje od njih pokazati ili sakriti. Isto tako, možete dodati bilo koji novi sadržaj, kao <a> tagove ili slično, s desne strane već postojećih linkova.![]() ![]() |
CUSTOMCODE_product_detail2 |
Ovaj code snippet pojavljuje se samo na Product-detail stranicama. Renderirati će kod odmah nakon završenog </main> taga.![]() |
CUSTOMCODE_product_list2custom_list |
Ovaj code snippet will pojavljuje se samo na stranicama Izdvojenih lista proizvoda, kao što su Akcija, Novi proizvodi.![]() |
CUSTOMCODE_product_list2products |
Ovaj code snippet pojaviti će se na stranicama s Listama proizvoda. Liste proizvoda su stranice koje se prikazuju kada korisnik prolazi kroz kategorije proizvoda.![]() |
CUSTOMCODE_patches__product_detail2_main |
Ovaj code snippet se prikazuje nakon postojeće tri Oznake, na stranici Detalja proizvoda. Možete definirati sami svoje Oznake i generirati CSS kod koji će im omogućiti da funkcioniraju u skladu s podacima Oznaka koje ste postaviti u proizvodu unutar Green Panela.![]() ![]() |
CUSTOMCODE_patches__product_detail2_related |
Ovaj code snippet se prikazuje nakon postojeće tri Oznake, na stranici Detalja proizvoda, ali u sekciji gdje se pojavljuju Povezani proizvodi. Renderiraju se za svaki od povezanih proizvoda. Možete definirati sami svoje Oznake i generirati CSS kod koji će im omogućiti da funkcioniraju u skladu s podacima Oznaka koje ste postaviti u proizvodu unutar Green Panela.![]() ![]() |
CUSTOMCODE_patches__product_list2products |
Ovaj code snippet se prikazuje nakon postojeće tri Oznake, na stranici Lista proizvoda. Renderira se za svaki od proizvoda u listi.![]() |
CUSTOMCODE_patches__product_list2custom_list |
Ovaj code snippet se prikazuje nakon postojeće tri Oznake, na stranici Izdvojenih lista proizvoda, dakle za posebne liste kao što je lista “Novi proizvodi”.![]() |
CUSTOMCODE_patches__product_list2homepage |
Ovaj code snippet se prikazuje nakon postojeće tri Oznake, na proizvodima na Početnoj stranici (Homepage).![]() |
CUSTOMCODE_checkout__UserData |
Ovaj code snippet se prikazuje odmah prije zatvaranja </main> taga na stranicama Checkout procesa, gdje korisnik upisuje svoje osobne podatke.![]() |
CUSTOMCODE_checkout__ShippingData |
Ovaj code snippet se prikazuje odmah prije zatvaranja </main> taga na stranicama Checkout procesa, gdje korisnik odabire metodu Dostave.![]() |
CUSTOMCODE_checkout__PaymentData |
Ovaj code snippet se prikazuje odmah prije zatvaranja </main> taga na stranicama Checkout procesa, gdje korisnik odabite metodu Plaćanja.![]() |
CUSTOMCODE_checkout__ConfirmOrder |
Ovaj code snippet se prikazuje odmah prije zatvaranja </main> taga na stranicama Checkout procesa, na stranici "Potvrde narudžbe".![]() |
CUSTOMCODE_checkout__CreditCardData |
Ovaj code snippet se renderira odmah prije zatvaranja </main> taga na stranicama Checkout procesa gdje korisnik upisuje podatke svoje Kreditne kartice. Molimo budite svjesni: Iako ovaj snippet postoji, on je uvijek za vas Read-Only. Trenutno, ukoliko trebate postaviti neku logiku na ovu stranicu - slobodno pošaljite nama dotičnu skriptu. Mi ćemo je pregledati, i postaviti je nakon što se uvjerimo da je sigurna. Na toj se stranici ipak unose brojevi kreditnih kartica! ![]() |
CUSTOMCODE_checkout__ThankYou |
Ovaj code snippet se renderira odmah prije zatvaranja </main> taga na Hvala stranici (ThankYou page).![]() |