Блог Антона Кима: заметки с тегом OpenCart 3

OpenCart: как на странице товара вывести SKU и UPC

Антон Ким — Fri, 17 Jul 2020 05:49:36 +0000

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

Что делать

Открываем сайт/catalog/controller/product/product.php

Находим код (~240 строка):

$data['model'] = $product_info['model'];

После вставляем:

$data['sku'] = $product_info['sku'];
$data['upc'] = $product_info['upc'];

Сохраняем, обновляем кэш.

Открываем сайт/catalog/view/theme/тема/template/product/product.twig

Находим место для выведения и вписываем:

{{ sku }}
{{ upc }}

Сохраняем, обновляем кэш.

Готово.

OpenCart: как добавить фильтр по артикулу в админке

Антон Ким — Fri, 17 Jul 2020 05:01:13 +0000

В стандартном фильтре в админке нельзя «фильтровать» товары по артикулу. Когда у вас тысячи товаров, такой фильтр в разы ускоряет поиск конкретного товара.

Что делать

Открываем сайт/admin/controller/catalog/product.php

Находим код (~227 строка):

protected function getList() {

После фигурной скобки вставляем:

if (isset($this->request->get['filter_sku'])) {
	$filter_sku = $this->request->get['filter_sku'];
} else {
	$filter_sku = '';
}
$data['filter_sku'] = $filter_sku;

В том же файле находим (~276 строка):

$url = ''

После вставляем:

if (isset($this->request->get['filter_sku'])) {
	$url .= '&filter_sku=' . $this->request->get['filter_sku'];
}

В том же файле находим (~324 строка):

$filter_data = array(

После скобки вставляем:

'filter_sku' => isset($filter_sku) ? $filter_sku : '',

Сохраняем, обновляеем кэш.

Открываем сайт/admin/model/catalog/product.php

Находим код (~361 строка):

if (!empty($data['filter_name'])) {
	$sql .= " AND pd.name LIKE '" . $this->db->escape($data['filter_name']) . "%'";
}

После него вставляем:

if (isset($this->request->get['filter_sku']) && !empty($data['filter_sku'])) {
	$sql .= " AND p.sku = '" . $this->db->escape($data['filter_sku']) . "'";
}

Сохраняем, обновляем кэш.

Открываем сайт/admin/view/template/catalog/product_list.twig

Находим код (~68 строка):

<div class="form-group">
	<label class="control-label" for="input-quantity">{{ entry_quantity }}</label>
	<input type="text" name="filter_quantity" value="{{ filter_quantity }}" id="input-quantity" class="form-control" />
</div>

После него вставляем:

<div class="form-group">
	<label class="control-label" for="input-sku">Артикул</label>
	<input type="text" name="filter_sku" value="{{ filter_sku }}" id="input-sku" class="form-control" />
</div>

В том же файле находим (~227 строка):

var filter_status = $('select[name=\'filter_status\']').val();

После него вставляем:

var filter_sku = $('input[name=\'filter_sku\']').val();

if (filter_sku) {
	url += '&filter_sku=' + encodeURIComponent(filter_sku);
}

Сохраняем, обновляем кэш.

Готово.

OpenCart: как отключить кнопку покупки, когда товара нет в наличии

Антон Ким — Thu, 16 Jul 2020 10:15:05 +0000

Когда товара нет в наличии, его, по умолчанию, можно добавить в корзину. В таком сценарии нет необходимости.

Что делать

Открываем сайт/catalog/controller/product/product.php

Находим код (~251 строка):

if ($product_info['quantity'] <= 0) {
	$data['stock'] = $product_info['stock_status'];
} elseif ($this->config->get('config_stock_display')) {
	$data['stock'] = $product_info['quantity'];
} else {
	$data['stock'] = $this->language->get('text_instock');
}

Перед ним добавляем:

$data['stock_quantity'] = $product_info['quantity'];
$data['text_out_of_stock'] = $product_info['stock_status'];

В том же файле находим (~436 строка):

$data['products'][] = array(
…
);

После скобки добавляем:

'quantity' => $result['quantity'],
'text_out_of_stock' => $result['stock_status'],

Сохраняем, обновляем кэш.

Открываем сайт/catalog/theme/тема/template/product/product.twig

Находим код:

<button type="button" id="button-cart" data-loading-text="{{ text_loading }}" class="btn button-cart">{{ button_cart }}</button>

В завимости от темы, код может отличаться, но button-cart остаётся константой.

Заменяем его на:

{% if stock_quantity < 1 %} 
    <button type="button" id="button-outstock" disabled="disabled" data-loading-text="{{ text_loading }}" class="btn button-cart"><i class="fa fa-exclamation-triangle"></i> {{ text_out_of_stock }}</button>
{% else %}
    <button type="button" id="button-cart" data-loading-text="{{ text_loading }}" class="btn button-cart">{{ button_cart }}</button>
{% endif %}

В том же файле находим:

<input type="text" name="quantity" value="{{ minimum }}" size="2" id="input-quantity" class="form-control" />

Заменяем его на:

{% if stock_quantity > 1 %} 
    <input type="text" name="quantity" value="{{ minimum }}" size="2" id="input-quantity" class="form-control" />
{% endif %}

В том же файле находим:

<label class="control-label" for="input-quantity">{{ entry_qty }}</label>

Заменяем его на:

{% if stock_quantity > 1 %} 
    <label class="control-label" for="input-quantity">{{ entry_qty }}</label>
{% endif %}

Сохраняем, обновляем кэш.

Готово. На странице товара, когда его не будет в наличии, кнопка «Купить» станет неактивной.

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

Всё зависит от конкретной темы. Но шаги остаются теми же, — меняются только редактируемые файлы. Например, category.php, manufacturer.php, search.php и пр.

OpenCart: как скрыть товары, которых нет в наличии

Антон Ким — Fri, 26 Jun 2020 06:02:44 +0000

Чтобы были доступны и по ссылке, и в поисковиках.

В чём проблема

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

Что делать

Открыть сайт/catalog/model/catalog/product.php

Открыть поиск и найти все условия:

AND p.status = '1'

Это условие отвечает за показ товара, когда он включён.

Заменить все найденные условия (кроме одного ↓) на:

AND p.status = '1' AND p.stock_status_id != '5'

Это условие, при котором товар не будет отображаться: включён и нет в наличии.

Не заменять условие в самом начале файла:

public function getProduct($product_id) {
…
}

Сохранить, обновить кэш.

Готово. Товары, которых нет в наличии, не отображаются, но доступны по прямой ссылке и отображаются в поисковиках.

Другой вариант

Допустим, что товара нет в наличии временно. И нам нужно, чтобы его видели на сайте. Тогда можно всё немного переиграть.

Что делать

В том же файле открыть поиск и найти те же условия.

Заменить их (также, кроме одного) на:

AND p.status = '1' AND p.minimum != '0'

Сохранить, обновить кэш.

Готово. Товары, которых нет в наличии, будут отображаться как обычно. Но товары, у которых минимальное количество будет равно нулю, отображаться не будут. Для них можно создать и отдельный статус, например «Снят с производства».

OpenCart: автогенерация сопутствующих товаров

Антон Ким — Fri, 26 Jun 2020 02:07:37 +0000

Все сопутствующие товары, по умолчанию, добавляются вручную. Когда на сайте тысячи товаров, это становится проблемой.

Что делать

Открываем сайт/catalog/model/catalog/product.php

Находим код (~392 строка):

$query = $this->db->query("SELECT * FROM " . DB_PREFIX . "product_related pr LEFT JOIN " . DB_PREFIX . "product p ON (pr.related_id = p.product_id) LEFT JOIN " . DB_PREFIX . "product_to_store p2s ON (p.product_id = p2s.product_id) WHERE pr.product_id = '" . (int)$product_id . "' AND p.status = '1' AND p.date_available <= NOW() AND p2s.store_id = '" . (int)$this->config->get('config_store_id') . "'");

Заменяем его на:

$query = $this->db->query("SELECT *, (p.product_id) AS related_id FROM
  " . DB_PREFIX . "product_to_category p2c 
    LEFT JOIN " . DB_PREFIX . "product p ON (p2c.product_id = p.product_id)
    LEFT JOIN " . DB_PREFIX . "product_to_store p2s ON (p.product_id = p2s.product_id)
  WHERE 
    p2c.category_id IN (SELECT p2c2.category_id FROM " . DB_PREFIX . "product_to_category p2c2 WHERE p2c2.product_id = " . (int) $product_id . ")
      AND p.product_id <> " . (int) $product_id . "
      AND p.status = '1'
      AND p.stock_status_id != '5'
      AND p.date_available <= NOW()
      AND p2s.store_id = '" . (int)$this->config->get('config_store_id') . "'
    ORDER BY RAND() ASC
  LIMIT 0,8");

Сохраняем, обновляем кэш.

Готово.

Сопутствующие товары начнут генерироваться случайным образом — из подкатегорий родительской категории. И только те, которые есть в наличии.

OpenCart: как защитить админку

Антон Ким — Thu, 25 Jun 2020 17:26:34 +0000

Админка, по умолчанию, находится по адресу сайт.ру/admin. Это проблема.

Что делать

Открываем сайт/admin/controller/common/login.php

Находим код:

$this->load->language('common/login');

После него вставляем:

$pass = null;
if (!isset($_GET[PASS_KEY]) || $_GET[PASS_KEY] != PASS) {
    $this->response->redirect('http://'.$_SERVER['HTTP_HOST']."/");
}
else {
    $pass = '&'.PASS_KEY.'='.PASS;
}

Находим код:

$data['action'] = $this->url->link('common/login', '', true);

Заменяем его на:

$data['action'] = $this->url->link('common/login', '', true).$pass;

Открываем сайт/admin/config.php

После тега <?php, на новой строке, вставляем:

define('PASS_KEY', 'ключ');
define('PASS', 'пароль');

Заменяем ключ, например, на access, а пароль на hellohacker.

Сохраняем, обновляем кэш.

Готово.

Админка будет находиться по адресу сайт.ру/admin?access=hellohacker.

Если адрес ввести неверно, произойдёт переадресация на главную страницу.

OpenCart: как минифицировать HTML

Антон Ким — Mon, 04 May 2020 16:49:45 +0000

Для более быстрой загрузки страниц.

Что делать

Открываем сайт/system/library/response.php

Находим код (~108 строка):

public function output() {
	if ($this->output) {
		$output = $this->level ? $this->compress($this->output, $this->level) : $this->output;
		
		if (!headers_sent()) {
			foreach ($this->headers as $header) {
				header($header, true);
			}
		}
		
		echo $output;
	}
}

Заменяем на:

public function output() {
 
if ($this->output) {
    $this->output = preg_replace("/(\n)+/", "\n", $this->output);
    $this->output = preg_replace("/\r\n+/", "\n", $this->output);
    $this->output = preg_replace("/\n(\t)+/", "\n", $this->output);
    $this->output = preg_replace("/\n(\ )+/", "\n", $this->output);
    $this->output = preg_replace("/\>(\n)+</", '><', $this->output);
    $this->output = preg_replace("/\>\r\n</", '><', $this->output);
}

if ($this->output) {
	$output = $this->level ? $this->compress($this->output, $this->level) : $this->output;
	
	if (!headers_sent()) {
		foreach ($this->headers as $header) {
			header($header, true);
		}
	}
	
	echo $output;
}
}

Сохраняем, обновляем кэш.

Готово.

OpenCart: как сделать сортировку атрибутов по порядку сортировки

Антон Ким — Mon, 04 May 2020 16:46:27 +0000

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

В чём проблема

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

Что делать

Открываем сайт/admin/model/catalog/attribute.php.

Находим код (~53 строка):

if (isset($data['sort']) && in_array($data['sort'], $sort_data)) {
	$sql .= " ORDER BY " . $data['sort'];
} else {
	$sql .= " ORDER BY attribute_group, ad.name";
}

Изменяем последнюю строку:

$sql .= " ORDER BY attribute_group, a.sort_order, ad.name";

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

Сохраняем, обновляем кэш.

Готово.

OpenCart: автогеренация тайтла

Антон Ким — Mon, 27 Apr 2020 16:40:17 +0000

Чтобы получилось вот так:

При этом, чтобы иметь возможность отдельно редактировать сам тайтл.

Что делать

Открываем сайт/admin/view/template/catalog/product_form.twig

Находим код (~67 строка):

<input type="text" name="product_description[{{ language.language_id }}][meta_title]" value="{{ product_description[language.language_id] ? product_description[language.language_id].meta_title }}" placeholder="{{ entry_meta_title }}" id="input-meta-title{{ language.language_id }}" class="form-control" />

После него вставляем:

<script type="text/javascript">
$(function() {
  var $name_input = $("input[name='product_description[{{ language.language_id }}][name]']");
  var $meta_title = $("input[name='product_description[{{ language.language_id }}][meta_title]']");

  $name_input.keyup(function() {
  $meta_title.val($name_input.val());
  });
});
</script>

Сохраняем, обновляем кэш.

Готово.

Можно пойти дальше. Например, чтобы после названия автоматически генерировалось «купить в „магазине“».

Изменяем одну строку:

$meta_title.val($name_input.val() + 'Тут какой-то текст');

Готово — 2.

Ту же самую процедуру можно провернуть и с категориями.

Спасибо за помощь Ярославу Усенко.

OpenCart: как сделать сортировку товаров по наличию

Антон Ким — Sun, 26 Apr 2020 16:30:06 +0000

И в магазине, и в админке.

В чём проблема

По умолчанию, все товары в категориях, страницах производителей, поиске — сортируются по названиям в алфавитном порядке. И даже те товары, которых нет в наличии, могут отображаться в начале списка. А когда таких товаров много — это становится проблемой.

Что делать

Открываем сайт/catalog/model/catalog/product.php

Находим код (~168 строка):

if (isset($data['sort']) && in_array($data['sort'], $sort_data)) {
	if ($data['sort'] == 'pd.name' || $data['sort'] == 'p.model') {
		$sql .= " ORDER BY LCASE(" . $data['sort'] . ")";
	} elseif ($data['sort'] == 'p.price') {
		$sql .= " ORDER BY (CASE WHEN special IS NOT NULL THEN special WHEN discount IS NOT NULL THEN discount ELSE p.price END)";
	} else {
		$sql .= " ORDER BY " . $data['sort'];
	}
} else {
	$sql .= " ORDER BY p.sort_order";
}

Заменяем его на:

if (isset($data['sort']) && in_array($data['sort'], $sort_data)) {
    if ($data['sort'] == 'pd.name' || $data['sort'] == 'p.model') {
        $sql .= " ORDER BY p.stock_status_id DESC, LCASE(" . $data['sort'] . ")";
    } elseif ($data['sort'] == 'p.price') {
        $sql .= " ORDER BY p.stock_status_id DESC, (CASE WHEN special IS NOT NULL THEN special WHEN discount IS NOT NULL THEN discount ELSE p.price END)";
    } else {
        $sql .= " ORDER BY p.stock_status_id DESC, " . $data['sort'];
    }
} else {
    $sql .= " ORDER BY p.stock_status_id DESC, p.sort_order";
}

Сохраняем, обновляем кэш.

Готово. Товары будут сортироваться по наличию. Товаров, которых нет в наличии, будут отображаться в конце списка.

Можно сортировать и по количеству, а уже затем по наличию. Для этого заменяем на:

if (isset($data['sort']) && in_array($data['sort'], $sort_data)) {
    if ($data['sort'] == 'pd.name' || $data['sort'] == 'p.model') {
        $sql .= " ORDER BY p.quantity DESC, p.stock_status_id DESC, LCASE(" . $data['sort'] . ")";
    } elseif ($data['sort'] == 'p.price') {
        $sql .= " ORDER BY p.quantity DESC, p.stock_status_id DESC, (CASE WHEN special IS NOT NULL THEN special WHEN discount IS NOT NULL THEN discount ELSE p.price END)";
    } else {
        $sql .= " ORDER BY p.quantity DESC, p.stock_status_id DESC, " . $data['sort'];
    }
} else {
    $sql .= " ORDER BY p.quantity DESC, p.stock_status_id DESC, p.sort_order";
}

Можно использовать разные комбинации: сортировать по стоимости, рейтингу, дате добавления. Нужно лишь подменить значения в коде выше. Вот они:

$sort_data = array(
    'pd.name',
    'p.model',
    'p.quantity',
    'p.price',
    'rating',
    'p.sort_order',
    'p.date_added'
);

Как сделать в админке

Открываем сайт/admin/model/catalog/product.php.

Делаем тоже самое, что и наверху.

Готово.

По теме

Сортировка данных в SQL (ORDER BY).

OpenCart: как подключить LazyLoad

Антон Ким — Fri, 24 Apr 2020 11:37:07 +0000

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

Что это

Это ленивая загрузка изображений, которая ускоряет загрузку сайта.

Что делать

Примечание: для работы скрипта нужна подключённая библиотека jquery.

Скачать lazyload.min.js.

Можно подключить и ссылкой:

<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.1.1/dist/lazyload.min.js"></script>

Загрузить файл в catalog/view/javascript/. Или куда удобно.

Подключить в header.twig в своей теме.

В footer.twig, перед закрывающим тегом body, вставить:

<script>
var lazyLoadInstance = new LazyLoad({
    elements_selector: ".lazy"
});
</script>

Переходим в сайт/catalog/view/тема/product/category.twig

К каждому тегу img добавляем класс lazy, а вместо src — data-src. Вот так:

<img class="lazy" data-src="ссылка на изображение" alt="">

Тоже самое нужно проделать в файлах product.twig, search.twig, manufacturer_info.twig.

Сохраняем, обновляем кэш.

Готово.

У скрипта много настроек и возможностей, взгляните на гитхабе.

OpenCart: как исправить баг с адаптивность в админке

Антон Ким — Fri, 24 Apr 2020 11:24:30 +0000

И начать нормально жить.

В чём проблема

Не знаю как у других, но когда я заходил в админку, было вот так:

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

Потратил много времени прежде чем найти решение. А оно — до смешного простое.

Что делать

Открываем сайт/admin/system/tweak.ocmod.xml

Находим код (~13 строка):

<operation>
	<search><![CDATA[
	{% for link in links %}
	]]></search>
	<add position="before"><![CDATA[
	<script type="text/javascript" src="view/javascript/jquery/translit.js"></script>

	<style>
	#column-left {width: 260px !important;}
	#column-left + #content {margin-left: 260px !important;}
	.bimage {margin:0;}
	</style>
	]]></add>
</operation>

Удаляем из него вот эту часть:

<style>
#column-left {width: 260px !important;}
#column-left + #content {margin-left: 260px !important;}
.bimage {margin:0;}
</style>

Сохраняем, обновляем кэш.

Готово.

Результат:

Человеческий вид

OpenCart: как сделать нормальную разметку в исходном коде редактора товаров

Антон Ким — Thu, 23 Apr 2020 11:15:41 +0000

Двумя строчками кода.

В чём проблема

Когда вы заходите в исходный код описания, всё выглядит вот так:

Всё в одну строку, с прокруткой, без нормальной разметки

Что делать

Открываем скрипт сайт/admin/view/javascript/summernote/opencart.js

Находим код:

$(element).summernote({
    lang: $(this).attr('data-lang'),
    disableDragAndDrop: true,
    height: 500,
    emptyPara: '',
    codemirror: { // codemirror options
        mode: 'text/html',
        htmlMode: true,
        lineNumbers: true,
        theme: 'monokai'
	},

После строки lineNumbers вставляем:

lineWrapping: true,

Это уберёт прокрутку, и разметка начнёт переноситься на новые строки.

После строки emptyPara вставляем:

prettifyHtml: true,

Это превратит кашу с разметкой в человеческий вид.

Сохраняем, обновляем кэш.

Готово.

Результат на выходе:

OpenCart: как отключить форматирование при копировании

Антон Ким — Wed, 22 Apr 2020 10:38:36 +0000

Когда вы копируете откуда-то текст, он копируется целиком — вместе со стилями источника. Есть два решения.

Первое — копировать и вставлять не через Ctrl + V, а через Ctrl + Shift + V. Второе — отключить форматирование при копировании вообще.

Что делать

Открываем сайт/admin/view/javascript/summernote/opencart.js

Находим код:

$(element).summernote({
    lang: $(this).attr('data-lang'),
    disableDragAndDrop: true,
    height: 400,
    emptyPara: '',
    codemirror: { // codemirror options
        mode: 'text/html',
        htmlMode: true,
        lineNumbers: true,
        theme: 'monokai'
    },

После него вставляем:

callbacks: {
    onPaste: function(e) {
        var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
        e.preventDefault();
        setTimeout(function() {
            document.execCommand('insertText', false, bufferText);
            }, 10);
        }
},

Сохраняем, обновляем кэш.

Готово.

OpenCart: как сделать видео адаптивным по умолчанию

Антон Ким — Wed, 22 Apr 2020 10:31:14 +0000

Не залезая в исходный код редактора товаров.

В чём проблема

Когда вы вставляете видео с ютюба (кнопка «Видео»), оно имеет размеры 640х360. Чтобы сделать его адаптивным, приходится лезть в код и дополнять его. Это неудобно и неприятно.

Что делать

Примечание: у меня по умолчанию установлен редактор summernote, поэтому инструкция для него.

Открываем сайт/admin/view/javascript/summernote/summernote.js

Находим код (~6372 строка):

$video.addClass('note-video-clip');

return $video[0];

Заменяем его на:

var $embed;
var $embed = $('<div>').addClass('embed-responsive').addClass('embed-responsive-16by9');

$video.addClass('note-video-clip').addClass('embed-responsive-item');
$video.appendTo($embed);

return $embed[0];

Сохраняем, обновляем кэш.

Теперь при добавлении видео оно сразу будет адаптивным.

Это не всё. Добавим возможность включать полноэкранный режим.

В этом же файле находим код (~6327 строка):

var $video;
if (ytMatch && ytMatch[1].length === 11) {
    var youtubeId = ytMatch[1];
    $video = $('<iframe>')
        .attr('frameborder', 0)
        .attr('src', '//www.youtube.com/embed/' + youtubeId)
        .attr('width', '640').attr('height', '360');

После последнего .attr добавляем:

.attr('allowfullscreen', '');

Сохраняем, обновляем кэш.

Готово.