Сборка Атрибуты картинками-текст выбранного атрибута-tooltip атрибута с картинкой.

[djodofin]

Атрибуты картинками + активный атрибут, вывод текст выбранного атрибута и позиционирование, tooltip атрибута с картинкой и позиционирование.

Результат которого хотел добиться спрашивал здесь
Для просмотра ссылки Войди или Зарегистрируйся
и здесь
Для просмотра ссылки Войди или Зарегистрируйся
Но без ответа...

ВЫКЛАДЫВАЮ ОТВЕТ РЕШЕНИЯ

Атрибуты картинками + активный атрибут.

Задача:
Вывод атрибута картинкой убрать радио кнопи и текст а также добавление стилей при навидении и активном атрибуте.

Каждой групе атрибутов JoomShopping присваивает уникальный ID в виде block_attr_sel_ID. Мы будим использоватьм ID № 5 в виде (#block_attr_sel_5).

1)
Снять галочку "Отображение значений атрибутов вертикально" в настройках JoomShopping по пути:
Настройки > Товар > Отображение значений атрибутов вертикально

2)
В-css

/* Убераем radio кнопку у групы атрибутов с ID (#block_attr_sel_5) */

#block_attr_sel_5 input[type="radio"], #block_attr_sel_5 input[type="checkbox"] {
display: none !important;
}

/* Убераем текст у групы атрибутов с ID (#block_attr_sel_5) ЕСЛИ НАДО */

#sp-main-body-wrapper #sp-component-area #sp-component .productfull .product-details .detailsRight .prod_buttons .input-content .jshop_prod_attributes .select-color #block_attr_sel_5 span {
font-size: 0px;
}

/* Присваиваем АКТИВНЫЙ класс атрибутам с ID (#block_attr_sel_5) */

#block_attr_sel_5 input:checked + label {
display: block !important;
font-size: 14px;
border: solid 1px #d053e9;
}

/* Присваиваем класс атрибутам с ID (#block_attr_sel_5) */

span#block_attr_sel_5 {

}
span#block_attr_sel_5 span.input_type_radio .radio_attr_label img {
width: 30px !important;
height: 30px !important;
}
span#block_attr_sel_5 span.input_type_radio .radio_attr_label img:hover {
width: 28px !important;
height: 28px !important;
padding: 1px;
}

span#block_attr_sel_5 span.input_type_radio .radio_attr_label {
font-size: 14px;
border: solid 1px #ccc8c8;
padding: 1px 0px 1px 2px !important;
margin-right: -2px !important;
width: 32px !important;
}

span#block_attr_sel_5 span.input_type_radio .radio_attr_label:hover {
font-size: 14px;
border: solid 1px #d053e9;
padding: 1px 0px 1px 2px !important;
margin-right: -2px !important;
width: 32px !important;
}

Задача:
Вывод текст выбранного атрибута и позиционирование.

1)
Для этого используем аддон:
Joomshopping Addons: Attr Value Description Для просмотра ссылки Войди или Зарегистрируйся

Поле установки в админке JoomShopping при создании аттрибута в Опциях > Атрибуты, появяться дополнительные поля описания (их заполняем и их-же в дальнейшем будем выводить).

2)
В-css

/* Убираем с дисплея (attr_value_description) статус (display-none) */
.attr_value_description {
display: none;
}

/* Присваиваем АКТИВНОму классу (attr_value_description) статус (display-block, и позиционируем left-0 и top-0) */

input:checked + label .attr_value_description {
display: block !important;
font-size: 11px;
position:absolute;
left: 0;
top: 0;
}


3)
По пути:
/templates/ваш_шаблон/html/com_jshopping/product/product_default.php

Находим код отвечающий за атрибуты:

<span id='block_attr_sel_<?php print $attribut->attr_id?>'>
<?php print $attribut->selects?>
</span>

И ОБРАМЛЯЕМ ЭТОТ КОД В <div> СО СТИЛЕМ "position:relative;", ДОЛЖНО БЫТЬ ТАК:

<div style="width:auto; margin:auto; position:relative;">
<br \>
<span id='block_attr_sel_<?php print $attribut->attr_id?>'>
<?php print $attribut->selects?>
</span>
</div>

Задача:
Вывод tooltip атрибута с картинкой и позиционирование.

1)
JoomShopping по умолчанию не заполняет к атрибутам title и alt... Исправляем...
По пути:
/components/com_jshopping/tables/product.php

ЗАМЕНИТЬ

// attribut type radio

foreach($options as $k2=>$v2){
if ($v2->image) $options[$k2]->value_name = "<img src='".$jshopConfig->image_attributes_live_path."/".$v2->image."' alt='' /> ".$v2->value_name;
}

НА

// attribut type radio

foreach($options as $k2=>$v2){
if ($v2->image) $options[$k2]->value_name = "<img src='".$jshopConfig->image_attributes_live_path."/".$v2->image."' alt='".htmlspecialchars($v2->value_name)."' title='".htmlspecialchars($v2->value_name)."' /> ".$v2->value_name;
}

2)
ВЫВОДИМ tooltip ПРИ НАВЕДЕНИИ МЫШИ.
По пути:
/components/com_jshopping/tables/product.php

ЗАМЕНИТЬ

$radioseparator = '';
if ($jshopConfig->radio_attr_value_vertical) $radioseparator = "<br/>";
foreach($options as $k2=>$v2){
$options[$k2]->value_name = "<span class='radio_attr_label'>".$v2->value_name."</span>";
}

НА

$radioseparator = '';
if ($jshopConfig->radio_attr_value_vertical) $radioseparator = "<br/>";
foreach($options as $k2=>$v2){
$options[$k2]->value_name = "<span class='radio_attr_label tooltip-src'>".$v2->value_name."</span><span><span class='tooltip_img'>.$v2->value_name.</span></span>";
}


В-css

/* VSPLUVAIYSHIE OKNO вывод по умолчанию */

.tooltip-src{
cursor: pointer;
color:red;
}
.tooltip-src + span{
opacity:0;
transition:1s;
visibility:hidden;
position:absolute;
transform:translate(-50%,-70px);
pointer-events:none;
background-color:rgba(0,0,0,0.8);
color:white;
padding:4px;
}
.tooltip-src:hover + span{
opacity:1;
visibility:visible;
}
.tooltip_img img {
width: 80px;
height: 60px;
border: solid 1px #bdb8b8;
padding: 1px;
}


/* VSPLUVAIYSHIE OKNO KONEC */

/* Для отображения tooltip и вывода в нужной позиции ID (#block_attr_sel_5) */

span#block_attr_sel_5 .tooltip-src + span{
opacity:0;
transition:1s;
visibility:hidden;
position:absolute;
transform:translate(4%,-70px);
pointer-events:none;
background-color:rgba(0,0,0,0.8);
color:white;
padding:4px;
left: 0;
top: 0;
}
span#block_attr_sel_5 .tooltip-src:hover + span{
opacity:1;
visibility:visible;
}

/* Для отображения в tooltip текста ID (#block_attr_sel_5) */

.jshop_prod_attributes .select-color #block_attr_sel_5 span .tooltip_img {
font-size: 15px !important;
}



Задача:
ЕСЛИ НАДО УБРАТЬ tooltip

/* Убераем tooltip (всплывающая подсазка) у групы атрибутов с ID (#block_attr_sel_ID) */


span#block_attr_sel_5 .tooltip-src + span {
opacity: none !important;
visibility: none !important;
display: none !important;
}