React App Backend Init

Sections and Offers

React App Offers Tool is being rendered through nx_offers_app_callback() function. React App uses the saved NX Offers settings and combines them with core settings in order to generate the final Section and Template objects which are later passed in and used by the React App. The Section object is initialized by nx_get_available_sections() function, Offer object is initialized by nx_get_available_offer_templates() function.

$nx_offers_sections = nx_get_available_sections();
$nx_offers_templates = nx_get_available_offer_templates();

Taxonomies used in the React App

An array of all the available taxonomies that will be used is also initialized in this callback, the variable is $taxonomy_slugs_array and its’ values are generated in the nx_get_final_template_object() function which is called in the nx_get_available_offer_templates() function. During the nx_get_final_template_object(), each template goes through a check finalize the returning data according to user settings, and also to recognize which taxonomy will be used in each template. All these taxonomies along with their terms are later stored in the $taxonomy_group multiarray located in nx_offers_app_callback().

if(!empty($taxonomy_slugs_array)){
    foreach ($taxonomy_slugs_array as $taxonomy_slug){
        $taxonomy_terms = get_terms(array('taxonomy'=>$taxonomy_slug, 'hide_empty'=>false));
        if($taxonomy_terms && !is_wp_error($taxonomy_terms)) {
            $taxonomy_group[$taxonomy_slug] = [];
            foreach ($taxonomy_terms as $taxonomy_term){
                $taxonomy_group[$taxonomy_slug][] = [
                    "id"=>$taxonomy_term->term_id,
                    "name"=>$taxonomy_term->name,
                    "slug"=>str_replace('pamestoiximagr','pamestoixima',$taxonomy_term->slug),
                ];
            }
        }
    }
}

Window variables Initialized

window.offerTaxonomies = <?= json_encode($taxonomy_group)?>;
window.generalSettings = <?= json_encode($general_settings)?>;
window.offerSections = <?= json_encode($nx_offers_sections)?>;
window.offerTemplates = <?= json_encode($nx_offers_templates)?>;
window.pluginAssetsUrl = '<?= NX_OFFERS_URL.'assets/images/'?>';

React App Tool rendering

React App Tool is rendered through the tool.min.js file.

wp_enqueue_script(
    'nx-offers-app',
    NX_OFFERS_URL . 'includes/app/tool.min.js?v=' . time(), // Use NX_OFFERS_URL instead of NX_OFFERS_DIR
    array(),
    null,
    true
);

Offers tool is appended on a html element.

echo '<div id="offers-tool">NX Offers tool is loading...</div>'; // Root element for your React app

This element rendering is defined in the index.js of the React Offers Tool directory, app/src/components/tool/index.js.

const root = ReactDOM.createRoot(document.getElementById("offers-tool"));

const contextValue = {
    generalSettings: window?.generalSettings,
    offerSections: window?.offerSections ?? [],
    offerTemplates: window?.offerTemplates ?? [],
    pluginAssetsUrl: window?.pluginAssetsUrl ?? '',
    taxonomies: window?.offerTaxonomies ?? [],
    affiliateAssetsUrl: generalSettings?.assets_url ?? ''
};



root.render(
    
        
            
                
                    
                
            

        
    
);