Zao WordPress web development, Zao WordPress team, WordPress web development, WordPress web developers,

Zao: A Look Back at 2017

Last year, we celebrated a huge 2016 with excitement and anticipation for what the future would bring.

We’re happy and humbled to report that 2017 didn’t disappoint. We added a Project Manager to our team, we posted some rad content, worked on some incredible projects, and learned a lot along the way.

Here are the highlights of what went down in Zao’s 2017:

Continue Reading

#WooConf 2017 Recap

I had the opportunity to attend WooConf 2017 in Seattle last week. Thankfully, Seattle is just a stone’s throw from my backyard (a three-hour-drive stone’s throw, but a stone’s throw nonetheless). After a brief road-trip up I-5, getting settled into an Airbnb with some random stranger, and getting a good night’s rest, we were ready to rock and roll.

Continue Reading

Using the WooCommerce API with wp-api.js

As of WordPress 4.7, we’ve had a really fantastic, fully featured REST API in WordPress. It is relatively well-known that the infrastructure for the API was introduced in WordPress 4.4, with the content endpoints being introduced in 4.7.

What is somewhat less well-known is that 4.7 also shipped with a Backbone.js client you can use to interface with the core API.  It’s super simple to enqueue:

wp_enqueue_script( 'wp-api' );

Using it for core objects is pretty straight-forward:

var post - new wp.api.models.Post( { id : 2 } );
post.fetch();
alert( post.attributes.title.rendered ); // Renders "rendered" title of post.

But what if you want to use it with non-core objects that are in custom namespaces, or maybe not even on your own site? Thinking that you’ll probably have to write some PHP, maybe your own library or framework for interfacing with these, and your own JS models? Ugh, amirite?

Good news! None of that is necessary.

Continue Reading

Qpractice case study, Zao client spotlight, Zao WordPress web development, Zao WordPress eCommerce development, Zao WordPress plugin development, custom WordPress plugin,

Zao Client Spotlight: Our Collaboration with Qpractice

One of Zao’s goals includes taking on complex projects that require in-depth strategy. We don’t want to merely solve problems, but add value to the technology our clients are using. We take a boy scout approach to the work we do: Always leave the campground cleaner than we found it.

This means not only cleaning up what messes we may find when we arrive, but ensuring our clients have sustainable technology that benefits them in the future.

We recently had the pleasure of completing an initial phase with Qpractice, a website built to help interior designers prepare for the NCIDQ exam. So far it has been a complex, but extremely exciting collaboration with Lisa League, designer and founder of Qpractice. We’re here to share what we’ve done so far, and be sure to check out our interview with Lisa to hear her thoughts on working with Zao!

What Qpractice Does

The NCIDQ exam is an interior design licensing and certification test offered in the US and Canada. According to Lisa, it tends to be commercially oriented, with a focus on health, safety, and welfare. It tests designers on their understanding of necessary codes and regulations, making sure they can demonstrate their understanding of the non-structural part of the building (like plumbing, electrical, mechanical systems, etc.).

The exam tests knowledge interior designers should have accumulated both during their education and from their work experience. The NCIDQ exam can be a crucial element in an interior designer’s career trajectory; designers often seek out the exam to move up to a senior design position or land higher profile, higher paying projects.

Qpractice aims to help interior designers prepare for the NCIDQ exam by providing extensive opportunities for trial, error, and education. The Qpractice site provides practice tests that in many ways mirror the real NCIDQ exam, allowing designers to become familiar with the format and feel confident when facing the exam live.

Zao’s work on Qpractice

Like any ongoing project on a live, thriving site, as we worked through the initial phase, the scope was extended to cover new and emerging (and sometimes urgent) issues and inconveniences. Zao updated much of Qpractice’s existing system, as well as revamped the entire theme, added functionality, and created several plugins to better serve Qpractice’s needs. The NCIDQ exam also recently added a new quiz format, and Qpractice needed to have that created for test takers continued comfort and familiarity with the exam.

The discovery process

As we do with most of our clients, we did a significant code and performance audit before diving in. JT talked about how vital the discovery process is before, and it’s a staple in the way we approach projects. For Qpractice, we made recommendations for custom features that can be added, as well as data migrations from one plugin to another, and more.

During discovery, we don’t always recommend changes. Sometimes we recommend staying with the current solution if it’s best serving our client’s needs. We believe this is just as important as adding the new and shiny features.

Qpractice was set up using Sensei and WooCommerce Memberships, and we suggested that they continue to do so. From our initial discovery document:

  • Sensei – Given the high level of integration with custom functionality plugins and the purpose Sensei provides on your site, we’d recommend keeping it as your quiz management solution. Developing a custom quiz management solution would offer minimal long-term benefit and incur a high short-term cost.
  • WooCommerce Memberships – Based on our discussions with you, the most recent changes to WooCommerce that have resolved outstanding issues, and the cost of switching membership platforms, we recommend sticking with WooCommerce Memberships.

We aren’t kidding when we say Zao is working on behalf of our clients at every turn.

Once the discovery document was sent and we got the approval from Lisa, we went straight to work.

Order up: adjusting Genesis and making the menu

Lisa wanted to make some adjustments and add new elements to the Qpractice theme, but wanted to stay on Genesis.

One of the big pieces that took a lot of time and effort was the way the menu functions. We overhauled the entire menu system in terms of functionality and mobile responsiveness. It’s a specific implementation that works responsibly, as well as opens and closes according to different user actions. When logged in, Qpractice users have access to an additional menu with custom functionality as well.

The entire site is now device agnostic, which is particularly important for appealing to new users and making it possible for existing users to access information like the study guide, grades, and more, with ease.

Creating seamless integrations

On Qpractice, these three tools are integrated to offer the most to users, as well as make the business easy to run. Sensei powers the Qpractice learning and quiz systems, WooCommerce Memberships controls access to those systems, and WooCommerce powers the eCommerce component of the site.

Between these three tools, there were lots of bits and pieces that needed cleaning up. When one would update, it would often introduce a bug to one of the others, and it would impact the entire setup negatively. Zao’s first step in improving the Qpractice site was obvious: we triaged a bunch of bugs popping up in the integrations between Sensei, WooCommerce, and WooCommerce Memberships, as well as submitting several pull requests against their respective repos.

Side note: This is where retainers become necessary. Plugin teams have their technical goals in mind when they’re building their product, but they do not have your specific ecosystem in mind when they release. That’s why paying to have a technical partner to bridge the gap between the technology and your specific needs is so valuable.

Simple, but lovely features

WooCommerce Product Bundles price shortcodes

Qpractice uses WooCommerce’s Product Bundles, but there wasn’t a good way to output the price for the each product in the bundles and show the user what each item cost and just how much they were saving. The shortcode is super easy to use (of course), and makes solving this problem extremely simple.

WooCommerce Product Bundles, WooCommerce WordPress websites, WooCommerce development, WordPress web development

Custom message bar

Zao added a way for Qpractice to flash a message bar at the top of the site. We wanted it to integrate nicely with the Qpractice menu and show up in certain scenarios set by the admin. Although there are plugins that offer this kind of functionality, most of them only create a message bar that shows universally across the site, and we wanted to give Qpractice more control over this component of the site. The message can be shown across the site entirely, or the site admin can toggle it to show exclusively to logged out users, which is particularly useful as a promotional tool.

All the WordPress plugins

As mentioned, the Qpractice site is using Sensei, WooCommerce Memberships, and WooCommerce.

Additionally, we migrated Qpractice from another affiliate plugin to AffiliateWP, built by Pippin’s Plugins. They create great products and support AffiliateWP incredibly well; we felt confident that AffiliateWP would put Qpractice’s site (and affiliate program) in good hands.

Once again, we make sure our clients are gaining the most value from their technology, which means setting them up with what we believe to be the best products, and there’s no doubt that AffiliateWP falls into that category.

Custom WordPress plugin development

Qpractice had some specific needs and problems to resolve that existing plugins couldn’t address, so we did one of the things we do best: we built them.

We encourage all of our clients to open source the plugins we create for them, and Lisa was especially enthusiastic about creating products that are open sourced and available to the public. Not all of them are open sourced just yet, but many of them are.

Bulk Boot for Sensei

The way that Sensei is built means that users are signed up indefinitely unless they remove themselves, but this presented a problem for Qpractice, which operates on a seasonal schedule. At the end of every season, they needed to be able to remove access to the courses and encourage users to sign up for the next season, should they want to do so.

We discussed the fact that booting learners from a course is actually a pretty intense operation performance-wise and that it needed to be an asynchronous operation. As a result, we decided the best course of action was to add an optional turtle to help the user’s anxiety levels.

Bulk Boot for Sensei, Qpractice, Bulk Boot WordPress plugin, WordPress plugin development, custom WordPress plugin development

We wrote Bulk Boot for Sensei to give Qpractice the ability to bulk remove all learners from a specific course at the end of the season. Now, tidying up user access in Sensei is super easy.

Sensei Advanced Quizzes

The Qpractice site already had a plugin that extends Sensei, adding additional functionality, and we built upon that to add more useful tools in the admin area.

One of the most frustrating things about Sensei is that it dumps all questions/question-types in one big listing in the admin without faceted filters for drilling down to certain types of questions. Qpractice has a variety of question types that act a certain way, and Lisa had no way to search by the group. We created a tool that adds columns and filters to allow advanced sorting so she has a much easier time of filtering.

WordPress plugins, WordPress WooCommerce Sensei, using WooCommerce Sensei, WordPress eCommerce development, WordPress educational development,

WooCommerce Custom Product Redirects

Zao created a custom plugin called WooCommerce Custom Product Redirects. This plugin is not only a great sales and customer support tool, but it allows the Qpractice site to direct their users to information they may find crucial for using the products they’re purchasing.

With WooCommerce Custom Product Redirects, if a user has a product in their cart and makes a purchase, they will be redirected to relevant content set by the site admin. If the site admin has a relevant tutorial to the product being purchased, they may decide to custom redirect to that tutorial for the customer’s benefit. If there are two products that have URLs, the site admin can define priority, ensuring that their customers get any and all pertinent information automatically delivered to them post-purchase.

WooCommerce VitalSource Redemption Codes

Qpractice offers an e-book that is delivered by a third party, but purchased through the Qpractice site. Qpractice needed a way to keep an inventory of codes and her stock in WooCommerce without spending a lot of time keeping track of it manually.

With WooCommerce VitalSource Redemption Codes, every time a user purchases a product stored on a third party site, it associates one of the codes (in Qpractice’s case, a free code for the e-book) with that user so they can find the code on their receipt, and so inventory is neatly kept in WooCommerce.

This plugin was written specific to VitalSource, a Qpractice partner. We will likely adjust it and make it open source soon–stay tuned!

Zao Sensei Media Attachments

We created an alternative to a WooCommerce plugin that allows the site admin to associate media items with a lesson and ensures the media shows up in the resources list for associated courses. Zao Sensei Media Attachments now serves the same function, but uses CMB2 to create a better user interface. CMB2 simplifies the admin fields and provides more filters for modification.

WordPress plugins, Zao WordPress plugins, WordPress plugin development, Qpractice, working with Qpractice, e-commerce website development, eCommerce website development, hire a developer, looking for an eCommerce developer, WordPress eCommerce,

CMB2 Snippet Library: Associate WordPress Menu Field

We also contributed one of the features back to the CMB2 code snippet library. With this feature, Qpractice can select or create a curated WordPress custom menu to associate with a quiz or lesson and that menu will be displayed by placing the “Associated Post Menu” in the corresponding sidebar widget area.


Working with Qpractice has been an absolute delight. Lisa is a creative powerhouse, suggesting all kinds of ideas that we had the opportunity to create into a tangible, functional reality. We’re on the next phase of the project, and we’re all too excited to see what comes next. We’ll keep you posted!

Check back later this week for an interview with Lisa sharing her perspective of the project. 

WP eCommerce: How to add a ZIP Code Lookup to your Checkout

We get loads of requests for customizations to different eCommerce platforms on WordPress.  One that we receive on a super regular basis is for the ability to auto-populate the city, state and country just by entering the ZIP Code.  This is a very US-centric feature, though it could be ported to any country.  The concept really favors those businesses that sell primarily within their own country.  That said, this segment comprises a very large portion of the eCommerce space.

So that said – how would you do this?  It’s actually pretty easy.  From a UX standpoint, you want to be sure that you’re showing the ZIP Code before you show the other fields – otherwise, it sort of defeats the purpose.  WP eCommerce makes this super easy, but every platform is different.
set-zip

Next, you’ll want to connect with a ZIP Code API of your choice.  There are myriad different APIs to choose from, pick your favorite or whatever fits best for your purposes.  For today, I’m going to use Zippopotamus. What I like about that service is that it actually works in over 60 different countries, not just the US, even though that’s our focus for today.

A user experience that I’ve come to really enjoy is the ability to fill in a ZIP Code, and then have it auto-fill and auto-show the city, state and country.  The constant refrain against trying to be smart about ZIP Codes is “What if you get it wrong? What about ZIP Codes that cover multiple cities?  What if the API fails?”

A simple UX is the key to all of these edge cases.  Regardless of success or failure, simply show the extra fields once a response is received – or if none can be received at all.  If it happens to return nothing, or the wrong thing, the user can simply fill in the right thing.  But it’s a great improvement for the vast majority of visitors to your site.  Now, for some code.

The code above is pretty well self-contained and self-explanatory. It’s not the prettiest thing ever, or the most complete, but it gets the job done. In essence, we’re simply adding three functions.  One to show the city/state/country, one to hide it, and one to ping the API.  We’re not doing any clever error handling.  We’re simply pinging the API, and showing all the fields, no matter what.  If we get a successful response, we’re filling in the fields with that information.

You’ll notice, if you’re familiar with WP eCommerce, that we’re not targeting any fields that exist in the stable version that exists in the wild today. We have a phenomenal new release coming out, version 4.0.  It includes what I believe is the most usable checkout experience in any eCommerce platform for WordPress.  We’re targeting elements within that new theme engine.  Be sure to check that out.

With those ~35 lines of code, we have the experience you witness below.  A totally usable

zip

 

WP eCommerce: How to Enable the Test Gateway for Admins Only

From time to time, I find myself needing to do test purchasing on a live site. Generally speaking, it’s because there is something occurring outside the payment flow on a live site that cannot be replicated locally. The following code ensures that the test gateway is enabled only for logged-in admin users. Hope it’s helpful!

add_filter( 'option_custom_gateway_options', function( $gateways ) {

    if ( current_user_can( 'manage_options' ) && ! in_array( 'wpsc_merchant_testmode', $gateways ) ) {
        $gateways[] = 'wpsc_merchant_testmode';
    }

    return $gateways;
} );

How To: Remove Shipping Calculator from WP eCommerce

From time to time, we get people asking how they can remove the Shipping Calculator feature in WP eCommerce.  You’ve probably come across these before: before calculating shipping, you have to enter your ZIP code or state or something like that.  Pretty standard fare.

The problem, of course, is that it can be an unnecessary extra step, causing friction in the checkout process.  For example, it’s totally unnecessary if you only ship to one country and ship with a flat rate to that country, it makes no sense to have a shipping calculator.   So – let’s dig in!

If you haven’t moved your shopping cart template file to your active theme folder, now’s the time to do that :)  In a normal installation, you’ll have a shipping calculator that looks something like this:

shipping-calculator

Step 1: Presentation

The first step is removing the calculator from your theme.  There’s not a single chunk of code to remove, but a few.  Thankfully, they’re all right around the same place.

  1. Remove the “Calculate Shipping Price” header.
  2. Remove built-in error/notice conditions, country and ZIP drop-downs.

At this point, the shipping calculator should be visibly absent.  Woohoo!

Step 2: Functional Logic

Even though we’re looking good now, we’re not working good.  That’s a problem.  The first thing you’ll notice is that when you hit purchase, you get scrolled back to the top of the page with a message that says you need to calculate shipping.  While we have filters that control whether or not you should force that sliding UX, we have even better filters to control whether or not to force a recalculation.  The following filter in a plugin

add_filter( 'wpsc_needs_shipping_recalc', '__return_false' );

This gets us one step closer, but astute observers may note that shipping quotes no longer show up.  This is because none are calculated.  The following code ensures a rate is calculated:

add_action( 'template_redirect', function() {
    if ( is_page( wpsc_get_the_post_id_by_shortcode( '[checkout]' ) ) ) {
        wpsc_update_location();
    }
} );

If you’re only using a single shipping method with a single rate (as most folks who request this seem to be), you’re all set.  The steps above are all you need to do to kill off the shipping calculator for good :)

If you’re using multiple shipping methods?  Well, that gets trickier, and depends on which methods you’re using.  If this is an issue you’re facing, I’d be more than happy to chat with you about it.

Give me a call

How To: Set the Default Shipping Country in WP eCommerce

There are a few really great scenarios to set a default shipping country for your WP eCommerce shop.  In a past iteration, we actually defaulted to the base country and region of the shop itself.  There was some decent, though flawed and short-sighted logic behind this.  We eventually reverted that behavior in favor of requiring users to choose their own shipping location.

While this behavior is more intuitive, from time to time, we do get users asking for the ability to default to a specific country.  While the previous behavior is sometimes requested, other scenarios might include defaulting to the country where you receive most of your orders from.  This could vary wildly depending on season or product line.  The code below is a helpful start to defaulting to any country you desire.  Note: The filter being used should return a country’s ISO code.

You’ll notice we’re using the variable filter for the visitor meta API that is specific to the key being called.  There is also the more generic wpsc_get_visitor_meta filter, but with the variable filter, we don’t need to check for the key being called.

Boom!

How To: Sort Variations in WP eCommerce

One of the neat things about WP e-Commerce is the vast array of filters and actions available.  I had a client ask me this week for a custom sorting routine for their variations on the front-end.

For anyone unaware – variations are essentially different attributes of a product.  If the product were a T-shirt, for example, variations would be Size (with Small, Medium and Large) as options or Color (Black, Red, Green), etc.

The code below would allow you to sort each group (and options within that group) according to a custom sorting algorithm.  A pretty handy little code snippet!

// This compares the names of the variation term object.
function zao_compare_variations( $a, $b ) {
    return strcmp( $a->name, $b->name );
}

// This pops off the first option (which is always --Please Select--)
// Then it sorts the remaining actual options with our custom sort function
// Finally, it pops the first option back on and returns the $variations array.
function zao_resort_variations( $variations, $groups, $product_id ) {

    foreach ( $variations as $group => $variants ) {

        $first = array_shift( $variants );

        usort( $variants, 'zao_compare_variations' );

        array_unshift( $variants, $first );

        $variations[ $group ] = $variants;
    }

    return $variations;
}

add_filter( 'wpsc_all_associated_variations', 'zao_resort_variations', 10, 3 );