Pre-populated shopping cart

Well… I decided to dig a bit deeper into how the shopping cart works, and have come up with the beginnings of a solution.

Let’s start with a simple scenario…  Let’s say you want to have an “easy button” to add a special “late fee” fake eLearning course to the shopping cart.  This can be accomplished with Javascript and what is called a bookmarklet (a bookmark that contains javascript code instead of typical link).

Steps in Chrome:

1. Create a fake eLearning class called “Late Fee” or similar.
2. Set the price.
3. For now, put the course in a catalog that only you can see.
4. Add the fake course to the shopping cart.
5. Right-click the page and choose “Inspect” (or CTRL-Shift-I)
6. Select the Application tab from the developer tools (top bar of the tools).
7. Scroll down on the left side to Local storage, and expand it so you can see your site.
8. Scroll down to the key called “docebo_cart_data”.
9. Copy the value there and paste it into Notepad.
10. Modify the following code, replacing YOUR-CODE-HERE with what you pasted into Notepad previously.  Note that your original code will be an array (in square brackets).  You will need to remove those brackets and just keep everything inside the curly braces.

    javascript:function addEntry() {
        var existingEntries = JSON.parse(localStorage.getItem('docebo_cart_data'));
        if(existingEntries == null) existingEntries = [];
        var newEntry = JSON.parse('YOUR-CODE-HERE');
        existingEntries.push(newEntry);
        localStorage.setItem('docebo_cart_data', JSON.stringify(existingEntries));
    };addEntry();location.reload(false);

    
    Here’s a real example:

    javascript:function addEntry() {
        var existingEntries = JSON.parse(localStorage.getItem('docebo_cart_data'));
        if(existingEntries == null) existingEntries = [];
        var newEntry = JSON.parse('{"course_logo":"","course_name":"Late Registration Fee","slug_name":"late-registration-fee","course_id":73,"course_price":100,"affiliate_price":null,"course_image":"//d36spl5w3z9i0o.cloudfront.net/files/a/v/avouniversitysandbox_docebosaas_com/assets/courselogo/original/Oz+the+Great+and+Powerful-2022-01-27-21-50-50.jpeg","course_type":"elearning","lms_item_type":"elearning","numberOfLessons":0,"on_sale":true,"record_id":null,"duration":0,"duration_text":"00:00","language":"english","coupon_applied":false,"item_type":"course","course_link":"/learn/course/view/elearning/73/late-registration-fee","available_seats":null,"allow_overbooking":false,"can_manage_course":true,"status":"buy","partner_discount":false,"can_enter":true,"enrolled":false}');
        existingEntries.push(newEntry);
        localStorage.setItem('docebo_cart_data', JSON.stringify(existingEntries));
    };addEntry();location.reload(false);

11. Create a new bookmarklet. Right-click your bookmarks bar, then click "Add page..." or go to your Bookmarks manager, then right-click and click "Add new bookmark".  The name can be anything you want.  Just paste your Javascript code into the URL like so:
     

12. 

    Technically you can use this bookmarklet/link anywhere on your site, but it makes the most sense to use it while you’re in the shopping cart. 

13. OPTIONAL: If you’re really going to do a “late fee”, you probably want that course hidden from the transcript, and able to be purchased again.  To do that, you’ll need to create a webhook that is triggered from enrollment, filtered for that course, and that will archive and reset the tracking.  Let me know if you need directions on how to create this automation.

14. This basic idea can be expanded in the following ways:

    1. Pre-create a shopping cart of multiple items--a bundle of courses.

    2. Expand the code to include a coupon code that might only be good for the bundle of courses above. You’ll want to target the “docebo_applied_coupon” key and remember that you can have only one coupon per cart, and the value will be a simple collection--not an array. There are a couple other things to watch for with the coupon, but I can expand on that later if desired.

    3. Unsupported: If you know how to add JavaScript to your site, you can create a page on your LMS site with a button that will automatically do all of the above).