Додайте свій проект безкоштовно і почніть отримувати пропозиції від фрілансерів-виконавців вже через хвилини після публікації!

Небольшой сайт с корзиной

закрито без виконання


Сайт имеет всего лишь один xml файл в котором будет вся необходимая информаця. Поэтому будем его разбирать средствами php что позволит его нормально читать и поисковиками.

Главнпая страница будет стостоять из блоков-картинок, в них будут ссылки на категории товаров либо на сами товары.

Главная страница от категории товаров отличается лишь наличием бокового меню, поэтому есть такая опция страницы как MENU

Что касается хедера, то создадим обычную html страницу header.html которая по умолчаию будет пустой, но если что то вложим тогда и отобразится

Размер полезного блока 80%, содержимое центруем


MENU Логическое TRUE/FALSE отвечает за то будет ли слева меню или нет на текущей странице

HOME->ELEMENTS    Это наш контент главной страницы

METATITLE    Это то что идет в заголовок страници

METADESCRIPTION    Это записываем в метазаголовок как описание страницы

KEYWORDS    Ключевые слова страницы для мета заголовка

TITLE    Используется как название товара на картинке

<H1>    Название товара, когда открываем страницу товара

TYPE    Отвечает за то является элемент текстом, товаром или категорией товаров (TEXT\GOODS\CATEGORY)

REGIONS    Элемент Select, OPTION отвечает за варианты выбора

NOMINAL    Элемент Select, OPTION отвечает за варианты выбора


Что касается картинок, первая всегда будет в качестве основной картинки товара

<IMAGES_SIZE>    Работает только с категориями товаров если выбран SIZE_1 то все картинки будет этого размера для этой категории, если SIZE_3 то это включает и 2 предыдущих размера, сответственно SIZE_4 будут автоматически сохдаватся картинки всех этих размеров

<IMAGES SIZE="AUTO"> в таком случае это будет значить что картиртинка подчиняется типоразмеру категории

<IMAGES SIZE="SIZE_1">    Не подчиняется размеру картинок в катерии SIZE="AUTO" и имеет разрешение 480x320

<IMAGES SIZE="SIZE_2">    Не подчиняется размеру картинок в катерии SIZE="AUTO" и имеет разрешение 960x320

<IMAGES SIZE="SIZE_3">    Не подчиняется размеру картинок в катерии SIZE="AUTO" и имеет разрешение 480x645

<IMAGES SIZE="SIZE_4">    Не подчиняется размеру картинок в катерии SIZE="AUTO" и имеет разрешение 960x645

Также что касается картинок, ниже приведены варианты как это должгло выглядеть на деле, также стоит учитывать что поверх картинок будет писатся название товара <TITLE> и при наведении короткое описание котороемы будем обрезать до 250 мсимволов не выходящее за пределы бокса картинки.

Стандартно у нас идет формат в 3 столбца, но какой то жеской привязки не будет так что если бы и по сегоднешний день пользуетесь таблицами забудьте о них! Средсвами css это все решаемо. Но нужно учесть что сайт будет открыватся разными размерами экранов а также устройствами, поэтому когда изменяетс размер в меньшую сторону, сперва немного уменьшаем все картинки, а затем выстраиваем все в 2 столбца и увеличиваем размер картинки что бы небыло нелепых белых просветов, если размер становится меньше то также снова начинам уменьшать картинки и потом переходим на одну картинку уменьшение делаем до приделов разума, т.е. меньше чем 480 пикселей ширины у нас не будет поддержки.

Также стоит это учесть для всего сайта в целом, что размер может изменяться и все должно органично выглядеть. Также хочу заметить что нужно код писать просто, без универских заумностей, все должно быть реализовано простым вариантом, без лишних перегрузов что бы это легко грузилось образно на долларовом хостинге) Также чем меньше вы добавите сторонних скриптов, тем лучше, я за минимализм! Поэтому размешать их будем локально не каких межсайтовых связей!


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

1.jpg


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

2.jpg


3.jpg


4.jpg


Еще раз напомню по картинкам, обязательно проверяйте разные варианты их размещения, что бы небыло косяков.



Теперь разберем файл контента:

Content.XML

<FILE>

<SETTING>

    <SITESLOGAN></SITESLOGAN>

    <LOGO></LOGO>

</SETTING>

<HOME>

    <TITLE></TITLE>

    <DESCRIPTION></DESCRIPTION>

    <KEYWORDS></KEYWORDS>

    <MENU>FALSE</MENU>

    <IMAGES_SIZE>FALSE</IMAGES_SIZE>

    <ELEMENTS>

        <ELEMENT ID="NUMERIC">

            <METATITLE></METATITLE>

            <METADESCRIPTION></METADESCRIPTION>

            <KEYWORDS></KEYWORDS>

            <TITLE></TITLE>

            <H1></H1>

            <DESCRIPTION></DESCRIPTION>

            <TYPE>GOODS</TYPE>

            <MENU>TRUE</MENU>

            <IMAGES SIZE="AUTO">

                <PIC></PIC>

                <PIC></PIC>

            </IMAGES>

            <REGIONS>

                <OPTION>EUROPE</OPTION>

                <OPTION>CHINA</OPTION>

                <OPTION>ETC...</OPTION>

            </REGIONS>

            <NOMINAL>

                <OPTION>5</OPTION>

                <OPTION>25</OPTION>

                <OPTION>50</OPTION>

            </NOMINAL>

            X.XX

        </ELEMENT>

    </ELEMENTS>

</HOME>

</FILE>



Как выглядит элемент категории

        <ELEMENT ID="NUMERIC">

            <METATITLE></METATITLE>

            <METADESCRIPTION></METADESCRIPTION>

            <KEYWORDS></KEYWORDS>

            <TITLE></TITLE>

            <H1></H1>

            <DESCRIPTION></DESCRIPTION>

            <TYPE>CATEGORY</TYPE>

            <MENU>TRUE</MENU>

            <IMAGES SIZE="AUTO">

                <PIC></PIC>

            </IMAGES>

        </ELEMENT>


Как выглядит элемент категории с товарами

        <ELEMENT ID="NUMERIC">

            <METATITLE></METATITLE>

            <METADESCRIPTION></METADESCRIPTION>

            <KEYWORDS></KEYWORDS>

            <TITLE></TITLE>

            <H1></H1>

            <DESCRIPTION></DESCRIPTION>

            <TYPE>CATEGORY</TYPE>

            <MENU>TRUE</MENU>

            <IMAGES SIZE="AUTO">

                <PIC></PIC>

            </IMAGES>

            <ELEMENTS>

                <ELEMENT ID="NUMERIC">

                    <METATITLE></METATITLE>

                    <METADESCRIPTION></METADESCRIPTION>

                    <KEYWORDS></KEYWORDS>

                    <TITLE></TITLE>

                    <H1></H1>

                    <DESCRIPTION></DESCRIPTION>

                    <TYPE>GOODS</TYPE>

                    <MENU>TRUE</MENU>

                    <IMAGES SIZE="AUTO">

                        <PIC></PIC>

                        <PIC></PIC>

                    </IMAGES>

                    <REGIONS>

                        <OPTION>EUROPE</OPTION>

                        <OPTION>CHINA</OPTION>

                        <OPTION>ETC...</OPTION>

                    </REGIONS>

                    <NOMINAL>

                        <OPTION>5</OPTION>

                        <OPTION>25</OPTION>

                        <OPTION>50</OPTION>

                    </NOMINAL>

                    X.XX

                </ELEMENT>

            </ELEMENTS>

        </ELEMENT>


Стоит понимать что корневая категория может быть просто категорией товаров, для этого мы и делаем все эти различения <TYPE>CATEGORY</TYPE> и <TYPE>GOODS</TYPE>

Страница товаров, к примеру возьмем образец здесь https://www.city-discovery.com/singapore/tour.php?id=12506 Мне нравиться вариант страктуры страницы, правый блок делаем сперва идет изображение которое использовалось для данного товара в списке категорий. Затем идет 2 эелемента select, первый содержит элементы <REGIONS>, второй <NOMINAL>. Ниже добавляем textox с подписью Quantity: . Ниже идет две кнопки buy now и add to cart.

Левый блок страницы товара, делаем по простой аналогии смотрите этот образец http://www.ebay.com/itm/eBay-Gift-Card-50-100-200-with-free-gifting-packaging-US-Mail-delivery-/282282143829 мне нравятся данные табы, первый будет с описанием товара, второй будем брать из html файла, там будут общие правила покупки и доставки товара, страницу делайте, но заполнять потом буду.

Сразу под этими табами, у нас будут идти остальные картинки <IMAGES> с учетом SIZE="AUTO" и других опций, но по умолчанию будет использоватся SIZE="SIZE_4" если вы внимательно читали, то это значит что будут использоватся вме типы так что учитывайте создание данной мозаики и хочу еще раз обратить внимание, что все должно быть ровно без кривостей, т.к. устройства будут разные, мне будет приятно если посетитель будет видеть ровно сделаную верстку 🙂


Еще раз хочу напомнить о картинках, что там будет и 3-й тип <TYPE>TEXT</TYPE> по данным типоразмерам есть даже готовые пустые картинки с цветовой заливкой так что текст будет отображатся поверх них, еще стоит учитывать тот факт что при изменении размера картинок и всего прочего, делайте учет на то, что бы текст не искривлялся, т.к. и по сегоднешний день можно встретить такие жуткие варианты сацйт красивый, но стоит изменить размер окна, как все становится кривым, такой вариант искореняйте сразу.


Корзина

Что бы сразу откинуть все сложности разговоров это же корзина и т.д. то корзина работает по примитивному варианту. По идентификатору товара записываем каждый товар в корзине с параметрами покупки в куки, это думаю ясно, но а там где то посмотрите вверху где лучше всего будет пристроить корзину, что бы она появлялась тогда, когда в ней есть товары. Соответственно после добавления товара выпадает окно даже можете посмотреть https://www.city-discovery.com/singapore/tour.php?id=12506 что то вроде такого же окна со всеми товарами корзины, мы предлагаем либо еще совершить покупки или оформить заказ.


Страница оформления заказа

Здесь есть возможность редактировать количество товара, а также удалить лишние позиции, если клиент со всем согласен, тогда жмет оформить заказ. Данная страница также очень простая, от клиента в обязательном порядке нужны следующие данные:

First Name

Last Name

Adress: (example: 1540 Bay Way st)

Adress line 2: (example: Apt D2)

City:

State\Region:

Zip:

Country:

Email:

Phone:


После ввода этих данных,  клиент выбирает метод которым будет платить, у нас их всего лишь 2 PayPal и Credit\Debit Card

По PayPal там вообще все просто зайтите на страницу со справкой по CheckOut там методом POST отправляется обычная форма, если лень читать мануал, то установите OpenCart и там есть этот метод и извлеките отправляемые поля, так даже вам будет проще понять какое поле за что отвечает) Ну а также две дополнительный страницы если платеж прошел и если нет, если все отлично, то тогда делаем отправку сообщения на наш почтовик с полной информацией по клиенту ту которую он заполняет, а также по каждому товару, <TITLE> регион, номинал и количество, второе сообщение шлем клиенту Dear First Name спасибо за покупку, затем перечисление товаров, цену и все такое и то что как только оператор обработает заказ то товар будет отправлен instant после 72 часов задержки, ну текст чисто простой нужно сделать я потом буду корректировать. По факту задча сами видите примитивная

По кредитке, добавляем только поля:

Name on card:

Card type: Это обычный select со значениями Visa, MasterCard, American Express (другие мерчант не поддерживает)

Card Nember: Ну и здесь следить что бы были только цифры Visa, MasterCard 16 символов, American Express 15 символов

EXP: Здесь будет два селекта с числовыми значениями первый Month от 1 до 12. Второй Year с значениями от 2017 до 2030

CVV: также числовое поле

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


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

Ну на этом соственно все. Жду ваших предложений. Так что JS все что нужно это только основной скрипт JQuerry и все, где качать сжатую версию думаю вы в курсе дела. Остальные mobile и прочие скрипты не рекомендую использовать или только такие которые я смогу скачать на сайте JQuerry. Так что не перегружайте простой сайт излишками. На счет фрейморков и все подобного я против, но хотя если предоставите пару образцов скрипта, может и одобрю их, главное что бы ничегоне пришлось устанавливать на vds!


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


  1. 14 днів3000 ₴
    Дмитрий Северин
     467  перевірений   5   0

    Напишу на php или wordpress, opencart. Сделаю предворительно макет чтоб не было разногласий, уточним тз.

    Україна Миколаїв | 20 березня о 16:28 |
  2. 7 днів7000 ₽
    Руслан Гараев
     156 

    Зачем парсить страницу? когда можно по хорошему сделать, почти готовая CMS под ваши нужды http://easyiicms.com/
    Могу сверстать нужную страницу (потребуется PSD макет), если без PSD то до трех крупных исправлений в дизайне.
    и натянуть на CMS

    там уже реализована корзина (проверка данных при отправке и уведомление на емаил о товаре.

    Росія Уфа | 20 березня о 16:28 |
  3. 2 дні200 ₴
    Алексей Терехов
     132 

    здравствуйте,готов обсудить [email protected]

    Україна Київ | 21 березня о 01:53 |
  1. ставка відкликана
  • TuChappa Зайкова — замовник проекту
    Поскаржитися | 20 березня о 17:34 |

    Хочу обратится к соискателям, вы хотя бы читайте иногда на какой проект подписываетесь, перестаньте судить по картинкам из примера и объемом текста. Сайт состоит по грубому из 5 страниц из которых две обычные html формы, так что их и платежными модулями не назовешь.


    Руслан, подскажите, где вы там вычитали опарсинге, чтение xml и парсинг разные вещи! Что касается цмс, я бы написала такой вариант, если бы мне подошла цмс и поверьте такое решение 10-15 долларов с доп модулем мне стоил бы. Так что мне не нужны дырявые решения, где возможностей больше, чем потребуется для текущего проекта.


    Дмитрий, opencart и вордпресс, это не язык что бы на них писать:) А php вполне сойдет. Цена для текущего решения конечно надута, но приглашаю к предварительному диалогу. Напишите в пм

  • Додати

Замовник
TuChappa Зайкова
Росія Москва  2   0
Проект опублікований
20 березня о 16:09
133 перегляди
Поділитися