Hello everyone, I have created a payment module like the vendor module(composer) and everything wor

U01HX2U4NLQ

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.

Unknown

Hi @U01HX2U4NLQ! Create a molecule with .ts file where you can put all you js logic. Use this molecule inside you view template.

U01HX2U4NLQ

@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.

U01HX2U4NLQ

@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 🙂

Unknown

@UQRP02SP2 could you please help here with FE part?

Yuriy Gerton

The builder is looking for entry points for components on several levels (core, eco, project) via the globalSettings.paths object of frontend/settings.js.
So if you need a new folder with entry points you will need to add a new level in the globalSettings.paths object and also add it to the return object in find.componentEntryPoints.dirs array.
Component’s index.ts must import assets that are needed for the component (TS, SCSS, CSS).
You should use frontend/assets/ for images, fonts, etc.

Yuriy Gerton

Perhaps this documentation will be helpful too
https://documentation.spryker.com/docs/frontend-assets-building-and-loading#assets-structure

U01HX2U4NLQ

@UR1QYK8MC @UQRP02SP2 Thank you very much for your supports and it's really helpful to fix my issues. 🙂