Корзина
#1
Отправлено 13 Октябрь 2011 - 15:39
1. Как сделать в шаблоне Мокко корзину из шаблона Лайт? Хотелось бы увидеть иконку корзины и 2 надписи, показывающие сколько товаров в корзине и на какую сумму. Это возможно реализовать в данном шаблоне?
2. Хотелось бы узнать как можно закрыть магазин от посторонних глаз (пока он в разработке)?
3. Как сделать "Сортировку по" и там 3 ссылки? К примеру, по имя, дата, цена....
Я что-то подобное видел на форуме, вот только забыл где Если не сложно объясните как реализовать эту задумку.
4. Как изменить рисунок "красного квадратика" - когда наводишь на элемент меню слева?
5. Как сделать цвет каталога и подкаталога разным?
6. Можно ли в меню "корзина" сделать обрамляющую рамку? (см.рисунок)
Заранее спасибо. И сори за много букв, просто хочется всё сразу узнать, что накопилось)))
#2
Отправлено 14 Октябрь 2011 - 05:58
Цитата
В шаблоне "HTML" вам нужно изменить блок с корзиной
<div id="cartInfo"> <a href="{CART_URL}">в корзине товаров на</a>: <span id="cartSum"> {% IF cart_count_empty %} <span class="red">0</span> {CURRENCY_NAME} {% ELSE %} {% FOR cart_sum %} <span>{cart_sum.NOW | money_format}</span><br /> {% ENDFOR %} {% ENDIF %} </span> </div>
на следующий блок
<div id="cartInfo"> <table> <tr> <td rowspan="2" class="valignMiddle"><a href="{CART_URL}"><span class="orderIcon cart"></span></a></td> <td>Товаров в <a href="{CART_URL}" class="underline"> корзине</a>:</td> <td id="cartCount"> {% IF cart_count_empty %} <span class="red">0</span> шт. {% ELSE %} {% FOR cart_count %} {cart_count.COUNT}{cart_count.MEASURE_NAME}{% IFNOT cart_count.last %},{% ENDIF %} {% ENDFOR %} {% ENDIF %} </td> </tr> <tr> <td>На общую сумму:</td> <td id="cartSum"> {% IF cart_count_empty %} <span class="red">0</span> {CURRENCY_NAME} {% ELSE %} {% FOR cart_sum %} {cart_sum.NOW | money_format}<br /> {% ENDFOR %} {% ENDIF %} </td> </tr> </table> </div>
2. Хотелось бы узнать как можно закрыть магазин от посторонних глаз (пока он в разработке)?
Как временно заблокировать сайт вы можете почитать тут http://forum.storela...ch__1#entry7221
Цитата
К сожалению на сортировку нельзя повлиять.
Цитата
Данный рисунок находиться в разделе редактора тем - блок "Файлы" Файл называется square_bullet.gif
Вы можете скачать данный файл и изменить его, а после пере залить обратно.
Цитата
Для этого можно сделать следующее - в шаблоне "HTML" найти
<li> <a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %} {% IF catalog.CURRENT %}class="selected"{% ENDIF %} >{catalog.NAME}</a> </li>
далее заменить на
<li> <a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %} class="{% IF catalog.CURRENT %}selected {% ENDIF %} {% IF catalog.LEVEL>0%}subcat sublvl{catalog.LEVEL}{% ENDIF %}" >{catalog.NAME}</a> </li>
Далее в файл стилей main.css добавить
#subNavigation li.subcat { background: url("http://img.storeland.ru/web/upload/assets/images/10/9976/subnav_rule.gif") no-repeat scroll left bottom transparent; font-size: 1.0833em; line-height: 1.5384em; padding: 0.5em 0; }
далее можно изменить необходимые свойства на свое усмотрение. Например задать новый размер шрифта для под категории нужно использовать font-size и т.д
Цитата
Для этого можно в файл стилей main.css добавить класс
.cartFormEmpty { border:1px black solid; }
#3
Отправлено 14 Октябрь 2011 - 08:27
Цитата
Ура, нашёл этот сайт - вот ссылка http://mir-sigaret.ru/catalog. Я так понял на этой платформе сделан, а значит реализовать возможно, но вот как?
Кстати, как сделать чтобы в поиски сайта была надпись "поиск по магазину" как в приведённом выше сайте. (см. рисунок2) Как я понял нужно что-то добавить в этот код (что-то типо value="Поиск по магазину..."), только это не то, а нужный код, к сожалению, не знаю.
<!-- Поиск --> <div id="searchPanel"> <form action="http://{NET_DOMAIN}/search" method="post"> <p> <label for="keywords">Поиск</label> <input type="text" maxlength="100" id="keywords" name="q" value="{SEARCH_QUERY}" /> <input type="image" value="Search" title="search" alt="search" src="{ASSETS_IMAGES_PATH}search_button.gif" id="submit" name="submit" /> </p> </form> </div> <!-- end Поиск -->
Цитата
.cartFormEmpty { border:1px black solid; }
Цитата
<li> <a href="{catalog.URL}"
{% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
{% IF catalog.CURRENT %}class="selected"{% ENDIF %}
>{catalog.NAME}</a>
</li>
далее заменить на
<li> <a href="{catalog.URL}"
{% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
class="{% IF catalog.CURRENT %}selected {% ENDIF %} {% IF catalog.LEVEL>0%}subcat sublvl{catalog.LEVEL}{% ENDIF %}"
>{catalog.NAME}</a>
</li>
Далее в файл стилей main.css добавить
#subNavigation li.subcat {
background: url("http://img.storeland...ubnav_rule.gif") no-repeat scroll left bottom transparent;
font-size: 1.0833em;
line-height: 1.5384em;
padding: 0.5em 0;
}
далее можно изменить необходимые свойства на свое усмотрение. Например задать новый размер шрифта для под категории нужно использовать font-size и т.д
За всё остальное огромное Вам спасибо, всё работает на УРА! Маленький вопросик: по какому признаку выбирается нужная картинка (их там 12) из файла "orderIcons.psd"?
#4
Отправлено 15 Октябрь 2011 - 08:48
<!-- Поле выбора сортировки --> {% IF goods_show_order_fields %} Сортировать по: <select name="goods_search_field_id" onchange="this.form.submit();"> {% FOR goods_order_fields %} <option value="{goods_order_fields.ID}" {% IF goods_order_fields.SELECTED %}selected="selected"{% ENDIF %}>{goods_order_fields.NAME}</option> {% ENDFOR %} </select> {% ENDIF %}
Заменить на
<!-- Поле выбора сортировки --> {% IF goods_show_order_fields %} Сортировать по: {% FOR goods_order_fields %} {%IF goods_order_fields.ID=1%} {% IF goods_order_fields.SELECTED %} <a title="Отсортировать товары по цене" href="?goods_search_field_id=2">цене</a> {%ELSE%} <a title="Отсортировать товары по цене" href="?goods_search_field_id=1">цене</a> {% ENDIF %} {% ENDIF %} {%IF goods_order_fields.ID=3%} {% IF goods_order_fields.SELECTED %} <a title="Отсортировать товары по имени" href="?goods_search_field_id=4">имени</a> {%ELSE%} <a title="Отсортировать товары по имени" href="?goods_search_field_id=3">имени</a> {% ENDIF %} {% ENDIF %} {%IF goods_order_fields.ID=7%} {% IF goods_order_fields.SELECTED %} <a title="Отсортировать товары по дате" href="?goods_search_field_id=8">дате</a> {%ELSE%} <a title="Отсортировать товары по дате" href="?goods_search_field_id=7">дате</a> {% ENDIF %} {% ENDIF %} {% ENDFOR %} {% ENDIF %}
Далее уже довести стили до ума.
Цитата
Стандартный поиск выглядит так
<!-- Поиск --> <div id="search"> <form action="http://{NET_DOMAIN}/search" id="searchform" method="get"> <div> <input type="text" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{%ELSE%}Поиск{%ENDIF%}" onblur="this.value=(this.value=='') ? 'Поиск' : this.value;" onfocus="this.value=(this.value=='Поиск') ? '' : this.value;" id="s" class="search_box alignleft" name="q" /> <input type="image" class="submit alignright" src="{ASSETS_IMAGES_PATH}search_but.gif" /> <div class="clr"></div> </div> </form> </div> <div class="clr"></div> <!-- end Поиск -->
в данном случае его нужно изменить на
<!-- Поиск --> <div id="search"> <form action="http://{NET_DOMAIN}/search" id="searchform" method="get"> <div> <input type="text" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{%ELSE%}поиск по магазину{%ENDIF%}" onblur="this.value=(this.value=='') ? 'поиск по магазину' : this.value;" onfocus="this.value=(this.value=='поиск по магазину') ? '' : this.value;" id="s" class="search_box alignleft" name="q" /> <input type="image" class="submit alignright" src="{ASSETS_IMAGES_PATH}search_but.gif" /> <div class="clr"></div> </div> </form> </div> <div class="clr"></div> <!-- end Поиск -->
К сожалению, получается очень некрасиво (см.рисунок) Может как-нибудь можно сделать, чтобы рамка обрамляла только текст? Ну и соответственно длинной была такой же как длина текста и желательно по центру? (вот как тут надо - http://mir-sigaret.ru/cart). Надеюсь на Вашу помощь.
Попробуйте сделать так - в шаблоне "Корзина" найти
{% IF cart_items_empty %} <div class="cartFormEmpty"> <h1>Ваша корзина пуста</h1> Предлагаем выбрать нужный Вам товар из <a href="{CATALOG_URL}">каталога</a>. </div> {% ELSE %}заменить на
{% IF cart_items_empty %} <div class="cartFormEmpty"> <p class="note-msg"> Ваша корзина пуста. Вы можете выбрать нужный товар из <a href="{CATALOG_URL}">каталога</a>. </p> </div> {% ELSE %}
далее в файл стилей main.css добавить
.note-msg, .notice-msg { background-color: #FAFAEC; border-color: #FCD344; color: #3D6611; } .error-msg, .success-msg, .note-msg, .notice-msg { background-position: 10px 9px !important; background-repeat: no-repeat !important; border-style: solid !important; border-width: 1px !important; font-size: 11px !important; font-weight: bold !important; height: 18px !important; margin: 0 0 10px; padding: 11px 8px 8px 32px !important; }
попробуйте заменить
<li> <a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %} class="{% IF catalog.CURRENT %}selected {% ENDIF %} {% IF catalog.LEVEL>0%}subcat sublvl{catalog.LEVEL}{% ENDIF %}" >{catalog.NAME}</a> </li>
на
<li{% IF catalog.LEVEL>0%}class="subcat sublvl{catalog.LEVEL}{% ENDIF %}"><a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %} {% IF catalog.CURRENT %}class="selected"{% ENDIF %} >{catalog.NAME}</a> </li>
Цитата
Не совсем понимаю вас. Пожалуйста объясните по подробнее.
#5
Отправлено 15 Октябрь 2011 - 09:22
Цитата
<!-- Поиск --> <div id="search"> <form action="http://{NET_DOMAIN}/search" id="searchform" method="get"> <div> <input type="text" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{%ELSE%}Поиск{%ENDIF%}" onblur="this.value=(this.value=='') ? 'Поиск' : this.value;" onfocus="this.value=(this.value=='Поиск') ? '' : this.value;" id="s" class="search_box alignleft" name="q" /> <input type="image" class="submit alignright" src="{ASSETS_IMAGES_PATH}search_but.gif" /> <div class="clr"></div> </div> </form> </div> <div class="clr"></div> <!-- end Поиск -->
в данном случае его нужно изменить на
<!-- Поиск --> <div id="search"> <form action="http://{NET_DOMAIN}/search" id="searchform" method="get"> <div> <input type="text" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{%ELSE%}поиск по магазину{%ENDIF%}" onblur="this.value=(this.value=='') ? 'поиск по магазину' : this.value;" onfocus="this.value=(this.value=='поиск по магазину') ? '' : this.value;" id="s" class="search_box alignleft" name="q" /> <input type="image" class="submit alignright" src="{ASSETS_IMAGES_PATH}search_but.gif" /> <div class="clr"></div> </div> </form> </div> <div class="clr"></div> <!-- end Поиск -->
Спасибо за помощь, которую уже оказали, получилось почти всё, щас доразберусь!!!
Цитата
Помогите пожалуйста "довести стили до ума", я не разбираюсь в css. Хочу, чтобы сортировка справа отображалась и при нажатии на ссылку она фиксировалась цветом, дабы клиент видел какая именно сортировка на данный момент стоит (пример, меню каталога либо же ссылки подвала, там видно в какой ты категории щас находишься).
3. Помогите запрограммировать кнопку на действие "очистки корзины", чтобы при нажатии на неё корзина очищалась (см. рисунок2). А то кнопку создал, а как добавить ей правильное действие не знаю, уже всё перепробовал - безрезультатно, она просто дублирует кнопку "пересчитать",а мне нужно, чтобы она очищала полностью корзину (что делает ссылка)
Заранее большое спасибо, Вы очень подробно всё объясняете, за это большой + Вам!!!
#6
Отправлено 15 Октябрь 2011 - 09:38
Wolfceil (15 Октябрь 2011 - 09:38) писал:
Я сделал как Вы сказали, вот что из этого вышло - см.рисунок.
#7
Отправлено 16 Октябрь 2011 - 05:22
Цитата
В вашем случае корзина будет имеет вид
<form action="http://{NET_DOMAIN}/search" method="post"> <p> <label for="keywords">Поиск</label> <input type="text" maxlength="100" id="keywords" name="q" value="{SEARCH_QUERY}" /> <input type="image" value="Search" title="search" alt="search" src="{ASSETS_IMAGES_PATH}search_button.gif" id="submit" name="submit" /> </p> </form>
замените её на
<form action="http://{NET_DOMAIN}/search" method="post"> <p> <label for="keywords">Поиск</label> <input type="text" maxlength="100" id="keywords" name="q" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{%ELSE%}поиск по магазину{%ENDIF%}" onblur="this.value=(this.value=='') ? 'поиск по магазину' : this.value;" onfocus="this.value=(this.value=='поиск по магазину') ? '' : this.value;" /> <input type="image" value="Search" title="search" alt="search" src="{ASSETS_IMAGES_PATH}search_button.gif" id="submit" name="submit" /> </p> </form>
Цитата
Помогите пожалуйста "довести стили до ума", я не разбираюсь в css. Хочу, чтобы сортировка справа отображалась и при нажатии на ссылку она фиксировалась цветом, дабы клиент видел какая именно сортировка на данный момент стоит (пример, меню каталога либо же ссылки подвала, там видно в какой ты категории щас находишься).
Попробуйте изменить поле сортировки и поле выбора лимитов
<!
-- Поле выбора сортировки --> {% IF goods_show_order_fields %} Сортировать по: {% FOR goods_order_fields %} {%IF goods_order_fields.ID=1%} {% IF goods_order_fields.SELECTED %} <a title="Отсортировать товары по цене" href="?goods_search_field_id=2">цене</a> {%ELSE%} <a title="Отсортировать товары по цене" href="?goods_search_field_id=1">цене</a> {% ENDIF %} {% ENDIF %} {%IF goods_order_fields.ID=3%} {% IF goods_order_fields.SELECTED %} <a title="Отсортировать товары по имени" href="?goods_search_field_id=4">имени</a> {%ELSE%} <a title="Отсортировать товары по имени" href="?goods_search_field_id=3">имени</a> {% ENDIF %} {% ENDIF %} {%IF goods_order_fields.ID=7%} {% IF goods_order_fields.SELECTED %} <a title="Отсортировать товары по дате" href="?goods_search_field_id=8">дате</a> {%ELSE%} <a title="Отсортировать товары по дате" href="?goods_search_field_id=7">дате</a> {% ENDIF %} {% ENDIF %} {% ENDFOR %} {% ENDIF %} <!-- Поле выбора лимитов --> {% IF goods_show_per_page %} Показывать по: <select name="per_page" onchange="this.form.submit();"> {% FOR goods_per_page_list %} <option value="{goods_per_page_list.LIMIT}" {% IF goods_per_page_list.SELECTED %}selected="selected"{% ENDIF %}>{goods_per_page_list.LIMIT}</option> {% ENDFOR %} </select> {% ENDIF %}
на
<!-- Поле выбора лимитов --> {% IF goods_show_per_page %} Показывать по: <select name="per_page" onchange="this.form.submit();"> {% FOR goods_per_page_list %} <option value="{goods_per_page_list.LIMIT}" {% IF goods_per_page_list.SELECTED %}selected="selected"{% ENDIF %}>{goods_per_page_list.LIMIT}</option> {% ENDFOR %} </select> {% ENDIF %} <!-- Поле выбора сортировки --> {% IF goods_show_order_fields %} Сортировать по: {% FOR goods_order_fields %} {%IF goods_order_fields.ID=1%} {% IF goods_order_fields.SELECTED %} <a title="Отсортировать товары по цене" href="?goods_search_field_id=2" style="color:red;">цене</a> {%ELSE%} <a title="Отсортировать товары по цене" href="?goods_search_field_id=1" {% IF GOODS_SEARCH_FIELD_ID=2%}style="color:red;"{% ENDIF %}>цене</a> {% ENDIF %} {% ENDIF %} {%IF goods_order_fields.ID=3%} {% IF goods_order_fields.SELECTED %} <a title="Отсортировать товары по имени" href="?goods_search_field_id=4" style="color:red;">имени</a> {%ELSE%} <a title="Отсортировать товары по имени" href="?goods_search_field_id=3"{% IF GOODS_SEARCH_FIELD_ID=4%}style="color:red;"{% ENDIF %}>имени</a> {% ENDIF %} {% ENDIF %} {%IF goods_order_fields.ID=7%} {% IF goods_order_fields.SELECTED %} <a title="Отсортировать товары по дате" href="?goods_search_field_id=8" style="color:red;">дате</a> {%ELSE%} <a title="Отсортировать товары по дате" href="?goods_search_field_id=7"{% IF GOODS_SEARCH_FIELD_ID=8%}style="color:red;"{% ENDIF %}>дате</a> {% ENDIF %} {% ENDIF %} {% ENDFOR %} {% ENDIF %}
Цитата
Попробуйте использовать кнопку вида
<input type="button" value="Очистить корзину" onclick="if(confirm('Вы действительно хотите удалить все товары из корзины?')){document.location='{CART_TRUNCATE_URL}';};">
Цитата
Попробуйте заменить на
<li{% IF catalog.LEVEL>0%} class="subcat sublvl{catalog.LEVEL}{% ENDIF %}"><a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %} {% IF catalog.CURRENT %}class="selected"{% ENDIF %} >{catalog.NAME}</a> </li>
Заметила ошибку в виде отсутствующего отступа. перед class
#8
Отправлено 16 Октябрь 2011 - 05:54
Цитата
<form action="http://{NET_DOMAIN}/search" method="post"> <p> <label for="keywords">Поиск</label> <input type="text" maxlength="100" id="keywords" name="q" value="{SEARCH_QUERY}" /> <input type="image" value="Search" title="search" alt="search" src="{ASSETS_IMAGES_PATH}search_button.gif" id="submit" name="submit" /> </p> </form>
замените её на
<form action="http://{NET_DOMAIN}/search" method="post"> <p> <label for="keywords">Поиск</label> <input type="text" maxlength="100" id="keywords" name="q" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{%ELSE%}поиск по магазину{%ENDIF%}" onblur="this.value=(this.value=='') ? 'поиск по магазину' : this.value;" onfocus="this.value=(this.value=='поиск по магазину') ? '' : this.value;" /> <input type="image" value="Search" title="search" alt="search" src="{ASSETS_IMAGES_PATH}search_button.gif" id="submit" name="submit" /> </p> </form>
2. Как изменить цифры в "поле лимитов" - не 10,20,30 и тд как там, а на свои - 6,12,18....? И как добавить к ссылкам "дата,имя,цена" стрлелочку "вверх...вниз" в зависимости от типа сортировки "по возрастанию...по убыванию"?
3. А можно вместо кнопки "очистить корзину" (которую Вы помогли запрограммирвовать), сделать более приятную на вид кнопку ? (см.рисунок2). А так, вцелом, кнопка работает!!1 Спасибо!
4. С каталогом всё без изменений То цвет не тот, то ещё что-нибудь, теперь вообще вся таблица сломалась и криво отображается В общем, спасибо Вам за попытку помочь, но что-то неполучается ничего. Бросаю я это гиблое дело с каталогом
5. Возможно ли сделать слева в каталоге категорий (где выбираются категории) кнопки, то есть на данный момент там простые ссылки, а хотелось бы видеть кнопки, например как сверху ссайта "главная, корзина и т.д.". Такие же кнопки можно сделать? Заранее спасибо!
#9
Отправлено 18 Октябрь 2011 - 02:10
#10
Отправлено 18 Октябрь 2011 - 05:37
Цитата
Тот код что я вам предложила полностью рабочий, и я прекрасно понимаю что вы хотите. Проверьте быть может вы что то не так делаете. Попробуйте еще раз внимательнее заменить код. Полный код блока поиска должен быть таким
<!-- Поиск --> <div id="searchPanel"> <form action="http://{NET_DOMAIN}/search" method="post"> <p> <label for="keywords">Поиск</label> <input type="text" maxlength="100" id="keywords" name="q" value="{% IF SEARCH_QUERY %}{SEARCH_QUERY}{%ELSE%}поиск по магазину{%ENDIF%}" onblur="this.value=(this.value=='') ? 'поиск по магазину' : this.value;" onfocus="this.value=(this.value=='поиск по магазину') ? '' : this.value;" /> <input type="image" value="Search" title="search" alt="search" src="{ASSETS_IMAGES_PATH}search_button.gif" id="submit" name="submit" /> </p> </form> </div> <!-- end Поиск -->
Цитата
Думаю для этого нужно в разделе Настройки -> Основные изменить лимит вывода товара на страницу.
Цитата
Для этого достаточно будет изменить кнопку на
<input type="submit" value="Очистить корзину" onclick="if(confirm('Вы действительно хотите удалить все товары из корзины?')){document.location='{CART_TRUNCATE_URL}';}return(false);">
Цитата
Сверху сайта используются так же ссылки, просто это визуально может так показаться. Можете попробовать в файле стилей найти
#subNavigation li { background: url("http://img.storeland.ru/web/upload/assets/images/10/9976/subnav_rule.gif") no-repeat scroll left bottom transparent; font-size: 1.0833em; line-height: 1.5384em; padding: 0.5em 0; }
заменить на
#subNavigation li { background: url("http://img.storeland.ru/web/upload/assets/images/10/9976/subnav_rule.gif") no-repeat scroll left bottom transparent; box-shadow: 0 0 5px #CCCCCC; font-size: 1.0833em; line-height: 1.5384em; padding: 0.5em 0; }
тем самым добавив небольшую тень. Ссылки должны оставаться ссылками, это важно как для покупателя, так же в большую очередь для поисковых систем.
#11
Отправлено 18 Октябрь 2011 - 08:43
Цитата
1. Помогите пожалуйста теперь поставить в "сортировке" стрелочку вверх, либо вниз, в зависимости от сортировки по возрастанию, либо убыванию. У меня на сайте стоит сортировка "имя, дата, цена" хотелось бы к ним привязать стрелочки - возможно?
2. Возможно ли сделать обрамляющую рамку для всего тела сайта? Чтобы оно отличалось от левого, правого и верхнего меню рамкой. Что-то типо рамки на рисунке. Со всеми настройками цвета, фона и т.д., а я потом сам сменю или удалю если понадобится.
Заранее спасибо за Ваше терпение и помощь
#12
Отправлено 19 Октябрь 2011 - 07:17
Цитата
Попробуйте заменить поле сортировки на (добавив класс asc и desc к сылкам)
<!-- Поле выбора сортировки --> {% IF goods_show_order_fields %} Сортировать по: {% FOR goods_order_fields %} {%IF goods_order_fields.ID=1%} {% IF goods_order_fields.SELECTED %} <a title="Отсортировать товары по цене" href="?goods_search_field_id=2" style="color:red;" class="asc">цене</a> {%ELSE%} <a title="Отсортировать товары по цене" href="?goods_search_field_id=1" class="desc" {% IF GOODS_SEARCH_FIELD_ID=2%}style="color:red;"{% ENDIF %}>цене</a> {% ENDIF %} {% ENDIF %} {%IF goods_order_fields.ID=3%} {% IF goods_order_fields.SELECTED %} <a title="Отсортировать товары по имени" href="?goods_search_field_id=4" class="asc" style="color:red;">имени</a> {%ELSE%} <a title="Отсортировать товары по имени" href="?goods_search_field_id=3" class="desc" {% IF GOODS_SEARCH_FIELD_ID=4%}style="color:red;"{% ENDIF %}>имени</a> {% ENDIF %} {% ENDIF %} {%IF goods_order_fields.ID=7%} {% IF goods_order_fields.SELECTED %} <a title="Отсортировать товары по дате" href="?goods_search_field_id=8" class="asc" style="color:red;">дате</a> {%ELSE%} <a title="Отсортировать товары по дате" href="?goods_search_field_id=7" class="desc" {% IF GOODS_SEARCH_FIELD_ID=8%}style="color:red;"{% ENDIF %}>дате</a> {% ENDIF %} {% ENDIF %} {% ENDFOR %} {% ENDIF %}
Далее нужно добавить в файл стилей 2 класса
a.asc { background: url("http://img.mir-sigaret.ru/web/upload/assets/images/3/2901/i_desc_arrow.gif") no-repeat scroll right center transparent; color: #000000; } a.desc { background: url("http://img.mir-sigaret.ru/web/upload/assets/images/3/2901/i_asc_arrow.gif") no-repeat scroll right center transparent; color: #000000; }
далее нужно скачать изображения в этих классах, закачать к себе в разделе редактора тем, далее изменить ссылки на свои.
Цитата
Можно попробовать использовать следующий стиль - в файле стилей main.css найти
#primaryContent { padding: 0 0 40px 0; vertical-align: top; width: 750px; }
заменить на
#primaryContent { border: 1px dotted #CCCCCC; box-shadow: 0 0 5px #CCCCCC; padding: 0 0 40px 5px; vertical-align: top; width: 750px; }
далее можно изменять свойства, или добавлять их в этот класс
#13
Отправлено 19 Октябрь 2011 - 08:30
Цитата
2. Попробовал сделать обрамляющую рамку для тела как Вы сказали Там вообще структура всего сайта нарушилась, получается полная ерунда, но с рамкой Поэтому решил отказаться от рамки, если только нет другого варианта поставить её, чтобы не поломать весь сайт Просто, если делать как Вы сказали, то даже шапка кривой становится Может есть выход?
В целом спасибо за помощь, многое очень даже пригодилось!
#14
Отправлено 19 Октябрь 2011 - 21:04
a.asc { background: url("http://img.mir-sigaret.ru/web/upload/assets/images/3/2901/i_desc_arrow.gif") no-repeat scroll right center transparent; color: #000000; } a.desc { background: url("http://img.mir-sigaret.ru/web/upload/assets/images/3/2901/i_asc_arrow.gif") no-repeat scroll right center transparent; color: #000000; }
на
a.asc.select { background: url("http://img.mir-sigaret.ru/web/upload/assets/images/3/2901/i_desc_arrow.gif") no-repeat scroll right center transparent; color: #000000; padding-right: 10px; } a.desc.select { background: url("http://img.mir-sigaret.ru/web/upload/assets/images/3/2901/i_asc_arrow.gif") no-repeat scroll right center transparent; color: #000000; padding-right: 10px; }
так же замените
<!-- Поле выбора сортировки --> {% IF goods_show_order_fields %} Сортировать по: {% FOR goods_order_fields %} {%IF goods_order_fields.ID=1%} {% IF goods_order_fields.SELECTED %} <a title="Отсортировать товары по цене" href="?goods_search_field_id=2" style="color:red;" class="asc">цене</a> {%ELSE%} <a title="Отсортировать товары по цене" href="?goods_search_field_id=1" class="desc" {% IF GOODS_SEARCH_FIELD_ID=2%}style="color:red;"{% ENDIF %}>цене</a> {% ENDIF %} {% ENDIF %} {%IF goods_order_fields.ID=3%} {% IF goods_order_fields.SELECTED %} <a title="Отсортировать товары по имени" href="?goods_search_field_id=4" class="asc" style="color:red;">имени</a> {%ELSE%} <a title="Отсортировать товары по имени" href="?goods_search_field_id=3" class="desc" {% IF GOODS_SEARCH_FIELD_ID=4%}style="color:red;"{% ENDIF %}>имени</a> {% ENDIF %} {% ENDIF %} {%IF goods_order_fields.ID=7%} {% IF goods_order_fields.SELECTED %} <a title="Отсортировать товары по дате" href="?goods_search_field_id=8" class="asc" style="color:red;">дате</a> {%ELSE%} <a title="Отсортировать товары по дате" href="?goods_search_field_id=7" class="desc" {% IF GOODS_SEARCH_FIELD_ID=8%}style="color:red;"{% ENDIF %}>дате</a> {% ENDIF %} {% ENDIF %} {% ENDFOR %} {% ENDIF %}
на
<!-- Поле выбора сортировки --> {% IF goods_show_order_fields %} Сортировать по: {% FOR goods_order_fields %} {%IF goods_order_fields.ID=1%} {% IF goods_order_fields.SELECTED %} <a title="Отсортировать товары по цене" href="?goods_search_field_id=2" style="color:red;" class="asc select">цене</a> {%ELSE%} <a title="Отсортировать товары по цене" href="?goods_search_field_id=1" class="desc" {% IF GOODS_SEARCH_FIELD_ID=2%}style="color:red;"{% ENDIF %}>цене</a> {% ENDIF %} {% ENDIF %} {%IF goods_order_fields.ID=3%} {% IF goods_order_fields.SELECTED %} <a title="Отсортировать товары по имени" href="?goods_search_field_id=4" class="asc select" style="color:red;">имени</a> {%ELSE%} <a title="Отсортировать товары по имени" href="?goods_search_field_id=3" class="desc" {% IF GOODS_SEARCH_FIELD_ID=4%}style="color:red;"{% ENDIF %}>имени</a> {% ENDIF %} {% ENDIF %} {%IF goods_order_fields.ID=7%} {% IF goods_order_fields.SELECTED %} <a title="Отсортировать товары по дате" href="?goods_search_field_id=8" class="asc select" style="color:red;">дате</a> {%ELSE%} <a title="Отсортировать товары по дате" href="?goods_search_field_id=7" class="desc" {% IF GOODS_SEARCH_FIELD_ID=8%}style="color:red;"{% ENDIF %}>дате</a> {% ENDIF %} {% ENDIF %} {% ENDFOR %} {% ENDIF %}
Цитата
Не совсем понимаю конечно о чем вы, так как делала пред. просмотр на вашем сайте и все было нормально. Попробуйте использовать
#primaryContent { box-shadow: 0 0 5px #CCCCCC; padding: 0 0 40px 5px; vertical-align: top; width: 750px; }
#15
Отправлено 21 Октябрь 2011 - 04:16
1. Подскажите как сделать, чтобы как на рисунке "тело" сайта было в оболочке как бы? Чтобы оно имело отдельные настройки цветового фона и выделялось от остального фона сайта.
2. Как название "каталог товаров" (которое на рисунке справа) также красиво выделить . Можете помочь так же сделать?
3. Где в css прописаны цвета ссылок по умолчанию и при наведении?
#16
Отправлено 21 Октябрь 2011 - 10:10
body{}
а потом выделить белым цветом контент в
#content { margin: 0 auto; width: 960px; }
это все меняется в редакторе тем - main.css
2)Данная красивость сделана с помощью рисунка. Если вы владеете Photoshop или другими редакторами изображения,для начала Вам надо будет создать ее. Или обратиться с заказом на дизайн.
3)для общих ссылко в редакторе тем - main.css
a:link, a:visited { color: #D0431D; text-decoration: none; }
#17
Отправлено 21 Октябрь 2011 - 17:33
Цитата
2. Как мне избавиться от "пустоты" между шапкой и контентом? Там идёт белая полоса примерно в пол сантиметра и не могу её убрать Думаю это из-за слайдера, но она всё же убираться как-то должна.
3. Скажите пожалуйста, как сделать как на рисунке 2? Чтобы при наведении на категорию она подсвечивалась (как бы фон меняется) Я вроде разобрался, НО фон не на всю ширину получается (см.рисунок 3), почему?
4. Вы не подскажете код стандартного цвета текста на сайте и где его можно изменить по умолчанию? Он не чёрный,а какой-то светлый.
#18
Отправлено 22 Октябрь 2011 - 12:15
вот блок отображения названия "каталог товаров"
<div class="contentTbodyCatalogHeader" style="font-size:16px; color:#000000">Каталог товаров</div>
мы видим класс contentTbodyCatalogHeader и задаем ему нужные размеры и прописываем бэкграунд, если же такового в main.css не находите,создаем его в самом низу этого документа примерно так
.contentTbodyCatalogHeader{ тут пишем стили(бэкграунд, цвет все что угодно) }
2.посмотрела тут проблема заключается в том что у банера главного блока отсутствует ширина
вот здесь
#banner {}
впишите в него width: 960px !important; overflow: hidden;
3.в main.css в самый низ пишите слдеющее
#subNavigation li:hover{}
в нем уже пишите бэкграунд
4.
body { color: #666666; font-family: "Lucida Grande","Trebuchet MS",Verdana,Arial,sans-serif; font-size: 75%; line-height: 1.6666em; }
#19
Отправлено 22 Октябрь 2011 - 15:46
Цитата
вот блок отображения названия "каталог товаров"
<div class="contentTbodyCatalogHeader" style="font-size:16px; color:#000000">Каталог товаров</div>
мы видим класс contentTbodyCatalogHeader и задаем ему нужные размеры и прописываем бэкграунд, если же такового в main.css не находите,создаем его в самом низу этого документа примерно так
.contentTbodyCatalogHeader{ тут пишем стили(бэкграунд, цвет все что угодно) }
Ну залил я пробную картинку с названием "zagolovok.png" (скопировал с сайта - рисунок1), далее прописал код:
.contentTbodyCatalogHeader {background: url({ASSETS_IMAGES_PATH}zagolovok.png) repeat; margin:0 1em 0.33em 0.7em;padding-bottom:0.2em;}После этого всё сохранил и у меня выходит вот такая вот ерунда (см.рисунок 2) А точнее картинка стоит не на своём месте, да ещё и урезана вся непонятно как Перепробовал кучу всякой ерунды из интернета (искал в гугле) и ничего путного не нашёл по этому поводу Как мне сделать, чтобы кнопка отображалась правильно? И какие команды позволяют её двигать по сайту? Буду очень рад если подскажете
2. HELP ME!!! Нарисовалась просто ужасная проблема с шапкой Решил я свою шапку начать мастерить и тут то и начались все проблемы с кнопками! Дело вот в чём, кнопки на фоне подгоняю под "главная, каталог, корзина и тп", вроде всё хорошо, НО при увеличении/уменьшении всё ломается к едрени фени. Как это исправить? Ну и бывает так, что у меня всё отлично, а у знакомых всё ужасно. Я уже просто ума не приложу как справиться с этой проблемой. Быть может можно привязать эти ссылки к шапке, чтобы не ездили туда суда при увеличении/уменьшении? Я смотрел примеры Ваших магазинов, там таких проблем не наблюдалось, хотя и кнопки подобные есть и встроенны они в шапку (вот пример http://doorse.ru/goods/lux01?from=MzVl) Тут при увеличении/уменьшении не портится вид, всё стоит на своих местах, номера телефонов рядом с иконкой телефона; поиск стоит в отведённом для него месте в шапке и не съезжает оттуда при любым манипуляциях, у меня же всё ломается сразу (то съезжает, то прыгает)
#20
Отправлено 24 Октябрь 2011 - 15:34
Цитата
Ну залил я пробную картинку с названием "zagolovok.png" (скопировал с сайта - рисунок1), далее прописал код:
.contentTbodyCatalogHeader {background: url({ASSETS_IMAGES_PATH}zagolovok.png) repeat; margin:0 1em 0.33em 0.7em;padding-bottom:0.2em;}
После этого всё сохранил и у меня выходит вот такая вот ерунда (см.рисунок 2) А точнее картинка стоит не на своём месте, да ещё и урезана вся непонятно как Перепробовал кучу всякой ерунды из интернета (искал в гугле) и ничего путного не нашёл по этому поводу Как мне сделать, чтобы кнопка отображалась правильно? И какие команды позволяют её двигать по сайту? Буду очень рад если подскажете
Вам нужно сделать те же самые изменения что вы уже делали, только в этом случае я смогу вам максимально помочь. В данный момент у вас это не сделано, или вы убрали изменения. Из возможных причин - не выставлены размеры для изображения и т.д
Цитата
Данные кнопки не реализованы в изображении шапки, там используется отдельное изображение для пунктов меню. Данное меню можно реализовать на чистом css или же как на doorse с использованием JavaScript.
$("#mainmenu li > div").hover(function(){ $(this).addClass("bg_middle"); }, function(){ if(!$(this).find("a").hasClass("selected")){ $(this).removeClass("bg_middle"); } }) if ($.browser.msie || $.browser.opera) { $('.content_page').css('margin-left', '1px').css('margin-right', '-1px'); } });
и css стили
#mainmenu li, #langmenu li { display: inline; } #mainmenu li { float: left; } #mainmenu li div { height: 26px; } #mainmenu li > div { margin-right: 2px; } #mainmenu li a { color: #4F250F; display: block; float: left; font: 15px Helvetica,Tahoma,Arial,sans-serif; padding-top: 4px; text-decoration: none; } #mainmenu li a:hover { text-decoration: none; } .bg_middle { background: url("http://img.storeland.ru/web/upload/assets/images/8/7356/right.png") no-repeat scroll right top transparent; } .bg_middle > div { background: url("http://img.storeland.ru/web/upload/assets/images/8/7356/left.png") no-repeat scroll left top transparent; } .bg_middle > div > div { background: url("http://img.storeland.ru/web/upload/assets/images/8/7356/middle.png") repeat-x scroll center top transparent; } .bg_middle a { color: #FFFFFF !important; } #mainmenu div > div > div { margin-left: 9px; margin-right: 9px; } .menu_center { padding-left: 1px; padding-right: 1px; }
И уже сам каркас должен выглядеть так
<div id="top-menu" class=""> <ul id="mainmenu" class="pad-box cont620"> <li> <div class="bg_middle"> <div> <div class="menu_center"> <a title="Перейти к странице «Продажа и установка дверей»" class="selected" href="http://doorse.ru/">Главная</a> </div></div></div> </li> <li> <div class=""> <div> <div class="menu_center"> <a title="Полный список товаров на сайте" href="http://doorse.ru/catalog">Каталог</a> </div></div></div> </li> </ul> <div class="clr"></div> </div>
Количество пользователей, читающих эту тему: 0
0 пользователей, 0 гостей, 0 анонимных