Developers

Style Customisation

The Shopping Cart Module comes as a standard HTML / Javascript snippet and once the page loads, inside the PS_MAIN_BOX will create an iframe used to view the Shopping Cart system thats inside Psittacus BLE.

When you've first installed the Shopping Cart Module you'll see you have three main customisation options that can be used to quickly edit the iframe settings and the loading icon / animations. These are shown below and can be edited to match your website. 

window.PS_IFRAME_CSS = "display:none; width: 100%; min-height: 500px;"; 
window.PS_LOADING_CSS = "border: 5px solid #f3f3f3; border-top: 5px solid #3498db; border-radius: 50%; width: 120px; height: 120px; animation: spin 750ms linear infinite";
window.PS_PRE_LOAD = "<style>@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }</style>";

When editing the Shopping Cart Module we recommend you turn "PS_DEBUG_STATUS" to true. This will display a greater amount of detail in the console log about the status of the module.

The second area to Customise the colours from whats loaded by Psittacus BLE is within the BLE under the portals main account located at Dashboard > Rates & Shopping > Shopping Cart Module.

Direct Links

The Shopping Cart Module has by default the ability to listen and understand what the current URL parameters are set to and the list of these are below.

By default without any custom routing set, the default calls in the location would be ?query=value such as ?view=product&id=250 will display the product view showing the product id 250.

We recommend setting up custom .htaccess routing or if using a framework that will allow better routing such as /product/250 instead of ?view=product&id=250.

An example of this would be http://yourwebsite.com/mypage?view=list&extra=elearning

  • ?view=list&extra=elearningwill show elearning, you can also use (elearning, ebook, video, distance, qualification and package.

  • ?view=list&extra=123 will show a list of all the products under a custom category you've setup within the BLE. You can get the IDs / Slug when settings these up.

  • ?view=basket will take them directly to the basket.

  • &ref=example will allow you to link a basket to where they first came from to be used in tracking. For example ?view=product&id=250&ref=facebook will show the purchase origin from facebook.

  • ?view=add_product&id=250 will add the product with the id provided directly to the users basket and take them to the basket.

When using the product view, you can supply a slug within the id param instead of the id for example age-verification instead of 250.

Custom Development

If the Shopping Cart Module is missing features you need then you have two options.

You Develop:

If its from a website level, i.e how it loads into the website or you would like to set it up with your own code then our javascript to load the shopping cart module is below. If this is a feature needed that loads inside the iframe, then aside from the options within the BLE to change colours etc, you will not be able to do this.

We Develop:

We offer alot of flexibility when it comes to the Shopping Cart Module. If you're looking for custom development such as how the shopping cart is loaded, how it looks or if its missing a feature you need then please feel free to contact us about a custom development quote. If you think this is something the wider clients using the Shopping Cart Module might want then we can offer a discount, however if you want it exclusive to you, then we can do this. Please contact it@ble.support to discuss.

PreviousGetting StartedNextMigrating from API to SCM

Last updated

Was this helpful?