В системе uCoz для создания интернет-магазина предусмотрен специальный модуль “Интернет-магазин”, который Вы можете подключить. Но за него ежемесячно Вам нужно будет платить минимум $5,49. Если Вы всерьез решили заняться бизнесом – то, конечно, это не деньги, но если Вы просто хотите создать небольшой раздел на своем сайте для минимальной онлайн торговли, тогда это может быть совсем не выгодно, с учетом того, что товар изначально могут и не покупать, или же стоимость товара совсем условная.
Такие мысли были и у меня. Я поняла, что мне нужен совсем небольшой интернет магазин, возможно и без всех его функций. Например, “корзина” мне лично в моем интернет-магазине не нужна, так как я сама, будучи пользователем никогда ей не пользуюсь. Так и появился мой собственный небольшой интернет магазин, который я сделала из модуля Каталог файлов.
Выглядит он так:
<?if($SID$="...")?>
где вместо трех точек ставите ID Вашего раздела “Магазин” (в примере мы помним это 2, то есть $SID$=2);
Теперь сразу после этой строчки нужно вставить следующий код, который собственно и является главным кодом магазина:
Основной код шаблона интернет магазина
<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?>
Это все делается для того, чтобы во всех остальных разделах модуля остался старый шаблон модуля “Каталог статей”.
Нажать кнопку “Сохранить” и если все сделано правильно новый шаблон сохраниться.
<!----Форма заказа---> Спасибо Вам! Для осуществления заказа, пожалуйста, воспользуйтесь Формой $MFORM_2$ <!----////Форма заказа--->
Вы видите что там есть системный код самой формы: $MFORM_2$. Его нужно поменять на системный код созданной Вами формы обратной связи в модуле “Почтовые формы“.
CSS Стили интерент-магазина
/* 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;
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$. Именно этот опертор в коде отвечает за цену. Выше я писала, что теперь в поле “Имя автора материала” нужно будет вписывать цену товара. Вот собсвенно сам код цены.
<!----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 стили, поэтому вид этого небольшого блока Вы можете откорректировать как Вам больше нравится.
Я очень надеюсь что Мой скрипт Интернет-магазина из модуля Каталог файлов будет Вам интересен.
Если при открытие csv файла с помощью excel У все поехали ячейки - это простой… Read More
Простые шаги как происходит Загрузка проекта на Github и Автодеплой на сервер Сделайте работу проще! Read More
Миграция базы данных - помогают с этим библиотеки SQLAlchemy и Alembic. Read More
Основные Команды Git, которые точно пригодятся. Сохрани себе шпаргалку Git Read More
Установка PostgreSQL на сервер Read More
Как создать PrimaryKey в талице базы данных SQL [РЕШЕНО] Ошибка relation tablename_id_seq doesn't exist Read More
View Comments
Здравствуйте, подскажите пожалуйста по переделке каталога статей в интернет магазин. Делал все по пунктам, проверил несколько раз, но ничего не получилось. Вид отображения в каталоге не изменился, добавление материала изменилась надпись цена вместо имени автора. При открытии пробной статьи (товара) белый экран и все. В чем может быть проблема, от основного дизайна сайта зависит работоспособность данного скрипта? Или может быть нужно создавать из каталога файлов, т.к. в тексте в начале и в конце упомянуты именно каталог файлов? Заранее спасибо.
Сергей!
В шаблоне Страница материала и комментариев к нему нужно убрать:
(первая строчка)
И
(две последних строчки)
Должно заработать.