React.JS plugin for Wordpress embedded widget and a full-screen container

Viewed 281

I am building a React.JS plugin for Wordpress.

I was able to build the wrapper that combined Wordpress with React.JS and embed my widget using a shortcode.

Currently, the app code is like the below:

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';
import reportWebVitals from './reportWebVitals';

const targets = document.querySelectorAll('.smw-root');
Array.prototype.forEach.call(targets, target => {
  const id = target.dataset.id;
  const settings = window.smwSettings && window.smwSettings[id];
  ReactDOM.render(<App settings={settings} />, target);
});
reportWebVitals();

The <App /> piece above is a product list. It shows up fine. I had to add "homepage": "/wp-content/plugins/my-plugin/widget/build", to package.json and it worked fine.

In addition to the list, my plugin also has to render a full-screen container with product details, displayed when one of the entries in the above list is clicked.

I would like this "item details" route to be formatted as /item/:id. If possible, I would also like website administrators to control the look of this "item details" container to the extend that webmasters would select styles, background, header, and footer, etc. I would best prefer then have product details be embedded with something similar to shortcodes per attribute, e.g. [smw-attribute type="image"] and [smw-attribute type="description"] or [smw-attribute type="manufacturer"].

If embedding individual "properties" is difficult, I would go with just a full-screen container.

Currently, I have the wrapper and enqueue and shortcode php pieces. Enqueue part adds the necessary styles and scripts to the HTML page, while shortcode returns an empty div for the right class and a unique id, so multiple widgets could be embedded into the same page, if necessary.

How do I add the product details route to Wordpress and my React.JS plugin, so the details page is rendered whenever a visitor clicked on the product link from the list, and/or accessed it using a direct link?

0 Answers
Related