Call   0208 3131682   Mon-Fri 9am-6pm
Category

Programming

Adding javascript functions to Laravel Mix ( and why you get error Uncaught ReferenceError: function is not defined )

By | Javascript, Laravel, Programming | No Comments

This one had me pulling my hair out the other day. I was using Laravel,  adding a javascript function to the app.js file ( also tried using require in app.js and pulling in my function ). Laravel uses Laravel Mix which is a wrapper for webpack.

Yet with either approach I was getting the javascript error:

Uncaught ReferenceError: testing_helloworld is not defined

It seemed to be working ( had npm run watch , compiling it and doing a view source I could see the function in my javascript app.js file ).

My function source code looked like this:

It seems webpack wraps this in IIFE (see details on mozilla site )

This has the effect of wrapping it in its own scope ( and not in the global scope ).

So to put it in the global scope, so you can call it anywhere, you need to pop the function onto a global such as Window as below:

thanks stack overflow ! 

I’d have read through my app.js file , but it was massive and would have taken me awhile to find this I think ! Hope this helps someone else with Laravel Mix, Webpack and adding your own javascript functions.

 

 

How to override the comments form in a child theme

By | Custom Wordpress Theme Development, PHP, Programming, Theming, Wordpress | One Comment

This is a quick post on how to provide your own comments template in your child theme ( overriding comments.php in your parent theme). You can just as easily use the same code to override comments.php if you aren’t using a child theme.

Todo this you need to you need to use the filter ‘comments_template’ ( see the wordpress codex on this filter here)

 

A handy thing you might sometimes want todo is to have a custom comments template, for various custom post types. If you did want todo this you could just add in an if to encase the returned path and filename. e.g.

 

 

Hope someone finds these snippets for how to override comments.php useful.

 

 

Regex reviser

By | Pattern Matching, Programming, Regular Expressions | No Comments

Every now and then I need to use regex ( and I always forget/confuse what things like * + etc mean ). So this is just a little reviser with a few examples to help me as a reference. Hope you find it useful also. I’ve only covered the basics here as thats usually all I need.

special characters

+ match 1 or more of the previous character

* match 0 or more of the previous character

? previous character is optional

. match any character (except new line)

^ match starting with (also used as the NOT operator with classes eg [^0-9] , this means not a number )

$ match ending with

classes

[a-z] match any lower case char

[A-Z] match any upper case char

[0-9] match any number

examples

 

recently I was working on a site todo with actors and needed to find all the actor profile pages in the database (they had links like this) :

So I wrote a pattern to find them in text:

/ahatalent.localhost\/actor\/[a-z]+/                    match one or more a-z chars after /actor/ , but this broke due to the – alison after alison (as is non a-z char)

/ahatalent.localhost\/actor\/.+/                            I changed to use the wildcard to match 1 or more of any character after the /actor/

I could also have written:

/ahatalent.localhost\/actor\/(.+)/                   this the () just means evaluate this first ( same as in php or any most programming languages)

Example 2 (match a string that has 4 or 5 characters exactly)

Lets say I want to find all the aria-hiddens and eg aria-hidden=”true” or aria-hidden=”false” in the following bit of html:

My pattern could be this:

/aria-hidden=”.{4,5}”/

This means find this string: aria-hidden=” followed by 4 or 5 of any character. So would match both:

  • aria-hidden=”true”
  • aria-hidden=”false”

Example 3

Match strings between a given length.

Lets say I want to find strings that are between 5 and 10 chars in length. Maybe I want to find numbers between 5 and 10 chars in length in some text.

e.g. 12345, 54321, 1234567890 any string like that

my pattern could be:

/[0-9]{5,10}/

 

 

 

 

How to get a users Roles and how to list all WordPress roles in PHP

By | PHP, Programming, Wordpress | One Comment

This code is handy if you want to find out a users role/s. You could expand it and check if a user has a given role or similar.

This code is based on examples from:

https://codex.wordpress.org/Function_Reference/get_userdata

and

https://wordpress.stackexchange.com/questions/1665/getting-a-list-of-currently-available-roles-on-a-wordpress-site

If you did want to check if the user is in a certain group you could do something like this:

 

beginners guide to theming Woocommerce

How to make a WordPress Theme, Woocommerce Compatible from scratch

By | E-commerce, Ecommerce, PHP, Programming, Theming, Woocommerce, Wordpress | 6 Comments

In this post I’ll going to explain how I took a WordPress Bootstrap Theme and made it Woocommerce Compatible. I couldn’t find many good tutorials on this so I’m writing this one, so that it might help someone else.

The Process to make a theme Woocommerce Compatible

I’m going to take the very nice DevDmBootstrap3 theme and make it Woocommerce Compatible.

  1. I created a child theme of DevDmBootstrap3
  2. I added the required stuff needed to that child theme

I’ll skip over 1 (there are plenty tutorials of how to do that out there), and move right onto 2.

Complete code below (can be put in functions.php)

Sidebar Code for Woocommerce (wp-content/themes/THEME/sidebar.php )

The DevDmBootstrap3 theme didn’t have a sidebar.php so I added one to my child theme with the following:

Explanation of Code

Remove the Woocommerce default wrappers (this drops wraps the Woocommerce content in the theme, so everything looks nice), see remove_action lines.

Next, we need to make our own wrappers so Woocommerce can nicely be wrapped into the theme and all looks good. See functions gbb_theme_wrapper_start() and gbb_theme_wrapper_end(), in these functions I wrap the content in the theme (todo this on different themes this will vary slightly).

Roughly speaking the contents of the 2 wrapper functions will be output between the header.php and footer.php files of the theme you are using.  As you can see below I’ve added content to drop in relevant stuff from the DevDmBootstrap3 theme such as the menu e.g. ‘topnav’ .

 

Essentially what I’ve done is created a bootstrap row with 2 columns: column 1 is two thirds width and column 2 is one third width.

Column 1 (col-md-8)

This contains the main Woocommerce content.

Column 2 (col-md-4)

This contains the Woocommerce sidebar.

After that I declare Woocommerce support in the theme, and lastly create a sidebar for the theme (that I can use as my Woocommerce sidebar). The sidebar can be seen in the themes sidebar.php template file (which I created for this theme as it didn’t have one).

And thats about it in nutshell as they say, hope you find this useful.

 

 

 

 

References:

Woocommerce third party theming

Theming Jigoshop , this is the best resource I could find (Jigoshop is a fork of Woocommerce or vice versa)

 

Update 27 June 2016

To Download the latest version of the Woocommerce Compatible theme click here

In this version there is no sidebar on woocommerce pages (except on cart / checkout, this can be switched on/off via devdm-theme-options is needed).

To have a sidebar in the shop / product page etc this can be setup via the wrapper functions see file: make_theme_woocommerce_compatible.php (as in the tutorial above).

 

TODO at a later date I will do a part 2 to this tutorial to  create the rollover cart contents script (that will be put in the header to quickly preview whats in the cart).

 

 

 

Woocommerce – Add an Important Admin Note to the Order Report for Order pickers to view

By | Ecommerce, PHP, Plugins, Programming, Woocommerce, Wordpress | 7 Comments

In this article I’ll show you how to add an Important Admin Note to the Order Report, very useful if there’s some information you want to add for Order pickers to view. For instance maybe the item is fragile you can highlight this to the order picker.

 

Screen Shot 2016-01-14 at 15.21.07

This plugin allows you to enter an Admin note on the order and then displays this note on order report screen.

Screen Shot 2016-01-14 at 15.23.27

If you just want to get the plugin please click here to download the plugin. The rest of this article will run over how to create a plugin like this, so if you have an interest int he programming side of wordpress, this is for you.

Essentially to write this plugin we need todo 3 things:

  1. display the important Order Note input field on Woocommerce edit order screen
  2. save it when needed (i.e. when you save the order)
  3. display the note (in red in the graphic above) on the Woocommerce Order Report

So lets dive in:

Display the important Order Note input field on Woocommerce edit order screen

To display the order note field we need to do something like this (below). Print out the html for the text input field and add some explanatory note for the admin user.

 

Save it when needed (i.e. when you save the order)

In the code below I’m saving the Import Order Note, and before doing so checking that its valid.

 

finally

Display the note (in red in the graphic above) on the Woocommerce Order Report

In this function I use the relevant hook to drop my Import Order Note into the Order Report in the correct place.

 

I hope you found that interesting, if you need any help with Programming WordPress or Woocommerce please get in touch.