Calling Developers!
We are reenergizing our code contribution process! Learn More

Namespace config theme don't work

Options
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: 73 🏛 - Council (mod)
    Options

    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
    Options

    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: 73 🏛 - Council (mod)
    Options

    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: 73 🏛 - Council (mod)
    Options

    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
    Options

    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: 73 🏛 - Council (mod)
    Options

    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
    Options

    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