Skip to content

Instantly share code, notes, and snippets.

@obiPlabon
Forked from pavelthq/custom_view.js
Created January 2, 2017 13:42
Show Gist options
  • Save obiPlabon/10742bcb8838f4b25eecb16c3595b60f to your computer and use it in GitHub Desktop.
Save obiPlabon/10742bcb8838f4b25eecb16c3595b60f to your computer and use it in GitHub Desktop.
Visual Composer: Custom markup element example
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 );
}
}
} );
<?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>',
)
);
@ojon1st
Copy link

ojon1st commented Nov 7, 2020

Hello, could you please explain that line
'custom_markup' => '

Style: "{{ params.style }}", Color: "{{ params.color }}", Title: "{{{ params.title }}}"
',
as {{ params.style }} is not rendering the style value in admin view.

Best

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment