WooCommerce & Sage 9 Blade Support

bramvdpluijm1 · August 8, 2018, 2:23pm

After a day of searching and reading literally everything regarding Sage 9 and WooCommerce, I finally came to the conclusion to just start a thread here as I’ve not really came any closer to getting stuff working.

I tried everything that is discussed in every thread regarding Sage 9 and WooCommerce. In the end I found a github issue from just 12 days ago. In that discussion someone made a solution so I gave that a try. (Add WooCommerce support by mejta · Pull Request #2086 · roots/sage · GitHub).

I followed the steps that are stated here https://github.com/mejta/sage-woocommerce. Installed this composer require roots/sage-woocommerce with composer. And created the folder structure as it should. This is how to folder structure looks /resources/views/woocommerce/. In that folder you can put the WooCommerce files which you want to have overwritten. For now I just put ‘archive-product.blade.php’ and ‘single-product.blade.php’ in there. I got the contents of those files from another repo of a different solution (https://github.com/hambos22/sage-woo/tree/master/resources/views).

The above steps should ensure that every template you place inside the newly created folder structure overwrites the default WooCommerce templates. But it does not work unfortunately. I’m clearly missing something…

I’m not sure what I can do next. All help is appreciated!

Thanks in advance,
Bram

bdmason · August 8, 2018, 2:34pm

Hi @bramvdpluijm1. I think the author of the sage-woocommerce repo is putting a guide together for it. But for now you can follow this and it’ll work (well it did on my machine!): https://gist.github.com/bdmason/f26bb8891a3c066ce609200d5ad95912

Doing it through composer looks like the best way to do it in the future, but for now if you follow the gist you can get working and switching over later should be quite easy as both ways involve minimal work.

mmirus · August 8, 2018, 3:42pm

Hey @bramvdpluijm1 - did you try using the example views provided by @mejta in roots/sage-woocommerce instead of the ones provided in @hambos22’s repo?

See: https://github.com/roots/sage-woocommerce/tree/master/examples/views

bramvdpluijm1 · August 8, 2018, 7:07pm

Thanks for the quick response guys! I really appreciate it! And it worked . When I followed the guide that @bdmason shared it did the trick. What I did wrong was: I put the woocommerce folder inside the /resources/views folder before. Now it is situated in /resources.

MWDelaney · August 8, 2018, 7:23pm

That seems like a regression, then. Isn’t the library supposed to load them from views?

bdmason · August 8, 2018, 7:54pm

The library is supposed to, the gist I posted is just a little hack to get from resources to views. I think once the library is doing its thing my hack will become redundent. By following the gist he must have bypassed the library for now.

bramvdpluijm1 · August 8, 2018, 8:05pm

I just removed the installation of the library by going back a few commits. And after that I started fresh on the steps provided by @bdmason.

bramvdpluijm1 · August 8, 2018, 8:06pm

The library should do that, but it didn’t work unfortunately. I removed it completely as of now.

bramvdpluijm1 · August 8, 2018, 8:07pm

I tried those as well. But to no avail. After that I tried several others. Didn’t work out in the end unfortunately.

mmirus · August 8, 2018, 8:13pm

Gotcha. I’m going to test it out myself in a bit and I’ll follow up if I learn anything.

mejta · August 8, 2018, 8:27pm

Hi guys, I’ll have look on this early tomorrow.

mejta · August 8, 2018, 9:35pm

Hi guys,

Sorry for the issues you’ve met. I’ve tested that on fresh installation of bedrock and sage and created a example repository here:

Everything worked without any problem on first attempt. But I identified few things where you can do an mistake:

roots/sage-woocommerce is dependency of Sage theme (https://github.com/mejta/woosage/blob/master/web/app/themes/woosage/composer.json#L40). If you install it as a bedrock dependency it won’t work.
copy example files into resources/views/woocommerce folder of the theme (https://github.com/mejta/woosage/tree/master/web/app/themes/woosage/resources/views/woocommerce) and NOT resources/views folder.
Example blade templates are woocommerce default templates rewritten into blade, so you won’t see any change on the frontend. In example I’ve put there some text (https://github.com/mejta/woosage/blob/master/web/app/themes/woosage/resources/views/woocommerce/archive-product.blade.php#L14)

I did following to make it work:

Installed fresh bedrock
composer require wpackagist-plugin/woocommerce in bedrock root folder
Created fresh Sage theme called woosage (web/app/themes/woosage)
composer require roots/sage-woocommerce inweb/app/themes/woosage` folder
created web/app/themes/woosage/resources/views/woocommerce folder and copied example blade templates in there.
Changed copied example templates to make sure that they are applied.

@mmirus Maybe there should be an guide on the website to make the process clear. Can you guide me through the process how to publish the post?

Hope that it helps.

mmirus · August 8, 2018, 10:22pm

@bramvdpluijm1 - I’ve also confirmed that sage-woocommerce is working. Here are the steps I followed (no Bedrock):

Install Sage with composer create-project roots/sage your-theme-name and setup as normal
Install and setup WooCommerce if not already present
In your theme folder, run composer require roots/sage-woocommerce
Create the folder resources/views/woocommerce/ in your theme
Copy the example templates from roots/sage-woocommerce into resources/views/woocommerce/

From there you can modify the templates as needed or use them as examples for how to create additional templates.

@mejta, thanks for confirming on your end and for the sample repo. I think a guide is a good idea, but I would start with making the readme in the roots/sage-woocommerce repo basically be the guide (clarifying and expanding the current info as needed). Once that’s done, I think it would make sense to also publish it (or an adapted version of it) to the site so that it’s easier for folks to find it.

bdmason · August 8, 2018, 10:28pm

It works for me too.

I went into an existing project and installed the roots/sage-woocommerce package, removed my resources/woocommerce files, made sure the resources/views/woocommerce blades were in the right place and named correctly, and my website went back to how it was with the resources/woocommerce hack that was there before (I checked it was broken in between).

The package appears to do exactly what it should, good job @mejta

mmirus · August 8, 2018, 10:30pm

Thanks for helping test @bdmason!

bdmason · August 8, 2018, 10:52pm

@bramvdpluijm1 perhaps you could try again? In my test I took a website using the hack from my gist, removed it (the resources/woocommerce folder), installed the package, then moved my blades into the new place (from my custom woo/ directory to resources/views/woocommerce) and everything worked as expected. If you run into any problems please post them here as they could help @mejta with his guide.

bramvdpluijm1 · August 9, 2018, 9:21am

Thanks for looking into it! I will try to remove the hack from your gist and try to install the package again. Maybe I just made a fuck up yesterday. I’ll keep you guys posted.

bramvdpluijm1 · August 9, 2018, 9:37am

@mmirus Allright. I did everything again. Removed the hack that @bdmason suggested yesterday. Installed composer require roots/sage-woocommerce. And I also placed the example templates from roots/sage-woocommerceinside resources/views/woocommerce.

I can see that something is happening, but now I don’t have any styling anymore. The head is empty. Also I get notified that a theme without header.php, sidebar.php, footer.php is outdated. I read in the roots/sage-woocommerce repo that it’s default behaviour but I don’t really get what to do next.

This is what is written there:

By default, you will get an error message that themes without header.php, footer.php and sidebar.php are deprecated. You have to replace single-product.php and archive-product.php templates with your Blade template. You can find those two files in /examples/views folder of this package. The trick is not to use get_header, get_footer or get_sidebar functions, because it’s handled differently with Blade. Instead of that, you can use actions:

do_action(‘get_header’, ‘shop’);
do_action(‘get_sidebar’, ‘shop’);
do_action(‘get_footer’, ‘shop’);

In the example templates there’s this: do_action('get_header', 'shop');. As suggested in the text above. Still seeing the notices that a theme without header.php is outdated.

bdmason · August 9, 2018, 9:59am

Does your blade template have @extends('layouts.app'), and does layouts/app.blade.php look something like this (notice the do_action('get_header') and the 2 header related partials):

<!doctype html>
<html @php language_attributes() @endphp>
  @include('partials.head')
  <body @php body_class() @endphp>
    <div id="page-wrap">
      @php do_action('get_header') @endphp
      @include('partials.header')
      <main class="content">
        @yield('content')
      </main>
      @php do_action('get_footer') @endphp
      @include('partials.footer.index')
    </div>
    @php wp_footer() @endphp
  </body>
</html>

It’s a bit hard to help further without seeing the templates.

Also, my woo templates look nothing like the original woo default ones. They look just like my normal blade page templates - pulling the bits and bobs I need from the normal loop, and from wp & woo helper functions where required.

bramvdpluijm1 · August 9, 2018, 10:29am

Yep. My blade templates are exact copies of the example files in the roots/sage-woocommerce repo. So the @extends('layouts.app') is present. layouts/app.blade.php is also similar to yours.

Question: do you still place the normal archive-product.php somewhere? I don’t have that as of now so maybe that’s a problem?

Also: Do I have to do something special after I install composer require roots/sage-woocommerce ? Like re-provision the VM or something?