Правильный 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

Incoming search terms:

  • embargo Ua/cart/?view=noframe

Comments (35)

  1. Mikke

    Артём, вот это респекп! сколька я парился с этим гребаным крестиком))))

    Reply
  2. Андрей

    Спасибо, были кое какие минусы. Теперь я их убрал.

    Reply
  3. tuzhilkin

    Напиши этот фикс в баг-репорт в поддержку – пусть изначально поправят!

    Reply
  4. sprites_ua

    А почему нельзя сразу вставить доктайп без всяких IF

    Я так сделал, и все отлично отображается, без косяков:

    Reply
    1. Артем (Post author)

      в записи написано почему используются условия. читайте внимательно

      Reply
      1. sprites_ua

        да, Вы правы, извините не внимательно читал.
        И в правду, в фоксе и гугл хроме крестик уплывает вверх влево.
        А IE, Opera и Safari нормально.
        Спасибо за статью, еще раз извините за невнимательность.

        Reply
        1. Артем (Post author)

          главное, что разобрались

          Reply
  5. Валерий

    Ну мне пришлось исправлять по другому:

    Исправление вносится на уровне 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

    Reply
    1. Артем (Post author)

      спасибо за сообщение

      если есть желание, пришлите пост в формате Ms Word со своими контактами, я размещу как отдельный пост в это блоге

      Reply
  6. Петр

    Вот мой код
    {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?

    Reply
  7. Петр

    Корректировка
    Вот мой код в 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 исчез в варианте артема?

    Reply
  8. Виктор

    Указан не полный код или на сайте ограничение стоит какое-то?

    Reply
  9. Артем (Post author)

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

    Reply
  10. Артем (Post author)

    Обновил запись

    Обращаю ваше внимание на еще одно решение, которое рассказано в этом комментарии http://easyweb.org.ua/shop-script/doctype-shop_script/#comment-653

    Reply
  11. Дима

    не могу понять…
    У меня нет таких строк в файле.
    Вот листинг моего файла 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}

    Reply
  12. Николай

    Ошибка наверное в коде, указано
    <!--[if lt IE 10 ]>

    а надо наверное
    <!--[if lt IE 10 ]-->

    ?

    Reply
    1. Артем (Post author)

      1. в статье указано правильно

      2. не нужно дублировать комментарии. нужно просто заменить символы на их html код (вместо “<" писать "& l t ;")

      Reply
  13. Роман

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

    Reply
    1. Валерий

      Правильно, почитай мой пост внимательно от 1 декабря 2010 в 23:03, там описывается исправления в файлах, именно для того, чтобы корзина не “залипала” к верху экрана. Также исправляется крестик виджета корзины.

      Reply
  14. Сергей

    Можно просто без всяких условий поставить доктайп . Работает везде!

    Reply
  15. Ирина

    НЕ знаю, по этой ли теме. Внесла изменения, как в статье. В IE8 проблема с корзиной. Всплывает окно без товаров, просто белое поле. Хотя товар добавляется. Подскажите, пожалуйста, в чем проблема!

    Reply
    1. Артем (Post author)

      проблема в В IE8
      по написанному подробнее я ответить не могу

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

      Reply
      1. Ирина

        Заменила во frame.html на этот код {if $PAGE_VIEW eq 'noframe' && ($CurrentDivision.ukey eq 'cart' || $CurrentDivision.ukey eq 'checkout')}

        {else}

        {/if}

        Сайт podguzz.ru

        Reply
      2. Ирина

        Почему часть кода не вставляется. В общем скопировала тот код, что в вашей статье

        Reply
        1. Артем (Post author)

          нужно смотреть на файлы. и на сайт под IE 8
          у меня, к сожалению, нет ни первого, ни второго

          Reply
  16. stooper

    автор, ты капитальный красава!!! я тебе говорю =)
    реально спасибо, очень помог… я 2е недели не мог разобраться из-за чего новый шаблон html5 не работает нормально в IE9, хотя Опера всё показывает как нужно: уже все стили перекопал, джаваскрипты, перелопатил весь код, несколько раз всё менял, уже думал что уйду в монастырь в послушники… и тут эта статья, которая фиксит причину всех моих бед и страданий! теперь всё, жизнь с этого момента налаживается! время выйти из запоя и начать жить! аминь

    Reply
  17. Анастасия

    Товарищи, а к какой версии Shop Script этот doctype? Вот у меня SS Free. И какого файла /published/SC/html/scripts/templates/frontend/frame.html – нет.
    Пытающсь вставлять doctype в файл Index.tpl.php в самом верху перед . Шаблон, как Вы понимаете, Smarty. По всему сайту меняется шрифт – текст становится нечитаемым.
    При вставке куска:

    {else}

    {/if}

    выдает ошибку по строке

    Что я неправильно делаю?

    PS Заморочка с DOCTYPE связана с некорректным отображением онлайн-консульнатнта в IE.

    Reply
    1. Артем (Post author)

      это решение для версии webasyst

      Reply
      1. Анастасия

        Shop Script Free – это тоже разработка webasyst.

        Reply
        1. Артем (Post author)

          я разве сказал, что это решение для разработки компании Webasyst?!

          я сказал, что это будет работать только для версии webasyst, а у вас версия free

          почитайте
          http://www.webasyst.com/ru/blog/history-of-shop-script/

          Reply
          1. Анастасия

            Так я уже поняла, что это не для “моей” версии. А что можно сделать с doctype для SS Free?

          2. Артем (Post author)

            я не в курсе

  18. Анастасия

    Все разобралась. Нужно было просто в CSS стилях – шрифты указать не в %, а в Px.
    Теперь и сайт отображается кооректно, и консультант. Даже в IE.

    Reply
  19. Рустам

    Здравствуйте!
    Подскажите, пожалуйста, может ли изменение доктайпа по Вашему образцу повлиять на то, открывается ли магазин на планшете (ос АНДРОИД)? Заранее спасибо за ответ!

    Reply
    1. Артем (Post author)

      думаю, что может. но я не уверен

      Reply

Leave a Comment

Your email address will not be published. Required fields are marked *