COTONTI.CMSWORKS.RU
Сборка фриланс-биржи на cotonti

Наработки (фишки) юзабилити.

Автор Сообщение

SergeySt

Сергей
#1/12.02.2015 10:12
+7

Пользователи

Карма: +29

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

Меня сильно бесит стандартный блок категорий в панели пользователя.
Выглядит так.

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


Реализация.

Из файла «header.tpl» берём код который выводит модальное окно для регистрации

<div id="AuthModal" class="modal hide fade">
<div class="modal-header">
<h3 id="myModalLabel">Заголовок</h3>
</div>
<div class="modal-body">
СОДЕРЖИМОЕ
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Кнопка</button>
</div>
</div>   


меняем id =AuthModal на своё например id =AuthModaltest

в нужный шаблон вставляем наш код с новым id который вы прописали.
Вместо СОДЕРЖИМОГО добавляем тег вывода категорий {USERS_REGISTER_CAT} обратите внимание что данный тег который я использую в своем примере, подходит только в том случае если эту фишку вы используете при регистрации в шаблоне users.register.tpl если хотите в профиле её вывести то используете тег {USERS_PROFILE_CAT} все модальное окно подготовили.
теперь под этим кодом вставляем кнопку или ссылку

<a href="#" data-toggle="modal" onClick="$('#AuthModaltest').modal(); return false;" class="btn">Выберите категорию</a>

onClick="$('#AuthModaltest') - вот тут мы и вставляем наш уникальный id то есть при клики на нашу кнопку всплывет окно с id AuthModaltest а в него в свою очередь загрузится список категорий так как мы поместили системный тег {USERS_REGISTER_CAT}.

 

 

Если пригодится буду рад.

Добавлено 2 часа спустя:

Улучшаем формы.

Простое решение «placeholder» поможет лучше ориентироваться вашим пользователям при заполнение данных в форме.

После создания поля input, textarea добавьте в поле «HTML-код поля» тег placeholder и ощутите разницу.

Просто и + к юзабилити вашему сайту.

 

Сообщения: 96

SergeySt

Сергей
#3/12.02.2015 14:20
+4

Пользователи

Карма: +29

#6392 Attar:

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

Если уже чем-то делиться то сразу и инструкцию как вы того добились.

Вы правы, дописал реализацию.

Добавлено 21 час спустя:

Карта яндекс (выводим карту в проекте или в личном кабинете пользователя) по средствам добавления адреса в <input>

Вы наверно знаете что есть плагин Placemarks от разработчика devkont, плагин хорош, но не у всех есть возможность позволить себе платное решение.

Я так и не нашел на форуме нормального фака как интегрировать функционал карты яндекса.

В данном посте я расскажу как выводить карту в проектах или в личном кабинете по средствам геокодирования.
Геокодирование - это когда вы в поле вводите адрес словами, а скрипт его преобразует в координаты и выведет на карте.

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

Что нам понадобится
1) 1 дополнительное поле в движке + Добавление Кода от яндекса в нужный шаблон сайта
2) Добавление css стиля карты
3) Подключение js файла от яндекса в шаблоне header.tpl

Итак начнём. №1
Создаём дополнительное поле. Заходим в админ переходим в «Экстра-поля для профиля» и создаем доп.поле (input) в моём случае название поля (karta) в итоге получаем 2 тега
{USERS_PROFILE_KARTA} - Это поле которое надо вставить в файл шаблона users.profile.tpl как раз пользователь в это поле будет вводить адрес
{USERS_DETAILS_KARTA} - а данный тег будет выводить заданный адрес в нужное место, его мы вставим в код от яндекса он ниже и в коде уже вставлен этот тег. То есть если вы назвали поле так как и я, то смело можете брать мой код. данный код вставляем в шаблон users.details.tpl В комментариях я поясняю что к чему относится, думаю понятно.

<!-- Карта -->
<!-- IF {USERS_DETAILS_KARTA} --> <!-- данный тег нужен для того чтобы не отображать карту если поле USERS_PROFILE_KARTA не заполнено -->
<noindex>
<script type='text/javascript'>
    ymaps.ready(init);
    function init(){
    var geocoder = new ymaps.geocode(
    // Строка с адресом, который нужно геокодировать
    '{USERS_DETAILS_KARTA}',
    // требуемое количество результатов
    { results: 1 }
    );
    // После того, как поиск вернул результат, вызывается callback-функция
    geocoder.then(
    function (res) {
    // координаты объекта
    var coord = res.geoObjects.get(0).geometry.getCoordinates();
    var map = new ymaps.Map('map', {
    // Центр карты - координаты первого элемента
    center: coord,
    // Коэффициент масштабирования
    zoom: 7,
    // включаем масштабирование карты колесом
    behaviors: ['default', 'scrollZoom'],
    controls: ['mapTools']
    });
    // Добавление метки на карту
    map.geoObjects.add(res.geoObjects.get(0));
    // устанавливаем максимально возможный коэффициент масштабирования - 1

    map.zoomRange.get(coord).then(function(range){
    map.setCenter(coord, range[1] - 3)
    });
    
    // Добавление стандартного набора кнопок
    map.controls.add('mapTools')
    // Добавление кнопки изменения масштаба
    .add('zoomControl')
    // Добавление списка типов карты
    .add('typeSelector');
    }
    );
    }
    </script>
<!-- Выводим карту -->
<div class="navbar"><div class="navbar-inner">Территориально мы находимся: {USERS_DETAILS_KARTA}<br /><div id="map"></div><br /></div></div>
<!-- Выводим карту -->
</noindex>
<!-- ENDIF -->
<!-- конец карты -->

 

№2 Добавление css стиля карты в файл style.css по пути сайт.ru/themes/bootlance/css

<!-- css стиль карты -->
#map {
width: 100%;
height: 400px;
}
<!-- css стиль карты конец -->

№3 Подключение js файла от яндекса в шаблоне header.tpl открываем данный шаблон и между тегами <head> и </head> вставляем следующий код

<script src="http://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU" type="text/javascript"></script>

Всё, заливаем наши файлы на сервер.

Что получаем в итоге.
Заходим в личный кабинет, переходим в настройки и видим наше поле, вводим адрес, сохраняем.

Переходим в профиль и смотрим результат.


Надеюсь достаточно понятно описал.

 

Сообщения: 96

Cmsworks

#4/13.02.2015 11:52
+1

Администраторы

Карма: +870

Вы наверно знаете что есть плагин Placemarks от разработчика devkont, плагин хорош, но не у всех есть возможность позволить себе платное решение.

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

Сообщения: 2435 Доступный хостинг для ваших проектов

SergeySt

Сергей
#5/13.02.2015 12:03
+2

Пользователи

Карма: +29

#6434 devkont:

Вы наверно знаете что есть плагин Placemarks от разработчика devkont, плагин хорош, но не у всех есть возможность позволить себе платное решение.

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


Я с вами согласен, что это не идеально. Но вот я не разбираюсь, как сделать плагин, по этому ищу приемлемый для себя вариант. Может кому пригодится хотя бы для общего развития и понимания неких процессов.  А вас упомянул, так как понимаю, что это идеальное решение и если есть средства конечно лучше купить ваш плагин.

Сообщения: 96

SergeySt

Сергей
#7/13.02.2015 13:19
+1

Пользователи

Карма: +29

#6439 Attar:

Печально,  плагин щас стоит копейки, а покупка плагина скажет спасибо автору,

Да и вы собираетесь заработать денег при этом не вложить ни рубля... 

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

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

Блин коллеги, чувствую себя как будто я нарушил какие то правила. я вообще сторонник лицензий и считаю что надо платить за разработку плагинов и т.д. у меня 2 сайта на dle и обе лицензии куплены. А после ваших Комментов чувствую себя каким то пиратом.(((

Сообщения: 96

Cmsworks

#8/13.02.2015 13:22
+2

Администраторы

Карма: +870

Да расслабьтесь, все нормально. Пишите еще. Очень полезные мануалы получаются. Возникла идея даже персональные блоги на сайте создать или отдельный раздел для мануалов.

Сообщения: 2435 Доступный хостинг для ваших проектов

SergeySt

Сергей
#10/17.03.2015 15:05
+2

Пользователи

Карма: +29

Игра с условиями!
Опишу интересное условие, может кому пригодится.

Задача которая ставилась:
«Скрыть какую либо информацию в профиле Фрилансера от других фрилансеров но при этом, чтобы она была доступна самому фрилансеру и работодателю»

Я реализовывал задачу скрытие своего профиля (Фрилансера) от других фрилансеров по средством установки настройки в профиле пользователя.
Нам понадобится одно дополнительное поле «ЧЕКБОКС» в моем случае поле я назвал «Просмотр профиля» (NOPROFIL)

Получаем теги для шаблона профиля и редактирование профиля
Просмотр профиля: {USERS_DETAILS_NOPROFIL}
Редактирование профиля: {USERS_PROFILE_NOPROFIL}

Значения у них будут
=0
=1
0 - будем показывать
1 - не будем показывать

Начнем с редактирования профиля, вставим наш тег {USERS_PROFILE_NOPROFIL} он выведет чекбокс, то есть дает вам возможность присвоить значения данному полю (0 или 1)

Далее открываем файл users.details.tpl и
между тегами
<!-- BEGIN: MAIN -->

<!-- END: MAIN -->

пишем вот такое условие:

<!-- IF {USERS_DETAILS_NOPROFIL} == 1 AND {PHP.usr.maingrp} == 4 AND ! {PHP.usr.id} == {PHP.urr.user_id} -->
Фрилансер запретил просмотр своих данных другим фрилансерам.
<!-- ELSE -->
Остальной код страницы профиля
<!-- ENDIF -->

В результате мы получаем что если Фрилансер не хочет чтобы другие фрилансеры могли просматривать его профиль, он может это указать в настройках.
Таким образом можно скрывать любые поля.
Хорошего всем дня. Может данное условие кому пригодится.

Сообщения: 96

Aleksey

#11/18.03.2015 00:47
+1

Аватар

Пользователи

Карма: +1

#6441 devkont:

Да расслабьтесь, все нормально. Пишите еще. Очень полезные мануалы получаются. Возникла идея даже персональные блоги на сайте создать или отдельный раздел для мануалов.

Блоги на вашем ресурсе это хорошая идея, с радостью буду читать, Сергей пишите не останавливайтесь!

Сообщения: 6

sinop

#13/26.03.2015 13:54
+1

Аватар

Пользователи

Карма: +5

<!-- Выводим карту -->
<div class="navbar"><div class="navbar-inner">Территориально мы находимся: {USERS_DETAILS_KARTA}<br /><div id="map"></div><br /></div></div>
<!-- Выводим карту -->
</noindex>
<!-- ENDIF -->
<!-- конец карты -->

 Куда этот код вставлять? если вставляю в таблицу, то выдает ошибку

Сообщения: 38

ErrorLive

Сергей
#15/18.06.2015 21:00
+1

Пользователи

Карма: +2

Выбор категорий в настройках пользователя через модальное окно выглядит красиво, но при сохранении они не сохраняются.
Заходишь снова в настройки пользователей - и там все по старому, галки стоят только те, которые были до установки модального окна.
Но хочется красоты)
 

Сообщения: 16

Andrey40

#16/27.08.2015 00:18
+1

Аватар

Пользователи

Карма: +1

У меня стала проблема с яндекс картами, в market.list.tpl почему то карты "склеиваются" друг с другом в карточках товара

http://pastenow.ru/D3XE   вот скрин

Сообщения: 5

Konsyltant

Михаил
#17/21.09.2015 06:09
+2

Пользователи

Карма: +7

Появилась такая простая идея: почему нельзя использовать плагин  SBR (безопасная сделка) в Маркете? 

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

<a href="{PRD_OWNER_ID|cot_url('sbr', 'm=add&uid='$this)}">Предложить сделку</a></div>

Пока все работает, в принципе здесь нет ничего необычного, тот же заказ, но переход с маркета. Таким образом фрилансер может  получать дополнительные заказы с маркета.

 Единственное, кто подскажет как в сделку автоматом добавлять название товара по аналогии как в бирже? 

П.С. Вообще, для этого дела покупал плагин "Orderform", но используя его я как руководитель не контролирую сделку - покупатель может связаться с фрилансером по почте или телефону без участия моей биржы.  Orderform - я его использую для связи с фрилансером незарегистрированных пользователей и в письме которое отправляется заказчику расписываю преимущества "Безопасной сделки".  

Таким образом, я предлагаю возможному покупателю с маркета оформит сделку через мою биржу с помощью SBR при этом я получаю свои комиссионные. 

Сообщения: 9

Cmsworks

#18/21.09.2015 07:46
+1

Администраторы

Карма: +870

#11329 Konsyltant:

Появилась такая простая идея: почему нельзя использовать плагин  SBR (безопасная сделка) в Маркете? 

Пост не по теме, лучше бы отдельную тему создали.

А чем вам не подошел плагин MarketOrders? Создается заказ с гарантийным сроком, только по истечению которого происходит выплата продавцу. За время гарантии покупатель может оставить жалобу и вернуть деньги. И также есть комиссия сервиса.

Сообщения: 2435 Доступный хостинг для ваших проектов

Konsyltant

Михаил
#19/21.09.2015 09:24
+1

Пользователи

Карма: +7

Пост не по теме, лучше бы отдельную тему создали.

А чем вам не подошел плагин MarketOrders? Создается заказ с гарантийным сроком, только по истечению которого происходит выплата продавцу. За время гарантии покупатель может оставить жалобу и вернуть деньги. И также есть комиссия сервиса.

MarketOrders - отличный плагин для покупок!   Практически любой человек любит индивидуальный подход, фриланс - это как правило индивидуальная ручная работа. Покупатель не всегда хочет просто купить, его может не устраивать какая-то деталь или наоборот нужно что-то немного доделать или покупатель хочет поторговаться. Наверное поэтому до сих пор существую рынки, базары) Мое виденье магазина - это не только товары, но и услуги фрилансеров с индивидуальным подходом. Взять для примера, как по мне лучшую реализацию биржу услуг,  "Файвер" где все по 5 долларов, там еще при покупки есть возможность добавлять всякие дополнительные платные услуги.  

Как биржа заказов в вашем движке все отлично реализовано, но для продажи услуг пока недостаточно. Я вначале думал добавлять услуги фрилансеров в портфолио, но потом решил зачем создавать много разделов на сайте есть маркет куда фрилансер может добавить свои работы/услуги, а покупатель может сразу купить или сделать индивидуальный заказ фрилансеру на основе понравившегося товара/услуги.   

Если кратко, я представляю себе такую схему реализации:

  • первый - заказчик зашел на сайт посмотрел каталог услуг/работ - выбрал купил, получил;
  • другой вариант - что-то понравилось, но не совсем, сделал индивидуальный заказ фрилансеру по даному товару/услуге;  
  • третий вариант: ничего не понравилось, не нашол нужную услугу/товар - заказал подождал, выбрал исполнителя.

Это все связано с тем что заказчики/покупатели избалованы: не любят заморачиваться: составлять заказ, детально описывать ТЗ, и т.п. Тем более заказы как правило типичные, проще же закачику когда уже все сделано просто выбрать нужный товар/услугу или немного его видоизменить для себя. 

Это мое виденье, хотел бы услышать Ваши замечания, предложения. 

  

Сообщения: 9

Urbis

#20/12.01.2017 21:11
+1

Аватар

Пользователи

Карма: +3

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

 

Сообщения: 4

kriptograff

Роман
#21/12.01.2017 21:24
+1

Пользователи

Карма: +12

#14654 Urbis:

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

 

офф-top!  это не ВАРЕЗ-ПОРТАЛ для набития постов! или пишите конкретно либо не пишите вообще!

Сообщения: 47

Urbis

#22/12.01.2017 23:00
+1

Аватар

Пользователи

Карма: +3

#14655 kriptograff:
#14654 Urbis:

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

 

офф-top!  это не ВАРЕЗ-ПОРТАЛ для набития постов! или пишите конкретно либо не пишите вообще!

Не вижу здесь набитие постов, имея 2 сообщения всего, вверх темы как бы намекает наработки,фишки, юзабилити, ИМХО что в моем предложении выше сделать вывод аватарки для юзабилити не подходит под данную тему? Дабы не разводить дисскусию привожу реализацию.

Реализация:

В теме которая основная, у меня bootlance ищем файл header.tpl находим класс nav (я вывожу у себя именно в меню сделав из аватарки менюшку по аналогии с ВК вместо стандартного имени пользователя, можно оставить и имя.)  добавляем данный код.

<!-- IF {PHP.usr.profile.user_avatar} --><img src="{PHP.usr.profile.user_avatar}" alt="{PHP.L.Avatar}"/><!-- ELSE -->
<img src="datas/defaultav/blank.png" alt="{PHP.L.Avatar}"/><!-- ENDIF -->

Стили закругления и пр. оставляю на доработки других. 

 

Сообщения: 4

Cmsworks

#23/13.01.2017 09:37
+1

Администраторы

Карма: +870

Переводите сайт на bootstrap 3 (или даже 4), там закругления изображений делаются простым добавлением специального класса и больше возможностей для адаптивной верстки.

Сообщения: 2435 Доступный хостинг для ваших проектов

laneon

Алексей
#24/20.01.2017 14:35
+1

Пользователи

Карма: +1

Еще одно решение для вывода Google карты

<script async defer src="https://maps.googleapis.com/maps/api/js?key=ВАШ_КЛЮЧ_ДЛЯ_ДОСТУПА&callback=initMap"></script>
<iframe style="width:100%;height:100%;" frameborder="0" id="cusmap" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.it/maps?q={USERS_DETAILS_STREET},{USERS_DETAILS_CITY},{USERS_DETAILS_REGION}&output=embed"></iframe>

USERS_DETAILS_STREET - экстраполе, для ввода пользователем улицы и номер дома

За ключами в Google Maps Api

 

Сообщения: 3