Custom Link/Card in customer portal

Community Share Code and Components
1

Hi everyone,

I just wanted to share a solution that I came up with to allow my client’s to easily access my payment portal and their online ordering system. Here is what it looks like:

image
image1641×809 33.9 KB 

 window.onload = function() {
        addPayments();
        addOnlineOrdering();
        addStatusBar();
    }
    function addPayments(){
     var newDiv = document.createElement('div');
        newDiv.classList.add('one-third');
        newDiv.classList.add('column');
        newDiv.innerHTML = `
        <a href="https://payments.thewebsitefoundry.com/" class="widget small">
            <div class="icon">
                <i class="fa fa-money" aria-hidden="true"></i>
            </div>
            <div class="content">
                <h3>Payments</h3>
                <span>Pay your bill or view all transactions</span>
            </div>
        </a>`;

        var parent = document.querySelector('.grid-row');

        parent.appendChild(newDiv);
    }

    function addOnlineOrdering(){
        var onlineOrderUsers = [
            "{userName}", 
            "{userName}"
        ]

        var newDiv = document.createElement('div');
        newDiv.classList.add('one-third');
        newDiv.classList.add('column');
        newDiv.innerHTML = `
        <a href="https://www.grubordering.com/" class="widget small">
            <div class="icon">
                <i class="fa fa-cutlery" aria-hidden="true"></i>
            </div>
            <div class="content">
                <h3>Online Ordering</h3>
                <span>Manage your online ordering system</span>
            </div>
        </a>`;

        var parent = document.querySelector('.grid-row');
        var userName = document.querySelector('strong').innerText;
        if (onlineOrderUsers.includes(userName)) {
            parent.appendChild(newDiv);
        }

        
    }
6 Likes
2

Thank you very much for sharing this @David_Harris. I really appreciate it.

3

Ooooh thanks @David_Harris that’s awesome! Might have to artistically “borrow” your solution one day! :sunglasses:

Haha, but really, great job, thanks for sharing this!

1 Like