Интернет-магазин из Модуля Каталог статей

В системе uCoz для создания интернет-магазина предусмотрен специальный модуль «Интернет-магазин», который Вы можете подключить. Но за него ежемесячно Вам нужно будет платить минимум $5,49. Если Вы всерьез решили заняться бизнесом — то, конечно, это не деньги, но если Вы просто хотите создать небольшой раздел на своем сайте для минимальной онлайн торговли, тогда это может быть совсем не выгодно, с учетом того, что товар изначально могут и не покупать, или же стоимость товара совсем условная.

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

Выглядит он так:
Интернет-магазин

5 шагов для создания интернет-магазина в системе uCoz

  1. 1. В модуле Каталог статей создать новый раздел «Магазин» (или любое другое название), а в нем хотя бы одну категорию. (Разделы без категорий не работают). Для этого в Панели Управления сайтом перейти:Каталог статей — Управление категориями — Добавить раздел.
    Интернет-магазин
    Обязательно запомните ID Вашего созданного раздела. На рисунке синим показано, где смотреть ID раздела (ID раздела на рисунке = 2). Перейти в
    Дизайн — Управление дизайном — Каталог статей — Страница материала и комментариев к нему. Очень рекомендую перед первым внесением изменений в шаблон прочитать статью «Редактирование шаблона». Отредактировать шаблон следующим образом:В самом вверху первой сточкой пишите

    где вместо трех точек ставите ID Вашего раздела «Магазин» (в примере мы помним это 2, то есть $SID$=2);

    Теперь сразу после этой строчки нужно вставить следующий код, который собственно и является главным кодом магазина:

    Основной код шаблона интернет магазина

    Сразу после кода с новой сточки написать <?else?> в конце страницы и самой самой последней строчкой написать <?endif?>
    Это все делается для того, чтобы во всех остальных разделах модуля остался старый шаблон модуля «Каталог статей».
    Нажать кнопку «Сохранить» и если все сделано правильно новый шаблон сохраниться.

  2. Теперь вставленный Основной код шаблона интернет-магазина нужно отредактировать. Для этого в модуле Почтовые Формы нужно создать Форму заказа товара по Вашему желанию. Далее в коде Основной код шаблона интернет-магазина есть такой блок.

    Вы видите что там есть системный код самой формы: $MFORM_2$. Его нужно поменять на системный код созданной Вами формы обратной связи в модуле «Почтовые формы«.

  3. Скачайте файл jquery.idTabs.min.js и закачайте его в корень своего сайта.
  4. В Панеле Управления сайтом перейти Дизайн — Управление дизайном (CSS) и в самом конце стилей, добавьте новые стили. Для этого просто скопируйте CSS стили, которые Вы видите ниже:

    CSS Стили интерент-магазина

  5. В настройках модуля Каталог статей в разделе «Поля для добавления материалов:» изменить «Имя автора материала» на «Цена», так как теперь это поле в разделе Магазин будет отвечать за Цену товара!

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

Строение скрипта интернет-магазина

Для начала рассмотрим рисунок.
Интернет-магазин
Скрипт состоит из трех блоков.

  1. Блок фотографий товара
  2. Блок краткой информации: цена и социальные кнопоки
  3. Блок описания товара, который состоит их трех вкладок: описание товара, отзывы, и заказать товар.

Блоки 1 и 3 сделаны с спомощью вкладок — табов (tabs) на jQuery. Как делать и соответственно редактировать табы читайте в статье Как сделать вкладки на странице сайта

Блок 2 состоит из цены и социальных кнопок.
Цена сделана простым кодом, с использование условных операторов uCoz и системного кода $AUTHOR_NAME$. Именно этот опертор в коде отвечает за цену. Выше я писала, что теперь в поле «Имя автора материала» нужно будет вписывать цену товара. Вот собсвенно сам код цены.

Социальные кнопки я сделала в помощью сервиса Pluso очень просто и удобно. Подробнее о социальных кнопках читайте: Кнопки социальнах сетей на сайт

В самом коде находятся и CSS стили, поэтому вид этого небольшого блока Вы можете откорректировать как Вам больше нравится.

Я очень надеюсь что Мой скрипт Интернет-магазина из модуля Каталог файлов будет Вам интересен.


Подпишитесь на RSS канал - если Вы хотите первыми узнавать о новых статьях на сайте!!!

Статьи по теме:

2 комментария

  1. Здравствуйте, подскажите пожалуйста по переделке каталога статей в интернет магазин. Делал все по пунктам, проверил несколько раз, но ничего не получилось. Вид отображения в каталоге не изменился, добавление материала изменилась надпись цена вместо имени автора. При открытии пробной статьи (товара) белый экран и все. В чем может быть проблема, от основного дизайна сайта зависит работоспособность данного скрипта? Или может быть нужно создавать из каталога файлов, т.к. в тексте в начале и в конце упомянуты именно каталог файлов? Заранее спасибо.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *