OsClass – Bender – multi language или как сделать вкладки мультиязычности на доске объявлений?

При создании доски объявлений на OsClass часто используют тему Bender, но не все знают о проблеме отсутствия выбора языка при публикации. В этой статье я расскажу как создать вкладки мультиязычности для Bender в OsClass на примере трёх языков: русского, английского и сербского.

300

Для того чтоб сделать вкладки мультиязычности в теме Bender нужно определиться с количеством языков ( я использую 3 языка: русский, английский и сербский). Итак, заходим в файл oc-includes/osclass/frm/Item.form.class.php

Находим строку мультиязычности, где-то 409-я. Выделяем текст от этой строки, и до 438-й (выделяем всё что между этих строк вместе с этими строками):

 static public function multilanguage_title_description($locales = null, $item = null) {
 *
 *
 *
 *
 *
 *
 self::description_textarea('description', $locale['pk_c_code'], $description);

Меняем всё, что выделили на следующие строки:

 static public function multilanguage_title_description($locales = null, $item = null) {
 if($locales==null) { $locales = osc_get_locales(); }
 if($item==null) { $item = osc_item(); }
 $num_locales = count($locales);
 if($num_locales>1) { echo '<div class="tabber"><input type="radio" name="odin" checked="checked" id="vkl1"/><label for="vkl1">' . __('Version in English') . '</label><input type="radio" name="odin" id="vkl2"/><label for="vkl2">' . __('Version in Russian') . '</label><input type="radio" name="odin" id="vkl3"/><label for="vkl3">' . __('Version in Serbian') . '</label>'; };
 foreach($locales as $locale) {
 if($num_locales>1) { echo '<div class="tabbertab">'; };
 if($num_locales>1) { echo ''; };
 echo '<div class="title">';
 echo '<div><label for="title">' . __('Title') . ' *</label></div>';
 $title = (isset($item) && isset($item['locale'][$locale['pk_c_code']]) && isset($item['locale'][$locale['pk_c_code']]['s_title'])) ? $item['locale'][$locale['pk_c_code']]['s_title'] : '';
 if( Session::newInstance()->_getForm('title') != "" ) {
 $title_ = Session::newInstance()->_getForm('title');
 if( $title_[$locale['pk_c_code']] != "" ){
 $title = $title_[$locale['pk_c_code']];
 }
 }
 self::title_input('title', $locale['pk_c_code'], $title);
 echo '</div>';
 echo '<div class="description">';
 echo '<div><label for="description">' . __('Description') . ' *</label></div>';
 $description = (isset($item) && isset($item['locale'][$locale['pk_c_code']]) && isset($item['locale'][$locale['pk_c_code']]['s_description'])) ? $item['locale'][$locale['pk_c_code']]['s_description'] : '';
 if( Session::newInstance()->_getForm('description') != "" ) {
 $description_ = Session::newInstance()->_getForm('description');
 if( $description_[$locale['pk_c_code']] != "" ){
 $description = $description_[$locale['pk_c_code']];
 }
 }
 self::description_textarea('description', $locale['pk_c_code'], $description);

Шаг номер два

Шаг номер два – это замена кода в файле oc-content/themes/bender/item-post.php

Находим строчку с ценой – это наш ориентир:

<?php if( osc_price_enabled_at_items() ) { ?>

И всё что выше этой строчки удаляем – всю первую часть файла, до самого верха.

Вместо этого вставляем новую половину файла:

 <?php
 /*
 * Osclass – software for creating and publishing online classified
 * advertising platforms
 *
 * Copyright (C) 2013 OSCLASS
 *
 * This program is free software: you can redistribute it and/or
 * modify it under the terms of the GNU Affero General Public License
 * as published by the Free Software Foundation, either version 3 of
 * the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public
 * License along with this program. If not, see <http://www.gnu.org/licenses/>.
 */
 // meta tag robots
 osc_add_hook('header','bender_nofollow_construct');
 osc_enqueue_script('jquery-validate');
 bender_add_body_class('item item-post');
 $action = 'item_add_post';
 $edit = false;
 if(Params::getParam('action') == 'item_edit'){
 $action = 'item_edit_post';
 $edit = true;
 }
 ?>
 <style>
 .tabber > div, .tabber > input { display: none; }
 .tabber label { padding: 5px; border: 0px solid #aaa; line-height: 28px; cursor: pointer; position: relative; bottom: 1px; }
 .tabber input[type="radio"]:checked + label { border-bottom: 0px solid #fff; background-color: #F0FDFF; border-radius: 5px; padding-bottom: 4px; }
 .tabber > input:nth-of-type(1):checked ~ div:nth-of-type(1),
 .tabber > input:nth-of-type(2):checked ~ div:nth-of-type(2),
 .tabber > input:nth-of-type(3):checked ~ div:nth-of-type(3) { display: block; padding: 5px; border: 0px solid #aaa; background-color: #F0FDFF; border-radius: 5px; }
 </style>
 <?php osc_current_web_theme_path('header.php') ; ?>
 <?php ItemForm::location_javascript_new(); ?>
 <div class="form-container form-horizontal">
 <div class="resp-wrapper">
 <div class="header">
 <h1 style="font-weight: lighter;"><?php _e('Publish a listing', 'bender'); ?></h1>
 </div>
 <ul id="error_list"></ul>
 <form name="item" action="<?php echo osc_base_url(true);?>" method="post" enctype="multipart/form-data" id="item-post">
 <fieldset>
 <input type="hidden" name="action" value="<?php echo $action; ?>" />
 <input type="hidden" name="page" value="item" />
 <?php if($edit){ ?>
 <input type="hidden" name="id" value="<?php echo osc_item_id();?>" />
 <input type="hidden" name="secret" value="<?php echo osc_item_secret();?>" />
 <?php } ?>
 <div class="control-group">
 <label class="control-label" for="select_1"><?php _e('Category', 'bender'); ?></label>
 <div class="controls">
 <?php ItemForm::category_select(null, null, __('Select a category', 'bender')); ?>
 </div>
 </div>
 <h2 style="font-weight: lighter;"><?php _e('Select the tab of your language', 'bender'); ?></h2>
 <div>
 <?php ItemForm::multilanguage_title_description(); ?>
 </div>

Прошу обратить внимание, что тут мы используем CSS для удобного отображения вкладок.

 <style>
 .tabber > div, .tabber > input { display: none; }
 .tabber label { padding: 5px; border: 0px solid #aaa; line-height: 28px; cursor: pointer; position: relative; bottom: 1px; }
 .tabber input[type="radio"]:checked + label { border-bottom: 0px solid #fff; background-color: #F0FDFF; border-radius: 5px; padding-bottom: 4px; }
 .tabber > input:nth-of-type(1):checked ~ div:nth-of-type(1),
 .tabber > input:nth-of-type(2):checked ~ div:nth-of-type(2),
 .tabber > input:nth-of-type(3):checked ~ div:nth-of-type(3) { display: block; padding: 5px; border: 0px solid #aaa; background-color: #F0FDFF; border-radius: 5px; }
 </style>

Вы можете менять стили тут.

В результате я получил вот такую картину.

Screen-Shot-2014-02-01-at-16.37.54

Проверить работу можно на сайте Board

На этом всё. Подписывайтесь на новости, рассказывайте друзьям в социальных сетях и читайте блог.

end

  • File

    При уменьшенном экране исчезает поле: Добавить объявление.

  • Странно, вы точно сделали всё правильно? Я проверил на своём тестовом сайте http://board.ppstore.me — кнопка «Опубликовать» (тоже самое что и добавить объявление) не исчезает.
    http://board.ppstore.me/index.php?page=item&action=item_add

  • Адам

    Можно узнать у вас такую вещь, сделал как вы все написали но для 2ух языков, у меня не много поехало поле описание, как будто не видит дива. Убрал такую строку из кода: ‘ . __(‘Version in Serbian’) . »
    Лэйбл закрыт, все ровно, но почему то не ставит все правильно, но есть одно но, когда делаю уже вкладку все становится в один момент как надо.
    Не могли бы вы помочь в данном вопросе?
    С ув. Адам

  • Адам

    Убрал строку: «‘ . __(‘Version in Serbian’) . » »
    С ув. Адам

  • Адам, нужно убирать строку
    <input type="radio" name="odin" id="vkl3"/><label for="vkl3">' . __('Version in Serbian') . '</label>
    так как вам нужно всего две вкладки. Плюс нужно убрать стили css для третьей вкладки.

  • Адам

    Добрый вечер.
    Спасибо большое за ответ, но у меня все равно остается все также, высылаю посмотреть скрины.
    1. скрин как выглядит сейчас доска: http://s7.hostingkartinok.com/uploads/images/2015/07/137fd5b67c564839af69b81b0fc819ef.jpg
    2. скрин при уменьшении приблизительно на половину все встает по местам: http://s7.hostingkartinok.com/uploads/images/2015/07/75060001544178bc3dfab3b8cc9c70c6.jpg
    Если будет возможность, помогите пожалуйста. Стили и все остальное сделал как вы сказали.
    С наилучшими пожеланиями и ув. Адам.

  • Адам, если можно, то пришлите ссылку вашего сайт на почту hello@mywwweb.ru

  • Адам

    Добрый вечер ув. Алексей.
    К сожалению доска пока еще на локальном хосте, но в скором времени загружу на сервер.
    С ув. Адам.

  • Srđan Šajin

    Hello, do you sell your template ? I can help with Serbian translation. And i need if you have payoneer PSD file if you have ? http://mywwweb.ru/wp-content/uploads/2016/05/payoneer.jpg

  • Narek Mikayelyan

    Здравствуйте, как можно поменять код , чтобы при заполнения поля title и description одного языка, одновременно заполнялись и соотвественные поля других языков в табе.