0

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
asked Nov 14, 2017 at 21:57
7
  • 1
    <script> function(state, circle) </script>??? what do you expect this to do? it appears to be trying to call a function called function but there is no function called function, and there can't be a function called function Commented Nov 14, 2017 at 21:59
  • Nothing.. I was trying to somehow call the circle but just don't know how to call it in the php. Commented Nov 14, 2017 at 22:01
  • @NiclasJohansen PHP is a server side language. It doesn't make any sense to "call" a JavaScript function. Commented Nov 14, 2017 at 22:02
  • Ahh okay. But if i need the javascript in the php function how to do this? Commented Nov 14, 2017 at 22:04
  • What i want to accomplish is adding the circle i've made with Javascript. Commented Nov 14, 2017 at 22:15

2 Answers 2

1

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' );
answered Nov 14, 2017 at 22:49
Sign up to request clarification or add additional context in comments.

Comments

0

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>
answered Nov 14, 2017 at 22:53

Comments

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.