Webflow support library
npm install comrade-webflow---
``HTML`
> Important: use in
crossite if you want to use libraries inside symbolsStyles
---
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 styleJS 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 codeDispatcher
`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
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Lorem ipsum dolor sit amet consectetur adipisicing elit.
`> if reviews are not found on the page, then they will not go to schema
#### Result in
`html
`Breadcrumbs
#### HTML
`html
Home
Blog
`#### JS
`js
CWF.specialSchema({ type: 'breadcrumbs', rootSelector: '.breadcrumb-item' })
`#### Result in
`html
`FAQ
#### HTML
`html
Question 1
Answer 1
Question 2
Answer 2
`#### JS
`js
CWF.specialSchema({
type: 'faq',
rootSelector: '.faq-item',
questionSelector: '.faq-question',
answerSelector: '.faq-answer'
})
`#### Result in
`html
``