вторник, 10 апреля 2007 г.

OSC Для Дизайнеров
Переводчик: yura, Редактор: Fredi

Работа с OSC может быть настоящей пыткой, до тех пор пока вы не разберетесь в чем тут дело. Однако данный труд не является руководством по PHP, и мы здесь будем рассматривать только те изменения в коде, которые внесут ясность в дизайн/расположение и в то, где(и как) вносить изменения/удаления.

Работая с OSC, я пришел к выводу, что изучение PHP все же необходимо. Не просто для того что бы работать с OSC, но для того чтобы вообще создавать WEB сайты. Теперь когда многие браузеры поддерживают CSS, комбинация PHP, CSS/HTML и MySQL dB как никогда сильна. Правда другая сторона медали - это лишнее время и усилия затраченные чтобы эта связка заработала, однако , я считаю, игра стоит свеч.

Изменяя OSC

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

Вы можете кардинально изменять местоположение и дизайн отдельных элементов и все еще сохранять целостность проекта без каких либо серьезных изменений или модификаций РНР кода. Продвигайтесь медленно, постоянно делая резервные копии.

КАК ЖЕ ЭТО ВСЕ РАБОТАЕТ? [С точки зрения дизайнеров]

Страница default.php, расположенная в корне вашего каталога, выполняет начальное отображение сайта. PHP напоминает использование SSI, где все страницы начинают выводиться от главной, которая и вызывает все необходимые блоки. В этом случае default.php имеет статус "страницы вывода" насыщенной взаимозависимым кодом, делающим запрос в другие файлы, которые в свою очередь вызывают следующие файлы, а те, в свою очередь, генерируют определенные элементы на какой-то странице.

Файл default.php ответственен за вызов следующих файлов:

    Header.php Верхний заголовок ВСЕХ страниц.
    Footer.php Нижний заголовок ВСЕХ страниц.
    column_left.php Вызывает файлы для левой колонки [на всех страницах].
    column_right.php Вызывает файлы для правой колонки [на всех страницах].
а так же за вывод содержания [это наиболее сложный код в файле default.php]:
    Содержание главной страницы каталога.
    Содержание страницы с категориями.
    Содержание страницы с подкатегориями.

ДЕЛАЕМ ИЗМЕНЕНИЯ.

Прежде всего вам нужно определится с концепцией того что вы собираетесь сделать. Это может быть достигнуто при первой инсталяции программы. Вызовете начальную страницу каталога (default.php), а затем сохраните ее как htm страницу в вашем компьютере.

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

То есть вы просто изменяете здесь какие-то элементы. Верхняя и нижняя части вашей страницы являются изменяемыми элементами как и содержимое различных колонок и окон. Разрабатывайте ваши элементы таким образом, чтобы они выглядели как автономные части сайта. Я имею ввиду следующее: когда вы сделали какой-то элемент, например верхний раздел (header), убедитесь что он выводится без проблем с помощью файла header.php и все остальное так же выводится нормально.

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

АДМИНИСТРИРОВАНИЕ ГРАФИКИ

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

ОСНОВНАЯ ГРАФИКА и ИЗМЕНЕНИЕ ЦВЕТОВ

Вы можете кардинально поменять общий вид вашего магазина, просто изменив все изображения, кнопки, цвета заголовков и логотипы. Это может быть сделано весьма быстро.

Для этого вам нужно только определить названия изображений и пиктограмм используемых на определенной странице. Есть несколоко возможностей сделать это. К примеру воспользуйтесь для этого любой программой просмотра графических изображений, которая покажет все картинки в каталоге или используйте какой-то другой инструмент отображения графики подобный PhotoShop, Lview или ACDSee. Вы сможете там увидеть изображения, выяснить их названия, сделать новое изображение и просто загрузить его вместо старого изображения. Проделайте это также со всеми логотипами и кнопками. Не забудьте за новыми картинками сохранить старые имена.

Чтобы быстро определить имя картинки, так как часто они имеют довольно длинные названия, просто щелкните правой кнопкой мыши на этой картинке в браузере и посмотрите ее свойства. Вы сразу увидите путь, т.е. где эта картинка находится (в какой папке), ее имя и размер. Иногда этот способ помогает найти отсутствующую картинку на Вашем сайте.

К СВЕДЕНИЮ: Если вы создаете какие-то изображения, которые не соответствуют размеру заменяемых, зайдите в программу админа и внесите соответствующие изменения в разделе "Изображения" (Images) под заголовком Конфигурация (Configuration).

Вы можете установить разные значения заключив их в " ", если вы меняете изображения. Или установите одно значение, если ваши изображения стандартного размера.

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

РАСПОЛОЖЕНИЕ ФАЙЛОВ ИЗОБРАЖЕНИЙ.

Кнопки для каталога находятся в:
catalog/includes/languages/english/images/buttons/

Кнопки для программы админа находятся в:
admin/includes/languages/english/images/buttons/

Картинки категорий и подкатегорий каталога размещены в:
catalog/images/

Картинки категорий и подкатегорий программы админа размещены в:
admin/images/

Углы боксов и прокладки находятся в:
catalog/images/inbox/

OSC использует CSS. Поэтому CSS желательно изучить. Хороший источник для изучения CSS - набор статей, размещенный здесь: Стили и CSS.

Изменять некоторые атрибуты страницы, цвета и шрифты, Вы можете в файле stylesheet.css, находящемся в:
catalog/stylesheet.css

Чтобы сделать модификации, если Вы не знаете CSS, смотрите на код вывода в php файлах и ищите классы. Пример:
<table border="0" width="450" cellspacing="0" cellpadding="1" class="infoBox">

В stylesheet.css файле ищите TABLE.INFOBOX и экспериментируйте. В этом случае Вы можете изменить цвет фона блока.

}

TABLE.infoBox {
background: #b6b7cb;
}


Чтобы сделать изменения к заголовкам и другому текстовым выводам идите в: Admin/Tools/Define Languages

Здесь Вы увидите список следующих файлов:

english.phpaccount.php
account_edit.phpaccount_edit_process.php
account_history.phpaccount_history_info.php
address_book.phpaddress_book_process.php
advanced_search.phpadvanced_search_result.php
ccval.phpcheckout_address.php
checkout_confirmation.phpcheckout_payment.php
checkout_process.phpcheckout_success.php
conditions.phpcontact_us.php
create_account.phpcreate_account_process.php
create_account_success.phpdefault.php
download.phpinfo_shopping_cart.php
login.phppassword_forgotten.php
privacy.phpproduct_info.php
product_reviews.phpproduct_reviews_info.php
product_reviews_write.phpproducts_new.php
reviews.phpshipping.php
shopping_cart.phpspecials.php
tell_a_friend.php

Кликните по одному из файлов, и этот файл откроется в окне редактирования. Вы только должны будете изменить здесь текстовой вывод. Текст, который Вы захотите изменить, будет в строке подобной этой:
define('HEADER_TITLE_CREATE_ACCOUNT', 'Create an Account');

"Create an Account" - то, что будет появляться в navbar в заголовке. Изменяя этот текст, Вы изменяете то, что будет выведено на экран.


Как сделать изменения в самом размещении страницы.

Чтобы удалить что-то из столбца, вы должны отредактировать column.php файлы. Их два: левый и правый. Удаление блока проще чем добавление нового и требует фактического знания PHP. Чтобы удалять или изменять порядок расположения блока просто берете соответстующий код в column.php файле и двигаете или удаляете его. Сделайте резервную копию файла столбца перед редактированием.

ПРО ФАЙЛ DEFAULT.PHP В КАТАЛОГЕ

Когда default.php выводится броузером, он вызывает ряд файлов, которые и создают обычную WEB-страницу. Интересно то, что default.php является также ответственным за вывод других страниц. Когда Вы кликаете по Категории, страница, которая появится, создана default.php файлом. Это касается как страниц с Категориями, так и для страниц с подкатегориями. В сущности код для содержания четырех отдельных и уникальных WEB-страниц заложен в default.php файле.

Default.php вызывает header.php файл для верхней части каждой страницы и footer.php для низа каждой страницы. Эти файлы наряду с column.php файлами расположены в:

catalog/includes/

Попытка редактировать эти файлы может показаться слишком сложной, однако, хорошенько присмотревшись, вы увидите знакомый HTML. Попытайтесь определить элементы, которые являются необходимыми для вашего шопа и те элементы, которые не несут особой программной нагрузки. Вот с ними и попытайтесь проделать изменения. Например, если Вы не имеете никакого намерения использовать баннерную систему, тогда попробуйте удалить ее вывод из файла footer.php или изменить ее, чтобы посмотреть на то, что получится.

Что вызовет наибольшие трудности при редактировании default.php.

Чтобы сделать модификации к главной странице каталога, прежде всего, ищут эти комментарии в коде файла: default.php

<!--------- NO SUB CAT HEADER -------- edit here -------------->
Это - раздел заголовка для страниц категорий без подкатегрий.

<!--------- CAT WITH SUB CATS -------- edit here ----------------->
Это - раздел для категорий с подкатегориями. Вы добавляете определенный материал для страницы сюда.

<!---- CAT HEADERS + CAT AND SUB CAT CONTENT ---- edit here ------->
Здесь Вы делаете модификацию содержимого, которое будут появляться на страницах категорий также как и на страницах подкатегорий. Вы также можете сделаете здесь модификацию для колонтитуов (header) страницы категорий с подкатегориями.

<!------------- MAIN CAT CONTENT -------- edit here ------------->
Модификации сделанные здесь будут появляться на главной странице каталога.

Заметка: Касается только колонтитулов (header) категорий и подкатегорий. Все вышеперечисленное верно или наоборот [эксперементируйте].

PAGE [3] ПРИМЕРЫ ИЗМЕНЕНИЯ КОДА ДЛЯ ДОСТИЖЕНИЯ БЫСТРОГО РЕЗУЛЬТАТА -------------------------------------- Этот txt file без форматирования. -------------------------------------- Последнее обновление: 03|17|02 Удалите это чтобы избавиться от заголовка в хeдере: <td class="pageHeading"><?php echo HEADING_TITLE; ?></td> ------------------------------------------------------------------------------------- Удалите это чтобы избавится от черных линий: <td><?php echo tep_draw_separator('pixel_trans.gif', '100%', '10'); ?></td> ------------------------------------------------------------------------------------- password_forgotten.php Изменение ширины таблицы и расположение по центру: align="center" = XXX <td colspan="2"><br><table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td valign="top" XXX><a href="<?php echo tep_href_link(FILENAME_LOGIN, '', 'SSL') . '">' . tep_image_button('button_back.gif', IMAGE_BUTTON_BACK) . '</a>'; ------------------------------------------------------------------------------------- Чтобы избавится от "Дата добавления" (Date Added внизу страницы товаров: удалите это: <tr> <td align="center" class="smallText"><br><?php echo sprintf(TEXT_DATE_ADDED, tep_date_long($product_info_values['products_date_added'])); ?></td> </tr> ------------------------------------------------------------------------------------- Чтобы избавиться от текста под миниатюрами при выводе подкатегорий проделайте следующее. Найдите этот фрагмент в default.php Старый код: $rows = 0; while ($categories = tep_db_fetch_array($categories_query)) { $rows++; $cPath_new = tep_get_path($categories['categories_id']); echo ' <td align="center" class="smallText" width="33%" valign="top"></a><a href="../ACG2oscd/%27%20.%20tep_href_link(FILENAME_DEFAULT,%20$cPath_new,%20%27NONSSL%27)%20.%20%27">' . tep_image(DIR_WS_IMAGES . $categories['categories_image'], $categories['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) . '<br>' . $categories['categories_name'] . '</a></td>' . "n"; if ((($rows / MAX_DISPLAY_CATEGORIES_PER_ROW) == floor($rows / MAX_DISPLAY_CATEGORIES_PER_ROW)) && ($rows != tep_db_num_rows($categories_query))) { echo ' </tr>' . "n"; echo ' <tr>' . "n"; } } ?> </tr> </table></td> ---------------------- Зменяем на новый код: $rows = 0; while ($categories = tep_db_fetch_array($categories_query)) { $rows++; $cPath_new = tep_get_path($categories['categories_id']); echo ' <td align="center" class="smallText" width="33%" valign="top"><a href="../ACG2oscd/%27%20.%20tep_href_link(FILENAME_DEFAULT,%20$cPath_new,%20%27NONSSL%27)%20.%20%27">' . tep_image(DIR_WS_IMAGES . $categories['categories_image'], $categories, SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) . '</a></td>' . "n"; if ((($rows / MAX_DISPLAY_CATEGORIES_PER_ROW) == floor($rows / MAX_DISPLAY_CATEGORIES_PER_ROW)) && ($rows != tep_db_num_rows($categories_query))) { echo ' ' . "n"; echo ' <tr>' . "n"; } } ?> </tr> ------------------------------------------------------------------------------------- Author: Strider Как в версии 2.1 заапгрейдить навигационный бокс под версию 2.2 В header.php вам нужно заменить <?php if (tep_session_is_registered('customer_id')) { ?><a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_LOGOFF; ?></a> | <?php } ?> <a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a> | <a href="<?php echo tep_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a> | <a href="<?php echo tep_href_link(FILENAME_CHECKOUT_PAYMENT, '', 'SSL'); ?>" class="headerNavigation"><?php echo HEADER_TITLE_CHECKOUT; ?></a> ********** на следующее: <?php if (tep_session_is_registered('customer_id')) { echo '<a href="' . tep_href_link(FILENAME_LOGOFF, '', 'NONSSL') . '" class="headerNavigation">' . HEADER_TITLE_LOGOFF . '</a> | <a href="' . tep_href_link(FILENAME_ACCOUNT, '', 'SSL') . '" class="headerNavigation">' . HEADER_TITLE_MY_ACCOUNT . '</a> | <a href="' . tep_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL') . '" class="headerNavigation">' . HEADER_TITLE_CART_CONTENTS . '</a> | <a href="' . tep_href_link(FILENAME_CHECKOUT_PAYMENT, '', 'SSL') . '" class="headerNavigation">' . HEADER_TITLE_CHECKOUT . '</a> | <a href="' . tep_href_link(FILENAME_CONTACT_US, '', 'NONSSL') . '" class="headerNavigation">' . HEADER_TITLE_CONTACT_US . '</a> '; } else { echo '<a href="' . tep_href_link(FILENAME_LOGIN, '', 'SSL') . '" class="headerNavigation">' . HEADER_TITLE_LOGIN . '</a> | <a href="' . tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL') . '" class="headerNavigation">' . HEADER_TITLE_CREATE_ACCOUNT . '</a> | <a href="' . tep_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL') . '" class="headerNavigation">' . HEADER_TITLE_CART_CONTENTS . '</a> | <a href="' . tep_href_link(FILENAME_CHECKOUT_PAYMENT, '', 'SSL') . '" class="headerNavigation">' . HEADER_TITLE_CHECKOUT . '</a> | <a href="' . tep_href_link(FILENAME_CONTACT_US, '', 'NONSSL') . '" class="headerNavigation">' . HEADER_TITLE_CONTACT_US . '</a> '; } ?> ------------------------------------------------------------------------------------- This Modification was created by Jatech Solutions Inc. Эти манипуляции позволят вам иметь разный цвет фона в таких боксах как: категории, информация, лидеры продаж, итд.). Вам потребуется внести изменения только в три файла. 1.) Откройте includes/classes/boxes.php Найдите function infoBoxContents Замените: function infoBoxContents($contents) { $this->table_cellpadding = '3'; $this->table_parameters 'class="infoBoxContents"'; $info_box_contents = array(); На: function infoBoxContents($contents) { global $css_class; $this->table_cellpadding = '3'; $this->table_parameters 'class="'.$css_class.'"'; $info_box_contents = array(); 2.) Теперь откройте бокс, в котором вы собираетесь изменить цвет фона. Например infotmation.php (расположен в /includes/boxes/information/php) Замените: <!-- information //--> <tr> <td> <?php $info_box_contents = array(); на: <!-- information //--> <tr> <td> <?php global $css_class; $css_class = "infoBoxContents5"; $info_box_contents_info = array(); 3.) infoBoxContents5 должен быть добавлен в stylesheet.css и может выглядеть примерно так: TABLE.infoBoxContents5 { background-color: #FFFFF1; } ------------------------------------------------------------------------------------- Изменяем Box Corners images/infobox/arrow_right.gif images/infobox/corner_left.gif images/infobox/corner_right.gif images/infobox/corner_right_left.gif Самый простой способ ибавится от box corners(ov)-это сделать их прозрачными. Если же вы изменили цвет фона, то вам нужно просто поменять их цвет на соответствующий фону. Чтобы удалить титлы в бокс-файле закоментируйте строку: //new infoBoxHeading($info_box_contents, false, false); Все изменения титлов производятся в includes/languages/english(russian) или через Админ: admin/tools/define languages ------------------------------------------------------------------------------------- By weirdlab Я изменил все файлы в корневике так, чтобы изменять дизайн было проще. Каждый файл имеет <?php require(DIR_WS_INCLUDES . 'body_start.php'); ?> и require(DIR_WS_INCLUDES . 'body_bottom.php'); В начале body_start(а), Я изменил body тег. В основном table (может иметь фиксированную ширину или нет,И т.д) левая колонка и body_bottom контролируются по правой колонке. Вот список файлов в которых я проделал эти изменения: account.php account_edit.php account_edit_process.php account_history.php account_history_info.php address_book.php address_book_process.php advanced_search.php advanced_search_result.php checkout_address.php checkout_confirmation.php checkout_payment.php checkout_success.php conditions.php contact_us.php create_account.php create_account_process.php create_account_success.php default.php login.php oldMOD-default.php password_forgotten.php privacy.php products_new.php product_info.php product_reviews.php product_reviews_info.php product_reviews_write.php reviews.php shipping.php shopping_cart.php specials.php stylesheet.css tell_a_friend.php Во что я проделал в body_start(е): <center> <!-- header //--> <?php require(DIR_WS_INCLUDES . 'header.php'); ?> <!-- header_eof //--> <!-- body //--> <table border="0" width="100%" cellspacing="0" cellpadding="0"> <tr> <td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="0"> <!-- left_navigation //--> <?php require(DIR_WS_INCLUDES . 'column_left.php'); ?> <!-- left_navigation_eof //--> </table></td> <!-- body_text //--> А вот что в body_bottom(е): <!-- body_text_eof //--> <td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="0"> <!-- right_navigation //--> <?php require(DIR_WS_INCLUDES . 'column_right.php'); ?> <!-- right_navigation_eof //--> </table></td> </tr> </table> <!-- body_eof //--> <!-- footer //--> <?php require(DIR_WS_INCLUDES . 'footer.php'); ?> <!-- footer_eof //--> <br> </center> </body> </html>

Комментариев нет: