CODEWITHSUNDEEP
javascriptphpwordpresswoocommerce
Codeboy
Codeboy

Reputation: 35

Insert javascript object in php function

I want to insert some a circle created with javascript in my woocommerce shortcode created in php. So far i've saved the javascript in assets under js with the file name. So basically i want to show my circle on my wordpress website.

The PHP looks like this:

// Add Shortcode
function get_cart_count() {

    // Code
/**
 * Check if WooCommerce is active
 **/
if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {
     global $woocommerce;
         echo '<script> function(state, circle) </script>';
    echo cat_cart_count( 22 ). "<span> ud af 5 samples </span>";
        echo "<br>Total: ".$woocommerce->cart->get_cart_total();

}
}
add_shortcode( 'cart_count', 'get_cart_count' );

and the javascript for drawing the circle is:

var bar = new ProgressBar.Circle(container, {
  color: '#57bf6d',
  // This has to be the same size as the maximum width to
  // prevent clipping
  strokeWidth: 5,
  trailWidth: 10,
  easing: 'easeInOut',
  duration: 1400,
  text: {
    autoStyleContainer: false

  },
  from: { color: '#333', width: 7 },
  to: { color: '#57bf6d', width: 10 },
  // Set default step function for all animate calls
  step: function(state, circle) {
    circle.path.setAttribute('stroke', state.color);
    circle.path.setAttribute('stroke-width', state.width);

    var value = Math.round(circle.value() * 5);
    if (value === 0) {
      circle.setText('');
    } else {
      circle.setText( value +' / 5');
    }

  }
});
bar.text.style.fontFamily = '"Montserrat", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';

var newvalue = 2;
bar.animate( newvalue * 0.2);  // Number from 0.0 to 1.0

Upvotes: 0

Views: 234

Answers (2)

zstate
zstate

Reputation: 2055

Not completely your example (because I can't test), but it gives you an idea of how to pass PHP variables into your javascript function from PHP file.

<!DOCTYPE html>
<html>
<head></head>
<body>

<div id="progress"></div>

<script src="https://cdn.rawgit.com/kimmobrunfeldt/progressbar.js/1.0.1/dist/progressbar.js"></script>

<script>
    function drawMyCircle(state) {
        var bar = new ProgressBar.Circle('#progress', {
            color: '#57bf6d',
            // This has to be the same size as the maximum width to
            // prevent clipping
            strokeWidth: 5,
            trailWidth: 10,
            easing: 'easeInOut',
            duration: 1400,
            text: {
                autoStyleContainer: false

            },
            from: { color: '#333', width: 7 },
            to: { color: '#57bf6d', width: 10 },
            // Set default step function for all animate calls
            step: function(state, circle) {
                circle.path.setAttribute('stroke', state.color);
                circle.path.setAttribute('stroke-width', state.width);

                var value = Math.round(circle.value() * 5);
                if (value === 0) {
                    circle.setText('');
                } else {
                    circle.setText( value +' / 5');
                }

            }
        });
        bar.text.style.fontFamily = '"Montserrat", Helvetica, sans-serif';
        bar.text.style.fontSize = '2rem';

        var newvalue = 2;
        bar.animate( newvalue * 0.2);  // Number from 0.0 to 1.0

        //Alert state for testing
        alert(state);
    }
</script>

<?php

//The state which will be passed to javascript function
$state = 1

?>

<?php if(! empty($state)): ?>
    <!-- Calling javascript function if some PHP conditions are met -->
    <script>drawMyCircle(<?= $state ?>)</script>
<?php endif ?>


</body>
</html>

Upvotes: 0

Ali_k
Ali_k

Reputation: 1661

You can do something like this: 

// Add Shortcode
function get_cart_count() {

/**
 * Check if WooCommerce is active
 **/
if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {
     global $woocommerce;
     ?>
     <script>
        jQuery( document ).ready(function() {
        function DrawCircle() {
        var bar = new ProgressBar.Circle(container, {
          color: '#57bf6d',
          // This has to be the same size as the maximum width to
          // prevent clipping
          strokeWidth: 5,
          trailWidth: 10,
          easing: 'easeInOut',
          duration: 1400,
          text: {
            autoStyleContainer: false

          },
          from: { color: '#333', width: 7 },
          to: { color: '#57bf6d', width: 10 },
          // Set default step function for all animate calls
          step: function(state, circle) {
            circle.path.setAttribute('stroke', state.color);
            circle.path.setAttribute('stroke-width', state.width);

            var value = Math.round(circle.value() * 5);
            if (value === 0) {
              circle.setText('');
            } else {
              circle.setText( value +' / 5');
            }

          }
        });
        bar.text.style.fontFamily = '"Montserrat", Helvetica, sans-serif';
        bar.text.style.fontSize = '2rem';

        var newvalue = 2;
        bar.animate( newvalue * 0.2);  // Number from 0.0 to 1.0
        }

        DrawCircle();
        });
     </script>
     <?php
        echo cat_cart_count( 22 ). "<span> ud af 5 samples </span>";
        echo "<br>Total: ".$woocommerce->cart->get_cart_total();

}
}
add_shortcode( 'cart_count', 'get_cart_count' );

Upvotes: 1

Related Questions