{"id":1237,"date":"2020-01-27T23:43:30","date_gmt":"2020-01-27T16:43:30","guid":{"rendered":"https:\/\/lab.wptips.dev\/?p=1237"},"modified":"2020-05-23T11:30:53","modified_gmt":"2020-05-23T04:30:53","slug":"timber-woocommerce-1","status":"publish","type":"post","link":"https:\/\/pixelstudio.id\/blog\/timber-woocommerce-1\/","title":{"rendered":"Timber + WooCommerce Ch. 1 – Shop and Single Page"},"content":{"rendered":"\n

Timber + WooCommerce is our series of integrating WooCommerce with Timber Library.<\/p>

Ch.1 – Shop and Single page<\/a>
Ch.2 – Cart Dropdown<\/a>
Ch.3 – Login Page (Coming Soon)<\/p><\/blockquote>\n\n\n\n

When integrating WooCommerce, it is best to use built-in functions and actions<\/strong>.<\/p>\n\n\n\n

The main reason is to keep compatibility with other plugins. Also, it’s tough and confusing to customize.<\/p>\n\n\n\n

With that in mind, let’s dive into how to integrate it with Timber:<\/p>\n\n\n\n

Note<\/strong>: WooCommerce version used in this tutorial is 3.9.0<\/p>\n\n\n\n

1. Add Theme Support<\/h2>\n\n\n\n
add_action( 'after_setup_theme', 'my_wc_theme_supports' );\nfunction my_wc_theme_supports() {\n   add_theme_support( 'woocommerce', [\n    'product_grid' => [ 'default_columns' => 4 ],\n    'single_image_width' => 480,\n  ] );\n  add_theme_support( 'wc-product-gallery-zoom' );\n  add_theme_support( 'wc-product-gallery-lightbox' );\n  add_theme_support( 'wc-product-gallery-slider' );\n}\n\/**\n * Assign global $product object in Timber\n *\/\nfunction timber_set_product( $post ) {\n  global $product;\n  $product = isset( $post->product ) ? $post->product : wc_get_product( $post->ID );\n}\n<\/code><\/pre>\n\n\n\n
We will use the timber_set_product()<\/code> function later.<\/p>\n\n\n\n
2. Create an Entry Point<\/h2>\n\n\n\n
All WooCommerce pages will go through a file named woocommerce.php<\/code>. This is where you put your Timber codes.<\/p>\n\n\n\n
<?php\n$context = Timber::get_context();\n\/\/ if SINGLE PRODUCT\nif( is_singular( 'product' ) ) {\n  $context['product'] = Timber::get_post();\n  Timber::render( 'shop-single.twig', $context );\n}\n\/\/ if SHOP or CATEGORY page\nelse {\n  \/\/ if CATEGORY page\n  if( is_product_category() || is_product_tag() ) {\n    $context['term'] = get_queried_object();\n  }\n  $context['products'] = Timber::get_posts();\n  Timber::render( 'shop.twig', $context );\n}<\/code><\/pre>\n\n\n\n
3. Create the Views<\/h2>\n\n\n\n
The TWIG snippet below does not include the extend<\/code> and block<\/code> part. You need to adapt it to your naming.<\/p>\n\n\n\n
Below is for the Shop and Category page<\/strong>:<\/p>\n\n\n\n
<header class=\"shop-header\">\n  {% if term %}\n    <h1>{{ term.name }}<\/h1>\n    {{ term.description | wpautop }}\n  {% endif %}\n  {% do action(\"woocommerce_before_main_content\") %}\n<\/header>\n<div class=\"shop-wrapper\">\n  {% do action(\"woocommerce_before_shop_loop\") %}\n  {% include \"_shop-products.twig\" %}\n  {% do action(\"woocommerce_after_shop_loop\") %}\n<\/div>\n{% do action(\"woocommerce_after_main_content\") %}<\/code><\/pre>\n\n\n\n
Below is for the Product List partial<\/strong> that we called in [Line 12] above:<\/p>\n\n\n\n
<div class=\"shop-products\">\n{% for p in products %}\n  {{ fn(\"timber_set_product\", p) }}\n  <div class=\"product-tease\">\n    <a href=\"{{ p.link }}\"> \n      <figure>\n        {% do action( 'woocommerce_before_shop_loop_item_title' ) %}\n      <\/figure>\n      <h3> {{ p.title }} <\/h3>\n    <\/a>  \n    {% do action(\"woocommerce_after_shop_loop_item_title\") %}\n    {% do action(\"woocommerce_after_shop_loop_item\") %}\n  <\/div>\n{% endfor %}\n<\/div><\/code><\/pre>\n\n\n\n
[Line 3]<\/strong> We call the function we created in Step 1. This is to set the global context so the action will show the correct information.<\/p>\n\n\n\n
Lastly, we need the view for Single Product page:<\/p>\n\n\n\n
{{ fn('the_post') }}  \n<div class=\"product-wrapper\">\n  {% do action(\"woocommerce_before_single_product\") %}\n  <figure class=\"product-photo\">\n    {% do action(\"woocommerce_before_single_product_summary\") %}\n  <\/figure>\n  <article class=\"product-summary\">\n    {% do action(\"woocommerce_single_product_summary\") %}\n  <\/article>\n  {% do action(\"woocommerce_after_single_product_summary\") %}\n  {% do action(\"woocommerce_after_single_product\") %}\n<\/div><\/code><\/pre>\n\n\n\n
Done!<\/strong> For other pages like Cart, Checkout, and My Account page, they will go through the standard page.php<\/code> file. I prefer leaving them untouched.<\/p>\n\n\n\n
\n\n\n\n
Conclusion<\/h2>\n\n\n\n
This tutorial is a simplified version of the official integration guide<\/a>. Check it out to learn more.<\/p>\n\n\n\n
You might ask how do you know about all the action names? Simply open the WooCommerce plugin and check out the codes in \/templates<\/code> folder.<\/p>\n\n\n\n
In Part 2<\/strong>, we will learn about creating Cart Popup and Sign In links.<\/p>\n\n\n\n
Let us know in the comment below if you have trouble with this integration \ud83d\ude42<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
WooCommerce is a pain to integrate with Timber. This tutorial will show you the simplest and quickest way to get started.<\/p>\n","protected":false},"author":1,"featured_media":1249,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[31,24,37,25],"class_list":["post-1237","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-timber","tag-php","tag-timber","tag-twig","tag-woocommerce"],"blocksy_meta":"","_links":{"self":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/comments?post=1237"}],"version-history":[{"count":10,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1237\/revisions"}],"predecessor-version":[{"id":1469,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1237\/revisions\/1469"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media\/1249"}],"wp:attachment":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media?parent=1237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/categories?post=1237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/tags?post=1237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}