Advanced Partner Control Panel customization

Overview

Use HTML, CSS and JavaScript to customize the look and feel of the Control Panel used by your partners/resellers/distributors.

Availability

This feature is available in tandem with the 2Checkout Channel Manager (Partner) package.

Requirements

Customization work can be done by you or by 2Checkout (contact us directly for more details).

How do I enable a custom template for the Partner Control Panel?

1. Navigate to Interface Templates under Setup.
2. Click on the Partners tab.
3. Select the Advanced customization option.
4. Click on Add template.

How do I customize the template?

1. Enter a unique name.
2. Select the languages for which the customization will be displayed:
   
   • English (default)
   • German
   • French
   • Spanish
   • Japanese
   • Portuguese
   • Italian
3. Use external JavaScript and CSS files for customization or use the inline editors available in the template customization page.

What are the Partner Control Panel pages that I can customize?

• Partner Control Panel Dashboard (full customization, it includes the PartnerCPanel JS object). The remaining Control Panel pages do not feature this object, so customization capabilities are limited.
• Partner ordering process (partial customization, as the process requires loading pages with AJAX. Hint: you could use a hidden DIV and personalize the contents).
• Partners Signup, Partners Login, Partners product registration by using a cart template available in the Default Template area.

Partner Control Panel templates are standalone designs that do not share code with cart or myAccount templates. As such, if you check the Partners option on either a cart or a myAccount template, the template impacts exclusively the Partner Control Panel and gets moved to the Partner templates area. You cannot undo this process.

External JavaScript and CSS files

Upload one or more .CSS files, and similarly use a single or multiple .JS files, but also graphical elements to 2Checkout's server via the Media center. Unless uploaded to the 2Checkout server, these files will not allow for an SSL connection to be established.

When multiple .CSS or .JS files are uploaded, the last ones added will take precedence over previous items. Important: 2Checkout recommends that you use only a single .CSS file and a single .JS file in order to optimize page load time.

2Checkout Interface Templates use JavaScript and CSS external files to ensure a fast page loading time. 2Checkout will automatically merge the external JavaScript and CSS files uploaded via "Media Center" with the built-in interface files and serve them from a CDN (Content Delivery Network) for increased performance.

Once uploaded, the CSS and JS files will be featured in the External JavaScript and CSS files area of custom templates.

When added to a template, the custom .CSS and .JS files will override the default .CSS and .JS files.

Inline code editors

You can edit the:

• Doctype Declaration
• Page Title
• Meta & CSS
• HTML Code
• JavaScript code

Click Save per-editor after inline changes.

CSS classes

You can use the following CSS classes to further customize the look and feel of the Partner Control Panel.

In addition, you can also use the following JavaScript object included on the dashboard, the Partner Control Panel homepage.

window.PartnerCPanel = {
    /*optional - present on all pages that display the breadcrumb*/
    Breadcrumb: {
        All: [ /*ordered array of breadcrumb items, the last item is the one related to the current page*/ {
                Label: string,
                /*translated label of the breadcrumb item*/
                Url: string /*url to go to the breadcrumb item*/
            }
            /*, ...*/
        ]
    },
    /*optional - present if the partner is assigned to more than one vendor*/
    Companies: [ /*array of companies the partner can switch between and login into*/ {
            CompanyName: string,
            /*partner company name*/
            FirstName: string,
            /*partner first name*/
            LastName: string,
            /*partner last name*/
            MerchantCommercialName: string,
            /*vendor commercial name for this partner*/
            Selected: boolean,
            /*true if this is the current selected partner*/
            Url: string /*url to allow switching to this partner*/
        }
        /*, ...*/
    ],
    IS_LOGGED_IN: boolean,
    /*true when the partner is logged in, false otherwise*/
    Languages: { /*object with available languages*/
        All: [ /*array of all available languages*/ {
                Lang: string,
                /*3-letter language code*/
                LangAbr: string,
                /*2-letter language code*/
                Language: string,
                /*language name*/
                LanguageEN: string /*language name, translated in english*/
            }
            /*, ...*/
        ],
        Selected: string /*2-letter code of the selected language*/
    },
    Links: {
        /*optional - present only if any favorite links are defined by the partner*/
        Favorites: {
            All: [ /*array with all favorite links*/ {
                    Label: string,
                    Url: string
                }
                /*, ...*/
            ]
        },
        General: { /*object with all general links*/
            Contact: {
                Label: string,
                /*translated link label*/
                Url: string /*link url*/
            },
            /* same for Help, Home, Info, Logout*/
        },
        /*optional - present only if any top links are defined by the partner*/
        Top: {
            All: [ /*array with all top links*/ {
                    Label: string,
                    Url: string
                }
                /*, ...*/
            ]
        },
        /*optional - present only if any quick links are defined by the partner*/
        Quick: {
            All: [ /*array with all quick links*/ {
                    Label: string,
                    Url: string
                }
                /*, ...*/
            ]
        }
    },
    /*optional - present only if the vendor has a specific logo image*/
    Logo: {
        CompanyName: string,
        /*vendor company name*/
        Url: string /*Url of the image*/
    },
    Menu: { /*menu item details*/
        All: { /*object with keys for all the menu items details - below are examples based on the menu items at the current release date*/
            ACC_INFO: {
                Label: string,
                /*translated menu item*/
                Parent: string,
                Url: string /*url of the menu item*/
            },
            /* same for ADD_ORDER, ALL_ORDERS, CUSTOMERS, GRAPHICAL_REPORTS, PARTNERSHIP_DETAILS, PRODUCTS, PROFORMA_LISTING, REFUNDS, RESOURCES, USER_ACCESS */
        },
        Selected: string /*Url of the selected menu item*/
    },
    /*partner information*/
    Partner: {
        FirstName: string,
        LastName: string
    },
    /*vendor information*/
    Vendor: {
        CompanyName: string,
        CommercialName: string
    },
    /*optional - present only on specific pages, as needed; this element contents are to be changed over time*/
    SECTION: { /*relevant information on specific areas on the current page*/
        /*optional - present only on homepage*/
        INDEX: { /*relevant information on different homepage areas*/
            ORDERS: [ /*array of last 5 orders - exposes the orders data - present on homepage*/ {
                    Currency: string,
                    /*3-letter uppercase code*/
                    OrderDate: string,
                    /*yyyy-mm-dd*/
                    RefNo: string,
                    StatusCode: string,
                    /*ex: AWAITING_PAYMENT*/
                    Total: string,
                    /*user-friendly amount, two digits*/
                    Url: string /*url to access the order details*/
                }
                /*, ... */
            ],
            PROFORMAS: { /*data regarding the overdue proforma invoices - present on homepage*/
                count: {
                    amount: string,
                    /*user-friendly amount of all overdue proformas, converted to the default partner decont currency*/
                    count: string /*count of all overdue proformas*/
                },
                data: [ /*array of first 5 overdue proformas*/ {
                        IdProforma: string,
                        ProformaNumber: string,
                        /*proforma number*/
                        Status: string,
                        /*proforma invoice status*/
                        amount: string,
                        /*user-friendly proforma amount, converted to the default partner decont currency*/
                        due: string /*days overdue*/
                    }
                    /*, ... */
                ]
            },
            STATS: { /*data regarding the last week stats data - present on homepage*/
                licences_no: {
                    count: integer /*count of last week delivered subscriptions*/
                },
                orders: {
                    amount: float,
                    /*amount of last week complete orders, converted to the default partner decont currency*/
                    count: integer /*count of last week complete orders*/
                },
                orders_ni: {
                    amount: float,
                    /*amount of last week orders not yet invoiced, converted to the default partner decont currency*/
                    count: integer /*count of last week orders not yet invoiced*/
                },
                profit: { /*last week profit*/
                    amount: float /*converted to the default partner decont currency*/
                },
                proformas: {
                    amount: float,
                    /*amount of last week unpaid proforma invoices, converted to the default partner default currency*/
                    count: integer /*count of last week unpaid proforma invoices*/
                }
            },
            TOTAL_ORDERS: string /*count of all partner orders*/
        }
    }
};

Use the inline editors to overwrite specific lines in the existing .CSS or .JS files. Note: Changing these files is an advanced operation best handled by experienced programmers.

Add your custom CSS and JS files. To upload the files, use the Media Center area of the Control Panel. Unless custom CSS and JS files are uploaded to a secure 2Checkout server, a secure connection (SSL) cannot be established for your customers.

When present, code in the inline editor overrides both the custom .CSS and .JS files added to a template as well as the default .CSS and .JS files.

Make sure to delete from the inline editors any pieces of code that you customized using external .CSS and .JS files. For example, if you defined the full CSS through an external file, delete the code in the inline editor completely. However, in scenarios in which you customized only some portions of the template using the .CSS file, leave the necessary code in the inline editor.

HTML tags

Use the following tags to include/exclude specific content such as the language selector, the menu, footer and breadcrumbs. All tags are optional with the exception of PAGECODE, that is mandatory.

• Mandatory content:
  
  • <--{PAGECODE}--> Loads the dynamic content of the Partner Control Panel.
• Optional content:
  
  • <--{LANGUAGES}--> Language selector
  • <--{MENU}--> Main menu
  • <--{HEADER}--> Header area
  • <--{FOOTER}--> Footer area
  • <--{BREADCRUMB}--> Navigation breadcrumbs for Control Panel pages
  • <--{QUICK_LINKS}--> Quick links - the grey top bar above the breadcrumbs
  • <--{FAVORITE_LINKS}--> Favorite links - displayed in the right sidebar only after you mark pages as favorites
  • <--{SIDE_LINKS}--> Side links - the links below the Favorite links area (only available in certain scenarios)
  • <--{TOP_LINKS}--> Top links - the top left row of links next to the language selector

Simple customization settings

Simple customization settings are automatically migrated to your templates when you start using advanced customization. You will be able to find your personalized settings in the Meta & CSS inline editor.

How does the preview work?

The preview functionality uses a dummy Partner Control Panel account. To access it:

1. Navigate to Interface Templates under Setup.
2. Click on the Partners tab.
3. Select the Advanced customization option.
4. Click on Add template.
5. Select Click here under Preview.

FAQ

Can I create multiple templates?

Yes. But you can have only a single design active at any given time.