Всем привет! Ребят, подскажите плиз как добраться через код 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 %} А я хочу сделать вывод для одной опции (размера) - квадрат с цифрой внутри. Для второй опции (цвет) - кружок и название цвета выводить только при нажатие на цвет (как подсказку). Сейчас же у меня получается все криво (скрин во вложение).
Код: <div id="input-option{{ option.product_option_id }}"> это всегда уникально. На него и цепляйтесь. Покажите сайт.
Спасибо за ответ. Сайт находится на локальном сервере. Пока он в разработке. Вначале я тоже думал, что можно через product_option_id обратиться. Но так как товаром много у каждого получается свой id. Т.е. для конкретно этой странице (этого товара) я могу добраться до нужных опций. Но когда я захожу на сраницу другого товара, скажем другого платья, то он имеет другой id и правила правила css которые я прописал не срабатывают. С учетом того что товаров у меня много прописать универсальное правило у меня не получилось. В примере что я прислал в скриншоте ранее там стоит id 242. У другого товара он будет 244 и т.д.
В массиве есть option_id который указывает на id опции. Он одинаков везде. То что вам показали это id товара вроде..
В котором массиве? В HTML разметке? Или в php нужно смотреть. Извините я тупой просто) Если смотреть на блок где эти опции выводятся через инспетор, то для блока с выдом цвета на одной странице товара присвоин ID - id="input-option244" На странице с другим товаром этот же блок уже имеет другой id. Возможно, что я уже повторяюсь. Но я там не вижу нигде других ID, которые были бы родителями этих блоков к которым я бы смог обратится. И вот сам код этого блока: 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>
попробуйте вывести {{ option.option_id}} и посмотрите.. Ну а вообще в css есть много средств, даже фильтр по атрибуту. Но вам достаточно просто выбрать по счету, если у вас везде одно и тоже https://webref.ru/css/nth-child HTML: #product .form-group:nth-child(3) { background: #000; } пример с шаблона по умолчанию
Понял. Спасибо! Попробую как только разберусь с новой проблемой. У меня файл product.twig почему то не обновляется. Я вношу туда изменения на сайте ничего не меняется. Кеш обновлял. Если удалить этот файл из моего шаблона ../catalog/theme/{мой шаблон}/template/product, то отображется дефолтный файл product.twig. Если взять этот дефолтный файл и закинуть в папку с моей темой ../product/, то на странице отображается не дефолтный файл, а тот, что я удалил. Такое впечатление, что он откуда то подтягивается. Даже если создать пустой файл product.twig, то мне все равно показывает сайт мою старую разметку (не дефолтную, т.е. файла который я удалил). Хотя сам файл пустой. Причем если редактировать любой другой файл, например home или catalog.twig, то все изменения срабатывают. Уже сервак перезапускал... Не знаю чего делать)
Может вы путаете кеш модификаторов и кеш твиг. Читаем доку внимательнее. Все же тут расписано на сайте.
ID у этой опции выводится цифрой. А можно сделать, чтоб оно выводилось с буквой вначале или в конце? Иначе у меня id выводится цифрой (в моем случае #11, но обратиться к нему не получается.
Так Вы вроде опытный В чем именно сложность? Прямо в шаблоне есть же примеры <?php echo PHP: <?php echo $option['product_option_id']; ?>
Да я в 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 опции определённого товара. Вот в этом и сложность
Понял что нужно. Тогда смотрим в контроллер и выбираем нужное 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'] );
Блин, точно, вот же он PHP: 'option_id' => $option['option_id'], и результат PHP: <?php echo $option['option_id']; ?> Ну да, вчера ночью наверно был уставший, вот и тупил ))) Спасибо большое