Возникла задача вывести товары на произвольной странице магазина и иметь возможность добавить их в корзину, при этом обновить компонент корзины без перезагрузки страницы. Предлагались разные решения, лучшее, на мой взгляд, следующее.
Вешаем на кнопку добавления товара JS:
oncl ick="$.post('/catalog/?action=ADD2BASKET&ajax_basket=Y&id=<?=$good["ID"];?>&quantity=1', function(data) {
data = data.split('\'').join('\u0022');
var obj = JSON && JSON.parse(data) || $.parseJSON(data);
if (obj.STATUS == 'OK'){
BX.onCustomEvent('OnBasketChange');
}});">
Собственно, все. Этот код добавляет нужное количество товара quantity с идентификатором id в корзину стандартным механизмом каталога (при этом надо учитывать, что POST (GET)-запрос может происходить и по другому адресу, отличному от /catalog/ (см. настройки инфоблока каталога). По завершении добавления нужно проверить результат на успех и вызвать событие OnBasketChange, чтобы обработчик этого события, который висит на корзине, в итоге "отрисовал" новые значения.
Пояснение по UPD 2:
data = data.split('\'').join('\u0022');
заменяем одинарную кавычку на двойную, чтобы парсер JSON мог корректно распарсить в переменную:
var obj = JSON && JSON.parse(data) || $.parseJSON(data);
собственно такой вызов нужен для того, чтобы при наличии в браузере возможности вызвать "нативный"
Разобрался с заголовком, надо было нажать сюда [img]data:image/png;base64,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[/img] А вообще я бы по умолчанию его открытым оставил.
Всем привет. Добавил данный код - работает добавление в корзину, НО. Компонент корзины basket.basket.line - кол-во не обновляет У нас настроен разный вид ссылки, когда в корзине и когда нет, так вот это тоже надо как-то изменить. Красиво - когда нажимаешь "К корзину", и корзина в шапке пересчитывается, а кнопка "В корзину" меняется на "В корзине", и становится ссылкой на саму корзину. Можете помочь допилить?
Всем привет! Собрал на просторах интернета (по большей части из хабра) требования к верстке писем. Хорошо бы, чтобы поставляемые шаблоны от Битрикса соответствали этим требованиям. Нужно обсудить и прийти к точным требованиям на сегодня.
Общие требования
Для верстки использовать исключительно табличную верстку.
Использовать только inline-стили.
Писать CSS в тегах head и body запрещено, так как некоторые клиенты будут удалять все, что находится в этих тегах. Такие конструкции не будут работать в head и body:
Если вы верстаете для всех устройств, включая мобильные телефоны и планшеты, то ширина письма не должна превышать 600px. Если использовать ширину больше этого значения, то письмо по ширине не поместится в почтовый клиент.
Если в мобильном клиенте показывается изначально «адаптированный» вариант письма, то для таблицы, которая контролирует ширину письма, добавить st yle=«min-width: ШИРИНА_ПИСЬМА;».
Также Outlook игнорирует все инлайновые стили, которые снабжены !important;.
Отображается ли в поле «От кого» правильная информация (в виде имени, а не просто почтового адреса)?
Корректно ли заполняется строка темы письма?
Корректна ли и визуально очевидна контактная информация?
Есть ли в шапке/подвале письма пояснение о том, что «вы получили это письмо, потому что…» и ссылки для того, чтобы отписаться от рассылки в его подвале?
Задаем атрибут target со значением _blank для всех ссылок кроме mailto:(для них не критично).
Каждую отдельно взятую ссылку необходимо обернуть в span, указав для него все необходимые стили, и в тоже время продублировать все те же самые стили в атрибут style самой ссылки. Ссылка так же может находиться посреди текста, и для того, чтобы не быть многословным, просто приведу пример того, как нужно оформить ссылку в тексте.
<span style="font-family:Arial; font-size:12px; color:#404040;">Neque porro quisquam est qui</span> <span style="font-family:Arial; font-size:12px; color:#0077c0;"><a style="font-family:Arial; font-size:12px; color:#0077c0;" href="%%url%%">dolorem ipsum quia</a></span> <span style="font-family:Arial; font-size:12px; color:#404040;">dolor sit amet, consectetur, adipisci veli</span>
Обязательно писать некоторые теги определенным образом: <table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0"> border=«0» — толщина рамки в пикселах; cellpadding=«0» — отступ от рамки до содержимого ячейки; cellspacing=«0» — расстояние между ячейками; st yle=«margin:0; padding:0» — обнуляем внутренние и внешние отступы, которые добавляет некоторые почтовые клиенты. <a href="#" style="color: #333333; font: 10px Arial, sans-serif; line-height: 30px; -webkit-text-size-adjust:none; display: block;" target="_blank"></a> <span style="color: #333333; font: 10px Arial, sans-serif; line-height: 30px; -webkit-text-size-adjust:none; display: block;"></span> <img src="#" alt="" border="0" width="100" style="display:block;"/> color: #333333; font: 10px Arial, sans-serif — всегда используем эти свойства для всех ссылок и спанов, иначе почтовые клиенты будут добавлять к этим свойствам свои значения; line-height: 30px — тоже используем для всех ссылок и спанов, в ином случае почтовые клиенты будут ставить свое значение. Также этим свойством мы можем делать отступы сверху и снизу между строчными и блочными элементами; -webkit-text-size-adjust:none — обязательное свойство для всех строчных элементов, используется для фикса проблемы с размером шрифтов на устройствах iPhone iOS 6-7/iPad. По умолчанию на этих устройствах минимальный размер шрифта 13px, это свойство решает данную проблему; display: block — делает строчный элемент блочным, alt="</span><span style="font-size:16px;font-family:'Times New Roman';color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;">" — обязательное свойство, должно всегда использоваться, можно оставлять пустым; border=«0» — толщина рамки в пикселях (px); width=«100» — ширина картинки, если картинка статическая и используется ее реальный размер, то можем еще задать ее высоту height=«100». Если нам нужно сделать размер картинки меньше чем она на самом деле, контролируем ее размер с помощью свойства width=«30» и она будет пропорционально менять и высоту и ширину; display:block; — хак для Outlook, если не ставить display:block то Outlook добавить к картинке отступы. Для оформления ссылок в аутлуке необходимо внутри ссылки добавить дополнительный тег span с заданием цвета. Теги, которые можно использовать в верстке: <table> <tr> <td><a href="#"></a></td> <td><span></span></td> <td><img src="" alt=""></td> </tr> </table> <centr></center> Наложения фона
Свойства background="" bgcolor="" можно применять только для тега <table>. так как gmail не воспринимает эти свойства в других тегах, если заходить на почту с помощью браузера Safari. Не стоит использовать CSS свойства для наложения фона, они будут игнорироваться некоторыми почтовыми клиентами: background: background-image: background-position: background-size: Отступы Отступы можно делать с помощью CSS свойства padding. Это свойство можно использовать для всех тегов, но имейте введу, что если его применять к тегу span, то десктопный Outlook 2007/10/13 + не будет применять отступы. Свойство margin тоже работает но полностью не поддерживается в веб версии почтового сервера Outlook.com. Советую применять padding к ячейке таблицы: <td style="padding: 10px;"></td> Или использовать для отступов пустые ячейки таблицы. Доктайп (DOCTYPE)
Для любого HTML документа необходимо использовать DOCTYPE. Он показывает браузеру, каким образом интерпретировать HTML-разметку. Есть разные версии языка HTML и XHTML, которые имеют разный синтаксис. Для писем наиболее подходящим доктайпом является: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> Работа с текстом
Чтобы сделать акцент в тексте на фразе или слове, мы можем визуально выделить данный участок текста. Для этого мы можем использовать стили font-weight: bold; font-style: italic; или теги: <b></b>
Жирный текст, аналог стиля font-weight: bold; <i></i>
Наклонный текст курсив, аналог font-style: italic; <br />
Перевод строки. Цвет
Все цвета в письмах задаются в виде трех пар шестнадцатеричных цифр (HEX) #dddddd. Сокращения типа #fff делать не нужно, некоторые почтовые клиенты не понимают такой записи. Также не нужно писать шестнадцатеричный код цвета всеми большими буквами. Не все почтовые клиенты это оценят. Например, #D4D4D4 нужно записать в таком виде: #d4d4d4. RGB запись цвета тоже не воспринимается должным образом. Например, такая запись цвета rgb (240,248,250) не будет работать. Картинки Существуют почтовые клиенты, которые по умолчанию не показывают картинки и только после клика на определенную кнопку картинки начинают отображаться. Это вызывает некие проблемы в верстке писем. Если картинки не показываются и не задана ее ширина и высота вместе, то почтовый клиент не знает, какого размера эта картинка и как рендерить свободное место. Таким образом, картинка занимает все свободное пространство. Выглядит это ужасно. Всегда пишите ширину и высоту картинки, чтобы избавится от таких проблем. Если нет такой возможности, указывайте ширину картинки и тогда письмо не будет рваться в стороны. <img src="#" alt="" border="0" width="150" height="150" style="display:block;"/> При этом сначала обязательно должен быть указан атрибут src, а затем только другие атрибуты, т.к. некоторые клиенты не умеют иначе отображать картинки. Хотелось бы заметить, что в том случае, если картинка является ссылкой, то для изображения нужно обнулить border через стили или атрибут border тега img, а для самой ссылки стоит установить text-decoration:none; иначе картинка может оказаться подчеркнутой. Решение проблем
1. Если использовать span или другой строчный тег, то телефонные номера и e-mail адреса Gmail оборачивает в ссылку и присваивает класс с синим цветом:
Для решения этой проблемы нужно электронную почту и телефон изначально оборачивать в ссылку. Также необходимо указать нужные стили для ссылок.
2. Для того, чтобы фон вне письма был на всю ширину и высоту, необходимо главной таблице добавить width=«100%» и для td прописать height=«100%». Пример: <table bgcolor="#000000" border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0" width="100%"> <tr> <td height="100%">
Не нужно задавать таблице height=«100%», возникают проблемы с выравниванием ячеек по вертикали внутри главной таблицы.
3. В веб версии почтового клиента Outlook не желательно использовать строчные элементы, так как по умолчанию почтовый клиент добавляет собственное значение line-height.
display: block;" — решает проблему отображения свойства line-height в почтовом клиенте Outlook. Если его не использовать, то почтовый клиент игнорирует значение line-height и добавляет ему свое значение line-height: 141%;. Шрифты В почтовых рассылках допускается использование только стандартных шрифтовых наборов, которые присутствуют на всех устройствах. Вот список безопасных шрифтов, которые есть на всех устройствах. font-family: Arial, Helvetica, sans-serif; font-family: 'Arial Black', Gadget, sans-serif; font-family: Georgia, serif; font-family: 'MS Sans Serif', Geneva, sans-serif; font-family: 'MS Serif', 'New York', sans-serif; font-family: Tahoma, Geneva, sans-serif; font-family: 'Times New Roman', Times, serif; font-family: 'Trebuchet MS', Helvetica, sans-serif; font-family: Verdana, Geneva, sans-serif;
Таким образом, эти шрифты можно использовать в рассылках без страха и риска. Если вы все же хотите использовать совсем нестандартные шрифты через правило @font-face, то будьте внимательными, это правило работает только в IOS, Google mail и Android 4 (Gmail). Адаптивная верстка
На данный момент существует огромное количество методов верстки адаптивных писем, но мы остановимся на одном из них.
Суть данного метода заключается в следующем: при изменении ширины экрана устройства размер нашего письмо автоматически подстраивается. Внутренние блоки, которые располагаются горизонтально, при нехватке места прыгают друг под друга, таким образом все элементы письма, которым не хватает, будут уходить вниз.
Система подстраивания письма под размер экрана реализована с помощью стилей и тега center, который находится сразу после основной таблицы письма. Получается, что весь контент оборачивается тегом center: <table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0"> <tr> <td> <center style="max-width: 600px; width: 100%;"> контент письма </center> </td> </tr> </table>
Если по горизонтали находится больше одного блока и эти блоки должны стать друг под другом при изменении ширины, то их необходимо оборачивать в тег span со стилями: <span style="display:inline-block; width:260px;"> Контент блока </span>
Общая структура разметки будет выглядеть следующим образом: <table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0" width="100%"> <tr> <td> <center style="max-width: 600px; width: 100%;"> <table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0" width="100%"> <tr> <td> <!-- Блок номер 1 --> <span style="display:inline-block; width:300px;"> Контент блока </span> <!-- Блок номер 1 --> <!-- Блок номер 2 --> <span style="display:inline-block; width:300px;"> Контент блока </span> <!-- Блок номер 2 ’ </td> </tr> </table> </center> </td> </tr> </table>
Таким образом у нас есть общая таблица размером в 600px и внутри два блока по 300px (300px + 300px = 600px). Когда размер главной страницы становится меньше хоть на один пиксель, то блокам не хватает места и блок номер 2 становится под блоком номер 1.
Вся наша структура не будет работать в MS Outlook десктоп, поэтому специально для него мы сделаем проверку и будем вместо тега center и span подставлять обычные таблицы: <table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0" width="100%"> <tr> <td align="center"> <center style="max-width: 600px; width: 100%;"> <!--[if gte mso 9]> <table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0"><tr><td> <![endif]--> <table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0" width="100%"> <tr> <td> <!--[if gte mso 9]> <table border="0" cellpadding="0" cellspacing="0"> <tr><td align="center"> <table border="0" cellpadding="0" cellspacing="0" width="300" align="center"><tr><td> <![endif]--> <!-- Блок номер 1 --> <span style="display:inline-block; width:300px;"> Контент блока </span> <!-- Блок номер 1 --> <!--[if gte mso 9]> </td></tr></table> </td> <td align="center"> <table border="0" cellpadding="0" cellspacing="0" align="center"><tr><td> <![endif]--> <!-- Блок номер 2 --> <span style="display:inline-block; width:300px;"> Контент блока </span> <!-- Блок номер 2 --> <!--[if gte mso 9]> </td></tr></table> </td> </tr></table> <![endif]--> </td> </tr> </table> <!--[if gte mso 9]> </td></tr></table> <![endif]--> </center> </td> </tr> </table>
Можно использовать правило (a)media для адаптивной верстки, но от этого способа надо отказаться из-за малой поддержки почтовых клиентов этого свойства.
Всем привет! Недавно кастомизировал шаблон магазина и столкнулся с проблемой - не выводится название товара в режиме AJAX при переходе из раздела к детальной странице товара и не отображается текущий раздел товара в "хлебных крошках" и названии товара. Т.е. я кликал на товар и получал то, что на картинке:
как видно из скриншота, в хлебных крошках и в названии - совсем не то, что ожидалось (а ожидалось, что в крошках будет название текущего раздела, а в книге - название книги).
Всему виной была плохо продуманная реализация было отсутствие враппера с нужным ID для компонента хлебных крошек (совсем не понятно почему это не было сделано внутри шаблона компонента):
Группы на сайте создаются не только сотрудниками «1С-Битрикс», но и партнерами компании. Поэтому мнения участников групп могут не совпадать с позицией компании «1С-Битрикс».