Как настроить хороший вид для печати?

Глава 9

[10 ноября 2016 г.]    Российская сборка Magento 2.49.12
Magento 2: модули и услуги
  • Тема закрыта
#1 Надежда А
  • Иконка
  • Группа: Администратор
  • Сообщений: 50
  • Регистрация: 12.12.2010

27.01.2011 00:37

Глава 9. Стили Magento печати

Таким образом, ваша Magento тема выглядит хорошо для тех, кто смотрит ее на мониторе компьютера. Но как насчет тех клиентов, которые хотели бы распечатать страницы с вашего магазина? В этой главе мы рассмотрим:
• Примеры стилей печати в других темах Magento
• Идеи по определению хорошего стиля печати для вашего магазина Magento
• Создание стиля печати для магазина Magento, в том числе то, что файлы макета должны сказать Magento


Просмотр печатного стиля

Для просмотра печатного стиля веб-сайта вы можете выбрать опцию Print Preview из меню File в большинстве браузеров.
Developer Toolbar для Firefox (http: / / addons.mozilla.org/en-US/firefox/addon/60) позволяет вам выбрать, какой стиль применяется по видам СМИ. Просто выберите функцию print один раз, когда дополнение установлено.
Заметим, что это не совсем настоящий печатный стиль, как предполагалось временами. Например, font-family, указанный в печатном стиле, иногда игнорируется.


Печатные стили в других темах Magento

Хорошее место для начала – взгляд на то, что другие темы Magento обеспечивают путем печатных стилей.


Печатный стиль стандартной темы

Тема по умолчанию, поставляемая с Magento, найдена на http://demo.magentocommerce.com, рассматривается пользователями, когда они впервые устанавливают Magento.

Прикрепленное изображение: 1.png

Магазин выглядит привлекательно для компьютерного монитора, но это не подходит для печати по следующим пунктам:
• Есть большие площади темных цветов, например, в заголовке, которые будут использовать ненужные чернила от принтеров ваших клиентов.
• Макет их трех колонок не подходит для печати.
• Существует много информации, которую кто-то, печатающий эту страницу, не захочет, например: популярные тэги, функции опроса и корзину.
Печатный стиль, предоставляемый темой по умолчанию, оформляет стиль содержания (контента) страницы.

Печатный дизайн для этой темы по-прежнему не идеален по следующим причинам:
• Существует контент в нижней части страницы, включая ссылку Report All Bugs («сообщать обо всех ошибках»), которая не является необходимой.
• Товары как основное внимание на этой странице должны быть напечатаны на первой странице.
• Логотип магазина не предназначен для белого фона. Так он выглядит уродливым, когда клиент выводит на печать страницу магазина, которая представляет плохую картинку для таких клиентов.
Однако, печатный дизайн является более эффективным по отдельным товарным страницам.

Прикрепленное изображение: 2.png

Как вы можете видеть, фото товара и его детали в настоящее время обращают на себя основное внимание. Хотя есть еще некоторая ненужная информация, например, товарные теги, показанные к нижней части страницы, она представляет гораздо более пригодный к печати вид магазина.
Современная тема Magento имеет аналогичные проблемы с ее стилями печати, но клиентская тема Magento может гарантировать, что ее печатный дизайн обеспечивает лучшее впечатление на клиентов.


Принципы хорошего стиля печати конструкции

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


Ограничения печатного стиля

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


Версия для печати

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


Gecko-браузеры

Одна хорошо документированная причуда печатных стилей происходит в некоторых Gecko-браузерах. Когда длинный элемент div плавает с CSS, эти браузеры имеют тенденцию игнорировать любой контент, который не печатается на первой странице, где div элемент встречается.
Это можно довольно легко обойти с добавлением float: none в соответствующие теги div в печатном стиле нашего магазина.


Что мы должны показать

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


Логотипы и названия магазина

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


Рекламные графики и метки (callouts)

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


Ссылки

Основная проблема при печати веб-страниц состоит в том, что ссылки внутри каждой страницы могут потерять их использование. Это потому, что, по умолчанию, назначение ссылки не отображается. Мы можем использовать CSS для добавления каждой ссылки в страницу, выходящую в печать, с URL-адресом ссылки, как мы увидим позже.


Что мы можем скрыть

Как мы видели в образце печатных стилей, которые мы рассмотрели ранее, существует также много того, что мы можем скрыть, чтобы снизить количество контента, необходимого нашим клиентам для печати. Это включает в себя:
• Навигацию и ссылки на страницы, которые не связаны с текущей страницей. Мало смысла в печати навигации вашего магазина и ссылок на нижнюю часть страницы, как когда-то напечатано, ваш клиент не сможет кликнуть на них!
• Поисковые окна - нет никакого смысла в их печати, т.к. печатная копия страницы не может быть использована для поиска.
• Теги популярных товаров – на них нельзя кликнуть. Таким образом, они бесполезны.
• Корзина - нет особой нужды в ее печати в большинстве случаев, но это на ваше усмотрение.


Фоновые изображения

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


Дизайн нашей темы для печати

Как правило, печатные стили могут быть назначены так же, как и экранные стили, с элементом link, вставленным в заголовок HTML документа:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />


Обратите внимание, что атрибут media установлен на print для того, чтобы сказать браузеру, что этот стиль будет применяться только для печати.
Теперь, когда мы рассмотрели на печатные стили в целом, мы можем перейти к созданию печатного стиля для нашей новой темы Magento.


Пока мы хотим отобразить логотип магазина, наша существующая тема Magento не подходит для печати по многим причинам, которые мы обсуждали ранее, эти причины включают в себя:
• Существует узорчатый фон.
• Есть много ссылок, которые не требуются для печати в навигации и где-либо еще.
• Рекламные графики, корзина и другие функции, которые отображаются в столбцах, не нужны.


Назначение печатного стиля в Magento

В Magento назначение печатного стиля немного сложнее, так как нам нужно будет редактировать файлы Magento макета для обеспечения того, что печатный стиль будет назначен каждой странице. Для этого нам нужно изменить page.xml файл макета в каталоге app/design/frontend/default/cheese2/layout. Найдите строку, подобную той, что находится ниже дескриптора default в Magento:

<block type="page/html_head" name="head" as="head">


После выполнения этого кода в файле макета, мы можем вставить макет команду, чтобы сказать Magento использовать наш печатный стиль (если он еще не представлен):

<action method="addCss"> 
  <stylesheet>css/print.css</stylesheet> 
  <params>media="print"</params>
</action>


Отметим, что стиль печати импортируется с помощью метода addCSS Magento макета, и мы указываем, что это стиль печати в элементе params. Далее, нам необходимо создать CSS файл, который будет использоваться в качестве печатного стиля. Мы можем сохранить его в каталоге skin/frontend/default/cheese2/css установки вашего магазина Magento как print.css.


Дизайн Magento для печати с CSS

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


Изображения

Есть три типа изображений, которыми мы займемся:
• Логотип магазина
• Фотографии товаров
• Другие изображения, включая фоновые изображения, установленные с CSS
Т.к. логотип магазина является псевдонимом белому фону, мы можем использовать его в нашем печатном стиле, и фотографии товаров будут тоже хороши. Другие изображения в нашей дизайне должны быть скрыты.

div.product-img-box img, #logo {
display: block;
float: none
}



Печать и цвета

Большинство клиентов, вероятно, хотят печатать страницы в черно-белом цвете. Для того, чтобы фон страницы был белый, и чтобы фоновое изображение не печаталось, можно отнести следующий код CSS для элемента body, и любые элементы вероятно будут содержать текст, например, заголовки и пункты:

body, ul, ol, dl, p, h1, h2, h3, h4, h5, h6 { 
  background: #FFF !important; 
  color: #000 !important;
}
a { 
  color: #9C0; 
  font-weight: bold; 
  text-decoration: underline
}


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

th, td {color: #000 !important}
td {border-color: #AAA !important}



Печать и ссылки

Одной из очевидных проблем с печатью нашего Magento магазина (или любого веб-сайта) является то, что он, вероятно, содержит гиперссылки на другие страницы. Когда страница будет напечатана, эти ссылки могут быть потеряны, но мы можем применить некоторые CSS для печати назначения ссылки после текста ссылки, как следующее:

#main a:link:after, #main a:visited:after { 
  content: " [" attr(href) "] "
}
#main a[href^="/"]:after { 
  content: " [http://www.example.com" attr(href) "] "
}


Этот CSS просто читает href атрибут из ссылки и добавляет его после ссылки в div c ID main, используя :after псевдо-элемент CSS. Второй блок CSS, который использует селектор ^= attribute, влияет на ссылки, которые имеют атрибут href, начинающийся с /.

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


Печать и типография

Хотя это хорошая практика использовать проценты или ems для стилей экрана, для печати, pts более полезен, особенно потому что вы можем предсказать размер текста, т.к. он будет отображаться на бумаге легче. В то же время, мы изменим font-family (семейство шрифтов) шрифты на шрфиты с засечками (serif typefaces), которые легче читать на бумаге.

body { 
  font-family: "georgia", "times", "times new roman", serif; 
  font-size: 12pt
}


Это также хорошая идея сделать все заголовки больше, чем остальная часть содержания, чтобы помочь сохранить визуальную иерархию страницы, как показано в следующем фрагменте:

h1 { 
  font-size: 24pt
}
h2 { 
  font-size: 20pt
}
h3 { 
  font-size: 18pt
}
h4, h5, h6 { 
  font-size: 14pt; 
  font-weight: bold; 
  text-transform: uppercase
}



Печать и макет

Лучше всего избежать комплекс макетов или макеты из нескольких колонок при создании печатного стиля, т.к. ширина бумаги, на которой печатается страница, возможно, не сможет эффективно разместить несколько столбцов. Для борьбы с этим мы можем использовать следующий код CSS в нашем стиле печати:
.header-top,
.middle-container
{ 
  display: block; 
  float: none
}

Существуют также области, которые мы можем скрыть полностью, такие как навигация, поиск, корзина и нижний колонтитул.
.mini-search,
.header-nav,
.footer,
.quick-access,
.mini-product-tags,
.col-right,
.add-to-box,
.breadcrumbs,
.add-or,
.add-to-cart-box { 
  display: none
}

Этот CSS код также скрывает окно популярного тега, ссылки учетной записи, breadcrumbs и содержимое в правой колонке, в том числе окно сравнения товаров.


Breadcrumbs

Иногда бывает полезно оставить breadcrumbs видимыми, т.к. это может дать посетителям магазина указание на то, как они нашли страницу в вашем магазине.

Это дает нам таблицу стилей, что подходит для печати для нашей Magento темы.


Резюме

Ваш стиль печати Magento темы в настоящее время готов к использованию. В этой главе мы рассмотрели:
• Принципы построения хороших стилей печати для магазина электронной торговли
• Создание печатных таблиц стилей
• Макетные файлы, и то, как они относятся к печатным стилям в Magento
Наконец, мы рассмотрим на развертывание (инсталляцию) вашей Magento темы, и упаковки ее для сообщества Magento для пользования.

Поделиться темой: