Всплывающие описание характеристики Есть решение

Здравствуйте! Подскажите пожалуйста как можно добавить описание характеристики товара? Например есть 3 марки нержавеющей стали(см. ниже) как добавить краткое описание при наведении или лучше как поставить знак "?" при нажатии на который клиент может получить краткую справку здесь и сейчас, не ища по сайту эту справку(описание)?

10 ответов

  • 2
    Алексей Webasyst 2 февраля 2020 12:58 # Решение

    Посмотрите дополнительные плагины https://www.webasyst.ru/store/...

    • +1
      Александр Смит Александр Смит 6 февраля 2020 11:07 #

      Связывался с разработчиками плагинов по Вашей ссылке, в ответ получил что не подойдут их продукты для данной задачи. Единственный кто не ответил и более подходящий это разработчик плагина "Всплывающие подсказки характеристик". 

      Может Вы пользовались этим плагином или просто знаете, иконка подсказка появится у наименования характеристики с лева в низу, а продублируется ли она в поле выбора так же рядом с наименованием хар-ки?(см. скрин выше)

      • +2
        replicant replicant 6 февраля 2020 14:43 #

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

        Дело в том, что там используется вставка кода

        {shopFeaturestipsPlugin::ShowFeatureTip($featurestips, $f_code)}

        в нужное вам место в шаблонах. Куда и как вставите там и показываться будет. У плагина есть подробная инструкция и после установки она появится в админке.

        Если у вас характеристики в карточке товара выводятся в двух местах, то очевидно вставка нужна не одна.

        У меня характеристики скрыты во одной из вкладок и нормально все работает. Важно сделать вставку в цикл вывода хар-к.

        • +1
          Александр Смит Александр Смит 6 февраля 2020 14:48 #

          Понял, Спасибо

          • +2
            replicant replicant 6 февраля 2020 16:36 #

            Посмотрел ваш сайт внимательно. У вас в правом блоке нет характеристик, если выражаться правильным языком. Вы там насоздавали артикулов разных подобных значениям характеристик вроде как и сделали варианты покупки, но не характеристики. Короче говоря всё надо смотреть на месте.

            Смотря как у вас там выводятся эти надписи типа Внутренний диаметр, Марка стали и т.п. в шаблонах. Они должны выводиться в цикле перебора характеристик. Тогда плагин сможет проставить вам подсказки там, где вы хотите. Если эти надписи выведены как-то иначе, то надо уже много думать как скрестить ежа с ужом.

            Про левый блок - таблицу хар-к все понятно. Там именно хар-ки и там запросто с полпинка, как говорится, заведётся. Но это всё равно лучше, чем ничего.

            • +1
              Александр Смит Александр Смит 8 февраля 2020 13:05 #

              1. Вопросик добавился, но немного кривенько, увеличил пробел между строк.

              2.  В области product.cart надписи выводятся вот так:

              <p><strong>{$f.name}</strong></p> в оригинале этого нет и вопроса такого не задавал тут, значит осмелюсь предположить, что самодеятельностью занимался, методом "тыка"

              <div class="s-options-wrapper">
                                      {if $theme_settings.selectable_features_control == "inline"}
                                          {foreach $features_selectable as $f}
                                          <p><strong>{$f.name}</strong></p>
                                              <div class="inline-select {if $f.type == 'color'}color{/if}">
                                                  {foreach $f.values as $v_id => $v}
                                                      {if !isset($default_sku_features[$f.id])}{$default_sku_features[$f.id]=$v_id}{/if}
                                                      <a {if $v_id == ifset($default_sku_features[$f.id])}class="selected"{/if} data-sku-id="{$f.id}:{$v_id};" data-value="{$v_id}" href="javascript:void(0);" style="{if $f.type == 'color'}{$v->style}{/if}">
                                                          {if $f.type == 'color'}
                                                              <span class="color_name">{strip_tags($v)}</span>
                                                          {else}
                                                              {$v}
                                                          {/if}
                                                      </a>
                                                  {/foreach}
                                                  <input type="hidden" data-feature-id="{$f.id}" class="js-sku-feature sku-feature" name="features[{$f.id}]" value="{ifset($default_sku_features[$f.id])}">
                                              </div>
                                          {/foreach}

              Нужно ли тут ежа с ужом скрещивать или просто куда то вставить код плагина?

              P.S. пойду пока экспериментировать(копипастить) 

              • +2
                replicant replicant 8 февраля 2020 16:47 #

                Чтобы было красиво надо переделать в css https://celsiusperm.ru/wa-apps...

                .featurestips_wrapper {
                    margin: 2px 0 0 6px; - заменить первое значение 2px на 0
                    display: inline-block;
                    vertical-align: top; - убрать
                    position: relative;
                    font: inherit;
                    font-weight: normal; - убрать
                    line-height: 1.3;  - убрать
                }

                И будет вот так 

                • +1
                  Александр Смит Александр Смит 8 февраля 2020 17:22 #

                  featurestips.css не могу найти. может в облаке нет такого. если я правильно понял в облаке не все файлы доступны

                  • +1
                    replicant replicant 8 февраля 2020 19:15 #

                    Ох уж это облако. Всё время забываю про него.

                    Тогда надо прописывать перекрывающие свойства стилей через !important в каком-нибудь custom.shop.css вот прямо так как есть в кусочке кода ниже

                    .featurestips_wrapper {
                    margin-top: 0 !important;
                    vertical-align: baseline !important;
                    line-height: inherit !important;
                    }


Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите