Стилизация вывода опций на старинцы товара

Тема в разделе "Дизайн, оформление и шаблоны", создана пользователем BulletEMF, 10 сен 2018.

  1. BulletEMF

    BulletEMF Пользователь

    Сообщения:
    32
    Симпатии:
    3
    Всем привет!
    Ребят, подскажите плиз как добраться через код CSS до стилизации опций на странице товара?
    У меня есть два параметра для товара: цвет и размер. Оба задал через админку. К опции цвет еще подтянул картинку.
    Если смотреть product.twig, то там обащая разметка идет. Я не могу понять как тут добраться до нужной мне опции. Если я меняю что-то в CSS, то изменения сразу применяются ко всем радиокнопкам.

    HTML:
              {% if option.type == 'radio' %}
              <div class="form-group{% if option.required %} required {% endif %}">
                <label class="control-label">{{ option.name }}</label>
                <div id="input-option{{ option.product_option_id }}">
                  {% for option_value in option.product_option_value %}
                  <div class="radio option-radio">
                    <label>
                      <input type="radio" class="option-radio__input" name="option[{{ option.product_option_id }}]" value="{{ option_value.product_option_value_id }}" />
                      {% if option_value.image %} <img src="{{ option_value.image }}" alt="{{ option_value.name }} {% if option_value.price %} {{ option_value.price_prefix }} {{ option_value.price }} {% endif %}" class="img-thumbnail option-radio__img" />
                      {% endif %}               
                      <span class="option-radio__text">  {{ option_value.name }}
                      {% if option_value.price %}
                      ({{ option_value.price_prefix }}{{ option_value.price }})
                      {% endif %}
                    </span>
                    </label>
                  </div>
                {% endfor %} </div>
              </div>
              {% endif %}
    А я хочу сделать вывод для одной опции (размера) - квадрат с цифрой внутри.
    Для второй опции (цвет) - кружок и название цвета выводить только при нажатие на цвет (как подсказку). Сейчас же у меня получается все криво (скрин во вложение).

    вава.jpg
     
  2. Ravilr

    Ravilr Специалист

    Сообщения:
    3.863
    Симпатии:
    1.059
    Код:
    <div id="input-option{{ option.product_option_id }}">
    это всегда уникально. На него и цепляйтесь. Покажите сайт.
     
  3. BulletEMF

    BulletEMF Пользователь

    Сообщения:
    32
    Симпатии:
    3
    Спасибо за ответ. Сайт находится на локальном сервере. Пока он в разработке.
    Вначале я тоже думал, что можно через product_option_id обратиться. Но так как товаром много у каждого получается свой id. Т.е. для конкретно этой странице (этого товара) я могу добраться до нужных опций. Но когда я захожу на сраницу другого товара, скажем другого платья, то он имеет другой id и правила правила css которые я прописал не срабатывают. С учетом того что товаров у меня много прописать универсальное правило у меня не получилось.
    В примере что я прислал в скриншоте ранее там стоит id 242. У другого товара он будет 244 и т.д.
     
  4. karpov

    karpov Продвинутый пользователь

    Сообщения:
    1.518
    Симпатии:
    241
    В массиве есть option_id который указывает на id опции. Он одинаков везде. То что вам показали это id товара вроде..
     
  5. BulletEMF

    BulletEMF Пользователь

    Сообщения:
    32
    Симпатии:
    3
    В котором массиве? В HTML разметке? Или в php нужно смотреть. Извините я тупой просто)
    Если смотреть на блок где эти опции выводятся через инспетор, то для блока с выдом цвета на одной странице товара присвоин ID - id="input-option244"
    На странице с другим товаром этот же блок уже имеет другой id. Возможно, что я уже повторяюсь. Но я там не вижу нигде других ID, которые были бы родителями этих блоков к которым я бы смог обратится.
    id-product.jpg id2.jpg

    И вот сам код этого блока:
    HTML:
    <label class="control-label">Цвет</label>
    <div id="input-option244"> <!-- НОМЕР ID ВЕЗДЕ РАЗНЫЙ ПОЛУЧАЕТСЯ -->
      <div class="radio option-radio">
        <label style="opacity: 1;">
          <input class="option-radio__input" name="option[244]" value="93" type="radio">
          <img src="//localhost:3000/image/cache/catalog/green-30x30.png" alt="зеленый " class="img-thumbnail option-radio__img">
    
          <span class="option-radio__text">  зеленый
    
          </span>
        </label>
      </div>
      <div class="radio option-radio">
        <label style="opacity: 1;">
          <input class="option-radio__input" name="option[244]" value="92" type="radio">
          <img src="//localhost:3000/image/cache/catalog/yellow-30x30.png" alt="желтый " class="img-thumbnail option-radio__img">
    
          <span class="option-radio__text">  желтый
    
          </span>
        </label>
      </div>
      <div class="radio option-radio">
        <label style="opacity: 1;">
          <input class="option-radio__input" name="option[244]" value="91" type="radio">
          <img src="//localhost:3000/image/cache/catalog/blue-30x30.png" alt="голубой " class="img-thumbnail option-radio__img">
    
          <span class="option-radio__text">  голубой
    
          </span>
        </label>
      </div>
      <div class="radio option-radio">
        <label style="opacity: 1;">
          <input class="option-radio__input" name="option[244]" value="94" type="radio">
          <img src="//localhost:3000/image/cache/catalog/black-30x30.png" alt="черный " class="img-thumbnail option-radio__img">
    
          <span class="option-radio__text">  черный
    
          </span>
        </label>
      </div>
    </div>
    
     
  6. karpov

    karpov Продвинутый пользователь

    Сообщения:
    1.518
    Симпатии:
    241
    попробуйте вывести
    {{ option.option_id}} и посмотрите..

    Ну а вообще в css есть много средств, даже фильтр по атрибуту. Но вам достаточно просто выбрать по счету, если у вас везде одно и тоже https://webref.ru/css/nth-child
    HTML:
    #product .form-group:nth-child(3) {
    
        background: #000;
    
    }
    пример с шаблона по умолчанию
     
  7. BulletEMF

    BulletEMF Пользователь

    Сообщения:
    32
    Симпатии:
    3
    Понял. Спасибо! Попробую как только разберусь с новой проблемой.
    У меня файл product.twig почему то не обновляется. Я вношу туда изменения на сайте ничего не меняется. Кеш обновлял.
    Если удалить этот файл из моего шаблона ../catalog/theme/{мой шаблон}/template/product, то отображется дефолтный файл product.twig.
    Если взять этот дефолтный файл и закинуть в папку с моей темой ../product/, то на странице отображается не дефолтный файл, а тот, что я удалил. Такое впечатление, что он откуда то подтягивается.
    Даже если создать пустой файл product.twig, то мне все равно показывает сайт мою старую разметку (не дефолтную, т.е. файла который я удалил). Хотя сам файл пустой.
    Причем если редактировать любой другой файл, например home или catalog.twig, то все изменения срабатывают. Уже сервак перезапускал... Не знаю чего делать)
     
  8. karpov

    karpov Продвинутый пользователь

    Сообщения:
    1.518
    Симпатии:
    241
    Может вы путаете кеш модификаторов и кеш твиг. Читаем доку внимательнее. Все же тут расписано на сайте.
     
  9. BulletEMF

    BulletEMF Пользователь

    Сообщения:
    32
    Симпатии:
    3
    Прикол) Почитал. Спасибо! Эту задачу с кешом я решил.
     
  10. BulletEMF

    BulletEMF Пользователь

    Сообщения:
    32
    Симпатии:
    3
    Сделал. Спасибо! Прокачали! )
     
  11. BulletEMF

    BulletEMF Пользователь

    Сообщения:
    32
    Симпатии:
    3
    ID у этой опции выводится цифрой. А можно сделать, чтоб оно выводилось с буквой вначале или в конце? Иначе у меня id выводится цифрой (в моем случае #11, но обратиться к нему не получается.
     
  12. Allaur

    Allaur Пользователь

    Сообщения:
    63
    Симпатии:
    2
    Подскажите пожалуйста как этот параметр отобразить в версии 2.3.х.
     
  13. Ravilr

    Ravilr Специалист

    Сообщения:
    3.863
    Симпатии:
    1.059
    Так Вы вроде опытный :) В чем именно сложность? Прямо в шаблоне есть же примеры <?php echo
    PHP:
    <?php echo $option['product_option_id']; ?>
     
    Allaur нравится это.
  14. Allaur

    Allaur Пользователь

    Сообщения:
    63
    Симпатии:
    2
    Да я в php не очень то и опытен )

    PHP:
    <?php echo $option['product_option_id']; ?>
    Так выводится ID опции, которое у каждого товара индивидуальное. А тут вроде речь идёт о выводе ID опции, которая указана в
    PHP:
    admin/index.php?route=catalog/option/edit&token=jVnQfl5BR0z2mesl1rtuYeXj9rakf3LX&option_id=113
    Вот это опция у меня под названием База А и она выводится во многих товарах. ID этой опции id=113
    Вот мне необходимо во всех товарах сделать вывод этого ID с привязкой его к вёрстке типа
    PHP:
    <div id="option-113">
    Для отдельной стилизации разных опций.
    а код
    PHP:
    <?php echo $option['product_option_id']; ?>
    выводит не id базовой опции, а id опции определённого товара.
    Вот в этом и сложность :)
     
    Последнее редактирование: 15 фев 2023
  15. Ravilr

    Ravilr Специалист

    Сообщения:
    3.863
    Симпатии:
    1.059
    Понял что нужно. Тогда смотрим в контроллер и выбираем нужное ;)
    PHP:
                    $data['options'][] = array(
                        
    'product_option_id'    => $option['product_option_id'],
                        
    'product_option_value' => $product_option_value_data,
                        
    'option_id'            => $option['option_id'],
                        
    'name'                 => $option['name'],
                        
    'type'                 => $option['type'],
                        
    'value'                => $option['value'],
                        
    'required'             => $option['required']
                    );
     
    Allaur нравится это.
  16. Allaur

    Allaur Пользователь

    Сообщения:
    63
    Симпатии:
    2
    Блин, точно, вот же он
    PHP:
     'option_id'            => $option['option_id'],
    и результат
    PHP:
    <?php echo $option['option_id']; ?>
    Ну да, вчера ночью наверно был уставший, вот и тупил )))
    Спасибо большое :)