Roots Discourse

WooCommerce & Sage 9 Blade Support

#10

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

2 Likes

#11

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

1 Like

#12

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:

  1. 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.
  2. 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.
  3. 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:

  1. Installed fresh bedrock
  2. composer require wpackagist-plugin/woocommerce in bedrock root folder
  3. Created fresh Sage theme called woosage (web/app/themes/woosage)
  4. composer require roots/sage-woocommerce inweb/app/themes/woosage` folder
  5. created web/app/themes/woosage/resources/views/woocommerce folder and copied example blade templates in there.
  6. 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.

6 Likes

#13

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

  1. Install Sage with composer create-project roots/sage your-theme-name and setup as normal
  2. Install and setup WooCommerce if not already present
  3. In your theme folder, run composer require roots/sage-woocommerce
  4. Create the folder resources/views/woocommerce/ in your theme
  5. 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.

1 Like

#14

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

2 Likes

#15

Thanks for helping test @bdmason!

1 Like

#16

@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.

1 Like

#17

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.

0 Likes

#18

@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.

0 Likes

#19

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.

1 Like

#20

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?

0 Likes

#21

Oh snap, I think I know what I’m doing wrong. Does the composer require roots/sage-woocommerce have to run in a specific folder? I’m now running that in the {project_name/site} folder. I just noticed in @mejta 's example that he runs it in the {project_name/site/web/app/themes/theme_name} folder.

0 Likes

#22

Hey, yes that is the problem. roots/sage-woocommerce is a dependency of Sage theme. If you install it as a bedrock dependency it won’t work.

0 Likes

#23

It works now! Have another question though. When I click on a shop item (in my case it’s a product-category) the page crashes with this message:

Fatal error: Uncaught Symfony\Component\Debug\Exception\FatalThrowableError: Call to a member function startSection() on null in /srv/www/{project_name}/current/web/app/uploads/cache/8c3128b400fa971dbd2c596b4bb67d4864d3b4c2.php

That didn’t happen before. Do you know what this might be?

0 Likes

#24

The error you are mentioning is caused by @section directive. There are two types of templates that WooCommerce uses:

  1. page templates, e.g. archive-product.blade.php, single-product.blade.php
    Those templates have @secton('content') directive in there. You can identify those templates by looking into the WooCommerce plugin templates folder and any template that contains get_header() function call is a page template.

  2. partial templates
    They are included by calling wc_get_template_part or wc_get_template and those templates cannot have @section directive. Those templates are also called from page templates, so you can be sure that you have your layout as it should be.

1 Like

#25

Ahhh makes sense, thanks! I removed the @extends directive now in my newly created taxonomy-product_cat.blade.php. For people running into this error: make sure to change wc_get_template_part('archive-product.php') into this: @include('woocommerce.archive-product').

1 Like

#27

Have you tried this? Got some pretty awesome features:

This is a sage 9 theme fork

0 Likes

#28

Fixed by https://github.com/roots/sage-woocommerce/pull/5

0 Likes

#29

I confirmed the package sage-woocommerce is working. Update to 17, Mar 2019

0 Likes

#30

I do not get the sidebar working. I also made a subfolder in my theme /woocommerce/global/sidebar.blade.php but stil no sidebar showing… Does anyone have an idea?

1 Like