В стандартном шаблоне карточки товара есть такой код для вывода дополнительных картинок к товару в зависимости от выбранного цвета:
Генерит вот такой HTML:
То ест генерит стольо дивов, сколько имеется у товара цветов, дивам, дивы с доп картинками товара, которые не нужно отображать попросту скрываются с помощью style="display: none;".
Это неудобно для слайдеров, да и к чему перегружать страницу.
Посильно помогите, пожалуйста генерировать только нужный в данный момент div (соответствующий выбранному цвету товара),
Вот пример реализации:
Блок с выбором цвета - "Выберите цвет"
Блок с доп картинками - <div class="wrap_detail_pic_small".
Заранее благодарна!
| Код |
|---|
<? foreach ($arResult['OFFERS'] as $key => $arOneOffer)
{
if (!isset($arOneOffer['MORE_PHOTO_COUNT']) || 0 >= $arOneOffer['MORE_PHOTO_COUNT'])
continue;
$strVisible = ($key == $arResult['OFFERS_SELECTED'] ? '' : 'none');
?>
<div class="<? echo $strClass; ?>" id="<? echo $arItemIDs['SLIDER_CONT_OF_ID'].$arOneOffer['ID']; ?>" st yle="display: <? echo $strVisible; ?>;">
<div class="bx_slider_scroller_container">
<div class="bx_slide">
<ul st yle="width: <? echo $strWidth; ?>;" id="<? echo $arItemIDs['SLIDER_LIST_OF_ID'].$arOneOffer['ID']; ?>">
<?
foreach ($arOneOffer['MORE_PHOTO'] as &$arOnePhoto)
{
?>
<li data-value="<? echo $arOneOffer['ID'].'_'.$arOnePhoto['ID']; ?>" st yle="width: <? echo $strOneWidth; ?>; padding-top: <? echo $strOneWidth; ?>"><span class="cnt"><span class="cnt_item" st yle="background-image:url('<? echo $arOnePhoto['SRC']; ?>');"></span></span></li>
<?
}
unset($arOnePhoto);
?> |
| Код |
|---|
<div id="bx_117848907_341_slider_cont_340" class="bx_slider_conteiner" style=""> <div class="bx_slider_scroller_container"> <div class="bx_slide"> <ul id="bx_117848907_341_slider_list_340" style="width: 100%; margin-left: 0%;"> <li class="bx_active" style="width: 20%; padding-top: 20%" data-value="340_950"> <li style="width: 20%; padding-top: 20%" data-value="340_1058"> <li style="width: 20%; padding-top: 20%" data-value="340_951"> <li style="width: 20%; padding-top: 20%" data-value="340_954"> </ul> </div> </div> </div> <div id="bx_117848907_341_slider_cont_342" class="bx_slider_conteiner" style="display: none;"> <div class="bx_slider_scroller_container"> <div class="bx_slide"> <ul id="bx_117848907_341_slider_list_342" style="width: 100%;"> <li style="width: 20%; padding-top: 20%" data-value="342_956"> <li style="width: 20%; padding-top: 20%" data-value="342_957"> <li style="width: 20%; padding-top: 20%" data-value="342_958"> <li style="width: 20%; padding-top: 20%" data-value="342_959"> </ul> </div> </div> </div> |
Это неудобно для слайдеров, да и к чему перегружать страницу.
Посильно помогите, пожалуйста генерировать только нужный в данный момент div (соответствующий выбранному цвету товара),
Вот пример реализации:
Блок с выбором цвета - "Выберите цвет"
Блок с доп картинками - <div class="wrap_detail_pic_small".
Заранее благодарна!
