Display all products in woocommerce admin

Woocommerce is good start for ecommerce beginners, easy to install and get start with, I was using CSV importer to import thousands of SKU however I realised that it will not update the current tax that you have. So in order to fix that we need to update the tax again in each product, you can do quickly using bulk action, and click Edit

Screen Shot 2015-08-30 at 2.15.42 pm

 

By default woocommerce only allow you to show 20 products per page, you can open up the screen option button at the top right, and change the number of items per page, easy fix.

Screen Shot 2015-08-30 at 2.18.31 pm

 

New Meteor launch page package

I wrote a quick launch for meteor, that anyone can quickly add a launch page on meteor, you can also change the contents from as the options.


https://github.com/maxlibin/watcfylaunch

watcfy

Add active state on meteor.js menu

Imaging you have already created a menu in meteor js framework, somewhere in your header, something like this

1
2
3
4
5
<ul>
    <li><a href="/home">Home</a></li>
    <li><a href="/about-us">About Us</a></li>
    <li><a href="/contact-us">Contact Us</a></li>
</ul>

SO you want to make the menu to be active when you are on current route, one of the simple solution is to create a template helper, Register a template helper by adding a file on client folder called helper.js

then inside helper.js register a template helper (Template.registerHelper), which previously called UI.registerHelper.

1
2
3
4
5
6
7
  Template.registerHelper('isActive', function(){ // take in some params to determine the stats
    // assume that you are using iron-router, if not please install "meteor install iron:router"
    var currentRoute = Router.current().route.getName();
    if(currentRoute == parms){
      return "current";
    }
  })

with this helper, you can add to your template.

1
2
3
4
5
<ul>
    <li class="{{isActive "home"}}"><a href="/home">Home</a></li> // Notice the home as argument which you defined on your iron router name.
    <li class="{{isActive "about-us"}}"><a href="/about-us">About Us</a></li>
    <li class="{{isActive "contact-us"}}"><a href="/contact-us">Contact Us</a></li>
</ul>

now your li class will return active when you are on that page/route.

Becareful with jquery on or bind event.

When you do jQuery and sometime you would bind some functions on an event outside appended DOM elements, and rerun the function again like this:

1
2
3
4
5
6
7
8
9
10
11
12
<ul>
    <li>
        <p>test</p>
    </li>
    <li>
        <p>test</p>
    </li>
    <li>
        <p>test</p>
    </li>
</ul>
<button></button>

for example we want to change the text to something else when we click on each of the li, maybe lets change to “run test …”;

1
2
3
4
5
6
function changeText(){
  $(this).find('p').text("run test");
}

$('li').on('click', changeText);
//$('li').bind('click', changeText);

now you want append a new li and allow function on that appended li like this:

1
2
3
4
$('button').click(function(){
  $('ul').append('<li><p>New text</p></li>');
  $('li').on('click', changeText);
})

this situation it works well, however what actually happened is that you create the function two times on each event (‘click’), if you click button again second time, you create three function for each li click, and so on…
so what you want to do is off the click first, then on again, like this.

1
2
3
4
5
$('button').click(function(){
  $('li').off('click');
  $('ul').append('<li><p>New text</p></li>');
  $('li').on('click', changeText);
})

let me know if you have anything to comment below.

Meteor Async from server to client

Sometime you want to do async call from api and make call or reactive on the client side, so how do you do it?
first create a method on server side, I would always recommend using methods rather allow / denied from client side, lets give a method name asyncMethods

1
2
3
4
5
6
7
8
9
10
11
12
13
// Server side
Meteor.methods({
  asyncMethods: function(){
    var url = "http://example.net/api/" // your api url
    HTTP.get(url, function(err, res){
      if(err){
        throw new Meteor.error('apiError', err.reason);
      } else {
        console.log(res);
      }
    })
  }
})

Ok now run this client side method call

1
2
3
4
// Client side
Meteor.call('asyncMethods', function(err, res){
  console.log(res);
})

you will notice 2 things, on your console.log for client will become undefined, and on server side log you properly see some results.
so lets say you want to return result after api was called, meteor provided a very helpful method call Meteor.wrapAsync(), which basically returns your async call to synchronous call, so you could call it from client side, change your server code to this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Server side
Meteor.methods({
  asyncMethods: function(){
    var url = "http://example.net/api/" // your api url
   
    function asyncCall(){
      HTTP.get(url, function(err, res){
        if(err){
          throw new Meteor.error('apiError', err.reason);
        } else {
          return res;
        }
      })
    }
    var syncCall = Meteor.wrapAsync(asyncCall);
    var res = syncCall();
   
    // now you can return the result to client.
    return res;
  }
})

Meteor include external javascript or other files

When I first start meteor i found it hard to load external libraries like javascript files, especially when you bought some templates somewhere, which contains more than 5 javascript files and 4 css files.

A few solution I tired was using some external library loader, such as IRLibLoader, its pretty easy to use inside your router, call this method

1
IRLibLoader.load('/js/whatever.js')

will this seems to work fine at first, when first load its working the javascript initialised, however when i refresh and or navigate around and back again its not working, the script inside this does not initialed.

So the better solution to load this when page rendered, in template js file,

1
2
3
4
5
Template.templateName.rendered= function(){

$('body').append('&lt;script src="/js/whatever.js"&gt;');

}

Meteor 1.0++ seems to able to put external tags inside the body tag, you can just include the external libraries into template tag

Gulp error tracking

If you are using Gulp for you workflow, there might be chance when you have some error, gulp will stop, and you rerun gulp again, wow thats really kills your productivity, especially sometime you don’t see the reflection on your browser and you seems can’t figure out whats wrong until you go check your terminal.

there is a gulp plugin called gulp-plumber helps when you do not want to break your gulp and print the error on console.

its really easy, just install and include in your gulp pipe like this.
First, install gulp-plumber as a development dependency:

1
npm install --save-dev gulp-plumber

Then, add it to you gulpfile.js:

1
2
3
4
5
6
7
var plumber = require('gulp-plumber');
var coffee = require('gulp-coffee');

gulp.src('./src/*.ext')
    .pipe(plumber())
    .pipe(coffee())
    .pipe(gulp.dest('./dist'));

Remove sudo meteor

Recently when I do some demo to a friend about meteor app I built, so I start my app by doing Sudo Meteor, and he asked me, Why should I do sudo?, and I said I don’t know, then he show me an website that seems to fix this problem by doing Repairing Disk Permission on disk Utility, but turns out it does not work for me, so when I do meteor, I saw some error message like this,

Read More

Styling your console log

Found an interesting way from an Chinese website to log the console, normally we do a console.log like this:

1
console.log('some string')

normally this will just return some boring string “some string” black color, tiny text. What if we want to log multiple results and track which is which etc…
sure we could use separator or other ways, normally I will like this this.

1
console.log('some string | another string')

this is still boring.
I found this useful method to change this boring stuff, with little trick, we can add css style to the strings.

1
console.log('%c some string', 'color:red')

you might notice that I added %c with this we could append the styles on the second parameter to the string next to %c, you will see a text with red color, of course we could add more styles to it, like this:

1
console.log('%c some string', 'color:red; font-size:20px; font-weight:bold;')

ok thats nicer now, and we could also separate different strings into different styles.

1
console.log('%c some string %c another string', 'color:red; font-size:20px; font-weight:bold;', 'color:green; font-size:20px;')

Hope you enjoy this

Meteor.js SEO

One of the most important thing in web development which is SEO, meteor.js a new but powerful Node.js framework for web, been using it for a while and really love this framework, I built an application Influencer marketing platform, to watch any ecommerce website’s product, when price changed, it will alert you through email.¬† Influencer marketing platform, full automated.

Read More
Page 2 of 912345...Last »