Vue Storefront mixin that parses CMS blocks content into queryable HTML elements.
Run the following inside your VSF theme folder:
yarn add vsf-cms-block-mixin
This mixin works in a similar way as the built in CmsBlock component, the main difference is that it exposes a parsedContent property that can be used to query HTML elements using node-html-parser.
Refer to node-html-parse docs for a list of the available query APIs.
<template>
<div
class="offer-container col-xs-12 col-sm-6 pb15"
v-if="data"
>
<router-link :to="localizedRoute(link)">
<div
class="offer"
v-lazy:background-image="image"
>
<h2 class="title m0 h1">
{{ title }}
</h2>
<p class="subtitle m0 serif h3 uppercase">
{{ subtitle }}
</p>
</div>
</router-link>
</div>
</template>
<script>
import cmsBlock from 'vsf-cms-block-mixin/components/cmsBlock'
export default {
name: 'LeftBanner',
mixins: [
cmsBlock
],
computed: {
title () {
return this.parsedContent.querySelector('h2').rawText
},
subtitle () {
return this.parsedContent.querySelector('p').rawText
},
link () {
return this.parsedContent.querySelector('a').attributes['href']
},
image () {
return this.parsedContent.querySelector('img').attributes['src']
}
}
}
</script>