What are the Slack Archives?
Itโs a history of our time together in the Slack Community! Thereโs a ton of knowledge in here, so feel free to search through the archives for a possible answer to your question.
Because this space is not active, you wonโt be able to create a new post or comment here. If you have a question or want to start a discussion about something, head over to our categories and pick one to post in! You can always refer back to a post from Slack Archives if needed; just copy the link to use it as a reference..
Hello everyone, I have created a payment module like the vendor module(composer) and everything wor
Hello everyone,
I have created a payment module like the vendor module(composer) and everything works fine. Now I want to add the custom JS script file to handle the Credit Card payment form (credit-card.twig) validation etc., Anyone please share the knowledge to add a custom js file for the Yves template.
Also, I have referred some payment providers regarding this and found some of them using script files under the "assets" directory. If, this is the right way? then please share what are the procedure to and post-process to use the "asset" option.
Thanks in advance.
Comments
-
Hi @U01HX2U4NLQ! Create a molecule with .ts file where you can put all you js logic. Use this molecule inside you view template.
0 -
@UR1QYK8MC Thank you very much.
I have created the same and now the molecule twig file(credit-card.twig) working fine. But the problem is the credit-card.ts file script not working.
i) credit-card.twig
{% extends model('component') %}{% define config = {
name: 'credit-card',
tag: 'credit-card'
} %}{% define data = {
form: required
} %}{% block body %}
{{ form_errors(data.form.testCreditCard) }} {{ form_widget(data.form.testCreditCard) }}{% endblock %}
ii) index.ts
import register from 'ShopUi/app/registry';
export default register('credit-card', () => import(
/* webpackMode: "lazy" /
/ webpackChunkName: "credit-card" */
'./credit-card'));iii) credit-card.ts
import Component from 'ShopUi/models/component';
adapted the JS logics
After I have executed console frontend:yves:build too.
If anything missing/wrong from my above steps please correct me.
0 -
@UR1QYK8MC The credit-card.ts file is working after added my vendor payment path('./vendor/test/payment') information in frontend/settings.js.
Hope these difficulties due to my payment not under (project, spryker-eco, etc.,).
Is there the same for Yves assets or need to add the path or namespace in config files?
Thanks in advance ๐
0 -
@UQRP02SP2 could you please help here with FE part?
0 -
The builder is looking for entry points for components on several levels (
core
,eco
,project
) via theglobalSettings.paths
object offrontend/settings.js
.
So if you need a new folder with entry points you will need to add a new level in theglobalSettings.paths
object and also add it to thereturn
object infind.componentEntryPoints.dirs
array.
Componentโsindex.ts
must import assets that are needed for the component (TS, SCSS, CSS).
You should usefrontend/assets/
for images, fonts, etc.0 -
Perhaps this documentation will be helpful too
https://documentation.spryker.com/docs/frontend-assets-building-and-loading#assets-structure0 -
@UR1QYK8MC @UQRP02SP2 Thank you very much for your supports and it's really helpful to fix my issues. ๐
0
Categories
- All Categories
- 42 Getting Started & Guidelines
- 7 Getting Started in the Community
- 8 Additional Resources
- 7 Community Ideas and Feedback
- 75 Spryker News
- 924 Developer Corner
- 783 Spryker Development
- 88 Spryker Dev Environment
- 362 Spryker Releases
- 3 Oryx frontend framework
- 35 Propel ORM
- 68 Community Projects
- 3 Community Ideation Board
- 30 Hackathon
- 3 PHP Bridge
- 6 Gacela Project
- 25 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
- 70 Spryker Safari Questions
- 50 Random