comrade-webflow
Advanced tools
Readme
<script src="https://unpkg.com/comrade-webflow/dist/comrade-webflow.js"></script>
Important: use in
<head>crossite if you want to use libraries inside symbols
style will be loaded if have trigger element on page
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
triggerif you want to always load style
CWF.register({
type: 'script',
alias: 'swiper',
url: 'https://unpkg.com/swiper/swiper-bundle.min.js'
})
script will loaded on request and run callback function
CWF.use('swiper', function () {
new Swiper('.foo', {
//...
})
})
if the library is already loaded immediately execute a callback
CWF.$ready(function () {
// some code with jquery
$('body').html('<strong> ) </strong>')
})
code will be executed only after jquery is loaded, can be used inside the symbol in the
embed code
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)
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'
}
}
)
<section>
<div class="review-item">
<div class="review-author">Michael Smith</div>
<div class="review-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div class="review-rating">5</div>
</div>
<div class="review-item">
<div class="review-author">Joe Smith</div>
<div class="review-body">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
<div class="review-rating">4.5</div>
</div>
</section>
if reviews are not found on the page, then they will not go to schema
<head><script type="application/ld+json" id="root-Schema">
{
"@context": "https://schema.org",
"@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"
},
"review": [
{
"@type": "Review",
"author": { "@type": "Person", "name": "Michael Smith" },
"reviewRating": { "@type": "Rating", "ratingValue": "5" },
"reviewBody": "Lorem ipsum dolor sit amet consectetur adipisicing elit."
},
{
"@type": "Review",
"author": { "@type": "Person", "name": "Joe Smith" },
"reviewRating": { "@type": "Rating", "ratingValue": "4.5" },
"reviewBody": "Lorem ipsum dolor sit amet consectetur adipisicing elit."
}
],
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": 4.75,
"reviewCount": 2
}
}
</script>
<section>
<a class="breadcrumb-item" href="/">Home</a>
<a class="breadcrumb-item" href="/blog">Blog</a>
<span class="breadcrumb-item">Blog inner</span>
</section>
CWF.specialSchema({ type: 'breadcrumbs', rootSelector: '.breadcrumb-item' })
<head><script type="application/ld+json" id="BreadcrumbList">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 0,
"name": "Home",
"item": "http://webflow.site/"
},
{
"@type": "ListItem",
"position": 1,
"name": "Blog",
"item": "http://webflow.site/blog"
},
{
"@type": "ListItem",
"position": 2,
"name": "Blog inner"
}
]
}
</script>
<section>
<div class="faq-item">
<div class="faq-question">Question 1</div>
<div class="faq-answer">Answer 1</div>
</div>
<div class="faq-item">
<div class="faq-question">Question 2</div>
<div class="faq-answer">Answer 2</div>
</div>
</section>
CWF.specialSchema({
type: 'faq',
rootSelector: '.faq-item',
questionSelector: '.faq-question',
answerSelector: '.faq-answer'
})
<head><script type="application/ld+json" id="FAQPage">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Question 1",
"acceptedAnswer": { "@type": "Answer", "text": "Answer 1" }
},
{
"@type": "Question",
"name": "Question 2",
"acceptedAnswer": { "@type": "Answer", "text": "Answer 2" }
}
]
}
</script>
FAQs
Webflow support library
The npm package comrade-webflow receives a total of 379 weekly downloads. As such, comrade-webflow popularity was classified as not popular.
We found that comrade-webflow demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.
Security News
This episode of the Risky Biz podcast discusses how the rise of small open source packages and the shift towards individual maintainers makes the ecosystem more vulnerable to supply chain attacks.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.