Namespace config theme don't work

hau.nguyen
hau.nguyen Spryker job Posts: 23 🧑🏻‍🚀 - Cadet

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

Tagged:

Answers

  • Hidran Arias
    Hidran Arias Senior Technical Trainer Sprykee Posts: 83 🏛 - Council (mod)

    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
    hau.nguyen Spryker job Posts: 23 🧑🏻‍🚀 - Cadet

    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
    Hidran Arias Senior Technical Trainer Sprykee Posts: 83 🏛 - Council (mod)

    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
    Hidran Arias Senior Technical Trainer Sprykee Posts: 83 🏛 - Council (mod)

    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
    hau.nguyen Spryker job Posts: 23 🧑🏻‍🚀 - Cadet

    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
    Hidran Arias Senior Technical Trainer Sprykee Posts: 83 🏛 - Council (mod)

    you could also extend

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

    and override the getAssetsUrl() method .

  • hau.nguyen
    hau.nguyen Spryker job Posts: 23 🧑🏻‍🚀 - Cadet

    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