How can i write a seprate js or ts in Yves module and use them as assets anywhere in application.
I want to write client side js ts file in yves apart from component js and use them in any view file.
Best 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 runnpm run yves
and then you can include it in any template by using <script src="{{ publicPath('js/yves_default.my-component.js') }}"></script>
2
Answers
-
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 availablein 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.
1 -
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.
0 -
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 ts0 -
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 error0 -
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.
0 -
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
0 -
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.0 -
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.0 -
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 runnpm run yves
and then you can include it in any template by using <script src="{{ publicPath('js/yves_default.my-component.js') }}"></script>
2 -
Thanks Alot .
1
Categories
- All Categories
- 42 Getting Started & Guidelines
- 7 Getting Started in the Community
- 8 Additional Resources
- 7 Community Ideas and Feedback
- 68 Spryker News
- 890 Developer Corner
- 753 Spryker Development
- 83 Spryker Dev Environment
- 360 Spryker Releases
- 3 Oryx frontend framework
- 34 Propel ORM
- 68 Community Projects
- 3 Community Ideation Board
- 30 Hackathon
- 3 PHP Bridge
- 6 Gacela Project
- 22 Job Opportunities
- 3.2K π Slack Archives
- 116 Academy
- 5 Business Users
- 370 Docker
- 551 Slack General
- 2K Help
- 75 Knowledge Sharing
- 6 Random Stuff
- 4 Code Testing
- 32 Product & Business Questions
- 68 Spryker Safari Questions
- 50 Random