создание сайтов во владимире

Владимир, Горького 27. 8 920 620 07 41

4. Опции товара. Редактирование карточки товара.

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

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

Перед добавлением опции в карточку товара, её нужно предварительно создать в соответствующем разделе, поэтому давайте зайдем в админку нашего интернет-магазина  и перейдем в пункт меню «Каталог» => «Опции».


Здесь будет располагаться весь список опций для всех товаров в вашем интернет магазине. Давайте создадим новую опцию, нажав на кнопку «Добавить» в правом верхнем углу.


В рамках  примера, давайте создадим опцию «Размер». Для этого заполним предлагаемые нам поля следующим образом:
Название опции – здесь задается отображаемой в админке и на странице товара название создаваемой нами опции для товара.
Тип – опции могут иметь различный тип отображения, в нашем примере давайте выберем «Список».
Порядок сортировки – отвечает за то, в какой последовательности будут выводиться наши опции в карточке товара на стороне покупателя. Опция с порядковым номером 2 будет располагаться выше опции с порядковым номером 3, но ниже опции с порядковым номером
Теперь перейдем к добавлению значений опции «Размер», для этого нажмите на кнопку «Добавить значение опции».
Рассмотрим значение каждого предлагаемого для заполнения поля:
Значение опции – Здесь вы прописываете те значения, из которых будет выбирать посетитель, в нашем пример это будут размеры.
Изображение – для каждого значения опции может быть добавлено своё изображение, однако это имеет смысл для таких опций, как например цвет, текстура ткани и других подобных опций.
Порядок сортировки – по аналогии с остальными порядками сортировки.

Если мы сейчас добавим к нашим размерам какие либо картинки, то не увидим их на странице товара. Всё дело в том, что изображения опций отображаются на странице товара, только если Тип опции установлен в режим «Изображение». Размер отображаемых изображений на странице товара  зависит от верстки шаблона.

На этом мы закончили создавать опцию «Размер». Давайте нажмем на кнопку «Сохранить» в левом верхнем углу экрана.
Мы увидим сообщение об успешном создании опции «Размер».

 

Давайте создадим еще одну опцию по аналогии. Назовем её «Материал», а в поле Тип выберем «Изображение». Данный тип предоставляет пользователю радио-кнопки, которые сопровождаются маленькими картинками. Давайте заполним значения опции «Материал» и нажмем кнопку «Сохранить».

Добавление опций в карточку товара.

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

Давайте перейдем в пункт меню «Каталог» => «Товары» и кликнем по кнопке «Изменить».
Давайте перейдем на вкладку «Опции» и установим курсор в текстовое поле слева.
Сейчас очень важный момент, мы должны добавить опцию «Материал», для этого начните набирать название опции в поле добавления. Если опция была предварительно создана, она появится в выпадающем списке, вам остается только кликнуть по ней, и она появится в списке добавленных опций. По аналогии добавьте опцию «Размер».


Теперь давайте обратимся к правой части окна добавления опции, и пройдемся по каждому пункту:
– Выпадающий список Необходимо отвечает за то, будет ли возможно добавление товара в Корзину без выбора данной опции. То есть если «Необходимо» стоит в значении «Да», покупатель не сможет добавить данный товар в корзину, не выбрав одно из значений цвета в данном случае, ему будет выведено сообщение «Поле Цвет должно быть заполнено!».
По нажатию на кнопку «Добавить значение опции», нам будет предложено заполнить несколько полей.
В поле «Значение опции» из выпадающего списка нам предлагается выбрать одно и заранее созданных нами значений.
Поле «Количество» отвечает за то, какое количество товара будет вычитаться добавляется в корзину и вычитаться со склада, в случае выбора данной опции.
Вычитать со склада в значении «ДА» будет уменьшать количество товара на складе, на значение заданное в предыдущем поле.
В поле «Цена» нам предлагается выбрать будет ли уменьшаться либо увеличиваться основная цена, на введенное значение.
Поля Баллы и Вес работают аналогично.
Давайте добавим оба заданных нами значения в для опции «цвет».
По аналогии добавим опцию «Размер», добавим для неё все заведенные предварительно значения и нажмем на кнопку «Сохранить».

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

Как вы видите, на странице товара появилась новая область Доступные варианты, в которой представлены обе добавленные нами опции. Давайте выберем те или иные варианты  и нажмем на кнопку «Купить»

Если мы обратимся к нашей корзине, то увидим, что туда попал товар с описанием всех добавленных нами опций, конечной ценой и суммой.
Обратите внимание, что в данном случае не произошло ни уменьшение ни увеличение цены. Но если бы мы выставили в значении опции ценовой инкремент либо декремент, то цена в корзине бы изменилась, на заданное нами значение. О задании значений изменения цены написано в п. 4 данной статьи.

Типы опций товара  и их отображение на странице товара.

 

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

Тип опций «Выбор»  позволяет вашим посетителям выбирать конкретные необходимые параметры товара с помощью стандартных средств выбора – радиокнопок, чекбоксов и так далее. Среди параметров данного типа присутствуют следующие подтипы:

Тип «Список» представляет из себя выпадающий список опций, из которых покупатель может выбрать ОДНУ. Выберем этот тип опции и добавим несколько значений. Далее привяжем эту опцию к нашей карточке товара (как добавить опцию в карточку товара?) и посмотрим на результат на странице товара.

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

Обратите внимание, что созданный нами параметр отмечен красной звездочкой. Это означает, что перед тем как добавить товар в корзину, покупатель будет обязан выбрать один из вариантов, в противном случае он получит сообщение «Поле Размеры должно быть заполнено!» Как изменять этот параметр я рассматривал выше.

Опции товара  типа «Переключатель».

Переходим к следующему подтипу опций «Переключатель». Предоставляет нам, доступные для нажатия, так называемые, радиокнопки. Только одна кнопка может быть нажата одновременно. Давайте заполним эту опцию аналогичным предыдущему пункту методом.  Привяжем эту опцию к товару, и посмотрим как она отображается в карточке товара. Мы получили в дополнительных опциях на странице товара, список из нескольких значений, при этом выбрать мы можем только одно.
Подтип «Флажок» предоставляет посетителем множественный выбор. То есть, несколько значений опций могут быть выбраны одновременно. Давайте посмотрим как это выглядит на практике. Выберем тип «Флажок», добавим несколько значений. Как видно, мы получили список, с возможностью выбрать несколько дополнительных опций.
Подтип «Изображение» предоставляет нам возможность отображать возле радиокнопок небольшие иконки. Этот подтип удобно использовать для представления визуальной информации, например цвета.  И привяжем к карточке нашего товара эту опцию.

Опции товара  типа «Поле ввода».

Опции товара типа «Поле ввода» удобно использовать для получения от пользователя какой либо произвольной информации. Опции данного типа представлены двумя подтипами «Текст» и «Текстовое поле».

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

Опции товара  типа «Файл».

Опция типа «Файл» очень интересна в своей реализации. Опция этого типа, позволяет покупателю, при добавлением товара в корзину, прикрепить к нему свой произвольный файл. Это может быть например картинка с логотипом для последующей гравировки на товаре, либо текстовый перечень необходимых требований и многие другие варианты. После того, как покупатель оформит заказ, администратор интернет-магазина  сможет получить этот файл в деталях заказа, административной панели. Давайте посмотрим механизм  работы этой опции. Сначала создадим эту опцию стандартным способом и привяжем её к карточке нашего товара.

На странице товара мы получим одноименный дополнительный параметр с кнопкой «Загрузить Файл». По нажатию на эту кнопку пользователь сможет выбрать необходимый файл, после загрузки которого он получит сообщение об удачной загрузке файла.

Опции товара  типа «Дата».

Опции тип «Дата» предоставляют возможность привязывать к конкретному товару метки даты и времени. Опции данного типа представлены в трех вариантах «Дата», «Время», «Дата и Время».

Подтип «Дата» дает возможность пользователю установить метку времени для конкретного товара. Эту опцию удобно использовать например для конкретизации даты доставки данного товара.
Подтип «Время» предоставляет возможность установить метку времени для выбранного товара. Механизм работы аналогичен подтипу «Дата»
Подтип «Дата и Время» — это смесь двух вышеизложенных подтипов, с аналогичным механизмом работы.