-
-
Save zoerooney/8969dfb91947e5327481 to your computer and use it in GitHub Desktop.
<?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?
Tutorial: http://www.sitepoint.com/using-the-shopify-api-with-wordpress/