Layouts for noobs

@mapples

Hey there, great question! Technically there is a way to do this which requires using the “dropzone” shortcode attributes / render api props.

There are five dropzone properties that you can use:

dropzone_product_buy_button
dropzone_product_title
dropzone_product_description
dropzone_product_pricing
dropzone_product_gallery

When using one of these, you’ll need to specify a CSS selector that points to the <div> where you want the product information to live. So like this:

<?php 

$Products = WP_Shopify\Factories\Render\Products\Products_Factory::build();

$Products->products([
   'dropzone_product_buy_button' => '#product_buy_button',
   'dropzone_product_title' => '#product_title',
   'dropzone_product_description' => '#product_description',
   'dropzone_product_pricing' => '#product_pricing',
   'dropzone_product_gallery' => '#product_gallery',
   'limit' => 1
]);

?>

<div id="product_buy_button"></div>
<div id="product_title"></div>
<div id="product_description"></div>
<div id="product_pricing"></div>
<div id="product_gallery"></div>

You can do the same thing with the [wps_products] shortcode.

By default, this will only work with one product. So if you want to do this with multiple different products you’ll need to write a foreach loop like this:

<?php 

$Products = WP_Shopify\Factories\Render\Products\Products_Factory::build();

$posts_ids = get_posts([
    'post_type' => 'wps_products',
    'posts_per_page' => -1,
    'fields' => 'ids',
]);

foreach ($posts_ids as $posts_id) { ?>
   <section class="wps-product">
      <div id="product_buy_button-<?= $posts_id; ?>"></div>
      <div id="product_title-<?= $posts_id; ?>"></div>
      <div id="product_description-<?= $posts_id; ?>"></div>
      <div id="product_pricing-<?= $posts_id; ?>"></div>
      <div id="product_gallery-<?= $posts_id; ?>"></div>
   </section>

   <?php 

   $Products->products([
      'dropzone_product_buy_button' => '#product_buy_button-' . $posts_id,
      'dropzone_product_title' => '#product_title-' . $posts_id,
      'dropzone_product_description' => '#product_description-' . $posts_id,
      'dropzone_product_pricing' => '#product_pricing-' . $posts_id,
      'dropzone_product_gallery' => '#product_gallery-' . $posts_id,
      'limit' => 1,
      'post_id' => $posts_id
   ]);

}

Hope this helps!

• This reply was modified 3 years, 10 months ago by andrewmrobbins.

Wow thanks for the detailed response. The single product works like a charm.

The $posts_ids array seems to be empty in the second code block however.

Are you available for custom work by any chance? I have another request for your plugin’s functionality on top of this one, and posted it on a job forum. But I figured I’d ask since you’re here.

Hmm, if the $posts_ids array is empty that would indicated that your product posts haven’t been synced correctly. Do you see your products listed inside the backend here? WP Shopify – Products

I would try manually re-syncing the products to see if that helps.

I wish I had the bandwidth for custom work but I’m pretty swamped at the moment. However if you want to post your feature request I’ll make sure to look it over and potentially add it to the plugin.

@andrewmrobbins and @mapples, thank you for sharing this here. @mapples did you insert the PHP in a code block directly on the page? How did you put together the page layout?
Thanks!

@erixlinux

I couldn’t get it to work like the above due to a different error.

I went with the Template Overriding feature in the Pro version, then had a custom plugin coded so it works with Oxygen.

@mapples Thanks for the follow up!