How can i write a seprate js or ts in Yves module and use them as assets anywhere in application.

aashutosh.namdeo
aashutosh.namdeo Posts: 33 πŸ§‘πŸ»β€πŸš€ - Cadet

I want to write client side js ts file in yves apart from component js and use them in any view file.

Tagged:

Best Answer

  • Hidran Arias
    Hidran Arias Senior Technical Trainer Sprykee Posts: 81 πŸ› - Council (mod)
    Answer βœ“

    Ok, let's go then step by step .

    If you want to add something into Order detail template, then it's better to do it like we show in the course:

    Replicate the view, template, component in src/Py/ CustomerPage and add your logic.

    You don't need to create a new Yves module for that. All common components and styles are under ShopUi module and you can add new ones or override the existing ones. Any js code you include in there , will be available in the main template

    if you want to add some javascript by using Β assets(publiclPath())

    then you have to override the view at project level and add the script to that view:

    src/Pyz/Yves/CustomerPage/Theme/default/templates/page-layout-customer/page-layout-customer.twig

    {% block nonCriticalStyles %}
    {{ parent() }}
    <script src="{{ publicPath('js/yves_default.my-component.js') }}"></script>
    <script src="{{ publicPath('js/my-global.js') }}"></script>
    {% endblock %}
    

    if you need to have a global js file that doesn't depend on a specific module, then you can place it under

    frontend/assets/global , for example:my-global.js . that file would be automatically copied to the public folder when you run npm run yves

    and then you can include it in any template by using <script src="{{ publicPath('js/yves_default.my-component.js') }}"></script>

Answers

  • Hidran Arias
    Hidran Arias Senior Technical Trainer Sprykee Posts: 81 πŸ› - Council (mod)
    edited January 29

    Hi,

    Do you mean a global js that itΒ΄s available in any view ?

    You can add your ts into src/Pyz/Yves/ShopUi/Theme/default/app.ts and it will be automatically available

    in your views as it is added to Yves's main layout .

    You can add your ts files in that theme, import your functions or objects into app.ts and they'll be available in all views.

    You can go deeper into Yves by following the frontend development track in safary.

    https://sprykee-safari.spryker.com/learn/lp/147/spryker-frontend-development-intermediate

  • aashutosh.namdeo
    aashutosh.namdeo Posts: 33 πŸ§‘πŸ»β€πŸš€ - Cadet

    Where should i create my custom js file in module for exampe i have TestModule in Yves so where i should create my file what will be the path for that file.

  • aashutosh.namdeo
    aashutosh.namdeo Posts: 33 πŸ§‘πŸ»β€πŸš€ - Cadet

    import Component from 'ShopUi/models/component';import $ from 'jquery/dist/jquery';import TestArticleValueFormHandler from '../components/molecules/test-article-form/test-article-form-handler';import * as internal from 'stream';
    export default class TestArticleGlobal extends Component {

    }

    Can i use component in my custom ts file and use that as global without creatin componet molecule or something , in a simple ts file can i use that component and use that in any view as a client js or ts

  • aashutosh.namdeo
    aashutosh.namdeo Posts: 33 πŸ§‘πŸ»β€πŸš€ - Cadet

    I am getting this error while updating app.ts

    logger.ts:84 [yves_default@error] application error -> TypeError: this.readyCallback is not a function
    at HTMLElement.init (component.ts:54:14)
    at HTMLElement.mountCallback (component.ts:68:14)
    at mountComponent (index.ts:33:15)
    at index.ts:53:48
    at Array.forEach (<anonymous>)
    at index.ts:53:14
    at Array.forEach (<anonymous>)
    at index.ts:49:14
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (asyncToGenerator.js:3:1)

    console error

  • aashutosh.namdeo
    aashutosh.namdeo Posts: 33 πŸ§‘πŸ»β€πŸš€ - Cadet

    By doing this what happens my script run automatically on every page of storefront , i want to call that perticular js only for some yves page like order details basically want to include that file only on order detail page but using this it will automatically execute on every page.

  • Hidran Arias
    Hidran Arias Senior Technical Trainer Sprykee Posts: 81 πŸ› - Council (mod)

    Then you can add it in the OrderDetail Module.

    Take a look at the course: Frontend for Backend Developers. There you can see how you can override a core module, add SCSS and ts files, how to run npm commands to transpile and publish your assets.

    If you just import a function or an object into your app.ts, in ShopUi, it won't be executed until you call that function in your view.
    If it's something global, you can add files in the resource folder or a subfolder and import your objects and functions in app.js. In that way, your code would get processed and your functions would be available in the global yves js file.

    If it is just for a specific Module, you do the same but only in the module

    You can also override the main yves' layout or any other module at project level if you need to add a component or any javascript logic to it

  • aashutosh.namdeo
    aashutosh.namdeo Posts: 33 πŸ§‘πŸ»β€πŸš€ - Cadet

    I want to do that only for specific module , Like I have TestArticle Module i create a fiel in TestArticle/theme/default/js/filename.js .
    Now i want that file compile and available in order details file when i call it using {{ assets(publiclPath()) }} in twig file only for order-details.twig.

  • aashutosh.namdeo
    aashutosh.namdeo Posts: 33 πŸ§‘πŸ»β€πŸš€ - Cadet

    In Frontend for Backend Developers. cource they only show how to create js or override js ts for component , not seprate js they are using they use only with components.

  • Hidran Arias
    Hidran Arias Senior Technical Trainer Sprykee Posts: 81 πŸ› - Council (mod)
    Answer βœ“

    Ok, let's go then step by step .

    If you want to add something into Order detail template, then it's better to do it like we show in the course:

    Replicate the view, template, component in src/Py/ CustomerPage and add your logic.

    You don't need to create a new Yves module for that. All common components and styles are under ShopUi module and you can add new ones or override the existing ones. Any js code you include in there , will be available in the main template

    if you want to add some javascript by using Β assets(publiclPath())

    then you have to override the view at project level and add the script to that view:

    src/Pyz/Yves/CustomerPage/Theme/default/templates/page-layout-customer/page-layout-customer.twig

    {% block nonCriticalStyles %}
    {{ parent() }}
    <script src="{{ publicPath('js/yves_default.my-component.js') }}"></script>
    <script src="{{ publicPath('js/my-global.js') }}"></script>
    {% endblock %}
    

    if you need to have a global js file that doesn't depend on a specific module, then you can place it under

    frontend/assets/global , for example:my-global.js . that file would be automatically copied to the public folder when you run npm run yves

    and then you can include it in any template by using <script src="{{ publicPath('js/yves_default.my-component.js') }}"></script>

  • aashutosh.namdeo
    aashutosh.namdeo Posts: 33 πŸ§‘πŸ»β€πŸš€ - Cadet