Веб-разработка и интернет-реклама без воды.

Позднее Ctrl + ↑

SimplaCMS: Подсчёт количества введённых символов в поля SEO-параметров

Сеошники знают, что есть правила, которые ограничивают нам ввод длинных title или description. Чтобы не кидать каждый раз в Sublime для подсчёта символов, я набросал простенький скрипт, который показывает текущее значение каждого поля SEO-параметров.

Потестить можно на категориях, для которых в первую очередь и писался сам скрипт. Для этого откроем /simpla/design/html/category.tpl и заменим блок

на код ниже:

<div class="block layer">
<h2>Параметры страницы</h2>
<ul>
	<li><label id="url_count"class=property>Адрес</label><div class="page_url">/catalog/</div><input name="url" class="page_url" type="text" value="{$category->url|escape}" id="url_source" /></li>
	<li><label id="title_count" class=property>Заголовок</label><input name="meta_title" class="simpla_inp" type="text" value="{$category->meta_title|escape}" id="title_source" /></li>
	<li><label id="keys_count" class=property>Ключевые слова</label><input name="meta_keywords" class="simpla_inp" type="text" value="{$category->meta_keywords|escape}" id="keys_source" /></li>
	<li><label id="description_count" class=property>Описание</label><textarea name="meta_description" class="simpla_inp" id="description_source" >{$category->meta_description|escape}</textarea></li>
			</ul>
<script>
var urlname = document.getElementById("url_source");
var urlcount = document.getElementById("url_count");
var titlename = document.getElementById("title_source");
var titlecount = document.getElementById("title_count");
var keywordname = document.getElementById("keys_source");
var keywordscount = document.getElementById("keys_count"); 
var descriptionname = document.getElementById("description_source");
var descriptioncount = document.getElementById("description_count");                                   
window.onload = urlCount();
window.onload = titleCount();
window.onload = keywordsCount();
window.onload = descriptionCount();
urlname.oninput = urlCount;
titlename.oninput = titleCount;
keywordname.oninput = keywordsCount;
descriptionname.oninput = descriptionCount;                  
function urlCount() {
var x = urlname.value;
urlcount.innerHTML = "Адрес (" + x.length + ")";
}             
function titleCount() {
var y = titlename.value;
titlecount.innerHTML = "Заголовок (" + y.length + ")";
}                  
function keywordsCount() {
var z = keywordname.value;
keywordscount.innerHTML = "Ключевые слова (" + z.length + ")";
}
function descriptionCount() {
var xx = descriptionname.value;
descriptioncount.textContent = "Описание (" + xx.length + ")";
}                 
</script>
</div>
 Нет комментариев    9   5 мес   js   seo   simplacms

jQuery: readmore.js настройки

$('.content').readmore({
    speed: 435,
    maxHeight: 100,
    moreLink: '<a href="#">Подробнее</a>',
    lessLink: '<a href="#">Скрыть</a>',
    afterToggle: function(trigger, element, more) {
        if(more) {
            $(".content span").css("background", "none");
        }
        if(! more) {
            $(".content span").css("background", "linear-gradient(0deg, #f3f3f3, transparent)");
            $('html, body').animate({
                scrollTop: element.offset().top
            },{
                duration: 100
            });
        }
    }
});

Настройки readmore.js по-русски:

  1. Speed — скорость разворачивания/сворачивания в милесекундах. Оптимально 500.
  2. maxHeight — высота отображаемого блока в пикселях.
  3. moreLink — название ссылки «подробнее».
  4. lessLink — название ссылки «спрятать».

Далее мне необходимо сделать так, чтобы поверх текста был градиент, который не обрубал текст на указанных пикселях в maxHeight, а плавно сходил на «нет». Для этого я сделал span внутри элемента и добавил в него стили:

.content span{ 
    background: linear-gradient(0deg, #f3f3f3, transparent);
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 10000;
  }

Соответственно при нажатии стили так и остаются, поэтому необходимо удалять фон при нажатии на кнопку «Подробнее». И для этого я написал условие:

if(more) {
            $(".content span").css("background", "none");
        }

Но возникла ещё одна загвоздка, когда нажимаем кнопку «Скрыть», то фон не возвращался, поэтому было написано следующее условие:

if(! more) {
            $(".content span").css("background", "linear-gradient(0deg, #f3f3f3, transparent)");
            $('html, body').animate({
                scrollTop: element.offset().top
            },{
                duration: 100
            });
 Нет комментариев    18   7 мес   jquery

SimplaCMS: режим работы

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

{assign var=workdays value='Работаем: с 10:00 до 20:00'}
{assign var=saturday value='Суббота: с 10:00 до 16:00'}
{assign var=holiday value='Воскресенье: не работаем'}

{if $smarty.now|date_format:'%w' == '1' || $smarty.now|date_format:'%w' == '2' || $smarty.now|date_format:'%w' == '3' || $smarty.now|date_format:'%w' == '4' || $smarty.now|date_format:'%w' == '5'}{$workdays}{elseif $smarty.now|date_format:'%w' == '6'}{$saturday}{else}{$holiday}{/if}

С понедельника по пятницу будет отображаться режим работы с 10 до 20 часов.
В субботу — с 10 до 16 часов.
В воскресенье — не работаем.

 2 комментария    13   8 мес   simplacms

GetSimple CMS: функция сортировки страниц

Можно использовать для названий, даты создания или же прикрутить плагин Custom Page Field и добавить поле сортировка для точного упорядочивания

<?php function sort_slug($slugs, $order = SORT_ASC) {
  $sortable_array = array();
  foreach($slugs as $slug) {
    $sortable_array[$slug] = returnPageField($slug, 'SORTED_FIELD');
  }
  switch ($order) {
    case SORT_ASC:
      asort($sortable_array, SORT_NUMERIC);
      break;
    case SORT_DESC:
      arsort($sortable_array, SORT_NUMERIC);
      break;
  }
  return array_keys($sortable_array);
} ?>

Вывод:

<?php array = sort_slug(array) ?>

PHP: склонение числительных

/*
 * $num число, от которого будет зависеть форма слова
 * $form_1 первая форма слова, например Яблоко
 * $form_2 вторая форма слова - Яблока
 * $form_3 третья форма множественного числа слова - Яблоков
 */
function true_wordform($num, $form_1, $form_2, $form_3){
	$num = abs($num) % 100; // берем число по модулю и сбрасываем сотни (делим на 100, а остаток присваиваем переменной $num)
	$num_x = $num % 10; // сбрасываем десятки и записываем в новую переменную
	if ($num > 10 && $num < 20) // если число принадлежит отрезку [11;19]
		return $form_3;
	if ($num_x > 1 && $num_x < 5) // иначе если число оканчивается на 2,3,4
		return $form_3;
	if ($num_x == 1) // иначе если оканчивается на 1
		return $form_1;
	return $form_3;
}

Вывод:

$count = 5; 
echo $count . ' ' . wordForm($count, 'яблоко', 'яблока', 'яблок');

GetSimple CMS: вывод полей для дочерних страниц

Задача: вывести список дочерних страниц, с обращением к полям этих страниц.
Решение:

<?php
  $page = get_page_slug(false);
  $children = getChildren($page);
  echo '<div';
  foreach($children as $child) {
    $url = find_url($child, $page);
    $url_clean = $child;
    $img = returnPageField($url_clean, 'h1_img');
    echo '
    	<div>
                    <div>
                        <a href="'.$url.'"></a>
                        <img src="'.$img.'">
                        <div>
                            <div>
                                <h3>'.returnPageField($child, 'title').'</h3>
                            </div>
                        </div>
                    </div>
                </div>
    ';
  }
  echo '</div>';
?>

Чтобы вывести значение любого поля для дочерней страницы в цикле, назначаем поля, которые требуется вывести, например у вас стоит плагин CustomFields и вы добавили через него произвольное поле image. Для вывод значения добавим переменную image:

$image = retutnPageField($url_clean, 'image');

А чтобы вывести в цикле:

<img src="'.$image.'">

SimplaCMS: вывод закупочной цены

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

  1. Откроем /simpla/design/html/product.tpl и добавим колонки Закупка и Прибыль для вариантов товаров:
<li class="variant_move"></li>
<li class="variant_name">Название варианта</li>	
<li class="variant_sku">Артикул</li>
<li class="variant_fprice">Закупка, {$currency->sign}</li>	
<li class="variant_price">Цена, {$currency->sign}</li>	
<li class="variant_discount">Старая, {$currency->sign}</li>	
<li class="variant_amount">Кол-во</li>
<li></li>
<li>Прибыль</li>
  1. Далее добавим поля для указания данных в цикл $product_variants:
<li class="variant_move"><div class="move_zone"></div></li>
<li class="variant_name">      <input name="variants[id][]"            type="hidden" value="{$variant->id|escape}" /><input name="variants[name][]" type="" value="{$variant->name|escape}" /> <a class="del_variant" href=""><img src="design/images/cross-circle-frame.png" alt="" /></a></li>
<li class="variant_sku">       <input name="variants[sku][]"           type="text"   value="{$variant->sku|escape}" /></li>
<li class="variant_fprice">     <input name="variants[fprice][]"         type="text"   value="{$variant->fprice|escape}" /></li>
<li class="variant_price">     <input name="variants[price][]"         type="text"   value="{$variant->price|escape}" /></li>
<li class="variant_discount">  <input name="variants[compare_price][]" type="text"   value="{$variant->compare_price|escape}" /></li>
<li class="variant_amount">    <input name="variants[stock][]"         type="text"   value="{if $variant->infinity || $variant->stock == ''}∞{else}{$variant->stock|escape}{/if}" />{$settings->units}</li>
<li>{if $variant->fprice} +{math equation = $variant->price - $variant->fprice} {$currency->sign}{/if}</li>
  1. Теперь добавим отображение закупки в список товаров, для этого откроем файл /simpla/design/html/products.tpl и добавим в цикл $product_variants:
<li {if !$variant@first}class="variant" style="display:none;"{/if}>
	<i title="{$variant->name|escape}">{$variant->name|escape|truncate:30:'…':true:true}</i>
	<input class="fprice" type="text" name="fprice[{$variant->id}]" value="{$variant->fprice}" />
	<input class="price {if $variant->compare_price>0}compare_price{/if}" type="text" name="price[{$variant->id}]" value="{$variant->price}" {if $variant->compare_price>0}title="Старая цена &mdash; {$variant->compare_price} {$currency->sign}"{/if} />{$currency->sign}  
	<input class="stock" type="text" name="stock[{$variant->id}]" value="{if $variant->infinity}∞{else}{$variant->stock}{/if}" />{$settings->units}
</li>
  1. Отображение сделали, теперь нужно поработать над функционалом. Откроем файл /api/Variants.php и обновим в двух местах SQL-запрос для функции get_variants:
$query = $this->db->placehold("SELECT v.id, v.product_id , v.price, v.fprice, NULLIF(v.compare_price, 0) as compare_price, v.sku, IFNULL(v.stock, ?) as stock, (v.stock IS NULL) as infinity, v.name, v.attachment, v.position
  1. Теперь откроем файл /simpla/ProductsAdmin.php и добавим возможность управления закупочной ценой на списке товаров:
// Обработка действий 	
if($this->request->method('post'))
{
// Сохранение цен и наличия
$prices = $this->request->post('price');
$fprices = $this->request->post('fprice');
$stocks = $this->request->post('stock'); 
		    foreach($fprices as $id=>$fprice)
{
	$this->variants->update_variant($id, array('fprice'=>$fprice));
}
foreach($prices as $id=>$price)
{
	$stock = $stocks[$id];
	if($stock == '∞' || $stock == '')
	$stock = null;
	$this->variants->update_variant($id, array('price'=>$price, 'stock'=>$stock));
}

PHP: Разделить число на разряды

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

<? number_format($string, 0, '', ' '); ?>

SimplaCMS: подключаем dadata для клёвых подсказок

Есть клёвый сервис, который позволяет в вашей корзине вызывать подсказки.
Подсказки могут быть разными — фамилии, имена, отчества, адреса, почты, огрн, инн и ещё большая куча других подсказок. Для простых интернет-магазинов очень нужны ФИО, электропочты и адреса. Это реально упрощает процесс оформления заказа и в какой-то степени увеличивает конверсию.

Как подключить

  1. Регистрируемся на сайте dadata.ru, получаем API ключик.
  2. Открываем файл /design/ваша_тема/html/cart.tpl и добавляем в него:
{literal}
<link href="https://cdn.jsdelivr.net/npm/suggestions-jquery@19.4.2/dist/css/suggestions.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/suggestions-jquery@19.4.2/dist/js/jquery.suggestions.min.js"></script>
 <script type="text/javascript">
     $(".cart input[name='name']").suggestions({
         serviceUrl: "https://dadata.ru/api/v2",
         token: "a8fe6329cfa81666be66deb370d2c364ccfddeaa",
         type: "NAME",
         params: {
             parts: ["SURNAME", "NAME", "PATRONYMIC"]
         }
     });
     $(".cart input[name='address']").suggestions({
         serviceUrl: "https://dadata.ru/api/v2",
         token: "a8fe6329cfa81666be66deb370d2c364ccfddeaa",
         type: "ADDRESS"
     });
     $(".cart input[name='email']").suggestions({
        serviceUrl: "https://dadata.ru/api/v2",
        token: "a8fe6329cfa81666be66deb370d2c364ccfddeaa",
        type: "EMAIL",
        /* Вызывается, когда пользователь выбирает одну из подсказок */
        onSelect: function(suggestion) {
            console.log(suggestion);
        }
    });
 </script>
 {/literal}
  1. Чтобы скрипт заработал, нужно указать свой API-ключик во всех token-параметрах.
  2. Обратите внимание, что у меня используется нестандартный класс для формы корзины. Чтобы узнать какой класс формы корзины используется у вас, найдите в cart.tpl html-тег
    и посмотрите какой класс ему принадлежит. Далее просто замените cart на свой класс в этих полях:
$(".cart input[name='name']").suggestions({
...
$(".cart input[name='address']").suggestions({
...
$(".cart input[name='email']").suggestions({
...
}

Результат работы

Ранее Ctrl + ↓