website: MINDBODY Branded Heal Code Manager
SaaS: MINDBODY
website software: WordPress
WordPress plugin: MINDBODY Widget

What Is | MINDBODY Branded Web

MINDBODY offers what they refer to as Branded Web Experience that comes in the form of Healcode. A bit confusing, but in a nutshell, they offer an app that integrates with your website to give a user the opportunity to register for classes or buy packages – all the customer front end options one is used to in MINDBODY, through your own company’s website.

The benefit of using such a tool is that the customer doesn’t get redirected away from your website in order to perform this operation. It happens all through dynamic API calls.

You must first enable Branded Web for MINDBODY, which goes to some office somewhere that then do something magical with it and then enable it for you. Once this is done, you’ll get a user/pass notification that you can now use it. I think if I remember correctly, I had a bit of trouble here because they didn’t really respond right away so I had to send them another reminder message.

Creating a Link | MINDBODY Branded Web

Links create shortcuts from your company website to your MINDBODY software. Using these links via. your website, customers can create and manage their accounts as well as buy whatever it is you sell. When the link is clicked on, it will automatically pop up a shopping cart type screen where the customer can do what they clicked on the link to do.

To create a link, browse to the Branded MINDBODY website, log in, and within the top menu, there is an option called links.

From the drop down menu, there are a few options to choose from, one of which is Buy Now – Pricing Options which will allow further choices of what exact product you would like the link to point towards. For many people, MINDBODY is a way to manage a Studio type business, so this is likely different classes or workshops that you’re offering.

Using the Link in a Website | MINDBODY Branded Web

Once the desired selections are made, scroll down to find the exact code for the link. It will look something like this:

So I have the code, now what?

Once you have that code, it needs to be added to the location you wish to put it on your website. I’m going to go through the process of adding it into a WordPress website, but if you don’t have a WordPress website, that code above can be copied and pasted in place where you’d like it on your website. Note that your website will need to have Javascript support to work the widget.

Deploying a MINDBODY Link in WordPress

MINDBODY has a plugin for WordPress called MINDBODY Widget. Install this, and deployment is very straight forward. You simply copy the code for the link created on the Branded Web MINDBODY site, add new Widget within the plugin on WordPress, then paste the code into Widget Code section shown below.

If you copy and paste the exact, full code you copied from the MINDBODY Branded Web site into the Widget Code field, give the Widget an appropriate name, and click create, you should then have a new screen that shows you all of your created links and their related shortcode.

What you need to do now is copy that Widget Shortcode, above it would be:

 [hc-hmw snippet="Teachers"] 

and paste that into your WordPress website where you want it. Save your page, open the frontend of that page and make sure it looks how you like it.

Hope this helps!

program: Mozilla Thunderbird
add-on: gContactSync
address book: Google/Gmail

About Mozilla Thunderbird

Mozilla Thunderbird is software that acts similar to Microsoft Outlook whereas it allows you to send and receive emails from the desktop of your computer.

As an additional bonus, it also allows you to synchronize various other features of your email address providers (like Gmail or Zoho Mail) like a calendar, or an address book.

gContactSync Add-on for Mozilla Thunderbird

Mozilla Thunderbird has an addon called gContactSync. gContactSync is an add-on that synchronizes contacts between Google (Gmail) and an Address Book in Thunderbird. You can synchronize multiple accounts with multiple address books, and it fully supports regular and hosted Google Accounts.

To install, select Tools -> Add-ons

Search for gContactSync and click install.

Once installed, you will be prompted to restart Thunderbird.

Adding Accounts to gContactSync

In the top menu bar in Thunderbird, you will see a new item called gContactSync. This is what you’ve just installed! To add a new email address contact list, simply click the menu item: gContactSync -> Add Account. Follow the on screen prompts to connect your Google account.

This will likely be your one central address book that you synchronize all your other local (in Thunderbird) addresses to.

Edit Account Synchronization Settings in gContactSync

Once you’ve added the accounts you wish to have synchronized, you’ll be able to choose how you want the synchronization to happen.

What I like to do is have a central account that all others synchronize to. All in one spot that that on my phone I can just have the one address book synchronized. This is accomplished in the ‘Pick the direction for the synchronization‘ option, where one selects ‘Write only‘ (image above shows ‘Complete‘) if you wish to send the contacts to your Google Address Book, and not read all the addresses from the Google Address Book and put them into that local address book – doing this would create a copy on the Google Address Book and the local address book associated with the account selected for editing.

One can also disable synchronization of the address book, or re-enable the address book synchronization if there has been an error that has disabled it.

Hope this helps!

software: WordPress
plugin: Really Simple SSL

The Problem: Browser Error | Your connection to this site is not fully secure

So, you’ve gone through all the troubles to setup an SSL certificate for your website and then you browse to the front end with Google Chrome (the one strong arming this SSL certificate issue) and you get an error:

Your connection to this site is not fully secure. Attackers may be able to see the images you’re looking at and trick you by modifying them.

The Solution: Make Your Site True HTTPS Redirect

One would have thought that simply activating the SSL certificate in the server side of things would have done everything necessary for SSL.

However, SSL needs to be enforced on the website as well for nearly all links (which includes images). This means everything gets forced to be served over HTTPS instead of HTTP and/or is served from secure third party suppliers. Fortunate for us savvy WordPress’ers, there’s a plugin that forces this, aptly named: Really Simple SSL.

Click Install Now -> Activate -> Go ahead, activate SSL!

Once you activate Really Simple SSL in the WordPress Plugin install dashboard, you’ll get a finally step to activate the plugin by finalizing the migration my manually doing some back end things:

If you’re a risk taker, you can just click: Go ahead, activate SSL and see what happens.

If you’re a stickler, you can scan every single file on your website to follow the advice about changing any reference to HTTPS instead of HTTP, and making sure scripts are all from a domain with an SSL certificate.

At first glance, I had a few dozen .css and .js file for just one site that had houndreds of lines of code to scan, so I took the risk and it all worked out OK.

Hope this helps!

software: WordPress
plugin: WooCommerce

Holy that title was a handful to write, but I think it says exactly what we’re going to do here today. This article will make the assumption that you have WordPress installed as well as the plugin WooCommerce.

Add New Product | WooCommerce

To start, you must create a new product. On your Dashboard, left hand menu -> Products -> Add New Product

I will also now assume you know how to edit the Product Description for this product. However, we’re going to now browse to the Product Data, and let WooCommerce know this is a Variable Product, which means that when users are checking out the product, they have a few options to select between.

Defining Product Attributes | WooCommerce

Once you describe this product as a Variable Product, we now need to let WooCommerce know what the variations are! These are known as Product Attributes

I will show you how to do in product definitions of the Attributes, but there is also a broader global attribute definition that is very handy when you have multiple products that will have the same variables (think t-shirt sizes S-M-L-XL for example).

When you click on Add New Custom Product Attribute, it will first ask you for a name, and then ask you to define the attributes. This is fairly straight forward, done much like you would add tags to a Post.

Please note that selected on this page is “Used for variations” and not selected “Visible on the product page”. I know, it’s hard not to want to have that second one selected.

Define the Product Variations | WooCommerce

Once you have saved attributes, now select Variations from the left menu and select Add Variation. This will pop up a new variation that will have a drop down list of the values you defined in the Attributes section.

Managing Stock of a Custom Attribute Variation | WooCommerce

As you can see in the image above, I’ve created the variation of Medium and Large. There are two ways to manage stock of items, one is on the product level and the other is on the variation level. If you expand the variation you’re looking to manage stock on (I’ll do Large for this example) you will see an option to select Manage Stock, and then a value bar open up where you can say how many you have in stock.

Manage Simple Product Stock in WooCommerce

To manage stock of a product that’s not variable, it’s done on the product inventory tab.

Hope this helps!

OS: Amazon Linux / Fedora / Redhad / CentOS
method: SSH
program: PhantomJS
dependency: Python

What is PhantomJS

PhantomJS is what is known as a headless web browser. This means it’s a web browser like Firefox or Google Chrome, without the bulky window that you’ve become very familiar with. This is great for program testing and website testing using scripts. It greatly reduces load time and thus makes testing a breeze.

Recent news shows that Google has decided to release their own headless version of Chrome for their extensive testing they do, and Firefox has been on that bandwagon for a long time now too. Which version you pick I will not discuss here, but this tutorial is for PhantomJS on a Linux computer over SSH.

Installing PhantomJS on Linux Computer over SSH

It was incredibly frustrating for me to find how to install PhantomJS onto my computer since it’s a Linux Amazon distro, which is a stripped down version of Linux meant for running on Amazon’s EC2 cloud computing servers.

However, it uses yum so that gives us a hint that much of the tutorials for CentOS or RedHat will work with this.

 

Build PhantomJS

note: there was a suggestion on PhantomJS webpage that one should just download the package and install it simply, with some dependencies, however, I wasn’t able to get this working so I defaulted to Build.

I am assuming you have Python installed. You’ll need it. (to install it, type: sudo yum install python3.4)

Make sure that git is intalled:

sudo yum install git

Directly from the Build PhantomJS page, we’ll first install the dependencies:

sudo yum -y install gcc gcc-c++ make flex bison gperf ruby \
openssl-devel freetype-devel fontconfig-devel libicu-devel sqlite-devel \
libpng-devel libjpeg-devel

Next, we’re going to add the git and download the source to begin the build, which you type into your SSH window one line at a time, pressing enter at the end of each line:

git clone git://github.com/ariya/phantomjs.git
cd phantomjs
git checkout 2.1.1
git submodule init
git submodule update

python build.py

This last command (build.py) will prompt you with an alert that it will take some time, of which you type Y for yes, continue.

Once it is completed, the executable will be available under the bin subdirectory.

Linking the executable in the Bin SubDirectory

Once this is complete, you’ll still not be able to run PhantomJS unless you ensure that the location of the PhantomJS file is included in the system $PATH. This is the way for the system to know what you mean when you type into the command window: phantomjs.

The bin subdirectory is most likely going to be located in the folder where PhantomJS was installed to, which if you weren’t running sudo for the above, is going to be: /home/user/phantomjs/bin/

To view the directories that are included in your system path, type:

echo $PATH

This will give you a list of locations that are included in the PATH, seperated by a semi-colon ;. There is most likely the dir: /home/user/bin included in this path, so instead of adding a new symbolic link (ln) or adding a new dir to the path, I just copied the phantomjs executable into this bin folder.

note: keep in mind, ‘user’ here is your Linux user, so it may be another name.

If you run the command:

sudo ls -ln /home/user/

and don’t see a /bin folder in there, you’ll have to first create one:

sudo mkdir /home/user/bin/

then you can copy the phantomjs executable to the /bin/ folder:

sudo cp -Rp /home/user/phantomjs/bin/phantomjs /home/user/bin/

make sure it’s been copied over successfully:

sudo ls -la /home/user/bin

which will hopefully show you your phantomjs file!

Test PhantomJS

No point dusting your hands off yet, who knows if it’s really worked?! Time to test.

I’ve taken this code from the PhantomJS Quick Start page, that will check how quickly you can view a page using the PhantomJS headless magic:

var page = require(‘webpage’).create(),
system = require(‘system’),
t, address;

if (system.args.length === 1) {
console.log(‘Usage: loadspeed.js <some URL>’);
phantom.exit();
}

t = Date.now();
address = system.args[1];
page.open(address, function(status) {
if (status !== ‘success’) {
console.log(‘FAIL to load the address’);
} else {
t = Date.now() – t;
console.log(‘Loading ‘ + system.args[1]);
console.log(‘Loading time ‘ + t + ‘ msec’);
}
phantom.exit();
});

To run this, create a new file called loadspeed.js, which we’ll do without sudo permissions:

vi loadspeed.js

Then copy the code above, and right click in the SSH terminal to paste it all in. Then type: ‘:wq’ to save the file and exit.

Now we run this little codelet to see how fast it will load google.com with:

phantomjs loadspeed.js http://www.google.com

So, how quickly did yours load? Mine:

Hope this works!

 

Resources:

• Build | PhantomJS