Kselax.ru

Hacker Kselax – the best hacker in the world

Menu
  • Blog
  • Contacts
  • wp plugin generator
  • English
    • Русский
Menu

wordpress sclerotic

Posted on 21 June, 201922 June, 2019 by admin

How to add react to the wordpress

WordPress has a wp-element object. It is a react you can include by using next code

1
2
3
4
5
6
7
8
wp_enqueue_script(
  'main',
  // plugin_dir_url(__FILE__).'js/main.js',
  plugin_dir_url(__FILE__).'js/main.js',
  ['wp-element', 'babel'],
  time(), // Change this to null for production
  true
);

Now you can use react by using an object wp.element it has a render() function and others here is code of main file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
// import Test from 'components/Test.js'
 
const Hello = () => <p>Hello World</p>;
 
class Form extends wp.element.Component {
  render() {
    return (
      <div>
        <div>
          <h1>Enter Your Text</h1>
        </div>
        <div>
          <input
            placeholder="Enter Your Text"
          />
        </div>
 
        <div>
          <div>
            <label>Choose Font</label>
          </div>
          <div>
            <input />
          </div>
        </div>
 
        <div>
          <div>
            <label>Paint Coverage</label>
          </div>
          <div>
            <select>
              <option>Choose Paint Coverage...</option>
              <option>Unpainted</option>
              <option>WallMount</option>
              <option>Standing</option>
            </select>
          </div>
        </div>
 
        <div>
          <div>
            Approx.Width:
          </div>
          <div>
            Enter text and select a Height to see Approx. Width.
          </div>
        </div>
 
        <div>
          Total Letter Count: 0
        </div>
 
        <div>
          <input
            type="checkbox"
          />
        </div>
 
        <div>
          <div>Starting At: $8.19</div>
          <div>Qty: <input /></div>
          <div><button type="submit" name="add-to-cart" value="12" class="single_add_to_cart_button button alt">Add to cart</button></div>
        </div>
 
        <div class="pr-field-wrap">
          <label for="pr-field">Your name:</label>
          <input type="text" name='pr-field' id='pr-field' value='' />
        </div>
 
      </div>
    )
  }
}
 
 
let root = document.getElementById("root")
 
if (root) {
  wp.element.render(<Form />, document.getElementById("root") );
}

It won’t work without including babel

to include babel use

1
2
3
4
5
6
7
wp_enqueue_script(
  'babel',
  plugin_dir_url(__FILE__).'js/babel.min.js',
  ['wp-element'],
  time(), // Change this to null for production
  true
);

and we have to replace “<script type=’text/javascript‘” on “<script type=’text/babel‘”. We are using

1
2
3
4
5
6
7
8
9
function md_modify_jsx_tag( $tag, $handle, $src ) {
  // Check that this is output of JSX file
  if ( 'main' == $handle ) {
    $tag = str_replace( "<script type='text/javascript'", "<script type='text/babel'", $tag );
  }
 
  return $tag;
}
add_filter( 'script_loader_tag', 'md_modify_jsx_tag', 10, 3 );

That’s it Now you can write JSX code.

Remember this is a not production build and will work slow. To make a production main.js have to transform es6 and JSX into es5 by using babel and save the code to the main.js file. A lot better use webpack and immediately bundle files and modules to the main.js

 

How to pass a json file  from php to JavaScript react app

We need to pass a config.json file to the react app. To do this we have to use a wp_localize_script function. After including a react script  we call this function with the passed parameters like in the code below

1
2
3
4
5
6
7
8
9
10
11
12
13
wp_enqueue_script(
  'main',
  plugin_dir_url(__FILE__).'js/app1/dist/app1.js',
  null,
  time(), // Change this to null for production
  true
);
 
$dataToBePassed = array(
    'home'            => get_stylesheet_directory_uri(),
    'pleaseWaitLabel' => __( 'Please wait...', 'default' )
);
wp_localize_script( 'main', 'php_vars', $dataToBePassed );

It will add a variables initialization before the main script wp passing variables to the frontend

wp passing variables to the frontend
wp passing variables to the frontend

Now we can reach them from a React Component by window.php_vars

1
2
3
4
5
6
7
class App extends React.Component {
  constructor(props) {
    super(props)
    // alert(window.php_vars)
    console.log('window.php_var = ', window.php_vars)
  }
//...

That’s it

 

How to remove quantity in woocommerce

I added my own react app by using the hook woocommerce_before_add_to_cart_button and after this app appeared quantity and the button, so I want to remove this because my react app were using its own quantity. To remove we need to add in the componentDidMount() the code

1
2
3
4
5
6
componentDidMount() {
  let quantity = document.querySelector('input[id*="quantity"]')
  if (quantity) {
    quantity.outerHTML=''
  }
}

That’s it

 

the end

1 thought on “wordpress sclerotic”

  1. Edro says:
    18 July, 2019 at 02:08

    And your contact form is not working!

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Categories

  • bash (1)
  • English (9)
  • JavaScript (4)
  • node.js (22)
  • photoshop (1)
  • php (3)
  • React (9)
  • sclerotic (6)
  • Ubuntu (10)
  • Uncategorized (13)
  • Wordpress (1)

Tags

Ajax apache2 automation bash chrome-extension command line editor ejs email English English-grammar framework functions git graphql handlebars hybrid app installation javascript js linux newbie node.js node.js javascript nodemailer npm objects Performance php phpmyadmin playonlinux promise rabbitmq React react-router redis reverse-proxy session shell socket.io sublime text 3 time zones ubuntu unity webpack

Recent Comments

  • damien on How to install npm and nodejs the latest versions on ubuntu
  • Cam on How to install npm and nodejs the latest versions on ubuntu
  • Pierre on socket.io with apache as a reverse proxy on the CentOS
  • admin on How to use react-router with a few languages
  • admin on How to install npm and nodejs the latest versions on ubuntu
©2021 Kselax.ru Theme by ThemeGiant