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

Question

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

Форум поддержки » Вопросы и ответы

Добрый день! На сайте имеется несколько одинаковых товаров с разным литражом, сделал между ними перелинковку с помощью $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}

В карточке товара вызываю так:

4 ответа

+1

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

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

ответить
+1

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

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

ответить

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

**chikurov-seo** · Answer 1

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

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

**chikurov-seo** · Answer 2

Проверяете значение вашего параметра в 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>

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