Вывожу кастомные атрибуты через "Дополнительные параметры", как подсветить активный?

Добрый день! На сайте имеется несколько одинаковых товаров с разным литражом, сделал между ними перелинковку с помощью $product.params.key. Нажимая, посетитель переходит на карточку с другим литражом. Как выделить активный товар цветом например?

Код параметров в product.cart.html:

{foreach $product.params._litr as $p}
<div>
  <div>
    {$product.params._litr}
  </div>
    {foreach $product.params._1litr as $p}
      <a class="options__buttons-link litr-b" title="1 Литр" href="{$product.params._1litr}">1Л</a>
    {/foreach}    
    {foreach $product.params._4litr as $p}
      <a class="options__buttons-link litr-b" title="4 Литра" href="{$product.params._4litr}">4Л</a>
    {/foreach}     
  </div>
{/foreach}
В карточке товара вызываю так:

2 ответа

  • 1

    плагин "Группы товаров" посмотрите. Делает ровно то, что вы делаете. Только лучше.

    С ним вам гораздо проще будет перелинковывать товары. Достаточно будет указать на одном товаре, а не дублировать на всех товаров. И не придется потом руками дополнительные параметры исправлять, если какие-то товары будут сняты с продажи. По вашему вопросу: активный "фиктивный артикул" на витринах тоже будет выделен.

    • +1
      Axex Yexel Axex Yexel 18 августа 2020 18:18 #

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

  • 1

    Проверяете значение вашего параметра в URL текущей страницы. Если вхождение есть, добавляете класс, например, options__buttons-link_active. Для класса добавляете стили.

    Код (некрасивый) примерно такой:

    {foreach $product.params._litr as $p}
      <div>
        <div>
          {$product.params._litr}
        </div>
        {foreach $product.params._1litr as $p}
          <a class="options__buttons-link litr-b{if strpos($wa->currentUrl(false), {$product.params._1litr})} options__buttons-link_active{/if}" title="1 Литр" href="{$product.params._1litr}">1Л</a>
        {/foreach}    
        {foreach $product.params._4litr as $p}
          <a class="options__buttons-link litr-b{if strpos($wa->currentUrl(false), {$product.params._1litr})} options__buttons-link_active{/if}" title="4 Литра" href="{$product.params._4litr}">4Л</a>
        {/foreach}     
      </div>
    {/foreach}
    <style>
      .options__buttons-link_active {
          border: 1px solid #04954c;
          cursor: no-drop;
          background: #04954c1f;
          box-shadow: 0 0 4px #04954c;
          border-radius: 10px;
          padding: 3px 8px;
      }
    </style>

    Сильный костыль. Неудобно будет управлять ссылками в дальнейшем. Не мучайтесь, купите плагин)

    • +1
      Axex Yexel Axex Yexel 19 августа 2020 12:47 #

      Спасибо за ответ! Что-то подобное пробовал реализовать. Внедрил Ваше предложение, но почему-то класс вообще не определяется

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

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