Comrade Webflow

$3

---

``HTML

`

> Important: use in crossite if you want to use libraries inside symbols

Styles

---

style will be loaded if have trigger element on page

`JS
CWF.register({
// multiple selectors: '.hero, .hero-inner'
trigger: '.swiper-container',
type: 'style',
alias: 'swiper',
url: 'https://unpkg.com/swiper/swiper-bundle.min.js'
})
`

> not fill trigger if you want to always load style

JS Libraries

---

`js
CWF.register({
type: 'script',
alias: 'swiper',
url: 'https://unpkg.com/swiper/swiper-bundle.min.js'
})
`

script will loaded on request and run callback function

`js
CWF.use('swiper', function () {
new Swiper('.foo', {
//...
})
})
`

> if the library is already loaded immediately execute a callback

$3

---

`js
CWF.$ready(function () {
// some code with jquery
$('body').html(' ) ')
})
`

> code will be executed only after jquery is loaded, can be used inside the symbol in the embed code

Dispatcher

`js
function changeMenuStateCallback(state) {
document.getElementById('menu').dataset.state = state
}

// add event listener
CWF.on('change-menu-state', changeMenuStateCallback)

// fire event with data
CWF.emit('change-menu-state', 'open')
CWF.emit('change-menu-state', 'closed')

// remove event listener
CWF.off('change-menu-state', changeMenuStateCallback)
`

Schema

General

#### HTML

`js
CWF.rootSchema(
{
'@type': 'Restaurant',
'@id': 'http://davessteakhouse.example.com',
name: "Dave's Steak House",
address: {
'@type': 'PostalAddress',
streetAddress: '148 W 51st St',
addressLocality: 'New York',
addressRegion: 'NY',
postalCode: '10019',
addressCountry: 'US'
}
},
{
reviews: {
itemSelector: '.review-item',
authorSelector: '.review-author',
bodySelector: '.review-body',
ratingSelector: '.review-rating'
}
}
)
`

`html


#### Result in

`html

`

Breadcrumbs

#### HTML

`html


`js
CWF.specialSchema({ type: 'breadcrumbs', rootSelector: '.breadcrumb-item' })
`

#### Result in

`html

`

FAQ

#### HTML

`html


`js
CWF.specialSchema({
type: 'faq',
rootSelector: '.faq-item',
questionSelector: '.faq-question',
answerSelector: '.faq-answer'
})
`

#### Result in

`html

``