WooCommere variable or grouped product display sample?

[stromi]

Does anyone has a sample code/gist for recreating all WooCommerce functions and behavior for Timber?

Expected behavior

I would like to show variations of a product on single-product.twig, but I can't make it work.

Actual behavior

Dumping the current product (post) does show some attributes at _custom, but this just won't be enough I think :)

What version of WordPress, PHP and Timber are you using?

WP: 4.8, PHP: 7.1.1, Timber: 1.5 (integrated into the theme)

How did you install Timber? (for example, from GitHub, Composer/Packagist, WP.org?)

Composer --> integrated into the theme (everything else works just fine)

[jake46a]

@stromi

I have just finished writing an integration guide for WooCommerce, but it is awaiting approval. (it is quite a long guide.)

In the integration with WooCommerce, quite a bit is using and calling the built in functions in WC, and using filters to adjust accordingly.

As for variations on the single product, I assume by showing you are referring to showing a variation based upon an attribute? Like if an Item comes in red, and the user chooses "Red" it will show the product's red image?

This type of behavior that can be seen here: https://demo-store.proweb.agency/timber-boot-store/vape-mods/smok/ and you choose the color and the image changes.

If this is what you mean, I can post the code here.

Does anyone has a sample code/gist for recreating all WooCommerce functions and behavior for Timber?

All, is kind of a lot, but as stated, when I did the integration I called the functions, built into WC, makes it easier when it is time to upgrade.

Here is an example of my single-product.twig:

{% block headbarcontent %}
     <div class="{{function('pwa_bg_class')}} mb-2 mt-5 pt-3 pb-2">
  <h2 class=" deeptbt"><center>{{fn('get_the_title',fn('wc_get_page_id', 'shop' ))}}</center></h2>
</div>

{% endblock headbarcontent %}

  {% block featuredcontent %}
    {% include 'woo/partials/cart.twig'%}
 
 {% endblock featuredcontent %}


{% block content %}

<article itemscope itemtype="http://schema.org/Product" class="single-product-details {{ post.class }}">

	<div class="container pt-5">
	    <div id="product-{{ post.id }}" {{ fn('post_class', ['product', 'product--' ~ post.product.get_type()]) }}>
	        {##
	         # woocommerce_before_single_product hook.
	         #
	         # @hooked wc_print_notices - 10
	         #}
	        {% do action('woocommerce_before_single_product') %}

	     	<div class="row">
		     	<div class = "col-sm-6">
     		        {##
     				 # woocommerce_before_single_product_summary hook.
     				 #
     				 # @hooked woocommerce_show_product_sale_flash - 10
     				 # @hooked woocommerce_show_product_images - 20
     				 #}
     				
     		        {% do action('woocommerce_before_single_product_summary') %}

		   		</div>
		   		<div class="col-sm-6">
			        <div class="product-summary">
			            {##
						 # woocommerce_single_product_summary hook.
						 #
						 # @hooked woocommerce_template_single_title - 5
						 # @hooked woocommerce_template_single_rating - 10
						 # @hooked woocommerce_template_single_price - 10
						 # @hooked woocommerce_template_single_excerpt - 20
						 # @hooked woocommerce_template_single_add_to_cart - 30
						 # @hooked woocommerce_template_single_meta - 40
						 # @hooked woocommerce_template_single_sharing - 50
						 # @hooked WC_Structured_Data::generate_product_data() - 60
			             #}
			            {% do action( 'woocommerce_single_product_summary' ) %}
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-12">
					<h3>Description</h3>
					<div class="content">{{ post.content }}</div>
				    {##
					 # woocommerce_after_single_product_summary hook.
					 #
					 # @hooked woocommerce_output_product_data_tabs - 10
					 # @hooked woocommerce_upsell_display - 15
					 # @hooked woocommerce_output_related_products - 20
			         #}
			        {% do action('woocommerce_after_single_product_summary') %}
	    		</div>
    		</div>
    	{% do action('woocommerce_after_single_product') %}
		</div>
	</div>
</article>
	{% endblock content %}

Hope that helps. If you need any more code, let me know, I will share until the guide come out.

--Jake

[pascalknecht]

@stromi is this issue resolved for you? Feel free to ask further here otherwise please close this ticket.

[aureliendebord]

Hello @jake46a , any news about your guide? I am struggeling to work with variations product : like display only the price of the current variations or display the product gallery.

[jarednova]

@aureliendebord here's his guide:

#1747

Could you take a spin and see if this helps to answer your Qs? It'd be great to get a second set of eyes on what he's written (I'm not a WC user, so I'm not much help) before we merge it in

[Levdbas]

Closing this as stale. If you want to expand the Woocommerce documentation, please open a PR.