Вывод свойств товара в виде кнопок с подсветкой выбранного свойства

В продолжение этой темы http://joomlaforum.ru/index.php/topic,276370.msg1378112.html#msg1378112

Сделал вместо выпадающего списка простые кнопки для выбора атрибута товара, после нажатия кнопка остается подсвеченной + динамически меняется цена.

components\com_virtuemart\themes\Ваша тема\templates\product_details\includes\addtocart_advanced_attribute.tpl

Заменяем все на этот код:

Код

<?php if( !defined( '_VALID_MOS' ) && !defined( '_JEXEC' ) ) die( 'Direct Access to '.basename(__FILE__).' is not allowed.' ); ?>
<style>
label:hover {
    background: #8B0000; /* Цвет фона при наведении */
    color: #fff; /* Цвет текста при наведении */
   }
  </style>
<?php
foreach($attributes as $attribute) { 		
    ?>
    <div class="vmAttribChildDetail" style="width:100%;text-align:left;margin:5px;">
        <label for="<?php echo $attribute['titlevar'] ?>_field"><?php echo $attribute['title'] ?></label>:
    </div>
    <div class="vmAttribChildDetail" style="float:left;width:100%;margin:3px;">
        
	<?php $labli=0; 
			foreach ( $attribute['options_list'] as $options_item ) : ?>
	        <?php if( isset( $options_item['display_price']) ) : ?>
	   <?php $labli++;?>
&nbsp;&nbsp;&nbsp;&nbsp;<label id="lb<?php echo $labli;?>" style="padding: 2px; border:1px solid #000;"><input type="radio" style="display:none;" id="<?php echo $attribute['titlevar'] ?>_field" name="<?php echo $attribute['titlevar'].$attribute['product_id'] ?>" value="<?php echo $options_item['base_var'] ?>" onclick="lablButColor(<?php echo $labli;?>); onclickButton('(<?php echo $options_item['sign'].$options_item['display_price'] ?>)', <?php echo $attribute['product_id'];?>)"<?php if($labli==0) {echo " checked";}?>><?php echo $options_item['base_value'] ?> <span id="<?php echo $options_item['base_var'] ?>" style="display:none">(<?php echo $options_item['sign'].$options_item['display_price'] ?>)</span></label> &nbsp;<?php If(($labli==4)||($labli==8)){ echo "<br /><br />";} ?>
            <?php else : ?>
            <input type="radio" style="margin-top: 15px;" id="<?php echo $attribute['titlevar'] ?>_field" name="<?php echo $attribute['titlevar'].$attribute['product_id'] ?>" value="<?php echo $options_item['base_var'] ?>"><?php echo $options_item['base_value'] ?>
	        <?php endif; ?> 
        <?php endforeach; echo "<br>";?> 
&nbsp;
    </div>
    <br style="clear:both;" />
    <script type="text/javascript">
var lablcount = <?php echo $labli;?>;
</script>
<?php 
} ?>

В components\com_virtuemart\themes\Ваша тема\templates\product_details\flypage_new.tpl

или в какой используете шаблон добавляем функцию (JavaScript)

Код

function lablButColor(x) {
var labchk="";
	for (var i=1;i<=lablcount ;i++ )
	{
		labchk=document.getElementById('lb'+i);
  		if (x==i) { labchk.style.background='#8B0000'; labchk.style.color='#fff'; }
	else { labchk.style.background=''; labchk.style.color='';  }
	}  
}

Пример работы http://www.pavlodar.ipsys.net

Цена будет меняться только если сделать все, что написано в теме, которая указана в начале поста

Настройки отображения товара Автор wectra	Ответов: 2 Просмотров: 7235	12.07.2017, 22:12:27 от wectra
Несколько изображений для товара/ Лупа для изображения/ Magic Zoom Автор antoha333	Ответов: 41 Просмотров: 30659	13.11.2015, 16:08:16 от sonics
Как реализовать на VirtueMart такую карточку товара? Автор AdmbVlad	Ответов: 0 Просмотров: 4914	14.10.2015, 17:01:55 от AdmbVlad
Вставить картинку в карточку товара через URL и создать его миниатюру Автор sashgera	Ответов: 8 Просмотров: 5262	14.02.2015, 21:12:46 от sashgera
Как изменить сортировку товара ? Автор Timer	Ответов: 0 Просмотров: 3286	21.01.2015, 23:49:28 от Timer

Вывод свойств товара в виде кнопок с подсветкой выбранного свойства - [VM1] Дизайн, оформление

Новости Joomla

Вышли релизы безопасности Joomla 6.1.3 и Joomla 5.4.8

👩‍💻 WT Otpravkapochtaru - библиотека сервиса Отправка Почты России для Joomla-разработчиков.

👩‍💻 В Joomla 6.2 появятся встроенный функционал мультикатегорий.

flashinfo

Вывод свойств товара в виде кнопок с подсветкой выбранного свойства

Похожие темы