I've added woocommerce to my Timber starter theme
Because I've finally figured out a nice way to integrate woocommerce with timber and the online tutorials aren't really very helpful or comprehensive I've decided to add my integration to my timber starter theme and write a little tutorial about it.
The general idea for this setup is to add all the info from woocommerce to the $context, and use them in the twig templates using your own html as much as possible. The one problem I can see is that you are overriding the original woocommerce templates, so no more updates. But I don't think these templates will change much anyway.
A single product
This code is a copy of the example code in the woocommerce guide on the Timber docs. You can read more about how it works over there.
Product category or shop
This code is a copy of the example code in the woocommerce guide on the Timber docs. You can read more about how it works over there.
The cart
The first step is to create a new page in Wordpress which will act as the cart. Choose the cart template for this page, then set this page as the cart in the Woocommerce setup. This page then points to the page-cart twig file. Since the Woocommerce cart is basically a shortcode that's what I'm using here. This shortcode then looks for the default cart.php, or in our case, we're overriding the default cart.php in the woocommerce theme.
I'm using a new array which I fill with all products so I can later use them in my twig template. If you compare this file to the original cart.php you'll see I've changed the code to be able to use them later in my twig file.
Checkout
The setup here is basically the same as the cart setup. Add a page for the checkout page, use the checkout template, which points to the checkout twig file. Set this page as the checkout page in the Woocommerce setup. The shortcode looks for woocommerce/checkout/form-checkout.php. The code here is simple, and is mostly meant so we can use a more flexible html setup for the checkout page.
Thanks page
Simply remove the woocommerce/checkout/thankyou.php page if you want to use the default thank you page. I wanted to be able to control the html a little better, so I've included it in the starter theme. I'm using views/woo/thankyou.twig for this page.
This setup can probably be refined, but I like the simplicity for now.
8 Reacties