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

[hovo]

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

 

Edited August 22, 2023 at 08:20 AM by hovo

[AlexDW]

добавьте в css

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

[hovo]

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

добавьте в css

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

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

Edited August 22, 2023 at 10:38 AM by hovo

[hovo]

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

добавьте в css

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

Тут?

/catalog/view/theme/default/stylesheet/stylesheet.css

[AlexDW]

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

[hovo]

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

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

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

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

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

stylesheet.txt

[chixx]

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

[AlexDW]

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

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

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

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

 

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

[Tom]

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

/*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;
	}
}

 

[hovo]

Спасибо большое, Tom. Обязательно попробую.

[Nameless]

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

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

 

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

[chixx]

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

 

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

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

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

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

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

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

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

 

Edited August 23, 2023 at 07:52 AM by chixx

[Tom]

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

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

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

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

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

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

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

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

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

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

 

[chixx]

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

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

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

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

 

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

Edited August 23, 2023 at 08:01 AM by chixx

[Nameless]

 

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

 

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

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

 

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

[chixx]

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

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

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

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

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

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

 

Edited August 23, 2023 at 10:33 AM by chixx

[Nameless]

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

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

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

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

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

 

 

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