1. Уважаемые пользователи, прежде чем ответить в теме или создать новую,
    внимательно ознакомьтесь с правилами раздела

    Кому лень работать или руки не оттуда - пользуйтесь услугами специалистов
  2. Не задавайте глупых вопросов "Посоветуйте какой-нибудь компонент.."

    Есть JED!!! Ищите там!!!

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

Тема в разделе "JoomShopping", создана пользователем djodofin, 29 окт 2018.

Информация :
  • Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с правилами раздела
  • Не задавайте глупых вопросов "Посоветуйте какой-нибудь компонент.." Есть JED!!! Ищите там!!!
  • Аналоги ищите там же - на JED!!!
  • Новая версия? - У кого будет - тот выложит!
  1. djodofin

    djodofin

    Регистр.:
    6 июл 2017
    Сообщения:
    233
    Симпатии:
    97
    Атрибуты картинками + активный атрибут, вывод текст выбранного атрибута и позиционирование, tooltip атрибута с картинкой и позиционирование.

    Результат которого хотел добиться спрашивал здесь
    https://www.nulled.cc/threads/299525/
    и здесь
    https://www.nulled.cc/threads/299227/
    Но без ответа...

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

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

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

    Каждой групе атрибутов 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 https://www.webdesigner-profi.de/joomla-webdesign/shop/addons/attr-value-description.html?lang=en

    Поле установки в админке 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;
    }
     

    Вложения:

    Последнее редактирование: 29 окт 2018
    rsvyatina нравится это.