{"id":1331,"date":"2020-05-12T20:10:11","date_gmt":"2020-05-12T13:10:11","guid":{"rendered":"https:\/\/lab.wptips.dev\/?p=1331"},"modified":"2020-05-23T12:09:12","modified_gmt":"2020-05-23T05:09:12","slug":"timber-woocommerce-2","status":"publish","type":"post","link":"https:\/\/pixelstudio.id\/blog\/timber-woocommerce-2\/","title":{"rendered":"Timber + WooCommerce Ch. 2 – Cart Dropdown"},"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

Most WooCommerce theme has that cart dropdown which shows all products you have selected. In this tutorial, we are going to create that with Timber.<\/p>\n\n\n\n

\"\"
Cart Dropdown in Storefront Theme<\/figcaption><\/figure>\n\n\n\n

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

Step 1: Preparing the Template<\/h2>\n\n\n\n

First, decide where you want to place it.<\/p>\n\n\n\n

Ideally, it should be at the top, besides the navigation menu. But for simplicity’s sake, we are going to make it floating at the bottom-right corner like below:<\/p>\n\n\n\n

\"\"
Floating Cart button that shows selected products on click<\/figcaption><\/figure><\/div>\n\n\n\n

Then create 2 template files<\/strong>: One contains just the button\/trigger, and the other one contains the whole package:<\/p>\n\n\n\n

{# The button template #}\n\n<a id=\"cart-button\"\n  class=\"{{ woo.cart.is_empty ? 'button button--passive' : 'button' }}\"\n  href=\"{{ fn('wc_get_cart_url') }}\">\n\n  <span>Cart<\/span>\n  <b>({{ woo.cart.get_cart_contents_count }})<\/b>\n<\/a>\n<\/code><\/pre>\n\n\n\n
{# The whole template, including the button #}\n\n<aside class=\"cart-menu\">\n  {% include 'shop\/_cart-button.twig' %}\n\n  <div class=\"cart-dialog\">\n    {# The product list is actually an existing widget #}\n    {{ fn('the_widget', 'WC_Widget_Cart' ) }}\n  <\/div>\n<\/aside><\/code><\/pre>\n\n\n\n
Step 2: Echo It<\/h2>\n\n\n\n
Since I want to place it floating at the bottom-right corner, I chose to echo it at wp_footer<\/code>:<\/p>\n\n\n\n
add_action( 'wp_footer', function() {\n  global $woocommerce;\n  $context = [ 'woo' => $woocommerce ];\n\n  Timber::render( 'shop\/cart.twig', $context );\n} );<\/code><\/pre>\n\n\n\n
If you want to put it besides the navigation menu, then you can include it in your Header template like below: (Don’t forget to add $woocommerce<\/code> object named woo<\/code> to context).<\/p>\n\n\n\n
<header class=\"site-header\">\n  <nav class=\"site-nav\"> ... <\/nav>\n\n  {% include \"shop\/cart.twig\" %}\n<\/header><\/code><\/pre>\n\n\n\n
Step 3: Enable AJAX Update on Button<\/h2>\n\n\n\n
When you click “Add to Cart” in the product listing, it’s appended to your Cart Widget without refreshing the page.<\/p>\n\n\n\n
This is done by using a JavaScript technique called AJAX.<\/p>\n\n\n\n
But the button that shows the product count is not updated. We need to fix this by using this hook:<\/p>\n\n\n\n
\/\/ Run everytime the cart widget is updated\nadd_filter( 'woocommerce_add_to_cart_fragments', function( $fragments ) {\n  ob_start();\n  global $woocommerce;\n  $context = [ 'woo' => $woocommerce ];\n\n  Timber::render( 'shop\/_cart-button.twig', $context );\n  \n  \/\/ Must be the same button ID with the one we use in template\n  $fragments['#cart-button'] = ob_get_clean();\n  return $fragments;\n} );<\/code><\/pre>\n\n\n\n
Even though that hook looks weird, that method is used by the official Storefront theme<\/a>. So don’t worry, it’s the right way.<\/p>\n\n\n\n
Step 4: Done?<\/h2>\n\n\n\n
There is actually one last step: Writing the CSS and JS<\/strong> to toggle the dropdown. But I won’t dive into that because it’s up to your preferences.<\/p>\n\n\n\n
If you like to see my styling, I put it in CodePen<\/a>.<\/p>\n\n\n\n
\n\n\n\n
Conclusion<\/h2>\n\n\n\n
Figuring out Cart Dropdown in Timber took me the longest back then. There are no resources available online, so I need to experiment on my own.<\/p>\n\n\n\n
In my first iteration, I was using the global $woocommerce<\/code> object to extract Cart data. It does work, but you need to write your own AJAX update.<\/p>\n\n\n\n
\n\n\n\n
I initially planned to discuss Cart Dropdown and User Sign-in for Part 2. But I feel the first topic is already long enough. So it will be reserved for Part 3 \ud83d\ude42<\/p>\n\n\n\n
Let me know if you have any question regarding Cart dropdown with Timber \ud83d\ude42<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
Most WooCommerce theme has that cart dropdown which shows all products you have selected. In this tutorial, we are going to create that with Timber.<\/p>\n","protected":false},"author":1,"featured_media":1426,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[24,25],"class_list":["post-1331","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-timber","tag-timber","tag-woocommerce"],"blocksy_meta":"","_links":{"self":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1331","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=1331"}],"version-history":[{"count":9,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1331\/revisions"}],"predecessor-version":[{"id":1471,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/posts\/1331\/revisions\/1471"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media\/1426"}],"wp:attachment":[{"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/media?parent=1331"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/categories?post=1331"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixelstudio.id\/blog\/wp-json\/wp\/v2\/tags?post=1331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}