Jump to content
Sign in to follow this  
Neuro75

css для отображения опций в строку

Recommended Posts

Здравствуйте.

Для магазина обуви на ОС 2.3 пытаюсь сделать отображение размеров (опция) на странице товара в строку, в виде картинки, без радио-кнопки, с выделением картинки опции рамкой или еще как при выборе. Шаблон Moneymaker2.

В админке добавил опциям изображения цифр, вставил в пользовательский css:

#product .radio{
  position: relative;
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 10px; 
}

Теперь опции отображаются в строку.  Но как запретить отображать радио-кнопку и подпись опции, а также сделать рамку вокруг изображения при выборе опции не знаю.

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

Прошу помочь написать css или дать ссылку на модуль, который так делает.

Share this post


Link to post
Share on other sites

[type="radio"]{

display: none;

}

[type="radio"]:checked+img{ /* img или div в зависимости от того что у вас там идет */

border: 1px solid red;

border-radius: 5px;

}

Share this post


Link to post
Share on other sites

Здорово! Спасибо.

Радио кнопка пропала, рамка вокруг изображения опции появляется.

Но только вот они опять вертикально стали и подпись не пропала. Это можно как-то сделать?
 

Share this post


Link to post
Share on other sites

Понял, что только css вопрос не решить.

В дополнение к указанным выше значениям css, нашел в catalog/view/theme/moneymaker/template/product/product.tpl кусок, который отвечает за вывод опции:

                      <div class="radio">
                        <label>
                          <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
                          <?php if ($option_value['image']) { ?>
                          <img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" />
                          <?php } ?>
                          <?php echo $option_value['name']; ?>
                          <?php if ($option_value['price']) { ?>
                          (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                          <?php } ?>
                        </label>
                      </div>

удалил в нем

 <?php echo $option_value['name']; ?>

получилось

                      <div class="radio">
                        <label>
                          <input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
                          <?php if ($option_value['image']) { ?>
                          <img src="<?php echo $option_value['image']; ?>" alt="<?php echo $option_value['name'] . ($option_value['price'] ? ' ' . $option_value['price_prefix'] . $option_value['price'] : ''); ?>" class="img-thumbnail" />
                          <?php } ?>

                          <?php if ($option_value['price']) { ?>
                          (<?php echo $option_value['price_prefix']; ?><?php echo $option_value['price']; ?>)
                          <?php } ?>
                        </label>
                      </div>

Теперь вся задача решена, кроме вывода изображений опций в строку, а не вертикально. Радио-кнопка и имя опции не отображается, сами они представлены кликабельными изображениями.

Полагаю, что нужно как-то указать выводить опции в таблице, но как - не знаю, не силен в php. Кроме того, задача осложняется тем, что количество доступных опций (в моем случае - имеющиеся в наличии размеры) у товара разное и варьируется от 1 до 10-12.

Прошу помочь разместить опции в строку. В идеале - в строки по пять.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.