funkhaus / wp-shopify

A WordPress plugin to easily integrate Shopify into any site.

wp-shopify (WPS) is a Vuepress plugin that integrates the Shopify Storefront API with Vuepress for fast and powerful store construction.

You'll need both this and the Vue plugin to use WP-Shopify.

Table of Contents

1. Installation
   1. Dividing Responsibilities
2. Syncing
   1. Collections
3. Front-End
4. Advanced
   1. Permalink Structure Slug
   2. Convenience Functions
      1. General
      2. Single WPS-Product

Installation

1. Set up Shopify:

   1. Set up a Shopify store and create a new private app.

      1. Go to your Shopify admin panel (your-store.myshopify.com/admin).
      2. Click "Manage Private Apps" at the bottom of the screen. You'll end up on your-store.myshopify.com/admin/apps/private.
      3. Click "Create a new private app."
      4. Keep the default API permissions and make sure Allow this app to access your storefront data using the Storefront API at the bottom of the screen is checked.
      5. Hit Save to continue.

   2. Note the Storefront Token on the bottom of the next page:

   

   This page is accessible any time from your-store.myshopify.com/admin/apps/private.

2. Set up Vuepress:

   1. Install Vuepress.
   2. Download this repo and drop it into your plugins folder. Enable it through your plugin settings and then navigate to Settings > WP-Shopify.
   3. Put your Shopify domain (ie your-store.myshopify.com) and Storefront Token from earlier into the WPS settings.
   4. Save your changes, then click Refresh Products. Your products and collections will auto-populate from your Shopify store.

Dividing Responsibilities

WP-Shopify assumes that you'll be splitting up your shop's responsibilities.

• Shopify will be the source of truth for:

  • Product names
  • Variants
  • Prices
  • Availability
  • Collections
  • Vendors

• WordPress will be the source of truth for:

  • Product descriptions
  • Images
  • Other metadata

Syncing

TL;DR Go to "Settings -> WP-Shopify" and hit "Refresh Products" whenever you want to sync your shop's products.

More detail:

Your Wordpress site will now be synced to your Shopify Products and Collections. Products are stored as a custom post type called wps-product.

The product ID meta field (stored under the key _wshop_product_id on a wps-product) connects a product to its data on Shopify.

The only times you need to manually refresh your store (Settings > WP-Shopify > Refresh Products) are when:

• You want to add or remove Products from your Wordpress site after setting them up on Shopify, or
• You want to update your Collections information.

Basically, it's a good rule of thumb to refresh your store manually after making any significant changes on Shopify.

Collections

Collections are a custom taxonomy for products that are managed automatically when syncing products.

WPS imports Collections as a custom taxonomy called wps_collection. Each Collection in Shopify becomes a term in the wps_collection taxonomy.

Front-End

Once you've installed this plugin and synced your Shopify data to your WordPress site, head over to the front-end Vue plugin to display data to the end user.

Advanced

Permalink Structure Slug

You'll see this option under Settings > WP-Shopify. Changing its value will rewrite the store's parent directory:

// Permalink Structure Slug set to 'store'
your-site.com/store/product-1

// Permalink Structure Slug set to 'xyz'
your-site.com/xyz/product-1

Convenience Functions

General

WPS comes with some convenience functions:

• get_wshop_collections_slug() - Get the slug of the Collections archive page
• get_wshop_shop_slug() - Get the slug of the wps-product archive page
• get_wshop_domain() - Get the Shopify domain
• get_wshop_api_key() - Get the Shopify API key

Single wps-product

WPS comes with PHP convenience functions to check for, fetch, and display product IDs. Note that $post is optional in all of these functions and defaults to the current post.

• has_product( $post ) returns true if the page has a product ID set, false if not.
• get_the_product_id( $post ) is returns the product ID of a given page, as defined in the 'Product ID' metadata. If there is no product ID attached to a page, it returns a blank string.
• the_product_id( $post ) echoes the return value of get_the_product_id().

---

wp-shopify

http://funkhaus.us

Version: 3.0

Requires at least WP 3.8

wp-shopify's Issues

Documentation Deprecation

Instructions on where to generate the storefront access token are no longer valid. The url https://sander-sandbox.myshopify.com/admin/apps/private takes you to the right place but the instructions on how to go to that page are no longer valid.

Clear cart on completion of a checkout

Shopify/js-buy-sdk#98 (comment)

Add dev version of JS file

In the build step we should have webpack render both a minified production js bundle and an unminified dev bundle. Which js file gets enqueued by WP can depend on the WP_DEBUG constant. That way when WP debug is on and you're developing, you can use the vue.js dev tools.

wshop.admin.css missing

There is a reference to wshop.admin.css in wshop-settings.php, though there is no file.

Split parts

This plugin seems like it should be split into two parts:

1. A WP/Shopify auto-sync tool, and
2. A set of Vue components.

The WP end of things can be the auto-sync tool, while the Vue components can be split into a separate NPM package. Thoughts @jrobson153 ?

Add a localstorage fallback

For lines like this in the js api:
https://github.com/funkhaus/wp-shopify/blob/master/js/wshop.js#L26-L29

We should probably add a fallback into the plugin so it will work when localstorage is not supported, and will fallback gracefully to cookies.

Document events

Document events available in jQuery - documentation is a little uneven at the moment.

Remove jQuery dependency

jQuery should be optional - might be bloating JS file

Pull images from Shopify

See Funkstagram for side-loading images

Add webhook support

https://help.shopify.com/api/reference/webhook

Allow drag and drop ordering plugins to work

Currently drag and drop plugins dont seem to work because 'hierarchical' => true, is not set on in the custom post type setup. I tweaked this on What Youth to test out, and it works. But then products can be nested under each other. This might not be a bad thing?

Add cron job

Refresh at least once a day - don't rely on manual refresh

Clearer code for image loaded callback

For these lines:
https://github.com/funkhaus/wp-shopify/blob/master/js/wshop.js#L267-L277

Rather than manually binding the onload callback to the product block, let's just cache the product block into a variable and use it within the onload function (rather than jQuery(this)).

It will work the same, but will be more clear what is going on.

Add convenience functions for terms and their images

Something like get_the_product_id - maybe get_the_collection_image( $collection_slug )?

Add documentation for classes on custom components

Probably best to default to custom components having their component name be their class name

Better wshop.refresh.js error handling

Right now it just hangs if, for example, there aren't any products set up on the Shopify site. Make sure it handles errors by displaying messages like the refresh updates.

Add nonce validation

Fix on posting and deleting

No difference between remove & subtract

On this line here:
https://github.com/funkhaus/wp-shopify/blob/master/js/wshop.js#L169

A cart item with data-cart="remove" should completely remove the line item from the cart regardless of quantity, while data-cart="subtract" just decrements.

It looks like wshop.handleRemove is defined, let's use that.

Make domain & token more easily accessible

Add convenience function for domain and token?

Document API

Include a section in the docs for accessing product information without Vue templating.