Pregunta sobre WooCommerce Admin de Wordpress:

@ wordpress / hooks – C贸mo usar createStore de redux

Un usuario pregunt贸 馃憞

Hola a todos,

Estoy tratando de usar @wordpress / hooks dentro de mis 2 plugins. Aqu铆 est谩 el escenario de lo que quer铆a hacer.

Estoy usando el enrutamiento de reacci贸n dentro de mi primer plugin que estoy usando applyFilters para que se pueda agregar una nueva ruta al segundo plugin.

Aqu铆 est谩 el c贸digo que estoy usando para agregar canales din谩micamente en mi primer plugin.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { applyFilters } from '@wordpress/hooks';
import store from './store';

import Home from './components/body/tabs/home/home.jsx';
import Customer from './components/body/tabs/customer/customer.jsx';
import wkwcpos_variable from './config';

export const PAGES_FILTER = 'wkwcpos_pages_list';

export function getPages() {

	const pages = [
		{
			name: 'Customers',
			path: '/pos/customers',
			component: Customer
		},
		{
			name: 'Home',
			path: '/pos',
			component: Home
		}

	];

	return applyFilters( PAGES_FILTER, pages );
}

document.addEventListener("DOMContentLoaded", () => {

	ReactDOM.render(
	<Provider store={store}>
		<BrowserRouter>
			<Switch>

				{ getPages().map( page => {
					return (
						<Route
							key={ wkwcpos_variable.HOME_URL + page.path }
							path={ wkwcpos_variable.HOME_URL + page.path }
							exact
							name = { page.name }
							component={ page.component }
						/>
					);

				} ) }

			</Switch> 
		</BrowserRouter>
	</Provider>
	,document.getElementById('app'));

});

Pero cuando agrego una nueva ruta a mi segundo plugin y agrego un componente de c贸digo a ese plugin, comete un error al proporcionar el repositorio para 茅l. Pero necesito usar el primer repositorio de plugins dentro de mi segundo plugin.

import React from 'react';
import { addFilter } from '@wordpress/hooks';
import Booking from './components/body/tabs/booking/booking.jsx';

addFilter( 'wkwcpos_pages_list', 'plugin-domain', pages => {
	return [
		...pages,
		{
			name: 'Booking',
			path: '/pos/booking',
			component: Booking
		}
	];
} );

Este es el componente de reserva,

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Product from './product/product.jsx';

import './less/booking.less';

class Booking extends Component {

    constructor(props) {
        super(props);
    }

    render() {

        var products = this.props.products;
        var listProducts = '';

        if( products.length > 0 ) {

            listProducts = products.map( ( element, i ) => {
                return (
                    <Product key={i} product={element}></Product>
                );
            });
        }

        return (

            <div className="body-wrap">
                {listProducts}
            </div>

        );
    }
}

const mapStateToProps = state => ({
    products: state.products
});

export default connect( mapStateToProps )(Booking);

Aqu铆 necesito usar el estado definido en el primer plugin. Puede alguien ayudarme con esto?

(@jeffstieler)

Hace 1 a帽o, 1 mes

Hola @ yash429,

Ha sido agregado al foro de soporte para el plugin de administraci贸n de WooCommerce, no a WordPress.

Publique aqu铆: https://wordpress.org/support/forum/wp-advanced/ para obtener ayuda con el desarrollo de primera l铆nea de WordPress.

隆Gracias!

驴Solucion贸 tu problema??

0 / 0

Deja una respuesta 0

Tu direcci贸n de correo electr贸nico no ser谩 publicada.