WP-CITY.RU

Недорогой, функциональный сайт или Интернет-магазин — это реально!


Заказать сейчас

Дополнительный wysiwyg редактор для товаров в магазине woocommerce

Как правило в интернет магазинах, при просмотре товаров, есть боковая колонка где указывается дополнительная информация о том как доставляется товар, какими платежными средствами можно его купить, либо предложение купить его в кредит.
Вот и мы решили не отставать, так как считаем что интернет магазин на woocommerce, являться вполне конкурентоспособным, при условии его нормальной настройки и сопровождении!
Ну ладно приступим. для начала нам надо зарегистрировать произвольный блок с нашим новым wysiwyg редактором.
Открываем в шаблоне файл functions.php и вставляем этот код, который отобразит наш новый редактор в наших товарах:

define('WYSIWYG_META_BOX_ID', 'my-editor');
define('WYSIWYG_EDITOR_ID', 'myeditor'); 
define('WYSIWYG_META_KEY', 'extra-content');

add_action('admin_init', 'wysiwyg_register_meta_box');
function wysiwyg_register_meta_box(){
        add_meta_box(WYSIWYG_META_BOX_ID, __('Дополнительное (боковое) описание для товара', 'wysiwyg'), 'wysiwyg_render_meta_box', 'product');
}

function wysiwyg_render_meta_box(){

        global $post;

        $meta_box_id = WYSIWYG_META_BOX_ID;
        $editor_id = WYSIWYG_EDITOR_ID;

        //Add CSS & jQuery goodness to make this work like the original WYSIWYG
        echo "
                <style type='text/css'>
                        #$meta_box_id #edButtonHTML, #$meta_box_id #edButtonPreview {background-color: #F1F1F1; border-color: #DFDFDF #DFDFDF #CCC; color: #999;}
                        #$editor_id{width:100%;}
                        #$meta_box_id #editorcontainer{background:#fff !important;}
                        #$meta_box_id #$editor_id_fullscreen{display:none;}
                </style>

                <script type='text/javascript'>
                        jQuery(function($){
                                $('#$meta_box_id #editor-toolbar > a').click(function(){
                                        $('#$meta_box_id #editor-toolbar > a').removeClass('active');
                                        $(this).addClass('active');
                                });

                                if($('#$meta_box_id #edButtonPreview').hasClass('active')){
                                        $('#$meta_box_id #ed_toolbar').hide();
                                }

                                $('#$meta_box_id #edButtonPreview').click(function(){
                                        $('#$meta_box_id #ed_toolbar').hide();
                                });

                                $('#$meta_box_id #edButtonHTML').click(function(){
                                        $('#$meta_box_id #ed_toolbar').show();
                                });

				//Tell the uploader to insert content into the correct WYSIWYG editor
				$('#media-buttons a').bind('click', function(){
					var customEditor = $(this).parents('#$meta_box_id');
					if(customEditor.length > 0){
						edCanvas = document.getElementById('$editor_id');
					}
					else{
						edCanvas = document.getElementById('content');
					}
				});
                        });
                </script>
        ";

        //Create The Editor
        $content = get_post_meta($post->ID, WYSIWYG_META_KEY, true);
        the_editor($content, $editor_id);

        //Clear The Room!
        echo "<div style='clear:both; display:block;'></div>";
}

add_action('save_post', 'wysiwyg_save_meta');
function wysiwyg_save_meta(){

        $editor_id = WYSIWYG_EDITOR_ID;
        $meta_key = WYSIWYG_META_KEY;

        if(isset($_REQUEST[$editor_id]))
                update_post_meta($_REQUEST['post_ID'], WYSIWYG_META_KEY, $_REQUEST[$editor_id]);

}

Все теперь наш блок с редактором есть в наших товарах и его можно наполнить дополнительной информацией для нашего товара:

Screenshot_5

Далее, всю данную информацию надо вывести в нашу страницу в товарах, какой подход выберите вы я не знаю, лично я сразу создаю отдельный блок в товаре и вывожу туда.

Данный код покажет наш новый, текстовый редактор в шаблоне:

 <?php $content = get_post_meta($post->ID, WYSIWYG_META_KEY, true); ?>
<p><?php echo $content; ?></p>

Screenshot_1

Вот и все, теперь наш товар имеет немного больше информации и вашим покупателям будет легче принять решение о его покупке.
Всем удачных продаж!!

  1. Евгений (Автор)

    Алексей для того чтоб было как у меня, надо сделать блок для вывода в самом шаблоне, я подготавливал шаблон для этого блока.

  2. Алексей

    Куда вставлять код ( ID, WYSIWYG_META_KEY, true); ?>
    ), чтобы получилось как у тебя?

  3. Евгений (Автор)

    Туда где вам необходимо дополнительное описание для товара, я его делал специально под свой шаблон.

  4. Дмитрий

    не совсем понял куда вставлять код:
    ID, WYSIWYG_META_KEY, true); ?>

    куда не тыкну — то не там отображает, то совсем не выводит.
    Подскажите пожалуйста куды конкретно его можно воткнуть? )))
    Спасибо!

© 2012–2017 / wp-city.ru / Авторские шаблоны WORDPRESS / Создание сайтов

evgeniy38868     krizisvt@i.ua