Developers Reference

BizzyBeeShop system lets you (or your web developer) modify the graphical design of your web shop. It also allows you to modify existing functionalities or add some new functionalities to your web shop.
If you are familiar with technologies like HTML, CSS, JavaScript, JQuery - you can do amazing results.
We will show you how to do it. We will show you example videos. We’ll even give you sample code snippets we used in our demos, and also the code we used in the real live production webs.

Contents

Logging into Green Panel

In your web browser please open the link to Green Panel that you've gotten in your e-mail when you created your web shop.

Log into the system with your username and password you received in your email. Choose „Zapamti prijavu“ (Remember Login) so the system can remember you in the future.
After successful login, you have gained the access to the Green Panel system, where you can perform all tasks regarding the management of your webshop.

Managing multiple Merchants and Webs

Typically, when you open a new Merchant and the first Web shop, you obtain your username and password to Green Panel.
If you are developer, web designer, or SEO expert… working for several Merchants in the BizzyBeeShop system, you can get the unified access to several merchants with your single username/password.
This feature is called Multi-Merchant admin. To become Multi-Merchant admin, please contact our support, and request single multimerchant account access to multiple merchants.

back to contents

Custom CSS

If you have some knowledge of HTML/CSS technologies, you can easily redesign your BizzyBeeShop template.
Depending on the depth of your knowledge, you can make small or very large design changes.
Every CSS class in the BizzyBeeShop template can be overwritten with your custom CSS override declaration.
Every web shop has to have its own CSS custom declaration.

How to accomplish this is presented in the following YouTube video.
The video references the example on how to completely modify ELEGANCE skin with the customized design.

Code and files used in this example:

Please note: Implementing bad CSS code in Custom CSS editor can severely ruin the design of your web shop.
So, please ask a skilled web developer, with CSS knowledge to help you with this.

back to contents

Inserting Custom code into BizzyBeeShop template

BizzyBeeShop templates contain certain predefined areas where you can insert your custom code.
This custom code can be any HTML, CSS, JavaScript, JQuery code that can run on the client side. You cannot insert server-side code.
You use Web Settings section in the Green Panel section for managing your Webshops.

How to use Custom code snippets is presented in our YouTube video:

Code used in this example:

The definition of the Custom code regions and how to use them can be found in the Appendix 1 – CUSTOMCODE snippets definition.

Please note: Implementing bad scripts and code in the Custom code snippets can severely ruin the design and functionality of your web shop.
So, please ask a skilled web developer, with HTML and JavaScript knowledge to help you with this.
To be able to write and implement Custom code, you need to be enrolled into Green Panels Web developer Role. Contact us for that.

back to contents

Developing with full access to HTML/CSS/JS code

We developed the BizzyBeeShop system so that the application code is totally separated from the web design code. This gives the opportunity for web designers to work only on the HTML/CSS/JS code, without the need to dig deeper into server-side C# code.
Each web shop is assigned its Skin. The Skin is a graphical template that is already-working and is fully designed. Without a Skin no webshop can be working.
The Skin is comprised of a several types of files:

If you, as the web developer, don’t feel that making Custom CSS and using Custom code snippets is enough for you – then you might be interested in getting the full access to Skin code. This way you will be able to make the complete web design and functionalities that you want.
You can make great sites with this approach. Sites like these are made with pure Skin modification: 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. There are many more.

How to develop your web shop with full access to Skin code is presented in this video:

ASP.NET

There are many serve development platforms on the web today. BizzyBeeShop platform is based on the Microsoft ASP.NET© technologies. The Skin uses many of ASP.NET server side controls to render its HTML content. The developer who plans to build web shop solutions based on the BizzyBeeShop platform should get familiar with ASP.NET controls, how they are defined, used, and most importantly – how will they render HTML. The best way to get the reference to ASP.NET controls is here:
https://docs.microsoft.com/en-us/troubleshoot/aspnet/server-controls
The developer will not be needing to create new ASP.NET controls, or even modify existing ASP.NET controls. Even though you can.
However, the developer should be very familiar on how these ASP.NET controls will render HTML code at the end. That is why we suggest you get yourself familiar with ASP.NET controls.

VS.NET

You can use any HTML Coding Tool to modify Skin files. However we recommend Microsoft’s native development tool – Visual Studio code.
You can download it for free here: https://code.visualstudio.com/.

Developer partner program and BizzyBeeShop developer certificate

To be sure you get the right support with Skin development, we build the BizzyBeeShop Partner program. Partner program will give you:

Developer partner program is intended for experts skilled in technologies like HTML, CSS, JavaScript and jQuery. The knowledge of ASP.NET server controls is not necessary, but is welcome.
BizzyBeeShop Developers are primary Frontend developers. There is no need and no possibility to code, build or modify server-side or backed-side code.

Partner program is intended for developers that will work closely with BizzyBeeShop to provide their customers the quality eCommerce projects. Developers will get the access to company resources such as development environment to start working and deliver the projects.
We want our Developer partners to earn money on quality projects by-themselves. BizzyBeeShop will provide the support needed.

Developers can contact us for enrolling into our partner program, just by sending the mail to info@bizzybeeshop.com. The best way to start the conversation is by sending a few reference projects, you’ve been working on in the past. We will take a look at those.
Developers can then get 30 days trial access to development platform. In your development environment you can get one Skin to test and to work on. You choose the Skin. After 30 days of building and testing, BizzyBeeShop will evaluate your work. Developers that are able to do good work on the Skin development will get BizzyBeeShop Certified Developer certificate and more permanent access for all their future eCommerce projects.

back to contents

Appendix 1 – CUSTOMCODE snippets definition

CUSTOMCODE_header Header is a control that is placed on the top of all webshop pages where you can browser products, read News, and such. The Header control is not placed on the Checkout pages section.
CUSTOMCODE_header is the PlaceHolder for your code that will be placed right after the closing </header> tag.
CUSTOMCODE_header__add_to_header This PlaceHolder is also placed in the Header control. However the placement in the Header control is not that important.
Everyhing you put in this PlaceHolder will be placed inside the page <head></head> tag.
CUSTOMCODE_footer Footer is a control that is placed near the bottom of all webshop pages where you can browser products, read News, and such. The Header control is not placed on the Checkout pages section.
CUSTOMCODE_footer is the PlaceHolder for your code that will be placed right after the closing </footer> tag.
CUSTOMCODE_header_links_right Webshop contains Header links. You can display or hide any of those. But you can also add new content,like tags or such to the right of the existing links.
CUSTOMCODE_footer_links_right Webshop contains Footer links. You can display or hide any of those. But you can also add new content,like tags or such to the right of the existing links.
CUSTOMCODE_product_detail2 This code snippet appears only on the Product-detail pages. It will render right after the closed </main> tag.
CUSTOMCODE_product_list2custom_list This code snipped will appear on a page containing the list of products with Custom product lists. Maning on the pages such as Sale (Akcija), New products (Novi proizvodi).
CUSTOMCODE_product_list2products This code snipped will appear on a standard page containing the list of products. This means the list of products when the buyer goes through product catgories.
CUSTOMCODE_patches__product_detail2_main This code snippet is rendered after the existing three patches on the product detail page. You can define your own patches and generate the CSS code to make them work in accordance with the product data placed in the Green Panel.
CUSTOMCODE_patches__product_detail2_related This code snippet is rendered after the existing three patches on the product detail page, but in the section where related products occur. It is rendered for each related product. You can define your own patches and generate the CSS code to make them work in accordance with the product data placed in the Green Panel.
CUSTOMCODE_patches__product_list2products This code snippet is rendered after the existing three patches on the product list page. It is rendered for each product in the list.
CUSTOMCODE_patches__product_list2custom_list This code snippet is rendered after the existing three patches on the product list page, for the special product lists, such as “New product” list.
CUSTOMCODE_patches__product_list2homepage This code snippet is rendered after the existing three patches on the product list on the Homepage.
CUSTOMCODE_checkout__UserData This code snippet is rendered right before the closing </main> tag in the Checkout process where the user presents User data.
CUSTOMCODE_checkout__ShippingData This code snippet is rendered right before the closing </main> tag in the Checkout process where the user select Shipping method.
CUSTOMCODE_checkout__PaymentData This code snippet is rendered right before the closing </main> tag in the Checkout process where the user select Payment method.
CUSTOMCODE_checkout__ConfirmOrder This code snippet is rendered right before the closing </main> tag in the Checkout process on the Confirm Order page.
CUSTOMCODE_checkout__CreditCardData This code snippet is rendered right before the closing </main> tag in the Checkout process where the user presents its Credit Card information.
Please be aware: Even though this snippet exists, it is always Read-Only. Currently, if you need to upload some logic on this page - feel free to send us the script. We will examine it, and upload it when we make sure it's safe.
back to contents