1

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
  • do you also have Uncaught ReferenceError: jQuery is not defined error ? – Pawan Apr 9 at 17:31
0

I have just tried your code, it is working for me after below modification.

=> Remove <link type="text/javascript" src_type="url" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/> from catalog_product_view.xml because we already have jQuery

=> Change from class to Id in timer.phtml, because JS searching for Id, like

 <div id="example" data-date="2014-01-01 00:00:00"></div>

=> Please check after changing above 2 point. If still there is error you need to change in TimeCircles.js

1 Change first line from (function($) { to require(['jquery'],function($){

2 Change last line from }(jQuery)); to });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.