Can’t find a way for new module to be working

  • Resolved Foysal Remon

    (@foysalremon)


    6 years, 2 months ago

    On page builder there are a few modules which our not meeting my needs. I am wanting to create some other modules by extending your ‘AMP Theme Framework’ I have create a file there name mytheme-feature-module and include it with this function following your moduleTemplate.php file

    add_action("plugins_loaded", "mytheme_amp_module_templates",50);
if(!function_exists("mytheme_amp_module_templates")){
    function mytheme_amp_module_templates(){
        global $moduleTemplate;

        $dir = plugin_dir_path(__FILE__) . 'modules/';

        if (is_dir($dir)) {
            if ($dh = opendir($dir)) {
                while (($file = readdir($dh)) !== false) {
                    if(is_file($dir.$file) && strpos($file, '-module.php') == true){
                        $moduleTemplate[str_replace("-module.php", "", $file)] = include $dir.$file;
                        //echo '<pre>'; print_r($mmoduleTemplate[str_replace("-module.php", "", $file)]); exit;
                    }
                }
                closedir($dh);
                $moduleTemplate = apply_filters("ampforwp_pagebuilder_modules_filter", $moduleTemplate);
            }
        }
    }
}

    And here is the feture file’s code I have created on modules folder

    <?php
$output = '
	<div class="ln-fx">{{repeater}}</div>';
$css = '.service {
  margin-bottom: 30px;
}
.service .service-icon {
  width: 130px;
  margin: 0 auto 20px;
}
.service h3 {
  font-size: 2.2rem;
  color: #16334e;
  font-weight: 700;
  font-family: "Nunito", sans-serif;
  margin-bottom: 18px;
  -webkit-transition: all .3s easa;
  transition: all .3s easa;
}
.service:hover h3 {
  color: #0083ff;
}';
return array(
    'label' => 'Mytheme Feature',
    'name' => 'mytheme-feature-mod',
    'default_tab' => 'customizer',
    'tabs' => array(
        'customizer' => 'Content',
        'design' => 'Design',
        'advanced' => 'Advanced',
    ),
    'fields' => array(
        array(
            'type' => 'checkbox',
            'name' => "image_layout",
            'tab' => 'customizer',
            'label' => 'Image Type',
            'default' => array('layout="responsive"'),
            'options' => array(
                array(
                    'label' => 'Responsive',
                    'value' => 'layout="responsive"',
                ),
            ),
            'content_type' => 'html'
        ),
        array(
            'type' => 'text',
            'name' => 'img_width',
            'label' => 'Image Size',
            'tab' => 'customizer',
            'default' => '300px',
            'content_type' => 'css'
        ),
    ),
    'front_template' => $output,
    'front_css' => $css,
    'front_common_css' => '',
    'repeater' => array(
        'tab' => 'customizer',
        'fields' => array(
            array(
                'type' => 'text',
                'name' => "content_title",
                'label' => 'Heading',
                'tab' => 'customizer',
                'default' => 'Your Feature Title',
                'content_type' => 'html'
            ),
            array(
                'type' => 'upload',
                'name' => "img_upload",
                'label' => 'Image',
                'tab' => 'customizer',
                'default' => '',
                'content_type' => 'html'
            ),
            array(
                'type' => 'text-editor',
                'name' => "content",
                'label' => 'Content',
                'tab' => 'customizer',
                'default' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.',
                'content_type' => 'html'
            ),

        ),
        'front_template' =>
            '<div class="service text-center">
            {{if_img_upload}}<div class="service-icon"><amp-img src="{{img_upload}}" width="{{image_width}}" height="{{image_height}}" {{image_layout}} alt="{{image_alt}}"></amp-img></div>{{ifend_img_upload}}
      		<h3 class="service-title">{{content_title}}</h3>
			<p>{{content}}</p>
      	</div>'
    ),

);

?>

    These are all I have done while trying to make a new module, It’s now listed on the available modules list on AMP Page Builder but when I add, It’s not including anything on the front-end. Your modules are perfectly working but it’s not working on front-end. Am I missing anything or doing something wrong?

Viewing 1 replies (of 1 total)
  • Plugin Author Mohammed Kaludi

    (@mohammed_kaludi)

    Hey @foysalremon,

    You can use this code to create a new module, this is the copy of CTA module and you can modify the output according to your needs.

    you just have to keep in mind that the key of the array $new['cta-mod-new'] has to be exactly same as the name of the module 'name' =>'cta-mod-new' 

    add_filter('ampforwp_pagebuilder_modules_filter','custom_prefix_register_module' ); 
function custom_prefix_register_module($m){
        $new = array();
	$new['cta-mod-new'] = custom_prefix_add_module();
	$m = array_merge($m, $new);
	return $m;
}

function custom_prefix_add_module(){ 
	$output = '
	<div class="cta-tlt">
		<h2>{{content_title}}</h2>
	</div>
	<div class="cta-btn">
		<a  class="btn-txt" href="{{btn_link}}" {{if_condition_page_link_open==new_page}}target="_blank"{{ifend_condition_page_link_open_new_page}} {{if_cta_id}}id="{{cta_id}}"{{ifend_cta_id}}>{{button-text}}</a>
		<span class="txt">{{text_title}}</span>
	</div>
	';
	$css = '
	.cta-mod{margin:{{margin_css}};padding:{{padding_css}};display: inline-flex;width: 100%;align-items: center;}
	.cta-mod .cta-btn{width: 40%;text-align: right;}
	.cta-mod h2{font-size:{{text-size}};line-height:1.5;font-weight:normal;color:{{font_color_picker}};}
	.cta-mod .btn-txt{display: inline-block;color: {{txt_color_picker}};padding: 10px 20px;font-size: 26px;border: 3px solid {{brd_color_picker}};font-weight: 500;background: {{bg_color_picker}};}
	.cta-mod .txt{display: block;color: {{subh_color_picker}};font-size: 16px;margin-top: 20px;}
	@media(max-width:768px){
		.cta-mod{display:inline-block;width:100%;text-align:center}
		.cta-mod .cta-btn{width: 100%;text-align: center;margin-top:15px;}
	}';
	global $redux_builder_amp;
	if(ampforwp_get_setting('amp-rtl-select-option')){
		$css .=	'
		/** RTL CSS **/
		.cta-mod .cta-btn { text-align: left;}
		@media(max-width:768px){
			.cta-mod{display:inline-block;width:100%;text-align:center}
			.cta-mod .cta-btn{width: 100%;text-align: center;margin-top:15px;}
		}';
	}
return array(
		'label' =>'COPY OF CALL TO ACTION MODULE',
		'name' =>'cta-mod-new',
		'default_tab'=> 'customizer',
		'tabs' => array(
              'customizer'=>'Content',
              'design'=>'Design',
              'advanced' => 'Advanced'
            ),
		'fields' => array(

						array(		
		 						'type'		=>'text',		
		 						'name'		=>"content_title",		
		 						'label'		=>'Heading',
		           				'tab'       =>'customizer',
		 						'default'	=>'Join over 50,000 happy customers around the world',	
		           				'content_type'=>'html',
	 						),
						array(		
		 						'type'		=>'text',		
		 						'name'		=>"text-size",		
		 						'label'		=>'Font Size',
		           				 'tab'     =>'design',
		 						'default'	=>'45px',	
		           				'content_type'=>'css',
	 						),
						array(
								'type'		=>'color-picker',
								'name'		=>"font_color_picker",
								'label'		=>'Color',
								'tab'		=>'design',
								'default'	=>'#333',
								'content_type'=>'css'
							),
						array(
								'type'		=>'color-picker',
								'name'		=>"txt_color_picker",
								'label'		=>'Button Text Color',
								'tab'		=>'design',
								'default'	=>'#000',
								'content_type'=>'css'
							),
						array(
								'type'		=>'color-picker',
								'name'		=>"brd_color_picker",
								'label'		=>'Button Border Color',
								'tab'		=>'design',
								'default'	=>'#333',
								'content_type'=>'css'
							),
						array(
								'type'		=>'color-picker',
								'name'		=>"bg_color_picker",
								'label'		=>'Button Background Color',
								'tab'		=>'design',
								'default'	=>'#fff',
								'content_type'=>'css'
							),
						array(
								'type'		=>'color-picker',
								'name'		=>"subh_color_picker",
								'label'		=>'Subheading Text Color',
								'tab'		=>'design',
								'default'	=>'#888e94',
								'content_type'=>'css'
							),
						array(		
		 						'type'		=>'text',		
		 						'name'		=>"button-text",		
		 						'label'		=>'Button Text',
		           				 'tab'     =>'customizer',
		 						'default'	=>'Get started free',	
		           				'content_type'=>'html',
	 						),
	 					array(		
		 						'type'		=>'text',		
		 						'name'		=>"btn_link",		
		 						'label'		=>'Button URL',
		           				 'tab'     =>'customizer',
		 						'default'	=>'#',	
		           				'content_type'=>'html',
	 						),

	 					array(		
		 						'type'		=>'text',		
		 						'name'		=>"text_title",		
		 						'label'		=>'Description',
		           				'tab'       =>'customizer',
		 						'default'	=>'Free, easy to set up, no credit card required',	
		           				'content_type'=>'html',
	 						),
	 					array(		
	 							'type'	=>'select',		
	 							'name'  =>'page_link_open',		
	 							'label' =>"Open link in",
								'tab'     =>'customizer',
	 							'default' =>'new_page',
	 							'options_details'=>array(
	 												'new_page'  	=>'New tab',
	 												'same_page'    =>'Same page'
	 											),
	 							'content_type'=>'html',
	 						),
	 					array(		
		 						'type'		=>'text',		
		 						'name'		=>"cta_id",		
		 						'label'		=>'CTA ID',
		           				'tab'     =>'customizer',
		 						'default'	=>' ',	
		           				'content_type'=>'html',
	 						),
						array(
								'type'		=>'spacing',
								'name'		=>"margin_css",
								'label'		=>'Margin',
								'tab'		=>'advanced',
								'default'	=>
                            array(
                                'top'=>'20px',
                                'right'=>'0px',
                                'bottom'=>'20px',
                                'left'=>'0px',
                            ),
								'content_type'=>'css',
							),
							array(
								'type'		=>'spacing',
								'name'		=>"padding_css",
								'label'		=>'Padding',
								'tab'		=>'advanced',
								'default'	=>array(
													'left'=>'0px',
													'right'=>'0px',
													'top'=>'0px',
													'bottom'=>'0px'
												),
								'content_type'=>'css',
							),

			),
		'front_template'=> $output,
		'front_css'=> $css,
		'front_common_css'=>'',
	);

}

    Hope this will help.

Viewing 1 replies (of 1 total)
  • The topic ‘Can’t find a way for new module to be working’ is closed to new replies.