View Single Post
  #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.