Return to Solutions Overview <-

Connecting Xano and Webflow via jQuery || BMG base kit

Customize this base script and get a javascript object in return that lets you manipulate your entire DOM with Xano data. Pretty cool, very technical - it would be okay to ask for help.

(Still under development as of March 15th 2023)

Customize this base script and get a javascript object in return that lets you manipulate your entire DOM with Xano data.
Pretty cool, very technical - it would be okay to ask for help.

(() => { /* Start of: BMG - Xano connector code */

// Global strings
const listSelector = '[bmg-xano = "c-list"]',
    dateSelector = '[bmg-xano = "date"]',
    xanoBaseUrlString = 'https://your-xano-instance.n7.xano.io/',
    xanoApiPath = 'api:4lTacvfO/item_list'

    
// Main function
$(listSelector).each(function()
{
    // Glocal elements & variables
    let $list = $(this),
        $dynItemPrototype = $list.children().eq(0).clone(),
        request = new XMLHttpRequest()

    // + Glocal functions +

    // Request xano data
    request.open('GET', xanoBaseUrlString + xanoApiPath, true)
    request.onload = function()
    {
        // Local variables
        let data = JSON.parse(this.response)

        // - Local function -
        if (request.status >= 200 && request.status < 400)
        {
            // Remove prototypes
            $list.empty()
            
            // Data loop
            data.forEach( item =>
            {
                // Local elements
                let $item = $dynItemPrototype.clone(),
                    $date = $item.find( dateSelector )

                // Change name     
                $date.text( createTimeString( item.created_at ) )
                
                // Append new item
                $list.append( $item )
            })
            
            // Tell the DOM the list is loaded
            $list.attr('bmg-xano-load-status', 'loaded')
        }
        else
        {
            // Tell the DOM the list is not loaded
            $list.attr('bmg-xano-load-status', request.status)
        }
    }

    // Send request to API
    request.send()

    // return true to jump to the next loop in .each()
})

    
// + Helper functions +

// Create time string
function createTimeString( unixTimeStamp )
{
    // Local variables
    let date = new Date( unixTimeStamp ),
        month = date.toLocaleString('default', { month: 'long' }),
        day = date.getDate(),
        year = date.getFullYear(),
        timeString = `${ month } ${ day }${ retrunNth( day ) }, ${ year }`

    // Return formatted string
    return timeString
}

// Return ending of day
function retrunNth( day )
{
    if ( day > 3 && day < 21 ) return "th"
    switch (day % 10)
    {
        case 1:  return "st"
        case 2:  return "nd"
        case 3:  return "rd"
        default: return "th"
    }
}

// Removes square brackets -- Useful for reusing attribute selector strings
function removeSquareBrackets( string )
{
    return string.replace(/\[/g, '').replace(/\]/g, '')
}

})() /* End of: BMG - Xano connector code */

FAQs

You still have an open question about BMG.studio and how we operate. Chances are good that you will find what you are looking for here:

Why does this FAQ exist?

Well. As of Wednesday, March 15th 2023, I think this component looks really cool.

Can I clone this FAQ component?

Yes. Yes you can. You can do so -> here <-

Still have questions?

It's okay to reach out. Use either email or our calendar tool