Namespace config theme don't work

hau.nguyen

hi team,

Currently we are participating in frontend development training courses.
We can configure it to run well on 2 themes corresponding to 2 stores DE and AT.
However after viewing this documentation https://docs.spryker.com/docs/scos/dev/front-end-development/202307.0/yves/front-end-builder-for-yves.html#twig- templates
We tried applying the config to the store's namespace.
Everything is correct when building YVES, path /public/Yves/assets/DE/green/
/public/Yves/assets/AT/default/ is generated exactly as described in the documentation.

However, when checking in the browser. The layout pool appears for both stores. We have checked the console log. An error appears:

It seems like it always takes the path with namespace as current. It should be based on the store's namespace

You can view the record to understand clearly.
https://www.loom.com/share/0525c664b49149eca66f3c90c94dda3f?sid=3f2de1e0-022c-4615-84e8-a9e2037d2b6d

Note: we are using B2C demo package version 202307

Thanks

Hau Nguyen

Hidran Arias

In 202307, code buckets are set by region and not by store by default.

If you want to use stores as code buckets, you have to override src/SprykerConfig/CodeBucketConfig.php

public function getDefaultCodeBucket(): string
{
if ($this->isAcpDevOn()) {
return APPLICATION_STORE;
}

$codeBuckets = $this->getCodeBuckets();

    return defined('APPLICATION_REGION') ? APPLICATION_REGION : reset($codeBuckets);
}

and return the application store

public function getDefaultCodeBucket(): string
{

return APPLICATION_STORE;

}

In that way there is going to be a match between store and code bucket.

you can add your code buckets in

public function getCodeBuckets(): array
{
if ($this->isAcpDevOn()) {
return Store::getInstance()->getAllowedStores();
}

return [
'EU',
'US',
];
}

in the same dile

hau.nguyen

hi @Hidran Arias ,

According to your instructions, it still has the error of breaking the layout and losing CSS.
You can view the record to understand

https://www.loom.com/share/1fd851901435488594dd906d939d6947?sid=c4147365-8437-41c9-96eb-f08e788098af

Thanks

Hau Nguyen

Hidran Arias

Hi Hau,

Did you also add the rest of the things we talked about in a previous post in Slack?
I'll take a look at it Monday morning

Hidran Arias

The modifications I added, during the course, should have been added to the spryker's core code source but I don't see it. I'm going to verify with the frontend core team.
In order to manage namespaces you should change the path in config/Yves/frontend-build-config.json to

"path": "assets/%SPRYKER_BUILD_HASH%/%namespace%/%theme%/",

and in frontend/settings.js change
.filter((suffix) => suffix !== namespaceConfig.codeBucket). at line 95 to

to .filter(suffix => suffix && suffix !== namespaceConfig.codeBucket)

You can see the commit here in the course's github repo:

    
        https://github.com/spryker-academy/frontend-forbackenddev-course/commit/9458aec0eebe0d7d0595ab9839ce9e7bc7766202
    

hau.nguyen

hi @Hidran Arias ,

Yes, We have applied the changes from previous posts in Slack and the new instructions from you.
We discovered there are 2 options:
Option 1: codeBucket and namespace empty in frontend-build-config.json

{
    "path": "assets/%SPRYKER_BUILD_HASH%/%namespace%/%theme%/",
    "staticPath": "assets/static",
    "namespaces": [
        {
            "codeBucket": "",
            "namespace": "",
            "themes": ["green"],
            "defaultTheme": "default"
}
    ]
}

It works well for both stores, but the path in public
/Yves/assets/current does not separate store folders
Eg: public/Yves/assets/current/default or public/Yves/assets/current/green

Option 2: codeBucket and namespace NOT empty in frontend-build-config.json

{
    "path": "assets/%SPRYKER_BUILD_HASH%/%namespace%/%theme%/",
    "staticPath": "assets/static",
    "namespaces": [
        {
            "codeBucket": "DE",
            "namespace": "DE",
            "themes": ["green"],
            "defaultTheme": "default"
},
        {
            "codeBucket": "AT",
            "namespace": "AT",
            "themes": [],
            "defaultTheme": "default"
}
    ]
}

Edit code in config/Shared/config_default.php:

Change from

$config[ShopUiConstants::YVES_ASSETS_URL_PATTERN] = '/assets/' . (getenv('SPRYKER_BUILD_HASH') ?: 'current') .'/%theme%/';

to

$CURRENT_STORE = Store::getInstance()->getStoreName();
$config[ShopUiConstants::YVES_ASSETS_URL_PATTERN] = sprintf('/assets/%s/%s/%s/', (getenv('SPRYKER_BUILD_HASH') ?: 'current'), $CURRENT_STORE, '%theme%');

It works well for both stores, the path is public
/Yves/assets/current has separate store folders
Eg: public/Yves/assets/current/DE/green or public/Yves/assets/current/AT/default

I wonder, which way should I choose to do it, what is the best practice option?

Thanks

Hau Nguyen

Hidran Arias

you could also extend

vendor/spryker-shop/shop-ui/src/SprykerShop/Yves/ShopUi/Twig/Assets/AssetsUrlProvider.php

and override the getAssetsUrl() method .

hau.nguyen

hi @Hidran Arias ,

What you mean is that you can do another way with option 3 or supplement option 1 or 2

And how do you override?

Thanks

Hau Nguyen