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

aashutosh.namdeo

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

Hidran Arias

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>

Hidran Arias

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

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

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

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

https://commercequest.space/discussion/comment/28756#Comment_28756

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

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

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

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

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

https://commercequest.space/discussion/comment/28764#Comment_28764

Thanks Alot .