CODEWITHSUNDEEP
phpwordpresswordpress-themingshortcodecustom-wordpress-pages
auerc89
auerc89

Reputation: 378

Visual Composer custom shortcode template - custom_markup display user input

I have created some shortcode elements. Now I want to customize the look of the elements in the backend editor.

From the description of the wiki of VC-Pagebuilder, I get out that I can use the "custom_markup" param for this.

For simple html it works fine. But I can not display the user input in the shortcode backend element.

<?php
    add_shortcode('simpletext', 'simpletext_shortcode');
    add_action('vc_before_init', 'simpletext_vc');

    // Frontend output

    function simpletext_shortcode($atts, $content = '') {
      ob_start();
      set_query_var('content', $content);
      get_template_part('components/content', 'simpletext');
      return ob_get_clean();
    }

    // Backend
    function simpletext_vc() {
      vc_map(array(
        "name" => "Einfacher Text",
        "base" => "simpletext",
        "class" => "",
        "icon" => get_template_directory_uri() ."/images/vc_icons/simpletext_icon.png", 
    "custom_markup" => '{{ content }}', // try to display the user input
    "category" => "Text",
    "params" => array(
      array(
        "param_name" => "content",
        "heading" => "Inhalt",
        "description" => "Inhalt des Elements.",
        "holder" => "div",
        "type" => "textarea_html"
      )
    )
   ));
  }
?>

I 'm grateful for any help .

Upvotes: 21

Views: 1873

Answers (4)

Navjot Singh
Navjot Singh

Reputation: 147

Solution: Instead of custom_markup, use admin_enqueue_js with the admin_render_callback function to correctly display user input in the backend.

   <?php
add_shortcode('simpletext', 'simpletext_shortcode');
add_action('vc_before_init', 'simpletext_vc');

// Frontend output
function simpletext_shortcode($atts, $content = '') {
    ob_start();
    set_query_var('content', $content);
    get_template_part('components/content', 'simpletext');
    return ob_get_clean();
}

// Backend
function simpletext_vc() {
    vc_map(array(
        "name" => "Einfacher Text",
        "base" => "simpletext",
        "class" => "",
        "icon" => get_template_directory_uri() . "/images/vc_icons/simpletext_icon.png",
        "category" => "Text",
        "params" => array(
            array(
                "param_name" => "content",
                "heading" => "Inhalt",
                "description" => "Inhalt des Elements.",
                "holder" => "div",
                "type" => "textarea_html"
            )
        ),
        "admin_enqueue_js" => array(
            "admin_render_callback" => "simpletext_admin_render"
        )
    ));
}

// Backend render function
function simpletext_admin_render($atts, $content = '') {
    return '<div style="padding: 10px; background: #f1f1f1; border: 1px solid #ddd;">' . wp_kses_post($content) . '</div>';
}

?>

Upvotes: 0

Mansi Jani
Mansi Jani

Reputation: 39

    <?php
add_shortcode('simpletext', 'simpletext_shortcode');
add_action('vc_before_init', 'simpletext_vc');

// Frontend output
function simpletext_shortcode($atts, $content = '') {
    ob_start();
    set_query_var('content', $content);
    get_template_part('components/content', 'simpletext');
    return ob_get_clean();
}

// Backend
function simpletext_vc() {
    vc_map(array(
        "name" => "Einfacher Text",
        "base" => "simpletext",
        "class" => "",
        "icon" => get_template_directory_uri() ."/images/vc_icons/simpletext_icon.png",
        "category" => "Text",
        "params" => array(
            array(
                "param_name" => "content",
                "heading" => "Inhalt",
                "description" => "Inhalt des Elements.",
                "holder" => "div",
                "type" => "textarea_html"
            )
        ),
        // Correct usage of custom_markup
        "custom_markup" => '
            <div class="vc_custom_element">
                {{ content }}
            </div>
        ',
    ));
}
?>

Instead of {{ content }}, use a suitable placeholder for dynamic content. To dynamically render content, the custom_markup alternative should be properly formatted. You have a textarea_html parameter for user input, but the custom_markup outputs only {{ content }}.

Upvotes: 0

Istiyak Amin
Istiyak Amin

Reputation: 281

Here's an approach that can help you to achieve dynamic content representation in the backend:

1. Enqueue Custom JavaScript for Admin

function simpletext_vc_scripts() {
  wp_enqueue_script('simpletext-vc-custom', get_template_directory_uri() . '/js/simpletext-vc-custom.js', array('jquery'), '1.0', true);
}
add_action('admin_enqueue_scripts', 'simpletext_vc_scripts');

2. JavaScript to Modify Backend View In your simpletext-vc-custom.js:

(function($){
  $(document).ready(function(){
    if ( typeof vc !== 'undefined' ) {
      vc.events.on("shortcodes:simpletext:params_changed", function(model) {
        var params = model.get('params');
        var content = params.content || '';
        $(".vc_shortcode-param[data-param_type='simpletext']").each(function() {
          // Update the backend view
          $(this).find('.custom_markup_display').text(content);
        });
      });
    }
  });
})(jQuery);

3. Modify Your simpletext_vc Function You might need to adjust your custom_markup to include a placeholder where the JavaScript can insert the dynamic content:

"custom_markup" => '<div class="custom_markup_display">{{ content }}</div>',

Upvotes: 0

Octav Iosif
Octav Iosif

Reputation: 66

In Page Builder, their older version which is very similar, you can use admin_label with a true or false value for each parameter to show the value entered after the user closes the popup. Might work in this case too.

Something like this:

"params" => array(
      array(
        "param_name" => "content",
        "heading" => "Inhalt",
        "description" => "Inhalt des Elements.",
        "holder" => "div",
        "type" => "textarea_html",
        "admin_label" => true
      )
    )

Upvotes: 0

Related Questions