В системе uCoz для создания интернет-магазина предусмотрен специальный модуль «Интернет-магазин», который Вы можете подключить. Но за него ежемесячно Вам нужно будет платить минимум $5,49. Если Вы всерьез решили заняться бизнесом — то, конечно, это не деньги, но если Вы просто хотите создать небольшой раздел на своем сайте для минимальной онлайн торговли, тогда это может быть совсем не выгодно, с учетом того, что товар изначально могут и не покупать, или же стоимость товара совсем условная.
Такие мысли были и у меня. Я поняла, что мне нужен совсем небольшой интернет магазин, возможно и без всех его функций. Например, «корзина» мне лично в моем интернет-магазине не нужна, так как я сама, будучи пользователем никогда ей не пользуюсь. Так и появился мой собственный небольшой интернет магазин, который я сделала из модуля Каталог файлов.
5 шагов для создания интернет-магазина в системе uCoz
- 1. В модуле Каталог статей создать новый раздел «Магазин» (или любое другое название), а в нем хотя бы одну категорию. (Разделы без категорий не работают). Для этого в Панели Управления сайтом перейти:Каталог статей — Управление категориями — Добавить раздел.
Обязательно запомните ID Вашего созданного раздела. На рисунке синим показано, где смотреть ID раздела (ID раздела на рисунке = 2). Перейти в
Дизайн — Управление дизайном — Каталог статей — Страница материала и комментариев к нему. Очень рекомендую перед первым внесением изменений в шаблон прочитать статью «Редактирование шаблона». Отредактировать шаблон следующим образом:В самом вверху первой сточкой пишите
1<?if($SID$="...")?>
где вместо трех точек ставите ID Вашего раздела «Магазин» (в примере мы помним это 2, то есть $SID$=2);Теперь сразу после этой строчки нужно вставить следующий код, который собственно и является главным кодом магазина:
Основной код шаблона интернет магазина
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8"><title>$ENTRY_TITLE$ - $SITE_NAME$</title><?$META_DESCRIPTION$?><link type="text/css" rel="StyleSheet" href="/_st/my.css" /></head><body><script type="text/javascript" src="/jquery.idTabs.min.js"></script>$ADMIN_BAR$<div class="wrap1"><div class="wrap2"><div class="wrap3"><div class="contanier">$GLOBAL_AHEADER$<table class="main-table"><tr><td class="content-block"><!-- <middle> --><!-- <body> --><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td width="80%"><a href="$HOME_PAGE_LINK$"><!--<s5176>-->Главная<!--</s>--></a> <?if($SECTION_NAME$)?>» <a href="$SECTION_URL$">$SECTION_NAME$</a><?endif?> » <a href="$CAT_URL$">$CAT_NAME$</a></td><td align="right" style="white-space: nowrap;"><?if($ADD_ENTRY_LINK$)?>[ <a href="$ADD_ENTRY_LINK$"><!--<s5202>-->Добавить статью<!--</s>--></a> ]<?endif?></td></tr></table><hr /><div class="eTitle" style="padding-bottom:3px;"><?if($MODER_PANEL$)?><div style="float:right">$MODER_PANEL$</div><?endif?><h1>$ENTRY_TITLE$</h1></div><table border="0" width="100%" cellspacing="0" cellpadding="2" class="eBlock"><tr><td><hr><table width="635"><tr><td><!---BLOK-1---><!----IMAGES----><div style="float:left"><div id="image1" class="imagebox"><ul><li><a href="#tab5" class="selected"><img src="$IMG_URL1$" width="60"></a></li><li><a href="#tab6"><img src="$IMG_URL2$" width="60"></a></li><li><a href="#tab7"><img src="$IMG_URL3$" width="60"></a></li><li><a href="#tab8"><img src="$IMG_URL4$" width="60"></a></li></ul><div id="tab5"><a href="$IMG_URL1$" class="ulightbox" data-fancybox-group="ultbx"><img src="$IMG_URL1$" width="300"></a></div><div id="tab6"><a href="$IMG_URL2$" class="ulightbox" data-fancybox-group="ultbx"><img src="$IMG_URL2$" width="300"></a></div><div id="tab7"><a href="$IMG_URL3$" class="ulightbox" data-fancybox-group="ultbx"><img src="$IMG_URL3$" width="300"></a></div><div id="tab8"><a href="$IMG_URL4$" class="ulightbox" data-fancybox-group="ultbx"><img src="$IMG_URL4$" width="300"></a></div></div><script type="text/javascript">$("#image1 ul").idTabs();</script></div><!---///IMAGES----><!---///BLOK-1---><br><!---BLOK-2---><!----PRICE----><?if($AUTHOR_NAME$)?><center><table style="background-color: #dadbdd; border-color: #000000;" border="3"><tr><td><b><font size="+1">Цена: <font color="red">$AUTHOR_NAME$</font></font></b></td></tr></table></center><?endif?><!---/////PRICE----><br><center><!---BLOK-2---></td></tr><tr><td><!---BLOK-3---><!----idTabs-----><div id="usual1" class="usual"><ul><li><a href="#tab1" class="selected">Описание</a></li><li><a href="#tab2">Отзывы</a></li><li><a href="#tab3">Заказать</a></li></ul><div style="border: 2px solid #000000;" id="tab1">$MESSAGE$</div><div style="border: 2px solid #000000;" id="tab2">`<!---Отзывы-----><?if($COM_IS_ACTIVE$)?><?if($COM_CAN_READ$)?><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td width="60%" height="25"><!--<s5183>-->Всего комментариев<!--</s>-->: <b>$COM_NUM_ENTRIES$</b></td><td align="right" height="25">$COM_PAGE_SELECTOR$</td></tr><tr><td colspan="2">$COM_BODY$</td></tr><tr><td colspan="2" align="center">$COM_PAGE_SELECTOR1$</td></tr><tr><td colspan="2" height="10"></td></tr></table><?endif?><?if($COM_CAN_ADD$)?>$COM_ADD_FORM$<?else?><?if($USER_LOGGED_IN$)?><?else?><div align="center" class="commReg"><!--<s5237>-->Добавлять комментарии могут только зарегистрированные пользователи.<!--</s>-->[ <a href="$REGISTER_LINK$"><!--<s3089>-->Регистрация<!--</s>--></a> | <a href="$LOGIN_LINK$"><!--<s3087>-->Вход<!--</s>--></a> ]</div><?endif?><?endif?><?endif?></div><div style="border: 2px solid #000000;" id="tab3"><!----Форма заказа--->Спасибо Вам!Для осуществления заказа, пожалуйста, воспользуйтесь Формой$MFORM_2$<!----////Форма заказа---></div></div><script type="text/javascript">$("#usual1 ul").idTabs();</script><!----///idTabs-----><!---BLOK-3---></td></tr></table></td></tr><tr><td class="eDetails1" colspan="2"><?if($RATING$)?><div style="float:right"><?$RSTARS$('12','/.s/img/stars/3/12.png','1','float')?></div><?endif?><!--<s3179>-->Категория<!--</s>-->: <a href="$CAT_URL$">$CAT_NAME$</a> |</td></tr><tr><td class="eDetails2" colspan="2"><!--<s3177>-->Просмотров<!--</s>-->: <b>$READS$</b> <?if($COMMENTS_NUM$)?>| <!--<s3039>-->Отзывов: <!--</s>-->: <b>$COMMENTS_NUM$</b><?endif?><?if($TAGS$)?> | <!--<s5308>-->Теги<!--</s>-->: $TAGS$<?endif?><?if($RATING$)?>| <!--<s3119>-->Рейтинг<!--</s>-->: <b><span id="entRating$ID$">$RATING$</span></b>/<b><span id="entRated$ID$">$RATED$</span></b><?endif?></td></tr></table><!-- </body> --><!-- </middle> --></td><td class="side-block">$GLOBAL_CLEFTER$</td></tr></table></div></div></div>$GLOBAL_BFOOTER$</div></body></html>Сразу после кода с новой сточки написать <?else?> в конце страницы и самой самой последней строчкой написать <?endif?>
Это все делается для того, чтобы во всех остальных разделах модуля остался старый шаблон модуля «Каталог статей».
Нажать кнопку «Сохранить» и если все сделано правильно новый шаблон сохраниться. - Теперь вставленный Основной код шаблона интернет-магазина нужно отредактировать. Для этого в модуле Почтовые Формы нужно создать Форму заказа товара по Вашему желанию. Далее в коде Основной код шаблона интернет-магазина есть такой блок.
123456<!----Форма заказа--->Спасибо Вам!Для осуществления заказа, пожалуйста, воспользуйтесь Формой$MFORM_2$<!----////Форма заказа--->
Вы видите что там есть системный код самой формы: $MFORM_2$. Его нужно поменять на системный код созданной Вами формы обратной связи в модуле «Почтовые формы«.
- Скачайте файл jquery.idTabs.min.js и закачайте его в корень своего сайта.
- В Панеле Управления сайтом перейти Дизайн — Управление дизайном (CSS) и в самом конце стилей, добавьте новые стили. Для этого просто скопируйте CSS стили, которые Вы видите ниже:
CSS Стили интерент-магазина
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364/* Style for Usual tabs */.usual {padding:15px 20px;width:500px;margin:8px auto;}.usual li { list-style:none; border: 2px solid #000000; float:left; }.usual ul a {display:block;padding:6px 10px;text-decoration:none!important;margin-left:0;font:15px Verdana;color:#FFF;background:#000000;}.usual ul a:hover {color:#FFF;background:#111;}.usual ul a.selected {margin-bottom:0;color:#000;background:snow;border-bottom:1px solid snow;cursor:default;}.usual div {padding:10px 10px 8px 10px;*padding-top:3px;*margin-top:-15px;clear:left;background:snow;font:10pt Georgia;}.usual div a { color:#000; font-weight:bold; }#usual2 { background:#0A0A0A; border:1px solid #1A1A1A; }#usual2 a { background:#222; }#usual2 a:hover { background:#000; }#usual2 a.selected { background:snow; }#tabs3 { background:#FF9; }.imagebox {background:#FFFFFF;width:300px;margin:10px auto;padding:15px 20px;}.imagebox li { list-style:none; float:left; }.imagebox ul a {display:block;text-decoration:none;padding:3px 2px;}.imagebox ul a.selected {background:#000;color:#222;font-weight:bold;} - В настройках модуля Каталог статей в разделе «Поля для добавления материалов:» изменить «Имя автора материала» на «Цена», так как теперь это поле в разделе Магазин будет отвечать за Цену товара!
Основной код шаблона интернет магазина я создала из нескольких скриптов найденных мною в интернете. И, если Вы хотите отредактировать его под стиль своего сайта Вашего сайта, лучше разобрать этот код по блокам и отредактировать его.
Строение скрипта интернет-магазина
Для начала рассмотрим рисунок.
Скрипт состоит из трех блоков.
- Блок фотографий товара
- Блок краткой информации: цена и социальные кнопоки
- Блок описания товара, который состоит их трех вкладок: описание товара, отзывы, и заказать товар.
Блоки 1 и 3 сделаны с спомощью вкладок — табов (tabs) на jQuery. Как делать и соответственно редактировать табы читайте в статье Как сделать вкладки на странице сайта
Блок 2 состоит из цены и социальных кнопок.
Цена сделана простым кодом, с использование условных операторов uCoz и системного кода $AUTHOR_NAME$. Именно этот опертор в коде отвечает за цену. Выше я писала, что теперь в поле «Имя автора материала» нужно будет вписывать цену товара. Вот собсвенно сам код цены.
1 2 3 4 5 6 |
<!----PRICE----> <?if($AUTHOR_NAME$)?> <center><table style="background-color: #dadbdd; border-color: #000000;" border="3"> <tr><td><b><font size="+1">Цена: <font color="red">$AUTHOR_NAME$</font></font></b></td></tr></table></center> <?endif?> <!---/////PRICE----> |
В самом коде находятся и CSS стили, поэтому вид этого небольшого блока Вы можете откорректировать как Вам больше нравится.
Я очень надеюсь что Мой скрипт Интернет-магазина из модуля Каталог файлов будет Вам интересен.
Здравствуйте, подскажите пожалуйста по переделке каталога статей в интернет магазин. Делал все по пунктам, проверил несколько раз, но ничего не получилось. Вид отображения в каталоге не изменился, добавление материала изменилась надпись цена вместо имени автора. При открытии пробной статьи (товара) белый экран и все. В чем может быть проблема, от основного дизайна сайта зависит работоспособность данного скрипта? Или может быть нужно создавать из каталога файлов, т.к. в тексте в начале и в конце упомянуты именно каталог файлов? Заранее спасибо.
Сергей!
В шаблоне Страница материала и комментариев к нему нужно убрать:
(первая строчка)
И
(две последних строчки)
Должно заработать.