Woocommerce & Blade (Sage 9)

[masoninthesis]

Hey guys,

Great article on Sage and Woocommerce by @chriscarr , but I think it’s probably outdated for Sage 9.

Here’s two ( 1, 2)discussions on Woocommerce and Sage 9.

It seems these issues were resolved by @QWp6t’s Sage-9 fix back in July.

But I’m getting errors on my product pages, and I’m assuming it has to do with the new Blade integration?

I’ve done 3 steps (other than installing/activating woocommerce):

1. Created archive-product.php and single-product.php in theme root with <?php woocommerce_content(); ?>
2. Added theme support in sage/src/setup.php with add_theme_support('woocommerce');

These got rid of some errors, but not all. Here’s the remaining errors:

Warning: A non-numeric value encountered #1

Warning: A non-numeric value encountered #2

Warning: A non-numeric value encountered #3

*the first 2 show up in xdebug formatted correctly, the 3rd one has broken styles (which is why it’s in a single line)

I’m going to play around with adding some hooks meanwhile. Here’s the repo, but other than the changes I listed, it’s pretty much just default Sage 9. Any tips would be awesome, thanks!

[QWp6t]

Third party / custom / non-WC theme compatibility - WooCommerce Docs

[masoninthesis]

Hey thanks for the response @QWp6t!

I read over that while setting it up, but I’m still trying to familiarize myself with Blade, so I got confused on the Blade specifics (and from what I saw, there’s no results on Google for Blade/Woocommerce– which makes sense).

I’ve updated the repo. Here’s what I tried:

• Placing woocommerce.php in the theme root with the WC loop <?php woocommerce_content(); ?>
• Placing woocommerce.blade.php in sage/templates with Blade syntax of WC loop @php(woocommerce_content())

I also tried a variation of things in woocommerce.blade.php such as:

@extends('layouts.base') @section('content') @php(woocommerce_content()) @endsection

I could very well be getting the syntax or file structure wrong since the instructions apply to non-Blade themes. Any ideas?

[kalenjohnson]

Hey @masoninthesis, so this will work… eventually. I made a PR to allow filtering for the woocommerce.php file, and it was accepted, but it doesn’t look like it was part of the 2.6.* releases, but it is part of the 2.7 beta. If you can pull in that beta, that would allow you to use the woocommerce.blade.php file.

Otherwise, you can override the templates with Blade templates.

[masoninthesis]

Awesome, thanks for the info @kalenjohnson!

I’ll definitely try the 2.7 beta out (Release 2.7.0 Beta 1 · woocommerce/woocommerce · GitHub). I’ll report back how/if that works.

@kalenjohnson

Otherwise, you can override the templates with Blade templates.

Not quite sure how that is done. Isn’t that the same as what I’d be trying using the 2.7 beta? Thanks!

[kalenjohnson]

Well it seems like I was mistaken. I forgot how Woocommerce checks for template files. So basically… the woocommerce.php fix will be best

[masoninthesis]

Installed woocommerce 2.7.0 beta, and it’s fixed!.. Well sort of. PHP errors are gone now. But the shop and products pages don’t seem to be wrapped properly. The head is actually completely empty, so it’s missing all stylesheets.

Might this be related to the fact that when I add sage/woocommerce.php, it overrides woocommerce/woocommerce.php, but sage/templates/woocommerce.blade.php doesn’t have any effect?

Everything else is working.

If anyone wants to save time installing 2.7.0 Beta w/ Composer, you can use my git repo:

git@github.com:masoninthesis/woocommerce.git

And to clarify for any future-comers, here’s the steps required for it to work for me w/ Sage 9:

1. Create archive-product.php and single-product.php in theme root with <?php woocommerce_content(); ?>
2. Create woocommerce.php in theme root with WC loop <?php woocommerce_content(); ?>

[Eljas]

Hey @kalenjohnson

How do I override Woocommerce template files with my theme’s blade files?

Now I’m overriding those by adding .php file (not blade file) inside templates folder. But this way it won’t load my base layout at all.

All I would need is to override archive-products.php and single-product.php with my own blade files inside theme/templates folder.

[Eljas]

@emilsgulbis posted a way to use blade templates for WooCommerce. (https://github.com/roots/sage/issues/1807 ).

…you should create 2 files in templates/woocommerce - archive-product.php and single-product.php and add only

<?php echo App\Template('woocommerce'); to them. Then in templates/woocommerce add woocommerce.blade.php that contains @extends('layouts.base') @section('content') @php(woocommerce_content()) @endsection

The only thing I did different was to place woocommerce.blade.php file inside theme/template folder instead of theme/template/woocommerce.

[nacm]

This works for me. I have also placed woocommerce.blade.php out side the woocommerce folder, but inside the templates folder/

[vdrnn]

Did anyone of you guys figure out how to access variables from the controller in your woocommerce templates?
I posted another topic here Controller and WooCommerce where @kalenjohnson explained that the problem is that the template files are not blade templates, and the controller only works with blade templates.

Did anyone stumble upon the same issue?

[p3f]

Hey Guys, I’m trying to do the same with latest Sage 9 release but it doesn’t work with blade templates.

The “normal override” works (woocommerce/archive-product.php) though I have no base layout so it’s not really an option. I did try many solutions (they all date from 2017 in alpha of beta version) to have woocommerce.blade.php, but without success.

Here’s what I tried so far:
The above solution from Eljas

Issue: Controller not passing data to WooCommerce template

WooCommerce support

https://roots.io/using-woocommerce-with-sage/ (from sage 8)

Does anyone have a solution for this?

Thank you!

[Twansparant]

I would highly recommend @hambos22 sage 9 fork for integrating WooCommerce with Sage 9 and Blade: https://github.com/hambos22/sage-woo

[joshb]

I am bringing this thread back to life as I’ve searched and experimented with nearly every option I’ve discovered in this discourse to be able to override template files with Sage 9 but no luck.

Has anyone found an easy solution to this yet? I don’t exactly want to start over using that fork.

[KimH]

I made a composer package out of the solution I used on some projects I did a while ago. Feel free to test it out. Have not had time to test it out on a fresh Sage 9 project. Not sure I like that the package looks everywhere for templates anymore, but the original idea was that woocommerce templates should work just like other templates, and that I also could put templates in a plugin.

https://packagist.org/packages/kimhf/sage-woocommerce-support

[joshb]

Thank you for providing this.

It appears to install perfectly. I haven’t had a lot of time to play with it yet but upon initial installation it appears to duplicate the header of a single-product page and completely removes everything else related to WooCommerce.

Here are a couple files I created as you mentioned in the docs but modifying the files presents no change to the single product pages:

[joshb]

Always speaking too soon…
Once I start putting together my own partials for WooCommerce the pages start coming together.

I was under the assumption that the standard WooCommerce pages would appear as default out of the box until I started overwriting them with my own template overrides.

[KimH]

If you start out with something like this in single-product.blade.php

@php
/**
 * The Template for displaying all single products
 *
 * @see 	    https://docs.woocommerce.com/document/template-structure/
 * @version     1.6.4
 */
@endphp

@extends('layouts.app')

@section('content')
    @php
		/**
		 * woocommerce_before_main_content hook.
		 *
		 * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
		 * @hooked woocommerce_breadcrumb - 20
		 */
		do_action( 'woocommerce_before_main_content' );
    @endphp

    @while ( have_posts() )
      @php
      the_post();
      wc_get_template_part( 'content', 'single-product' );
      @endphp
    @endwhile

    @php
		/**
		 * woocommerce_after_main_content hook.
		 *
		 * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
		 */
		do_action( 'woocommerce_after_main_content' );
    @endphp

    @php
		/**
		 * woocommerce_sidebar hook.
		 *
		 * @hooked woocommerce_get_sidebar - 10
		 */
		do_action( 'woocommerce_sidebar' );
    @endphp
@endsection

then it should definitely load the default woocommerce templates, but without the duplicate header that get_header( ‘shop’ ); caused in the default single-product.php

[joshb]

@KimH

Have you had any luck with comments as reviews for WooCommerce with Sage 9?

I’m able to display this at the top of product pages:

But the area lower on the product page where it displays the 7 reviews displays them as comments and the comment/review form doesn’t give the option to choose a star rating when adding a review. (The stars exist because this is previous site being revamped).

I have all the options turned on in WooCommerce and WP to allow comments and reviews.

I can’t find much info on this. If you have any ideas that would be great.

[joshb]

Still having trouble with this. Anybody have any helpful tips?