Блоги

Блоги сайта

  1. Привет, друзья.

    Заметка может быть интересна front-end разработчикам, которые начинают изучение Magento 2 CMS (одной из самых популярных систем управления интернет-магазинами). Предполагается что разработка ведётся в рамках кастомной темы под M2.

    Если говорить о самой задаче то, конечно же, спрятать уведомление после указанного времени особого труда не составит. Вопрос скорее в другом — как это реализовать в рамках Magento2, где властвует requirejs и несколько иная, по сравнению с Magento1, иерархия директорий?

    Для выполнения поставленной задачи давай воспользуемся html-файлом, который размещается по пути:

    magento/vendor/magento/module-theme/view/frontend/templates/messages.phtml

    с содержимым:

    Скрытый текст
    
    <?php
    /**
     * Copyright © 2016 Magento. All rights reserved.
     * See COPYING.txt for license details.
     */
    ?>
    <div data-bind="scope: 'messages'">
        <div data-bind="foreach: { data: cookieMessages, as: 'message' }" class="messages">
            <div data-bind="attr: {
                class: 'message-' + message.type + ' ' + message.type + ' message',
                'data-ui-id': 'message-' + message.type
            }">
                <div data-bind="html: message.text"></div>
            </div>
        </div>
        <div data-bind="foreach: { data: messages().messages, as: 'message' }" class="messages">
            <div data-bind="attr: {
                class: 'message-' + message.type + ' ' + message.type + ' message',
                'data-ui-id': 'message-' + message.type
            }">
                <div data-bind="html: message.text"></div>
            </div>
        </div>
    </div>
    <script type="text/x-magento-init">
        {
            "*": {
                "Magento_Ui/js/core/app": {
                    "components": {
                            "messages": {
                                "component": "Magento_Theme/js/view/messages"
                            }
                        }
                    }
                }
        }
    </script>

     

    Давай скопируем его в кастомную тему по адресу:

    magento/app/design/frontend/HTMLForum/default/Magento_Theme/templates/messages.phtml

    где "HTMLForum/default" — это "Vendor/theme"

    В рамках задачи нам требуется спрятать системное уведомление через заданное кол-во времени. Для этого можно воспользоваться колбеком knockoutjs.com — afterRender().

    Мне кажется правильнее было бы выполнить Messages.extend({}) в новом компоненте, но мои попытке не увенчались успехом на момент написания статьи. Я внесу обновления в текущую заметку когда буду знать более корректный путь для реализации поставленной задачи.

    В M2 существуют 2 варианта вывода уведомлений:

    • В результате перезагрузки страницы (на пример, добавление продукта на странице продукта)
    • В результате ajax-запроса (на пример, добавление продукта на странице каталога)

    В вышеуказанном шаблоне содержатся оба варианта. Пример ф-ии которая будет вызвана после рендеринга уведомления:

    afterRender: function(e){
        setTimeout(function () {
            jQuery(e).fadeOut()
        }, 5000);
    }

    где "5000" — это время ожидания в мс.

    Её мы используем для обоих вариантов следующим образом:

    <?php
    /**
     * Copyright © 2016 Magento. All rights reserved.
     * See COPYING.txt for license details.
     */
    ?>
    <div data-bind="scope: 'messages'">
        <div data-bind="foreach: { data: cookieMessages, as: 'message' }" class="messages">
            <div data-bind="attr: {
                class: 'message-' + message.type + ' ' + message.type + ' message',
                'data-ui-id': 'message-' + message.type
            },
            afterRender: function(e){
                setTimeout(function () {
                    jQuery(e).fadeOut()
                }, 5000);
            }">
                <div data-bind="html: message.text"></div>
            </div>
        </div>
        <div data-bind="foreach: { data: messages().messages, as: 'message' }" class="messages">
            <div data-bind="attr: {
                class: 'message-' + message.type + ' ' + message.type + ' message',
                'data-ui-id': 'message-' + message.type
            },
            afterRender: function(e){
                setTimeout(function () {
                    jQuery(e).fadeOut()
                }, 5000);
            }
            ">
                <div data-bind="html: message.text"></div>
            </div>
        </div>
    </div>
    <script type="text/x-magento-init">
        {
            "*": {
                "Magento_Ui/js/core/app": {
                    "components": {
                            "messages": {
                                "component": "Magento_Theme/js/view/messages"
                            }
                        }
                    }
                }
        }
    </script>

    Вот, собственно, и всё.

    Почисти кеш, запусти деплой (или пересоздай симлинки + билд стилей темы через Grunt) и обнови страницу.

Карта разработчиков

Карта участников

Отметь себя на карте для поиска или предложения работы



  • Ближайшие события

  • Сообщения форума

    • Протестируйте пожалуйста http://dkakharov.000webhostapp.com/

      Иногда будет выдавать результат на +/- 1 процент от ста.

      Вот весь код db.php <?php error_reporting(E_ALL); $host = 'localhost'; $user = 'root'; $password = ''; $db_name = 'quiz'; $link = mysqli_connect($host, $user, $password, $db_name) or die(mysqli_error($link)); mysqli_query($link, "SET NAMES 'utf8'"); ?> index.php <?php require_once ('db.php'); $sql = "SELECT * FROM question"; $query = mysqli_query($link, $sql) or die(mysqli_error($link)); for ($res = []; $row = mysqli_fetch_assoc($query); $res[] = $row); echo '<pre>'; //print_r($res); echo '</pre>'; ?> <!DOCTYPE html> <html> <head> <title>Опрос</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="main"> <h1>Опрос</h1> <p class="result">Укажите Ваш возраст:</p> <form action="" method="get"> <?php foreach($res as $key) { echo '<p style="font-weight: bold;"><label><input type="radio" name="age" value="'.$key['variant'].'">'.$key['titile'].'</label></p>'; } ?> <input type="submit" class="btn-answer"> </form> <?php if(!empty($_GET['age'])) { $needAnswer = "SELECT * FROM answer WHERE question_id =" . $_GET['age']; $resultNeedAnswer = mysqli_query($link, $needAnswer) or die(mysqli_error($link)); $result = mysqli_fetch_assoc($resultNeedAnswer); $oldCount = $result['count_answer']; $newCount = $oldCount + 1; echo '<pre>'; //print_r($result); echo '</pre>'; $sqlUpdate = "UPDATE answer SET count_answer = '".$newCount."' WHERE question_id = " . $_GET['age']; mysqli_query($link, $sqlUpdate) or die(mysqli_error($link)); $allAnswer = "SELECT * FROM answer"; $resultAllAnswer = mysqli_query($link, $allAnswer) or die(mysqli_error($link)); for ($resAllAnswer = []; $rowAllAnswer = mysqli_fetch_assoc($resultAllAnswer); $resAllAnswer[] = $rowAllAnswer); echo '<pre>'; //print_r($resAllAnswer); echo '</pre>'; $allPeople = 0; foreach($resAllAnswer as $k) { $allPeople = $allPeople + $k['count_answer']; } $onePercent = $allPeople/100; //для погрешности $oneItem = round($resAllAnswer[0]['count_answer'] / $onePercent); $two = round($resAllAnswer[1]['count_answer'] / $onePercent); $three = round($resAllAnswer[2]['count_answer'] / $onePercent); echo '<p>Результат опроса</p>'; echo '<div class="result"> <p>Общее количество опрошенных: <span class="bold">'.$allPeople.'</span><p> <ol> <li>. Ответили "'.$res[0]['titile'].'": <span class="bold">'.$resAllAnswer[0]['count_answer'].'</span> человек, <span class="bold">'.$oneItem.'%</span> опрошенных</li> <li>. Ответили "'.$res[1]['titile'].'": <span class="bold">'.$resAllAnswer[1]['count_answer'].'</span> человек, <span class="bold">'.$two.'%</span> опрошенных</li> <li>. Ответили "'.$res[2]['titile'].'": <span class="bold">'.$resAllAnswer[2]['count_answer'].'</span> человек, <span class="bold">'.$three.'%</span> опрошенных</li> </ol> </div>'; echo '<br><br>'; $left1 = ($oneItem / 2) - 2; $left2 = ($two / 2) - 2; $left3 = ($three / 2) - 2; echo '<div> <p style="font-weight: bold;">Ответ "'.$res[0]['titile'].'"</p> <p class="gradient" style="position: relative; background: linear-gradient(to right, #1e5799 '.$oneItem.'%, #f5f5f5 '.$oneItem.'%);"><span style="position: absolute; top: 0; left:'.$left1.'%; color: white;">'.$oneItem.'%</span></p> </div>'; echo '<div> <p style="font-weight: bold;">Ответ "'.$res[1]['titile'].'"</p> <p class="gradient" style="position: relative; background: linear-gradient(to right, #1e5799 '.$two.'%, #f5f5f5 '.$two.'%);"><span style="position: absolute; top: 0; left:'.$left2.'%; color: white;">'.$two.'%</span></p> </div>'; echo '<div> <p style="font-weight: bold;">Ответ "'.$res[2]['titile'].'"</p> <p class="gradient" style="position: relative; background: linear-gradient(to right, #1e5799 '.$three.'%, #f5f5f5 '.$three.'%);"><span style="position: absolute; top: 0; left:'.$left3.'%; color: white;">'.$three.'%</span></p> </div>'; } /* 1. 130 человек = 100% 2. 130/100=1,3 (один процент) 3. 60/1,3 = 46% за первый пункт 4. 30/1,3 = 23% за второй пункт 5. 40/1,3 = 31% за третий пункт. 1. 34 человека = 100% 2. 34/100 = 0.34 3. 3/0.34 = 0 4. 2/0.34 = 100 5. 0/0.34 = 0 */ ?> </div> </body> </html> style.css .main { width: 620px; margin: 0 auto; padding: 10px; } ol { counter-reset: myCounter; padding: 0; } li { list-style: none; } li:before { counter-increment: myCounter; content:counter(myCounter); color: #31708f; font-weight: bold; } .result { background: #d9edf7; border-radius: 5px; padding: 15px; color: #31708f; } .btn-answer { color: white; background: #398439; border-radius: 5px; width: 100%; border: 1px solid #255625; padding: 6px 12px; } .bold { font-weight: bold; } .gradient { width: 100%; height: 20px; background: #337AB7; border-radius: 5px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); } база -- phpMyAdmin SQL Dump -- version 4.6.5.2 -- https://www.phpmyadmin.net/ -- -- Хост: 127.0.0.1 -- Время создания: Окт 20 2017 г., 14:50 -- Версия сервера: 10.1.21-MariaDB -- Версия PHP: 7.1.1 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- База данных: `quiz` -- -- ——————————————————-- -- -- Структура таблицы `answer` -- CREATE TABLE `answer` ( `id` int(11) NOT NULL, `question_id` int(11) NOT NULL, `count_answer` int(11) NOT NULL DEFAULT '0' ) ENGINE=InnoDB DEFAULT CHARSET=utf8; -- -- Дамп данных таблицы `answer` -- INSERT INTO `answer` (`id`, `question_id`, `count_answer`) VALUES (1, 1, 0), (2, 2, 0), (3, 3, 0); -- ——————————————————-- -- -- Структура таблицы `question` -- CREATE TABLE `question` ( `id` int(11) NOT NULL, `titile` varchar(256) NOT NULL, `variant` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8; -- -- Дамп данных таблицы `question` -- INSERT INTO `question` (`id`, `titile`, `variant`) VALUES (1, 'до 20 лет', 1), (2, 'от 20 до 30', 2), (3, 'более 30', 3); -- -- Индексы сохранённых таблиц -- -- -- Индексы таблицы `answer` -- ALTER TABLE `answer` ADD PRIMARY KEY (`id`); -- -- Индексы таблицы `question` -- ALTER TABLE `question` ADD PRIMARY KEY (`id`); -- -- AUTO_INCREMENT для сохранённых таблиц -- -- -- AUTO_INCREMENT для таблицы `answer` -- ALTER TABLE `answer` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4; -- -- AUTO_INCREMENT для таблицы `question` -- ALTER TABLE `question` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;  
    • На пример вот так: https://jsfiddle.net/klierik/7b81nja2/
    • Как сделать в 2 колонки один список?