Shopify Collection Embedded in WordPress

page-shopify.php

<?php
/**
 * Template Name: Shopify Collection Demo
 *
 */

get_header(); ?>

	<div id="primary" class="full-width">

			<?php while ( have_posts() ) : the_post(); ?>
				<style>
				.product-feed-item {
					display: inline-block;
					vertical-align: top;
					width: 31%;
					margin-right: 2%;
					text-align: center;
				}
				.product-feed-item img {
					max-width: 100%;
					height: auto;
				}
				</style>
				<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
					<header class="entry-header">
						<h1 class="page-title"><?php the_title(); ?></h1>
					</header><!-- .entry-header -->

					<div class="entry-content">
						<?php the_content(); ?>
					</div><!-- .entry-content -->

					<div class="row product-feed">
						<?php

						// Set variables
						$api_url = get_field( 'shopify_app_api_url' );
						$shop_url = get_field( 'shopify_site_url' );
						$collection_id = get_field( 'collection_id' );

						// Create the API URL for the Shopify collect
						$collects_url = $api_url . '/admin/collects.json?collection_id=' . $collection_id . '&limit=3';

						// Use a transient for the feed URL (performance boost)
						if ( false === ( $collects_content = get_transient( 'shopify_product_feed' ) ) ) {
							$collects_content = @file_get_contents( $collects_url );

							// Put the results in a transient. Expire after 4 hours.
							set_transient( 'shopify_product_feed', $collects_content, 4 * HOUR_IN_SECONDS );
						}

						// Decode the JSON in the file
						$collects = json_decode( $collects_content, true );

						// Reset variant inventory count
						$variant_inventory = 0;

						// Loop through products in the collection
						for ( $prod = 0; $prod < 3; $prod++ ) {

							// Get the product ID for the current product
							$product_id = $collects['collects'][$prod]['product_id'];

							// Get the product data from the API (using the ID)
							$product_url = $api_url . '/admin/products/' . $product_id . '.json?fields=images,title,variants,handle';

							// Decode the JSON for the product data
							$product_json = json_decode( @file_get_contents( $product_url ), true );

							// Set some variables for product data
							$current_product = $product_json['product'];
							$product_handle = $current_product['handle'];
							$product_title = $current_product['title'];
							
							// Get the product image and modify the file name to get a thumbnail
							$image_src_parts = pathinfo( $current_product['images'][0]['src'] );
							$product_image_src = $image_src_parts['dirname'] . '/' . $image_src_parts['filename'] . '_large.' . $image_src_parts['extension'];
							
							// Get product variant information, including inventory and pricing
							$variants = $current_product['variants'];
							$variant_count = count( $variants );

							$variant_price = 0;
							$variant_prices = array();
							if ( $variant_count > 1 ) :
								for ( $v = 0; $v < $variant_count; $v++ ) {
									$variant_inventory += $variants[$v]['inventory_quantity'];
									$variant_prices[] = $variants[$v]['price'];
								}
								$price_min = min( $variant_prices );
								$price_max = max( $variant_prices );
							else :
								$variant_price = $variants[0]['price'];
								$variant_inventory = $variants[0]['inventory_quantity'];
							endif;

							// Display the product:
							?>
							<div class="product-feed-item">
								<a href="<?php echo $shop_url; ?>/products/<?php echo $product_handle; ?>">
									<img src="<?php echo $product_image_src; ?>" alt="<?php echo $product_title; ?>"/>
									<h3><?php echo $product_title; ?></h3>
									<?php if ( $variant_inventory > 0 ) : ?>
										<?php if ( $variant_price > 0 ) : ?>
											<span class="price small"><?php if ( $variant_price > 0 ) : ?>$<?php echo $variant_price; ?><?php else : ?>FREE<?php endif; ?></span>
										<?php elseif ( ( $price_min > 0 ) && ( $price_max > 0 ) ) : ?>
											<span class="price small">$<?php echo $price_min; ?> - $<?php echo $price_max; ?></span>
										<?php endif; ?>
									<?php else : ?>
										<span class="sold-out">OUT OF STOCK</span>
									<?php endif; ?>
								</a>
							</div>
						<?php 
						} ?>
						
					</div><!-- end product feed -->

				</article>

			<?php endwhile;  ?>

	</div><!-- #primary -->

<?php get_footer(); ?>

Hi Zoe,

Found your tutorial: http://www.sitepoint.com/using-the-shopify-api-with-wordpress/ and used it to set up a Shopify/Wordpress site for my client at www.rainiersun.com. Thank you so much for writing this tutorial -- it was a huge help.

I did find one issue with the transient variable, and reusing the page template for different collections. I found if I named the transient 'shopify_product_feed_' . $collection_id . '', instead of just 'shopify_product_feed', I could use the the template for multiple collections -- otherwise only one collection would show up if I used the template on separate pages linked to separate collections.

Here's one: http://www.rainiersun.com/style-5063-childrens-sun-hat/
And another: http://www.rainiersun.com/adult-sun-hat-collection/

Thanks again!
LeeAnne Egge
Writecraft Enterprises
Olympia, WA USA

Great Tutorial! . I also want add to cart button. Can you Help Me?

Thanks @zoerooney, planning to use this technique very soon.

Did you imply to use the wp_remote_get function somewhere in the code, by commenting that? I assume instead of file_get_contents? Which means, it's a better option..?

Hi Zoe,

something goes wrong ..displaying error ..Warning: count(): Parameter must be an array or an object that implements Countable in ...on line 82

do you have any idea?