Skip to content

Instantly share code, notes, and snippets.

@zoerooney zoerooney/page-shopify.php
Last active Mar 18, 2019

Embed
What would you like to do?
Shopify Collection Embedded in WordPress
<?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(); ?>
@zoerooney

This comment has been minimized.

Copy link
Owner Author

commented Nov 24, 2014

@zoerooney

This comment has been minimized.

@WriteCraft

This comment has been minimized.

Copy link

commented Apr 16, 2016

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

@umang-metatagg

This comment has been minimized.

Copy link

commented Jun 23, 2016

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

@tomkeysers

This comment has been minimized.

Copy link

commented Sep 29, 2016

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..?

@asifmarp

This comment has been minimized.

Copy link

commented Mar 18, 2019

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.