Teaser Status and Actions
The status prop can be used to display status information about a resource such as locked and view count. Like and share buttons can be generated via the actions prop.
Important Notes:View count can be set via the status.views prop. It can be numbers or string (eg. 28k).Locked status can be set via the status.locked prop. If this is set, a lock icon will appear with the signifier.Pass a like button into the like prop. Example code snippet is shown below.Pass a share popover menu into the share prop. Boundary is required on the popover. Example code snippet is shown below.
Demo
Aliqua voluptate amet do laborum culpa tempor consectetur culpa consectetur ea. Ea officia quis do enim.
Twig
// Set up the like and share buttons
{% set like %}
{% set icon_heart %}
{% include '@bolt-components-icon/icon.twig' with {
name: 'heart-open',
} only %}
{% endset %}
{% include '@bolt-elements-text-link/text-link.twig' with {
content: 'Like',
icon_before: icon_heart,
reversed_underline: true,
attributes: {
type: 'button',
class: 'js-bolt-like-button', // JS target for handling the like function.
},
} only %}
{% endset %}
{% set share %}
{% set share_menu %}
{% include '@bolt-components-share/share.twig' with {
display: 'menu',
text: 'Share this content',
sources: [
...
],
} only %}
{% endset %}
{% set share_popover_trigger %}
{% set icon_share %}
{% include '@bolt-components-icon/icon.twig' with {
name: 'share',
} only %}
{% endset %}
{% include '@bolt-elements-text-link/text-link.twig' with {
content: 'Share',
icon_before: icon_share,
reversed_underline: true,
attributes: {
type: 'button'
},
} only %}
{% endset %}
{% include '@bolt-components-popover/popover.twig' with {
trigger: share_popover_trigger,
content: share_menu,
spacing: 'none',
boundary: '.js-bolt-target-teaser', // JS target for containing the popover within the teaser.
} only %}
{% endset %}
// Set up the component
{% include '@bolt-components-teaser/teaser.twig' with {
like: like,
share: share,
status: {
views: '28k',
locked: true,
},
attributes: {
class: 'js-bolt-target-teaser',
},
...
} only %}
HTML
Not available in plain HTML. Please use Twig.
JavaScript
<script>
// Example Like Button JS
var likeButtons = document.querySelectorAll('.js-bolt-like-button');
likeButtons.forEach(function(el) {
el.addEventListener('click', function (event) {
var likeIcon = this.querySelector('bolt-icon');
if (likeIcon.getAttribute('name') === 'heart-open') {
likeIcon.setAttribute('name', 'heart');
likeIcon.setAttribute('color', 'pink');
} else {
likeIcon.setAttribute('name', 'heart-open');
likeIcon.removeAttribute('color');
}
});
})
</script>
