Тема SPEED Поиск в верхней панели
Сегодня получал обратную связь от владельцев компьютеров, очень много людей не могут найти поиск. Как бы его сделать обычным, т.к. поиском пользуется очень много людей, а тут его вообще не видно. Да и на его место я бы поставил Поиск Pro
Добавить ответ
Здравствуйте, Виталий!
Первым делом нужно отключить штатный поиск темы.
Затем в поле ниже Очерёдность вывода блоков в верхней панели в самый конец добавьте название блока, в котором у вас будет располагаться ваш поиск, например, speed.navbar_search. При этом всё лишнее лучше удалить из поля очерёдности.
Теперь идём в приложение Сайт –> блоки и создаём указанный в поле очерёдности блок с id speed.navbar_search.
Затем в этот блок добавьте код:
{strip} {if $wa_app == 'shop'} <li class="uk-navbar-item uk-width-expand uk-search-default uk-light">{* uk-light – если фон панели тёмный *} <form autocomplete="off" method="get" action="{$wa->getUrl('shop/frontend/search')}" class="search uk-search uk-search-navbar uk-width-1-1"> <div class="uk-inline uk-width-expand"> <button type="submit" class="not" data-uk-search-icon aria-label="[`Search`]"></button> <input id="search" class="uk-search-input not" type="search" name="query" {if !empty($query)}value="{$query}"{/if} placeholder="[s`Find products`]..."> </div> </form> </li>{*/uk-navbar-item*} {/if} {/strip}Обратите внимание на класс uk-light в третьей строке.
Если у вас панель имеет светлый фон, то класс нужно удалить, если тёмный, то оставить.
Получится примерно так:
Ну и в этом блоке вы уже сможете настроить форму поиска для плагина поиск pro.
В следующей версии темы я расширю левую часть панели до начала правой части панели, и поиск станет занимать всё свободное пространство панели.
Все это сделал работает, только получается, что в мобильной версии гамбургер меню стал очень маленький. Поставил ПОИСК PRO стало вообще хорошо, но как его поставить так чтобы он и на мобильной версии смотрелся хорошо? Пусть даже на всю ширину, под Логотипом
Эм... гамбургер можно сделать крупнее, если что..
Но поле для поиска будет совсем маленьким. Думаю, это тоже не вариант.
Но если делать два поиска для разной ширины устройств, у меня есть предположение, что что-то может пойти не так.
Поэтому поиск лучше перенести в файл main.html
Найдите в этом файле строку:
<div class="content" id="page-content" itemscope itemtype="{if $_use_store_schema}http://schema.org/Store{else}http://schema.org/WebPage{/if}"></div>И сразу перед ней или после (не имеет значения), вставьте код:
<div class="uk-container"> {* А сюда уже вставьте ваш поиск pro *} </div>Получилось, но не очень хорошо, как будто пределали его в спешке. Лучше бы он показывался в шапке. В плагине есть настройка, растягивать поиск на 100%, но на декстопе он почему-то в шапке не растягивается. У очень многих спрашивал про это большое расстояние между шапкой и названием товара и тоже многие думают, что оно через чур огромное. Я б согласился на ваш вариант поиска (который сразу раскрыт) но получается, что поиск Про ищет гораздо лучше, чем штатный поиск.
В мобильной версии тоже на начальном экране видно только буквы, почему то картинка под карточкой товара, хотя на всех сайтах наоборот (хотя может это добавляет очки, но конверсия точно страдает) два раза проверял ночью включая вашу тему и почему то два раза заказов вообще не было, хотя обычно приходит минимум по 10шт. (оставлял ваш штатный поиск)
Оговорюсь сразу по оценкам гугла ваша тема просто шикарна (вы действительно над ней постарались!) В 2 раза лучше моей предыдущей темы и хочу перейти на нее, но нужно ее немножко поправить.
На десктопе нужен показ телефона и емайла, нужно поиск растянуть на всю оставшуюся ширину, нужно уменьшить расстояние между шапкой и названием товара.
На мобильной версии пусть останется как было, но при нажатии на ваш значек лупы, ниже появлялся поиск Про, но чтобы еще было немного расстояния между шапкой и поиском ( чтобы он не был приклеен к ней) Так же нужно уменьшить шрифт названия, до нормальных размеров и перенести фото под название.
Если что-то из этого можете подсказать как сделать сразу, то буду благодарен, тема будет просто огонь!
В теме для приложения Сайт найдите файл navbar.html
В этом файле найдите строки:
И замените их на строки:
Теперь содержимое левой части панели, будет "тянутся" до начала правой части панели.
В обновление эту правку добавил.
Извиняюсь за этот косяк.
Я не предусмотрел что в хелпере $frontend_header для плагинов может выводится невидимое содержимое, как в вашей ситуации. Чтобы это исправить найдите в теме для приложения Магазин файл main.html
В этом файле найдите строку:
И замените на строку:
Да это было сделано в угоду скорости, для предотвращения сдвига контента (уменьшения коэффициента Content Layout Shift – CLS).
В следующей версии я добавлю опцию смены расположения блока покупки товара, который в мобильной версии идёт выше галереи товара.
Эта фича запланирована.
Телефон и другие контактные данные будут "выезжать" в отдельном сайдбаре при нажатии кнопки с иконкой трубки, рядом с иконкой поиска.
Как это сделать я вам уже объяснил в предыдущих комментариях.
Всё таки поле поиска ниже панели – это не очень хорошо, т.к. оно будет конфликтовать с кнопкой корзины.
Я посмотрел ваш сайт и вижу, что две формы поиска про, вроде как ведут себя корректно.
Поэтому одну форму (для ПК) можно оставить в панели.
Для этого в вашем блоке speed.navbar_search найдите строку:
<li class="uk-navbar-item uk-width-expand uk-search-default uk-light">{* uk-light – если фон панели тёмный *}И добавьте туда класс uk-visible@m, чтобы получилось вот так:
<li class="uk-navbar-item uk-width-expand uk-search-default uk-visible@m uk-light">{* uk-light – если фон панели тёмный *}А для мобильных устройств замените штатный поиск поиском про.
Откройте файл navbar.search.html (в теме для Сайта) и найдите там форму штатног поиска:
<form autocomplete="off" method="get" action="{$wa->getUrl('shop/frontend/search')}" class="search uk-search uk-search-navbar uk-width-1-1"> <div class="uk-inline"> <button type="submit" class="not" data-uk-search-icon aria-label="[`Search`]"></button> <input id="search" autofocus class="uk-search-input not" type="search" name="query" {if !empty($query)}value="{$query}"{/if} placeholder="[s`Find products`]..."> </div> </form>И замените её следующим кодом:
{$block_top_navbar_search = $wa->block("speed.top_navbar_search")} {if !empty($block_top_navbar_search)} <!-- {$theme_id}.top_navbar_search --> {$block_top_navbar_search} <!-- / {$theme_id}.top_navbar_search --> {else} <form autocomplete="off" method="get" action="{$wa->getUrl('shop/frontend/search')}" class="search uk-search uk-search-navbar uk-width-1-1"> <div class="uk-inline"> <button type="submit" class="not" data-uk-search-icon="" aria-label="[`Search`]"></button> <input id="search" autofocus="" class="uk-search-input not" type="search" name="query" {if="" !empty($query)}value="{$query}" {="" if}="" placeholder="[s`Find products`]..."> </div> </form> {/if}Затем создайте блок speed.top_navbar_search и добавьте туда хелпер плагина внутри тегов:
{if $wa_app == 'shop'} <div class="uk-width-1-1"> {* здесь хелпер плагина поиск про *} </div> {/if}Теперь вам надо спрятать кнопку поиска на версии для ПК.
Откройте файл в теме для сайта: navbar.search-button.html
Найдите там строку:
И добавьте ей класс uk-hidden@m, чтобы получилось вот так:
Это не может быть связано с ошибкой базы данных?
Сейчас наткнулся на эту ошибку у вас на обеих версиях сайта.
Да этой ночью хостер предупреждал о профилактике, поэтому так произошло. В те ночи было все нормально.
Добавлю эту фичу в будущем обновлении.
Пока можете найти файл product.html в теме для Магазина и найти там строку:
<h1 class="page-name uk-text-{$theme_settings.heading_align}">И добавить туда класс от uk-h2 до uk-h6 (в зависимости от того, какой размер заголовка вам нужен), например так:
<h1 class="uk-h3 page-name uk-text-{$theme_settings.heading_align}">P.S.
Я извиняюсь, но в дальнейшем я больше не смогу давать вам до такой степени развёрнутые ответы.
Ответы на вопросы, касающиеся исправления ошибок в теме входят в обязанности поддержки, ровно как и исправления ошибок в последующих обновлениях темы.
Но консультации по индивидуальной доработке темы, к сожалению, не входят в обязанности поддержки.
Вы можете составить ТЗ по индивидуальным доработкам темы и заказать у меня платные доработки по этому ТЗ.
Это понятно, просто хочется чтобы ваша тема действительно была одной из самых лучших тем в магазине Вебасиста. Но без понятного поиска любой магазин будет терять клиентов, так же как на сайте на котором клиенту нужно объяснять, что если нажмете туда, то увидите телефон, а если туда то емайл. Клиенту гораздо проще закрыть сайт и уйти к тому, где это все работает так как он привык. Вам в любом случае спасибо за подробные разъяснения.
и вот этот код приводит к
<h1>Ошибка #0</h1>Скорее всего тут ошибка т.к. нет закрывающего тега
{if="" !empty($query)}value="{$query}" {="" if}Скорее всего тут ошибка, т.к. нет закрывающего тега
{if="" !empty($query)}value="{$query}" {="" if}Да. Видимо, при вставке кода в ответ, редактор хаба что-то отформатировал по- своему.
Да и поиск почему то не растянулся на всю ширину, а только передвинулся правее.
Пришлите мне доступы в админку на [email protected] (не обращайте внимания на автоответчик). Я посмотрю как будет возможность на выходных.
Про H1 я понял, он работает только на мобильной версии, верно?
В поиске Про в настройках есть Растягивать на 100% поэтому наверное он растягивается по ширине какого-то изображения, когда ставишь в настройках 450 То он становится подлинее
Вот это еще не забудьте добавить себе в обновление в
category.heading.html
Виталий, я повторюсь.
Пришлите мне доступы пожалуйста на [email protected] (Не обращайте внимания на автоответчик).