I have simple code
<div class="container">
<h1>count</h1>
<div class="timer"></div>
</div>
<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="circular-countdown.js"></script>
<script>
$('.timer').circularCountDown({
size: 500,
borderSize: 10,
colorCircle: 'gray',
background: 'white',
fontFamily: 'sans-serif',
fontColor: '#333333',
fontSize: 16,
delayToFadeIn: 0,
delayToFadeOut: 0,
reverseLoading: false,
reverseRotation: false,
duration: {
hours: 0,
minutes: 0,
seconds: 1000
},
beforeStart: function(){},
end: function(){}
});
</script>
and try to show this counter in front-end . I create count.phtml in app/design/frontend/vendorname/module/Magento_Theme/templates/html
<div class="container">
<h1>Test</h1>
<div class="timer"></div>
</div>
<script>
$('.timer').circularCountDown({
size: 500,
borderSize: 10,
colorCircle: 'gray',
background: 'white',
fontFamily: 'sans-serif',
fontColor: '#333333',
fontSize: 16,
delayToFadeIn: 0,
delayToFadeOut: 0,
reverseLoading: false,
reverseRotation: false,
duration: {
hours: 0,
minutes: 0,
seconds: 1000
},
beforeStart: function(){},
end: function(){}
});
</script>
then edit layout file default_head_blocks.xml and add
<script src="circular-countdown.js"></script>
after that I call this block from CMS:
{{block class="Magento\Framework\View\Element\Template" name="count_file" template="Magento_Theme::html/count.phtml"}}
script not run, I understand i cant run script from .phtml file directly so what i should do ? thanks