Правильный DOCTYPE для Shop-Script
Хочу поделиться хаком, который использую при верстки новых шаблонов.
Для чего он нужен:
По умолчанию в Shop-Script DOCTYPE прописывается на страницах с параметром ?view=noframe и то только в корзине и при оформлении заказа. Из-за этого ваш новый красивый шаблон в IE будет выглядеть не так красиво.
Если вставить DOCTYPE без каких-либо условий, то может нарушиться верстка некоторых компонентов для остальных браузеров.
Меня, например, больше всего раздражал крестик корзины, который при ее активации отображался не в правом верхнем углу корзины, а в левом верхнем углу страницы. И закрыть корзину не всегда получалось с первого раза.
Чтобы с новой версткой не было подобных проблем, нужно:
в файле /published/SC/html/scripts/templates/frontend/frame.html
заменить
{if $PAGE_VIEW eq 'noframe' && ($CurrentDivision.ukey eq 'cart' || $CurrentDivision.ukey eq 'checkout')}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
{/if}<html dir="{if $lang_direction}rtl{else}ltr{/if}">
<head>
на
{if $PAGE_VIEW eq 'noframe' && ($CurrentDivision.ukey eq 'cart' || $CurrentDivision.ukey eq 'checkout')}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
{else}
<!--[if lt IE 10 ]>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<![endif]-->
{/if}
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="{if $lang_direction}rtl{else}ltr{/if}" >
<head>
То есть, если вы используете Internet Explorer версии ниже 10, то будет добавлен DOCTYPE
Похожие записи:
20 Коммент.
Оставить комментарий
Артём, вот это респекп! сколька я парился с этим гребаным крестиком))))
Спасибо, были кое какие минусы. Теперь я их убрал.
Напиши этот фикс в баг-репорт в поддержку — пусть изначально поправят!
А почему нельзя сразу вставить доктайп без всяких IF
Я так сделал, и все отлично отображается, без косяков:
в записи написано почему используются условия. читайте внимательно
да, Вы правы, извините не внимательно читал.
И в правду, в фоксе и гугл хроме крестик уплывает вверх влево.
А IE, Opera и Safari нормально.
Спасибо за статью, еще раз извините за невнимательность.
главное, что разобрались
Ну мне пришлось исправлять по другому:
Исправление вносится на уровне JavaScript в файле published/SC/html/scripts/js/widget_checkout.js на примерно 240 строчке.
заменить
var left = parentObject.offsetLeft+parentObject.offsetWidth-22; var top = parentObject.offsetTop-25;
setStyle(objCloseButton, 'position:absolute; top:'+top+'; left:'+left+'; cursor:pointer; cursor:hand');
на
var left = this.objFrame.offsetLeft+this.objFrame.offsetWidth-22;
var top = this.objFrame.offsetTop-25;
setStyle(objCloseButton, 'position:absolute; top:'+top+'px; left:'+left+'px; cursor:hand;'); - исправляет положение крестика закрытия корзины
Далее:
if(!/MSIE/.test(navigator.userAgent)){setStyle(objBase, 'top:0; left:0; position: fixed');}
меняем на
if(!/MSIE/.test(navigator.userAgent)||/MSIE 8/.test(navigator.userAgent)){setStyle(objBase, 'top:0; left:0; position: fixed');}
- добавилось условие ||/MSIE 8/.test(navigator.userAgent)- это исправляет положение корзины
Да в добавок всплывает проблема с отображением галереи, с виджетом увеличение картинки и стандартом XHTML 1.0 Transitional в IE 8, в Opera, Mozilla все нормально. Т.е. если ставишь в начале странице:
любого шаблона, то картинка увеличивается нормально, но при закрытии нужно сделать два клика вместо одного — как положено.
Задействован скрипт: /published/SC/html/scripts/3rdparty/highslide/highslide.js
Т.е. получается, что при первом нажатии даже на крестик или стрелки функционал не работает корректно как под Opera, Mozilla.
Решение проблемы:
Используются устаревшие скрипты виджета галереи (highslide)
Заменить файлы в /published/SC/html/scripts/3rdparty/highslide/
highslide.packed.js
highslide.js
На новые с сайта разработчика highslide.com
спасибо за сообщение
если есть желание, пришлите пост в формате Ms Word со своими контактами, я размещу как отдельный пост в это блоге
Вот мой код
{if $PAGE_VIEW eq ‘noframe’ && ($CurrentDivision.ukey eq ‘cart’ || $CurrentDivision.ukey eq ‘checkout’)}
{/if}
Написано Артемом:
{if $PAGE_VIEW eq ‘noframe’ && ($CurrentDivision.ukey eq ‘cart’ || $CurrentDivision.ukey eq ‘checkout’)}
{/if} заменить на ….
У меня не работает или нужно весь код :{if $PAGE_VIEW eq ‘noframe’ && ($CurrentDivision.ukey eq ‘cart’ || $CurrentDivision.ukey eq ‘checkout’)}
{/if}
заменить на условие:
{if $PAGE_VIEW eq ‘noframe’ && ($CurrentDivision.ukey eq ‘cart’ || $CurrentDivision.ukey eq ‘checkout’)}
{else}
{/if}
Тогда как быть с doctype?
Корректировка
Вот мой код в frame.html
{if $PAGE_VIEW eq 'noframe' && ($CurrentDivision.ukey eq 'cart' || $CurrentDivision.ukey eq 'checkout')}{/if}
Артем предлагает заменить участок
if $PAGE_VIEW eq 'noframe' && ($CurrentDivision.ukey eq 'cart' || $CurrentDivision.ukey eq 'checkout')}{/if}
А куда сам DOCTYPE исчез в варианте артема?
Указан не полный код или на сайте ограничение стоит какое-то?
при сохранении пропала часть html кода
вечером обновлю запись. сейчас под рукой нет, изменить не могу
Обновил запись
Обращаю ваше внимание на еще одно решение, которое рассказано в этом комментарии http://easyweb.org.ua/shop-script/doctype-shop_script/#comment-653
не могу понять…
У меня нет таких строк в файле.
Вот листинг моего файла public_html/published/SC/html/scripts/templates/frontend/frame.html
{if $rss_link} {/if}
{*
{if $smarty.const.CONF_WAROOT_URL} var WAROOT_URL = ‘{$smarty.const.CONF_WAROOT_URL}’;{/if}*}
{if $smarty.const.CONF_WAROOT_URL} var WAROOT_URL = ‘{$smarty.const.BASE_WA_URL}’;//ok{/if}
{if $smarty.const.CONF_ON_WEBASYST} var CONF_ON_WEBASYST = ‘{$smarty.const.CONF_ON_WEBASYST}’;{/if}
{include file=»head.html»}
{if $overridestyles} {/if}
{if !$page_not_found404}
{/if}
{if $main_body_tpl}{include file=$main_body_tpl}{else}
{if $page_not_found404}{include file=»404.html»}{else}{include file=»index.html»}{/if}
{/if}
{if !$smarty.get.productwidget && !$productwidget &&!$printable_version && $show_powered_by }
{if $show_powered_by_link}
{lbl_powered_by}
{else}
{lbl_powered_by_text}
{/if}
{/if}
{if !$page_not_found404 &&!$printable_version}
{$GOOGLE_ANALYTICS_CODE}
{/if}
Ошибка наверное в коде, указано
<!--[if lt IE 10 ]>а надо наверное
<!--[if lt IE 10 ]-->?
1. в статье указано правильно
2. не нужно дублировать комментарии. нужно просто заменить символы на их html код (вместо «<» писать «& l t ;»)
Внёс изменения, но теперь окно корзины в IE8 появляется не по середине экрана, а вверху сайта, т.е. если прокрутить сайт вниз, то окно окажется за пределами видимой области, то же самое касается и затемнения, оно затемняет верхнюю часть сайта, а не то, что сейчас видит пользователь.
Правильно, почитай мой пост внимательно от 1 декабря 2010 в 23:03, там описывается исправления в файлах, именно для того, чтобы корзина не «залипала» к верху экрана. Также исправляется крестик виджета корзины.
Можно просто без всяких условий поставить доктайп . Работает везде!