Jump to content

Длинные названия в хлебных крошках (breadcrumbs)


hovo
 Share

Go to solution Solved by hovo,

Recommended Posts

Всем доброго дня! Хотел спросить, как решаете проблему длинных названий в хлебных крошках? При открывании страниц на мобильных устройствах, если название товара слишком длинное, то страница деформируется (текст breadcrumbs выходит за пределы страницы). К примеру эта страница

 

Edited by hovo
Link to comment
Share on other sites

В 22.08.2023 в 11:38, AlexDW сказал:

добавьте в css

.breadcrumb li {word-break: break-all !important;white-space: normal!important}

Спасибо большое! Только файл тоже подскажите пожалуйста, какой нужно редактировать. Шаблон стандартный. Только страницу товара нужно редактировать.

Edited by hovo
Link to comment
Share on other sites

В 22.08.2023 в 14:26, AlexDW сказал:

да, добавьте в конце

В конце добавляю, перестаёт работать Fix Breadcrumbs 3x
прикрепляю файл, куда вставил. строка 419

но проблема теперь такая 

на тестовом сайте всё работает (длинное название на телефоне переходит в несколько строк) 
а на основном сайте нет
на сколько помню, они идентичны. Может подскажете в каких файлах искать отличия?

stylesheet.txt

Link to comment
Share on other sites

Вообще, можете удалить последние хлебные крошки. Они особо и не нужны, если человек и так на странице товара или категории. Гугл считает это хорошим клиентским опытом. Проверено и не только мной.

Link to comment
Share on other sites

В 22.08.2023 в 19:03, hovo сказал:

В конце добавляю, перестаёт работать Fix Breadcrumbs 3x

1. точно не при чем

2. у меня работает на обоих

 

кэш браузера обновите Ctrl+Shift+R

Link to comment
Share on other sites

Вы можете сделать немного более сложную структуру стилей, которая позволит в мобильной версии ХК разместить в ряд , с возможностью их скрола пальцем вправо-влево.
Например так :

/*breadcrumb*/
@media (max-width: 768px) {
	.breadcrumb {
	  display: flex;
	  overflow-x: auto;
	  margin: 0 0 20px 0;
	  padding: 0;
	  border: 1px solid #e4f1fc;
	  background-color: #f2f8fd;
	}
	
	.breadcrumb i {
	  font-size: 15px;
	}
	
	.breadcrumb li {
	  word-break: break-all !important;
	  white-space: normal!important;
	}
	
	.breadcrumb > li {
	  text-shadow: 0 1px 0 #FFF;
	  padding: 0 20px;
	  position: relative;
	  white-space: nowrap;
	  line-height: 37px;
	  flex-shrink: 0;
	}
	
	.breadcrumb > li + li:before {
	  content: '';
	  padding: 0;
	}
	
	.breadcrumb > li:after {
	  content: '';
	  display: block;
	  position: absolute;
	  top: 5px;
	  right: 0;
	  width: 26px;
	  height: 26px;
	  border-right: 1px solid #DDD;
	  border-bottom: 1px solid #DDD;
	  -webkit-transform: rotate(-45deg);
	  -moz-transform: rotate(-45deg);
	  -o-transform: rotate(-45deg);
	  transform: rotate(-45deg);
	}
}

Вставьте в самый конец вашего файла стилей, сохраните и нажмите несколько раз комбинацию ctrl+F5 на клавиатуре (сброс кеша браузера).

Ну и за одно уменьшить шрифт H1 (название товара) в мобильной версии
 

@media (max-width: 768px) {
	#product-product h1 {
      font-size: 1.3em;
	  line-height: 1.5em;
	  font-weight:500;
    }
}

 

Ну и вот так для шапки (выставить в один ряд лого и телефон )
 

@media (max-width: 767px) {
	.container .col-sm-12.col-md-6.col-lg-5 {
	  display: flex;
	  align-items: center;
	}
	#logo img { 
	  width: 100%; 
	}
	#contact {
	  font-size: 14px;
	  margin-left: auto;
	  margin-top: -10px;
	}
	
	#contact a {
	  text-decoration: none;
	  color: #333;
	}
	
	#contact i {
	  margin-right: 5px;
	}
}

 

logo_stroimag.png

head.png

head2.png

Link to comment
Share on other sites

В 22.08.2023 в 17:15, chixx сказал:

Вообще, можете удалить последние хлебные крошки. Они особо и не нужны, если человек и так на странице товара или категории. Гугл считает это хорошим клиентским опытом. Проверено и не только мной.

 

 Где вы такое прочитали? Убирается только ссылка тк получается ссылка на саму себя на страницы, если убрать крошку это будет как адрес без номера дома

SEO для вашего проекта (дорого, богато)

Link to comment
Share on other sites

В 23.08.2023 в 09:45, Nameless сказал:

 

 Где вы такое прочитали? Убирается только ссылка тк получается ссылка на саму себя на страницы, если убрать крошку это будет как адрес без номера дома

Антон Маркин гуру? Какая разница, где и что я прочитал. Другое дело, что Вы отрицаете все) Тут нет смысла спроить вообще, можете верить бесконечным инструкциям. Но у меня к Вам вопрос, может ли гугл поменять на своей усмотрение breadcrumbs?

А еще вопрос, не кажется ли Вам, что удаляя ссылку, как раз и пропадает номер дома в адресе?

И плюс ко всему, какая польза для покупателя, скорлить эту последнюю крошку, если человек и так видит название товара?

И прежде чем дальше спросить, погуляйте по рынками Европы, США и Азии. Глазами увидите, что многое, что пропагандируется тут, там вообще не используется.

Поэтому у Вас и подпись, "дорого, богато", а про результат ни слова).

И вот, Вам, для примера, крупный интернет магазин, хорошо ранжируемый. Работает с 2016 года. (от балды зашел).

 

image.thumb.png.852a0b26ce2c1b55635fc1952c645c40.png

Edited by chixx
Link to comment
Share on other sites

В 23.08.2023 в 13:51, chixx сказал:

Антон Маркин гуру? Какая разница, где и что я прочитал. Другое дело, что Вы отрицаете все) Тут нет смысла спроить вообще, можете верить бесконечным инструкциям. Но у меня к Вам вопрос, может ли гугл поменять на своей усмотрение breadcrumbs?

А еще вопрос, не кажется ли Вам, что удаляя ссылку, как раз и пропадает номер дома в адресе?

И плюс ко всему, какая польза для покупателя, скорлить эту последнюю крошку, если человек и так видит название товара?

И прежде чем дальше спросить, погуляйте по рынками Европы, США и Азии. Глазами увидите, что многое, что пропагандируется тут, там вообще не используется.

Поэтому у Вас и подпись, "дорого, богато", а про результат ни слова).

И вот, Вам, для примера, крупный интернет магазин, хорошо ранжируемый. Работает с 2016 года. (от балды зашел).

Ну если  скорлить и спроить  только )))

ХК это же не способ продублировать название товара ( в данном случае страницу товара). 

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

 

Link to comment
Share on other sites

В 23.08.2023 в 10:56, Tom сказал:

Ну если  скорлить и спроить  только )))

ХК это же не способ продублировать название товара ( в данном случае страницу товара). 

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

 

Все верно. Я говорю про смысл последней крошки. Ты уже там, переходить с нее на нее смысла нет. Поэтому и написал, ее можно удалить, не только ссылку, но и целиком. Про удаление предыдущих путей, я не говорил ни слова) Удобство сохраняется. И прошу обратить внимание, я не призываю. Я только говорю)

Edited by chixx
Link to comment
Share on other sites

 

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

 

В 23.08.2023 в 10:51, chixx сказал:

Вы отрицаете все)

 

Я всегда открыт для качественной новой информации, а голословные заявления непонятного типа без обоснований как-то не впечатляют.

SEO для вашего проекта (дорого, богато)

Link to comment
Share on other sites

В 23.08.2023 в 12:50, Nameless сказал:

Я всегда открыт для качественной новой информации, а голословные заявления непонятного типа без обоснований как-то не впечатляют.

Голословные? Это лихо) А на мои вопросы, между тем, Вы не ответили=) Но если Вам интересно, поищите эту информацию. Где и когда я ее прочел, я не вспомню, ибо отложилось и протестил. Но подскажу. Я мог это прочитать в книге DrMax, мог у Михаила Шакина. Мог в их трансляциях эту тему услышать и обсудить. Мог у Джона Мюллера в твитах увидеть рассуждения.

Но напомню, я высказал мнение, но Вы же, как говорите, "голословно" высказали противоположное. Я с радостью подискутирую. Но в нормальном ключе, а не в таком. Хорошего дня

Ну и раз эту тему обсуждаем. Слежу за одним человеком, который делает бесплатно качественные статьи с точки зрения UI/UX. Раз открыты к качественной информации, рекомендую его статьи в том числе и про breadcrumbs.

Вот Вам еще один пример. От Леруа

 

image.thumb.png.5e8d488aa6c44af52bd49b08a066c5eb.png

Edited by chixx
Link to comment
Share on other sites

В 23.08.2023 в 13:26, chixx сказал:

Голословные? Это лихо) А на мои вопросы, между тем, Вы не ответили=) Но если Вам интересно, поищите эту информацию. Где и когда я ее прочел, я не вспомню, ибо отложилось и протестил. Но подскажу. Я мог это прочитать в книге DrMax, мог у Михаила Шакина. Мог в их трансляциях эту тему услышать и обсудить. Мог у Джона Мюллера в твитах увидеть рассуждения.

Но напомню, я высказал мнение, но Вы же, как говорите, "голословно" высказали противоположное. Я с радостью подискутирую. Но в нормальном ключе, а не в таком. Хорошего дня

Ну и раз эту тему обсуждаем. Слежу за одним человеком, который делает бесплатно качественные статьи с точки зрения UI/UX. Раз открыты к качественной информации, рекомендую его статьи в том числе и про breadcrumbs.

Вот Вам еще один пример. От Леруа

 

image.thumb.png.5e8d488aa6c44af52bd49b08a066c5eb.png

 

Где-то когда-то читал, только хз где и когда, но в качестве аргумента для мелких лавочникох буду советовать брать все решения с топ10 магазинов по тайп-ин трафику, ну ясно понятно, взяли под козырек

SEO для вашего проекта (дорого, богато)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...