I am trying to implement this circular timer on product Detail page by following the instructions.
my catalog_product_view.xml code is
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<link type="text/javascript" src_type="url" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
<link src="Vendor_module::js/TimeCircles.js"/>
<css src="Vendor_module::css/TimeCircles.css"/>
</head>
<body>
<referenceBlock name="product.info.stock.sku" >
<block class="Vendor\Module\Block\Product\Banner" name="timers_product"
template="Vendor_module::product/timer.phtml" after="product.info.stock" />
</referenceBlock>
</body>
</page>
my timer.phtml code is
<div class="example" data-date="2014-01-01 00:00:00"></div>
<script>
require(['jquery', 'jquery/ui'], function($){
var id_flash = "2";
var _days = "Days";
var _hours = "Hours";
var _mins = "Minutes";
var _secs = "Seconds";
var _color1 = '#90989F';
var _color2 = '#40484F';
if ("#FF3939" != '')
_color1 = "#FF3939";
if ("#ffc3d0" != '')
_color2 = "#ffc3d0";
// Circle Counter
$(function() {
$('#example').TimeCircles({
"animation": "smooth",
"bg_width": 0.3,
"fg_width": 0.06,
"circle_bg_color":_color2,
"text_size": 0.11,
"time": {
"Days": {
"text": _days,
"color": _color1,
"show": true
},
"Hours": {
"text": _hours,
"color": _color1,
"show": true
},
"Minutes": {
"text": _mins,
"color": _color1,
"show": true
},
"Seconds": {
"text": _secs,
"color": _color1,
"show": true
}
}
});
});
});
</script>
I'm getting this Error in console
>Uncaught TypeError: $(...).TimeCircles is not a function
>at HTMLDocument.<anonymous> (push-it-messenger-bag.html:815)
>at fire (jquery.js:3232)
>at Object.add [as done] (jquery.js:3291)
>at jQuery.fn.init.jQuery.fn.ready (jquery.js:3542)
>at jQuery.fn.init (jquery.js:2967)
>at new jQuery.fn.init (jquery-migrate.js:225)
>at jQuery (jquery.js:75)
>at push-it-messenger-bag.html:814
>at Object.execCb (require.js:1650)
>at Module.check (require.js:866)
My Directory Structure
->Vendor
|-->Module
|-->view
|-->frontend
|-->templates
|-->product
|-->timer.phtml
|-->web
|-->css
|-->TimeCircles.css
|-->js
|-->TimeCircles.js
Uncaught ReferenceError: jQuery is not definederror ?