Информация в этой теме может быть устаревшей
Ищите актуальные инструкции в Базе Знаний или свяжитесь с командой Эквида.
Closed Thread
 
Thread Tools Display Modes
  #1  
Old 11-28-2015, 12:39 AM
Ruslan Karimov1's Avatar
Ruslan Karimov1 is offline
 
Join Date: Nov 2015
Posts: 2
Default

Хочу сделать вертикальное меню и каталог товаров рядом узкой вертикальной полосой. Как?


Здравствуйте,

Хочу сделать вертикальное меню и каталог товаров рядом узкой вертикальной полосой. Как?
То есть хотелось бы чтобы было так:
1. слева вертикальная полоска с категориями товаров, но мне нужны не все товары, а только определенные. Это возможно?
2. Когда пользователь выбирает категорию товара, справа появляется узкая вертикальная полоска с двумя столбцами товаров. Картинки товаров хочется сделать поменьше, поаккуратней.
3. Оставшееся место справа (приблизительно 2/3 от ширины экрана) мы хотим использовать для других целей.

Что надо поменять в CSS таблице? Как при этом изменится мобильная версия?

============
И еще вопрос:
При нажатии на картинку товара мы хотим не уходить на страницу с карточкой товара, а вызывать свою функцию javascript. Это трудно сделать?

Заранее большое спасибо за помощь!!!

P.S. Хочется такой дизайн меню и списка товаров как на прикрепленной картинке, это возможно? Если это тяжело сделать, пожалуйста, так и скажите! )))
Attached Thumbnails
Click image for larger version

Name:	for_Ecwid.png
Views:	207
Size:	59.2 KB
ID:	3245  
  #2  
Old 12-01-2015, 07:22 AM
Panovich's Avatar
Panovich Panovich is offline
Ecwid Team
 
Join Date: Apr 2015
Posts: 761
Default

[QUOTE=Ruslan Karimov1;139664]Здравствуйте,

Хочу сделать вертикальное меню и каталог товаров рядом узкой вертикальной полосой. Как?
То есть хотелось бы чтобы было так:
1. слева вертикальная полоска с категориями товаров, но мне нужны не все товары, а только определенные. Это возможно?
2. Когда пользователь выбирает категорию товара, справа появляется узкая вертикальная полоска с двумя столбцами товаров. Картинки товаров хочется сделать поменьше, поаккуратней.
3. Оставшееся место справа (приблизительно 2/3 от ширины экрана) мы хотим использовать для других целей.

Что надо поменять в CSS таблице? Как при этом изменится мобильная версия?

============
И еще вопрос:
При нажатии на картинку товара мы хотим не уходить на страницу с карточкой товара, а вызывать свою функцию javascript. Это трудно сделать?

Заранее большое спасибо за помощь!!!

P.S. Хочется такой дизайн меню и списка товаров как на прикрепленной картинке, это возможно? Если это тяжело сделать, пожалуйста, так и скажите! )))[/QUOTE]
Здравствуйте,


Спасибо за ваши вопросы! Давайте я сначала расскажу, как можно максимально приблизиться к тому, чего вы хотите, с помощью встроенных инструментов Эквида, а потом поговорим о скриншоте, который вы приложили.
Начнём с меню.
В Эквиде есть виджет вертикального меню категорий, его код можно найти здесь: [url]https://help.ecwid.com/customer/ru/portal/articles/1117050-%D0%92%D0%B5%D1%80%D1%82%D0%B8%D0%BA%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5-%D0%BC%D0%B5%D0%BD%D1%8E-%D0%BA%D0%B0%D1%82%D0%B5%D0%B3%D0%BE%D1%80%D0%B8%D0%B9[/url]

Введите в поле "Ваш store ID" ID своего магазина, скопируйте код и разместите его в исходном коде сайта на той же странице, где установлен Эквид.
Как работает виджет - он берёт все включенные категории и перечисляет их списком в меню.
Соответственно, если вы не хотите, чтобы какие-то товары были видны при переходах по меню, можно добавить такие товары в отдельную категорию и скрыть её. Скрыть категорию можно в панели управления Эквида - Каталог - Категории - выбрать категорию:

[img]https://monosnap.com/file/DyZTMj5vGFe3MuItbND5mVnpyp0owM.png[/img]

Чтобы товары отображались в несколько рядов по два товара в каждом ряду, задайте контейнер для Эквида поуже и/или внесите изменения в код интеграции Эквида.

В соответствии с вашей задачей код должен выглядеть примерно так:

[code]<div>
<script type="text/javascript" src="https://app.ecwid.com/script.js?1003"></script> <script type="text/javascript"> xProductBrowser("categoriesPerRow=3","views=grid(2,6) list(10) table(20)","categoryView=grid","searchView=list","style="); </script> <noscript>Your browser does not support JavaScript. Please proceed to <a href="http://mdemo.ecwid.com">HTML version of Eugene's store</a></noscript>
​</div>[/code]

Строчка "grid(2,6)" указывает на то, что в режиме просмотра "Сетка" в каталоге продуктов будет отображаться по два товара в 6 рядов.
Пожалуйста, не используйте этот код у себя на сайте, я привела его для примера.

ВАЖНО! Чтобы была возможность внести все перечисленные выше изменения, Эквид должен быть установлен на сайт.

Далее нужно уменьшить превью изображений товара. Это можно сделать в панели управления Эквида - Настройки - Дизайн - вкладка [URL="https://my.ecwid.com/cp/CP.html#thumbnails"]"Размеры эскизов"[/URL]. Задайте нужный размер в пикселях и сохраните изменения.

Теперь о мобильной версии. Меню категорий, код которого я вам предложила, имеет свою особенность - оно не умеет подстраиваться под размер мобильных девайсов.
Сам же каталог продуктов хорошо смотрится в окне любой ширины, в том числе и на мобильных телефонах. В мобильной версии в каталоге продуктов товары пролистываются один за другим. Как именно это работает, вы можете увидеть, если откроете свой стартовый сайт [url]https://store1775422.ecwid.com/[/url] на мобильном телефоне в любом браузере.

[Quote]И еще вопрос:
При нажатии на картинку товара мы хотим не уходить на страницу с карточкой товара, а вызывать свою функцию javascript. Это трудно сделать?[/Quote]

Думаю, тут всё зависит от того, что должно произойти потом, после клика и какую задачу вы хотите решить. Скорее всего, это будет не трудно для разработчика. С помощью javascript кода и [URL="http://api.ecwid.com/"]API Эквида [/URL] можно поменять стандартное поведение элементов Эквида и тонко настроить работу магазина под свои нужды. Если вы не обладаете навыками программирования, такую работу лучше доверить профессионалам.

[Quote]P.S. Хочется такой дизайн меню и списка товаров как на прикрепленной картинке, это возможно? Если это тяжело сделать, пожалуйста, так и скажите! )))[/Quote]

Я думаю, возможно добиться результата максимально приближенного к тому, что видно на скриншоте. Допустим, то, что справа - это изображения товаров. Мы разобрались, как настроить отображение по две штуки в несколько рядов.
Такое меню, как на скриншоте, нужно будет создать средствами сайта, куда установлен Эквид (используя только стартовый сайт, привести Эквид к точно такому виду не получится).
Затем на кнопки этого меню прикрепить ссылки, которые будут вести на страницу определённой категории.
Сложно дать какие-то более точные инструкции, поскольку я вижу перед собой только скриншот и не представляю, как именно должны вести себя элементы сайта.
Что можно сказать наверняка - такого результата не получится добиться за пару шагов. Тем не менее, как я уже сказала, поведение и расположение элементов Эквида можно изменить с помощью скриптов. Если вы задумали привести магазин именно к такому виду, думаю, лучше узнать у профессиональных разработчиков и дизайнеров, можно ли решить такую задачу, сколько это будет стоить и сколько времени займёт работа.

Пожалуйста, обращайтесь, если нужно что-то уточнить!
__________________
Всем добра!
Анна Панова

Команда заботы о пользователях Эквида

Читайте наш блог на русском языке, там много полезной информации!
База знаний.

Last edited by Panovich; 12-08-2015 at 08:20 AM.
  #3  
Old 12-05-2015, 03:04 PM
GraftGirl's Avatar
GraftGirl GraftGirl is offline
 
Join Date: Dec 2015
Posts: 2
Default

Добрый день! Очень понятно что нужно скопировать код интергации,но куда его скопировать! - вот в чем вопрос! Можно для непродвинутых пользователей сделать инструкцию с принт-скрин картинками? или хотя-бы путь прописать? )))
  #4  
Old 12-08-2015, 09:23 AM
Anna V.'s Avatar
Anna V. Anna V. is offline
Ecwid Team
 
Join Date: Dec 2014
Posts: 332
Default

[QUOTE=GraftGirl;140073]Добрый день! Очень понятно что нужно скопировать код интергации,но куда его скопировать! - вот в чем вопрос! Можно для непродвинутых пользователей сделать инструкцию с принт-скрин картинками? или хотя-бы путь прописать? )))[/QUOTE]
Здравствуйте,

Код виджета вертикального меню категорий нужно вставить в административной панели сайта на странице где установлен Эквид-магазин. Но как я вижу, вы используете стартовый сайт для продаж, поэтому у вас не получится применить виджет вертикального меню категорий. Объясню почему.

Стартовый сайт - это одностраничная витрина магазина. Мы его предлагаем нашим пользователям для быстрого начала продаж пока нет собственного сайта или в качестве мобильной версии магазина, если основной сайт не имеет адаптивный дизайн. У стартового сайта есть некоторые ограничения: в него нельзя вставлять скрипты для изменения работы страниц, применять виджеты, добавлять новые страницы (к примеру, Новости, Акции и т.п.). Также стартовый сайт не индексируется поисковыми системами.

Чтобы вы могли вставить виджет вертикального меню категорий, нужно создать собственный сайт с помощью любого конструктора сайта (Эквид можно разместить практически на любую платформу) и туда [URL="https://help.ecwid.com/customer/ru/portal/articles/1171115"]вставить Эквид-магазин[/URL]

Про стартовый сайт можно почитать подробнее [URL="https://help.ecwid.com/customer/ru/portal/articles/1576655"]в статье "Стартовый сайт"[/URL]
__________________
Анна В.
Команда поддержки пользователей Ecwid

База знаний.
Closed Thread
Информация в этой теме может быть устаревшей
Ищите актуальные инструкции в Базе Знаний или свяжитесь с командой Эквида.

Tags
css, design, javascript, дизайн

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is Off
Smilies are Off
[IMG] code is Off
HTML code is Off

Forum Jump


All times are GMT. The time now is 07:07 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.