Any working example of Sage 9 latest (Sage 9.0.0-beta.4+) with WooCommerce (3.1.1+)?

I’ve been trying every example on the forum without much luck.

Some of the examples duplicate the woocommerce content over and over again (in my case), some just don’t work.

I’ve ended with a setup that seams to work, but not sure how to overwrite additional files from woo.

// app/setup.php
add_theme_support('woocommerce');
// app/woocommerce.php
<?php

namespace App;

/**
 * WooCommerce Support
 */
add_filter('woocommerce_template_loader_files', function ($search_files, $default_file) {
    return filter_templates(array_merge($search_files, [$default_file, 'woocommerce']));
}, 100, 2);

add_filter('woocommerce_locate_template', function ($template, $template_name, $template_path) {
    $theme_template = locate_template("{$template_path}{$template_name}");

    return $theme_template ? template_path($theme_template) : $template;
}, 100, 3);

add_filter('wc_get_template_part', function ($template, $slug, $name) {
    $theme_template = locate_template(["woocommerce/{$slug}-{$name}", "woocommerce/${name}"]);

    return $theme_template ? template_path($theme_template) : $template;
}, 100, 3);
// resources/functions.php

array_map(function ($file) use ($sage_error) {
    $file = "../app/{$file}.php";
    if (!locate_template($file, true, true)) {
        $sage_error(sprintf(__('Error locating <code>%s</code> for inclusion.', 'sage'), $file), 'File not found');
    }
}, ['helpers', 'setup', 'filters', 'admin', 'woocommerce']);

All from https://github.com/roots/sage/pull/1923

// resources/views/woocommerce/archive-product.php

<?php echo App\Template('woocommerce');
// resources/views/woocommerce.blade.php

@extends ('layouts.app')

@section ('content')
@php (woocommerce_content())
@stop

Does anyone have a better setup?
Can I make any improvements to the current setup?

5 Likes

It took me a lot of messing around to get this working for me with Sage 9.0.0-beta.4

Put the following in /resources/views/woocommerce.blade.php

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

But then the thing that worked for me was putting archive-single.php and single-product.php in /resources/woocommerce/ (you need to create the woocommerce folder) instead of putting them in /resources/views/woocommerce/

Both these files have the following content:

<?php echo App\Template('woocommerce');

Appears to be working without errors at the moment.

11 Likes

This works great! Thanks!!

Hi,
With this method, the variation doesn’t seems to work (the price isn’t updated and all the hook aren’t called).

But I mixed up this solution whit the @indrek-k one on github that you find here.
https://github.com/roots/sage/issues/1807#issuecomment-273543163,

adding this filters, you’ll be able to load .blade.php files for each template in the woocommerce plugin folder. Btw you won’t be able to load the single-product.php and the archive-product.php files.

So I just uses both solutions but instead of your content, in the resources/single-product.php file and resources/the archive-product.php I put this content:
single-product.php:

<?php echo App\Template('single-product');

archive-product.php:

<?php echo App\Template('archive-product');

Then i added the single-product.blade.php and the archive-product.blade.php
And, finally, I converted that file in a blade way :slight_smile:
@extends(‘layouts.app’)
@section(‘content’)<?php if ( ! defined( ‘ABSPATH’ ) ) exit;
?><?php do_action( ‘woocommerce_before_main_content’ )
?><?php while ( have_posts() ) : the_post(); ?>
<?php wc_get_template_part( 'content', 'single-product' ); ?>
<?php endwhile; // end of the loop. ?>
<?php do_action( 'woocommerce_after_main_content' )?>
<?php do_action( 'woocommerce_sidebar' )?>
@endsection

Plus, I suggest to add the comments in the resources/woocommerce/single-product.php so woocommerce will be able to detect if your template is outdated with the new versions

Actually I think this is too much work to let woocommerce files work on Sage, but I don’t know how it could be better, i’m thinking on buildin a woocommerce-sage theme. Does it will be helpful?

Some clear documentation about integrating Woocommerce with Sage 9 would be very very useful indeed!

3 Likes

After many trials and 5 ecommerce projects with sage, I decided to make my own fork of Sage 9, out of the box intergraded with Woocommerce and with endless boilerplate code ready. You can find it here with full documentation and features.

13 Likes

Wow! Thanks @hambos22!

1 Like

I wonder if there’s a way to make just the WooCommerce part into a Composer package that could be optionally included in a Sage project. I don’t know if Composer can “fake” files into specific directories…

I thought of making it as a Composer package but the obstacle is the woocommerce templates directory. Files inside are depended on the SageWoo class (eg the function which alters the woocommerce hard coded billing forms, is being used inside blade templates), so I preferred to start it as a boilerplate for much more flexibility.

Well, you could probably autoload that class as part of the Composer package, too. But yeah, I feel you.

Yeah but this boilerplate has no meaning without the blade files :confused:. I’m thinking the woo overrides as the 60-70% of the work for every woo project. Otherwise, it would be bundled with the YAML features only and then you couldn’t avoid all the woo front end hassle.

I’ll try to keep the fork updated with the upstream (I’m using backstroke.co for making it easier). Also I tried to separate it as much possible from Sage’s app files (only some helpers and such are being used).

Thanks for doing this. It’s incredibly helpful for anyone trying to integrate the two.

I’ve been on the lookout for a way to easily add plugin support for more ornery plugins (WooCommerce, The Events Calendar). If I come across an easier way to sort of “overlay” blades and classes with Composer I’ll let you know!

2 Likes

That would be great, thanks!

Yes very helpful indeed, it was quit the hasle to integrate it into Sage 9 and the blade templates.
Thanks a lot!

Thanks, hambos22, that saves a lot of pain!

Hi, hambos, what is the best way to remove Bootstrap form your git clone (Woocommerce) ? Many Thanks

Hi, Hambos, I am getting error about soberwp ( ! )
Fatal error: Uncaught ReflectionException: Class App\Controllers\app does not exist in /var/www/vhost4.com/wordpress/wp-content/themes/sage-woo/vendor/soberwp/controller/src/Loader.php on line 119

Any tips at all? Thanks

Hi! This was a controller issue. Go to composer.json file and change this line

"autoload": {
    "psr-4": {
      "App\\": "app/",
    }
  }, 

to

"autoload": {
    "psr-4": {
      "App\\": "app/",
      "App\\Controllers\\":"app/controllers/"
    }
  },

after that do a composer dump-autoload

As for removing Bootstrap, its a lot of SCSS and markup work. First remove bootstrap from package.json. Then add your framework (or not). The SCSS files are using classes and mixins from bootstrap so you must delete or modify them incrementally. Finally change the markup on blade files to suit your needs. Much of the markup uses Bootstrap classes and its tightly coupled with the current design.

Anyway be ready for many scss errors and breaks on design. I was anti-bootstrap too but after the 4v I changed my mind. The markup is minimal, its flexible because of the SCSS and its much safer than foundation which I used to work (foundation has default styling right to the element without classes, on Bootstrap you need to add a class).

Thanks again @hambos22, this really helped me a lot!

This snippet might be a nice addition to lower the amount of http requests on non-woocommerce pages:

// dequeue wc scripts & styles on non-woocommerce pages
public function manageWoocommerceStyles() {
	// remove generator meta tag
	remove_action('wp_head', array($GLOBALS['woocommerce'], 'generator'));

	// first check that woo exists to prevent fatal errors
	if (function_exists('is_woocommerce')) {
		// dequeue scripts and styles
		if (!is_woocommerce() && !is_cart() && !is_checkout()) {
			# WooCommerce Styles
			wp_dequeue_style('woocommerce-general');
			wp_dequeue_style('woocommerce-layout');
			wp_dequeue_style('woocommerce-smallscreen');
			wp_dequeue_style('woocommerce_frontend_styles');
			wp_dequeue_style('woocommerce_fancybox_styles');
			wp_dequeue_style('woocommerce_chosen_styles');
			wp_dequeue_style('woocommerce_prettyPhoto_css');
			# WooCommerce Scripts
			wp_dequeue_script('wc_price_slider');
			wp_dequeue_script('wc-single-product');
			wp_dequeue_script('wc-add-to-cart');
			wp_dequeue_script('wc-cart-fragments');
			wp_dequeue_script('wc-checkout');
			wp_dequeue_script('wc-add-to-cart-variation');
			wp_dequeue_script('wc-single-product');
			wp_dequeue_script('wc-cart');
			wp_dequeue_script('wc-chosen');
			wp_dequeue_script('woocommerce');
			wp_dequeue_script('prettyPhoto');
			wp_dequeue_script('prettyPhoto-init');
			wp_dequeue_script('jquery-blockui');
			wp_dequeue_script('jquery-placeholder');
			wp_dequeue_script('fancybox');
			wp_dequeue_script('jqueryui');
			# WooCommerce Multilingal scripts
			wp_dequeue_script('wcml-front-scripts');
			wp_dequeue_script('cart-widget');
		}
	}
}
add_action('wp_enqueue_scripts', 'manageWoocommerceStyles', 99);

And this one to add support for the default product gallery zoom, lightbox & slider functionalities:

add_theme_support('wc-product-gallery-zoom');
add_theme_support('wc-product-gallery-lightbox');
add_theme_support('wc-product-gallery-slider');

Cheers!

5 Likes

I’m happy that it helped you!

As for the scripts I’ve already included something for dequeueing scripts as you can see in the docs. But not conditionally. I believe this is developer’s choice. But I’ll add for sure the second snippet :slight_smile: Thanks

PS
I’m not using the default woo slider and zoom. I made up my own plugin for this, using Slick and jQuery zoom, with multiple variation images support, lazy loading and lightgallery for lightbox. Much more flexible than the default one. I’ll open source it someday