-
-
Save obiPlabon/10742bcb8838f4b25eecb16c3595b60f to your computer and use it in GitHub Desktop.
Visual Composer: Custom markup element example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| window.VcCustomElementView = vc.shortcode_view.extend( { | |
| elementTemplate: false, | |
| $wrapper: false, | |
| changeShortcodeParams: function ( model ) { | |
| var params; | |
| window.VcCustomElementView.__super__.changeShortcodeParams.call( this, model ); | |
| params = _.extend( {}, model.get( 'params' ) ); | |
| if ( ! this.elementTemplate ) { | |
| this.elementTemplate = this.$el.find( '.vc_custom-element-container' ).html(); | |
| } | |
| if ( ! this.$wrapper ) { | |
| this.$wrapper = this.$el.find( '.wpb_element_wrapper' ); | |
| } | |
| if ( _.isObject( params ) ) { | |
| var $element = $( _.template( this.elementTemplate, { params: params }, vc.templateOptions.custom ) ); | |
| this.$wrapper.find( '.vc_custom-element-container' ).html( $element ); | |
| } | |
| } | |
| } ); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| vc_map(array( | |
| 'name' => __( 'Custom Markup', 'js_composer' ), | |
| 'base' => 'vc_custom_markup', | |
| 'category' => array( | |
| __( 'Content', 'js_composer' ), | |
| ), | |
| 'description' => __( 'Custom markup element', 'js_composer' ), | |
| 'params' => array( | |
| array( | |
| 'type' => 'textfield', | |
| 'name' => 'style', | |
| 'value' => 'custom style!' | |
| 'heading' => 'Style', | |
| ), | |
| array( | |
| 'type' => 'textfield', | |
| 'name' => 'color', | |
| 'value' => 'custom color!' | |
| 'heading' => 'Color', | |
| ), | |
| array( | |
| 'type' => 'textfield', | |
| 'name' => 'title', | |
| 'value' => 'custom title!' | |
| 'heading' => 'Title', | |
| ), | |
| ), | |
| 'js_view' => 'VcCustomElementView', | |
| 'custom_markup' => '<div class="vc_custom-element-container">Style: "{{ params.style }}", Color: "{{ params.color }}", Title: "{{{ params.title }}}"</div>', | |
| ) | |
| ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hello, could you please explain that line
'custom_markup' => '
as {{ params.style }} is not rendering the style value in admin view.
Best