Blockified Single Product Template: add product-classes via `wc_get_product_class` (https://github.com/woocommerce/woocommerce-blocks/pull/9697)

* Blockified Single Product Template: add product-classes via wc_get_product_class

* Update src/BlockTemplatesController.php

Co-authored-by: Karol Manijak <karol.manijak@automattic.com>

---------

Co-authored-by: Karol Manijak <karol.manijak@automattic.com>
This commit is contained in:
Luigi Teschio 2023-06-02 16:16:20 +02:00 committed by GitHub
parent 278f0ec0db
commit d85a6ecbd2
3 changed files with 66 additions and 1 deletions

View File

@ -328,6 +328,14 @@ class BlockTemplatesController {
// The second condition is necessary to not apply the compatibility layer on the REST API. Gutenberg uses the REST API to clone the template.
// More details: https://github.com/woocommerce/woocommerce-blocks/issues/9662.
if ( ( ! is_admin() && ! ( defined( 'REST_REQUEST' ) && REST_REQUEST ) ) && ! BlockTemplateUtils::template_has_legacy_template_block( $template ) ) {
// Add the product class to the body. We should move this to a more appropriate place.
add_filter(
'body_class',
function( $classes ) {
return array_merge( $classes, wc_get_product_class() );
}
);
$new_content = SingleProductTemplateCompatibility::add_compatibility_layer( $template->content );
$template->content = $new_content;
}

View File

@ -35,7 +35,7 @@ const config: ExtendedPlaywrightTestConfig = {
use: {
baseURL: BASE_URL,
screenshot: 'only-on-failure',
stateDir: './tests/e2e-pw/test-results/storage/',
stateDir: 'tests/e2e-pw/test-results/storage/',
trace: 'retain-on-failure',
video: 'on-first-retry',
viewport: { width: 1280, height: 720 },

View File

@ -0,0 +1,57 @@
/**
* External dependencies
*/
import { test, expect } from '@woocommerce/e2e-playwright-utils';
const products = [
{
product: 'Album',
// Copy-pasted by WooCommerce Core Legacy Template.
classes: [
'product',
'type-product',
'status-publish',
'instock',
'product_cat-music',
'has-post-thumbnail',
'downloadable',
'virtual',
'purchasable',
'product-type-simple',
],
frontendPage: '/product/album/',
},
{
product: 'Hoodie',
// Copy-pasted by WooCommerce Core Legacy Template.
classes: [
'product',
'type-product',
'status-publish',
'instock',
'product_cat-hoodies',
'has-post-thumbnail',
'sale',
'shipping-taxable',
'purchasable',
'product-type-variable',
],
frontendPage: '/product/hoodie/',
},
];
for ( const { classes, product, frontendPage } of products ) {
test.describe( `The Single Product page of the ${ product }`, () =>
test( 'add product specific classes to the body', async ( {
page,
} ) => {
await page.goto( frontendPage );
const body = await page.locator( 'body' );
const bodyClasses = await body.getAttribute( 'class' );
classes.forEach( ( className ) => {
expect( bodyClasses?.split( ' ' ) ).toContain( className );
} );
} )
);
}