woocommerce offtopic - Getting Uncaught SyntaxError: Unexpected token '<' when creating block based custo

admin管理员组

文章数量:1122832

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 months ago.

Improve this question

I am updating existing payment gateway to support latest version of wordpress and also to make compitable with block-based checkout. I want to display multiple payment option list under my payment gateway but when i use some html in js it throws syntax error. Plese help me as i am new to block-based checkout. below are my js and wordpress code

JS CODE:---

    const settings = window.wc.wcSettings.getSetting( 'casheer_data', {} );
    const Label = ( props ) => {
        const { PaymentMethodLabel } = propsponents
        return <PaymentMethodLabel text={ label } /> /* in this line i am getting erro */
    }
    const Content = () => {
        return window.wp.htmlEntities.decodeEntities( settings.description || '' );
    };
    
    const Block_Gateway = {
        name: 'casheer',
        label: <Label />,
        content: Object( window.wp.element.createElement )( Content, null ),
        edit: Object( window.wp.element.createElement )( Content, null ),
        canMakePayment: () => true,
        ariaLabel: label,
        supports: {
            features: settings.supports
        },
    };
    window.wc.wcBlocksRegistry.registerPaymentMethod( Block_Gateway );

Below is my register script function

            wp_register_script(
            'casheer-blocks-integration',
            plugin_dir_url(__FILE__) . 'checkout.js',
            [
                'wc-blocks-registry',
                'wc-settings',
                'wp-components',
                'wp-element',
                'wp-data',
                'wp-html-entities',
                'wp-i18n',
            ],
            null,
            true
        );
        if( function_exists( 'wp_set_script_translations' ) ) {            
            wp_set_script_translations( 'casheer-blocks-integration');
            
        }
        wp_localize_script( 'casheer-blocks-integration', 'myCustomGatewayData', array(
            'ajax_url' => admin_url( 'admin-ajax.php' ),
            // Other data
        ));     
        return [ 'casheer-blocks-integration' ];

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 5 months ago.

Improve this question

I am updating existing payment gateway to support latest version of wordpress and also to make compitable with block-based checkout. I want to display multiple payment option list under my payment gateway but when i use some html in js it throws syntax error. Plese help me as i am new to block-based checkout. below are my js and wordpress code

JS CODE:---

    const settings = window.wc.wcSettings.getSetting( 'casheer_data', {} );
    const Label = ( props ) => {
        const { PaymentMethodLabel } = props.components
        return <PaymentMethodLabel text={ label } /> /* in this line i am getting erro */
    }
    const Content = () => {
        return window.wp.htmlEntities.decodeEntities( settings.description || '' );
    };
    
    const Block_Gateway = {
        name: 'casheer',
        label: <Label />,
        content: Object( window.wp.element.createElement )( Content, null ),
        edit: Object( window.wp.element.createElement )( Content, null ),
        canMakePayment: () => true,
        ariaLabel: label,
        supports: {
            features: settings.supports
        },
    };
    window.wc.wcBlocksRegistry.registerPaymentMethod( Block_Gateway );

Below is my register script function

            wp_register_script(
            'casheer-blocks-integration',
            plugin_dir_url(__FILE__) . 'checkout.js',
            [
                'wc-blocks-registry',
                'wc-settings',
                'wp-components',
                'wp-element',
                'wp-data',
                'wp-html-entities',
                'wp-i18n',
            ],
            null,
            true
        );
        if( function_exists( 'wp_set_script_translations' ) ) {            
            wp_set_script_translations( 'casheer-blocks-integration');
            
        }
        wp_localize_script( 'casheer-blocks-integration', 'myCustomGatewayData', array(
            'ajax_url' => admin_url( 'admin-ajax.php' ),
            // Other data
        ));     
        return [ 'casheer-blocks-integration' ];

• woocommerce-offtopic
• block-editor

Share Improve this question edited Aug 8, 2024 at 17:34 fuxia♦ 107k3838 gold badges255255 silver badges459459 bronze badges asked Aug 6, 2024 at 6:56 user246843user246843 111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

In this code:

const Label = ( props ) => {
    const { PaymentMethodLabel } = props.components
    return <PaymentMethodLabel text={ label } /> /* in this line i am getting erro */
}

you use label variable, but it is not defined anywhere. It should be props.label?

But also, later you are using this like that:

label: <Label />,

So you are not giving any props to this component. So even with above fix, it won't be working.

I recommend to use TypeScript in your project with ESLint it will catch such issues right in your code editor (missing required params, or using undefined variables).

本文标签：