Skip to content

Instantly share code, notes, and snippets.

@EscApp2

EscApp2/css.css

Last active June 10, 2025 10:46
Show Gist options
  • Save EscApp2/ec0b6c06560f889a13830d37827c7eb2 to your computer and use it in GitHub Desktop.
Save EscApp2/ec0b6c06560f889a13830d37827c7eb2 to your computer and use it in GitHub Desktop.
Download ZIP
Create custom sku tree selecter v3
Raw
css.css
.js_custom_sku_error_text{
font-size: 16px;
line-height: 20px;
font-weight: 400;
letter-spacing: 0.3px;
color: red;
margin-bottom:10px;
display:none;
}
.js_custom_sku_error_text.show{
display:inherit;
}
.product-data-sizes__name_wrapp{
isplay: flex;
flex-direction: row;
justify-content: space-between;
}
.property_sku_single_block .links,
.property_sku_single_block .name{
font-size: 16px;
line-height: 20px;
font-weight: 400;
letter-spacing: 0.3px;
text-align: left;
text-decoration: none;
}
.product-data__radio-sizes{
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1rem 0.5rem;
width: 100%;
padding: 1rem 0px;
}
.radio-size_detail.disable,
.radio-size_detail.missing{
opacity:0.5;
}
.css_radio-sizes__label{
display:block;
padding:5px 0;
cursor: pointer;
text-align: center;
background: transparent;
border: 1px solid #404040;
color: #000;
border-radius:5px;
}
.css_radio-sizes__label:hover,
.css_radio-sizes__label.active{
background: #404040;
color: rgb(255, 255, 255);
}
.css_radio-sizes__label input{
display:none;
}
.property_sku_single_block{
width: 100%;
display: flex;
flex-direction: column;
padding: 0px 0px 1rem;
}
.radio-size__text{
font-size: 16px;
line-height: 20px;
}
Raw
element_template.php
<?
$arData = $arResult;
$ComponentID = "bx_custom_sku_".$arResult['ID']."_".randString(10);
$arJsParams = array(
"ID" => $ComponentID,
"CONTAINER" => "#".$ComponentID, // container selector
//"DEFAULT_OFFER_ID"=>array_values($arResult['OFFERS'])[0]['ID'],
"ORIGIN_OBJ_CATALOG_ELEMENT_NAME"=>$arItemIDs["strObName"],
"HIDE_IF_OFFER_NOT_FIND" => ".offer_buy_block, .main_item_wrapper .flex_custom_btns, .element_detail.offer_quantity_block, .subscribe",
//"ALWAYS_SELECT_OFFER"=>"Y",
"NOT_AVAILABLE_CLICKABLE"=>"Y",
"SET_FIRST_ACTIVE_AS_DEFAULT"=>"Y",
);
?>
<?if(is_array($arResult['SIMILAR_PRODUCT']) && count($arResult['SIMILAR_PRODUCT'])>0){?>
<div class="similar_color_products" >
Цвет:
<?foreach($arResult['SIMILAR_PRODUCT'] as $similarArItem){
$not_color = false;
if($similarArItem['COLOR']){?>
<div class="color_item <?=$similarArItem['CURRENT']?"active":"";?>">
<?$style="";
if($similarArItem['COLOR']['UF_FILE']){
$style="background-image:url('". $similarArItem['COLOR']['UF_FILE']['SRC']."'); background-repeat: no-repeat; background-size: cover;";
}elseif($similarArItem['COLOR']['UF_COLOR']){
$style="background-color:". $similarArItem['COLOR']['UF_COLOR'].";";
}
if($similarArItem['COLOR']['NOT_COLOR']){
$not_color = true;
}
$href = $similarArItem['DETAIL_PAGE_URL'];
if($similarArItem['CURRENT']){
$href = "javascript:void(0)";
}
?>
<a href="<?=$href?>"
class="color-block <?=$arResult['SIMILAR_PRODUCT_IS_BIG']?"big":"";?>"
style="<?=$style?>"
title="<?=$similarArItem['COLOR']['UF_NAME']?>"></a>
</div>
<?}
}?>
</div>
<?}?>
<div id="<?=$ComponentID?>">
<input class="js_custom_sku_offer_id" type="hidden" value="" >
<div class="js_custom_sku_error_text no-choose" >
Выберите товар
</div>
<?php
$i =0;
foreach($arResult['AR_CUSTOM_SKU']['ROWS'] as $oneSelect){
$i++;
?>
<? $intCountSizes = count($oneSelect['OPTIONS']);
$NAME = GetMessage('JNS__SEPARATE_SKU_TREE__PROPERTY_'.$i);
if(empty($NAME)){
$NAME = $oneSelect['NAME'];
}
?>
<div class="property_sku_single_block card-product__wrapper-option">
<div class="product-data-sizes__name_wrapp ">
<span class="name"><?=$NAME?></span>:
</div>
<div class="product-data-sizes__wrapp _flex ">
<div class="product_sizes ">
<div class="p-0 js_custom_sku_tree " data-prop-id="<?=$oneSelect['ID']?>" >
<div class="sizes-swiper_<?=$i?>">
<div id="sizesSlider_<?=$i?>" class="radio-sizes product-data__radio-sizes">
<?
foreach ($oneSelect['OPTIONS'] as $key => $arOption) {
$size_orig = $arOption['VALUE'];
$size_orig = mb_strtoupper($size_orig);
$size_orig_strlower = mb_strtolower($size_orig);?>
<div class="swiper-slide radio-size radio-size_detail
js_custom_sku_tree_option
js-popup-separate-size__show
" >
<label class="css_radio-sizes__label js_radio-sizes__label">
<input type="radio" name="product-data-size_<?=$oneSelect['ID']?>" value="<?= $arOption['ID'] ?>">
<span class="radio-size__text">
<span class="orig"> <?= $size_orig ?></span>
</span>
</label>
</div>
<?}?>
</div>
</div>
</div>
</div>
</div>
</div>
<?
}
?>
</div>
<?php
foreach($arData['OFFERS'] as &$arOffer){
unset($arOffer['PROPERTIES']);
}
?>
<script>
$(document).ready(function(){
if($.isEmptyObject(window.ObjNAVcustomSKUTree)){
window.ObjNAVcustomSKUTree = {};
}
var obj = window.NAVcustomSKUTree.Init(
<?=CUtil::PhpToJSObject($arJsParams);?>,
<?=CUtil::PhpToJSObject($arResult['AR_CUSTOM_SKU']);?>,
<?=CUtil::PhpToJSObject(array_column($arData['OFFERS'], null, 'ID'));?>);
obj.Exec();
window.ObjNAVcustomSKUTree.obj_<?=$ComponentID;?> = obj;
});
</script>
Raw
element_template_v2.php
<?
$arData = $arResult;
$ComponentID = "bx_custom_sku_".$arData['ID']."_".randString(10);
$arJsParams = array(
"ID" => $ComponentID,
"CONTAINER" => "#".$ComponentID, // container selector
//"DEFAULT_OFFER_ID"=>array_values($arResult['OFFERS'])[0]['ID'],
//"ORIGIN_OBJ_CATALOG_ELEMENT_NAME"=>$arItemIDs["strObName"],
//"HIDE_IF_OFFER_NOT_FIND" => ".offer_buy_block, .main_item_wrapper .flex_custom_btns, .element_detail.offer_quantity_block, .subscribe",
//"ALWAYS_SELECT_OFFER"=>"Y",
//"NOT_AVAILABLE_CLICKABLE"=>"Y",
//"SET_FIRST_ACTIVE_AS_DEFAULT"=>"Y",
"ON_OFFER_CHANGE_CALLBACK"=>"AsproOfferChange",
"ON_TREE_CHANGE_CALLBACK"=>"AsproTreeChange",
"DISABLE_ROWS"=>"Y",
);
?>
<div id="<?=$ComponentID?>">
<input class="js_custom_sku_offer_id" type="hidden" value="" >
<div class="js_custom_sku_error_text no-choose" >
Предложение недоступно, выберите другие параметры
</div>
<?php
$i =0;
foreach($arResult['AR_CUSTOM_SKU']['ROWS'] as $oneSelect){
//pre($oneSelect);
$i++;
?>
<?
$NAME = GetMessage('JNS__SEPARATE_SKU_TREE__PROPERTY_'.$i);
if(empty($NAME)){
$NAME = $oneSelect['NAME'];
}
if($oneSelect['TYPE'] == "BLOCK"){
?>
<div class="property_sku_single_block card-product__wrapper-option">
<div class="product-data-sizes__name_wrapp bx_item_section_name">
<span class="name "><?=$NAME?></span>
</div>
<div class="product-data-sizes__wrapp _flex ">
<div class="product_sizes ">
<div class="p-0 js_custom_sku_tree " data-prop-id="<?=$oneSelect['ID']?>" >
<div class="sizes-swiper_<?=$i?>">
<div id="sizesSlider_<?=$i?>" class="radio-sizes product-data__radio-sizes">
<?
foreach ($oneSelect['OPTIONS'] as $key => $arOption) {
$size_orig = $arOption['VALUE'];
$size_orig = mb_strtoupper($size_orig);
$size_orig_strlower = mb_strtolower($size_orig);?>
<div class="swiper-slide radio-size radio-size_detail
js_custom_sku_tree_option
js-popup-separate-size__show
" >
<label class="css_radio-sizes__label js_radio-sizes__label">
<input type="checkbox" name="product-data-size_<?=$oneSelect['ID']?>" value="<?= $arOption['ID'] ?>">
<span class="radio-size__text">
<span class="orig"> <?= $size_orig ?></span>
</span>
</label>
</div>
<?}?>
</div>
</div>
</div>
</div>
</div>
</div>
<?
}elseif($oneSelect['TYPE'] == "SELECT"){
?>
<div class=" flex js_custom_sku_tree" data-prop-id="<?=$oneSelect['ID']?>" >
<div class="product-data-sizes__name_wrapp bx_item_section_name">
<span class="name "><?=$oneSelect['NAME']?></span>
</div>
<div class="select_wrap form-control">
<select >
<option value="">Выберите</option>
<?
foreach ($oneSelect['OPTIONS'] as $key => $option){
?>
<option value="<?= $option["ID"] ?>" class="js_custom_sku_tree_option">
<?= $option["NAME"] ?>
</option>
<?}?>
</select>
</div>
</div>
<?
}
}
?>
</div>
<?php
foreach($arData['OFFERS'] as &$arOffer){
unset($arOffer['PROPERTIES']);
}
?>
<script>
$(document).ready(function(){
if($.isEmptyObject(window.ObjNAVcustomSKUTree)){
window.ObjNAVcustomSKUTree = {};
}
var obj = window.NAVcustomSKUTree.Init(
<?=CUtil::PhpToJSObject($arJsParams);?>,
<?=CUtil::PhpToJSObject($arResult['AR_CUSTOM_SKU']);?>,
<?=CUtil::PhpToJSObject(array_column($arData['OFFERS'], null, 'ID'));?>);
obj.Exec();
window.ObjNAVcustomSKUTree.obj_<?=$ComponentID;?> = obj;
});
</script>
Raw
init.php
<?
if (!function_exists('createCustomSkuTree')) {
function createCustomSkuTree(&$arResult, $arParams, $arOption = array())
{
$arPropCodesOrIds = $arParams['OFFER_TREE_PROPS'];
$is_detail = false;
if (isset($arResult['ITEMS'])) {
$arResultList = $arResult['ITEMS'];
} else {
$is_detail = true;
$arResultList = array($arResult);
}
foreach ($arResultList as $itemKey => $arItem) {
$OFFERS_PROPS = array();
$arAvailable = array();
$arSort = array();
$arEnumListSort = $arEnumOrigList = $arEnumList = $arPropList = array();
foreach ($arItem['OFFERS'] as $arOffer) {
$arAvailable[$arOffer['ID']] = (bool)("Y" == $arOffer['PRODUCT']['AVAILABLE']);
$arSort[] = $arOffer['ID'];
if ($arOption['AVAILABLE_OFFERS'] && count($arOption['AVAILABLE_OFFERS']) > 0) {
if (!in_array($arOffer['ID'], $arOption['AVAILABLE_OFFERS'])) {
continue;
}
}
if ("Y" != $arOption['SHOW_NOT_AVAILABLE']) {
if ("N" == $arOffer['PRODUCT']['AVAILABLE']) {
continue;
}
}
//TODO resort
foreach ($arPropCodesOrIds as $arPropCodeOrId) {
foreach ($arOffer['PROPERTIES'] as $arProp) {
if ($arProp['CODE'] == $arPropCodeOrId
|| $arProp['ID'] == $arPropCodeOrId
) {
$arPropList[$arProp['ID']] = $arProp;
if ($arProp['VALUE_XML_ID']) {
$arEnumList[$arProp['ID']][$arOffer['ID']] = $arProp['VALUE_XML_ID'];
}
if ($arProp['VALUE_ENUM_ID']) {
$arEnumOrigList[$arProp['ID']][$arOffer['ID']] = $arProp['VALUE_ENUM_ID'];
} else {
//CHECK
$arEnumOrigList[$arProp['ID']][$arOffer['ID']] = $arProp['VALUE'];
}
if ($arProp['VALUE_SORT']) {
$arEnumListSort[$arProp['ID']][$arProp['VALUE_ENUM_ID']] = $arProp['VALUE_SORT'];
}
if (!empty($arProp['VALUE'])) {
$OFFERS_PROPS[$arProp['ID']][$arOffer['ID']] = $arProp['VALUE'];
}
break;
}
}
}
}
$arValToEnumOrigList = $arValToEnumList = $arList = $arOfferList = $arOffersProp = $arNewArray = array();
foreach ($OFFERS_PROPS as $prop_id => $arValues) {
asort($arValues);
foreach ($arValues as $offer_id => $val) {
$prop_val = abs(crc32($val));
$arNewArray[$prop_id][$prop_val][$offer_id] = $offer_id;
$arOffersProp[$prop_id][$offer_id] = $prop_val;
$arList[$prop_val] = $val;
if ($arEnumList[$prop_id][$offer_id]) {
$arValToEnumList[$prop_id][$prop_val] = $arEnumList[$prop_id][$offer_id];
}
if ($arEnumOrigList[$prop_id][$offer_id]) {
$arValToEnumOrigList[$prop_id][$prop_val] = $arEnumOrigList[$prop_id][$offer_id];
}
$arOfferList[$offer_id][$prop_id] = $prop_val;
}
}
if (!$arOption['SORT_AS_CLOTH_SIZES']) {
$arOption['SORT_AS_CLOTH_SIZES'] = array();
}
$offersChooser = [];
foreach ($arNewArray as $propId => $property) {
$select = [
'ID' => $propId,
'NAME' => $arPropList[$propId]['NAME'],
'TYPE' => 'BLOCK',
'CLASS' => "PROPERTY_" . $propId,
'CODE' => $arPropList[$propId]['CODE'],
'OPTIONS' => [],
];
if (!empty($arOption['SELECT_VIEW'])) {
if (in_array($select['CODE'], $arOption['SELECT_VIEW'])) {
$select['TYPE'] = "SELECT";
}
}
$arColorList = array();
if (!empty($arOption['COLOR_XML_LINK'])) {
if (in_array($select['CODE'], $arOption['COLOR_XML_LINK'])) {
$hlblock = \Bitrix\Highloadblock\HighloadBlockTable::getList(
array(
"filter" => array(
'TABLE_NAME' => "eshop_color_reference"
)
)
)->fetch();
if (isset($hlblock['ID'])) {
$entity = \Bitrix\Highloadblock\HighloadBlockTable::compileEntity($hlblock);
$entity_data_class = $entity->getDataClass();
$res = $entity_data_class::getList(array(
'filter' => array(
"UF_XML_ID" => $arEnumList[$propId],
)
));
while ($color = $res->fetch()) {
$arColorList[$color["UF_XML_ID"]] = CFile::GetPath($color["UF_FILE"]);
}
}
}
}
$SORT_VALUE = "VALUE";
if (
in_array($arPropList[$propId]['CODE'], $arOption['SORT_AS_CLOTH_SIZES'])
|| in_array($arPropList[$propId]['ID'], $arOption['SORT_AS_CLOTH_SIZES'])
) {
$SORT_VALUE = "CLOTH";
}
foreach ($property as $id => $offer_id) {
$img = null;
$xml_id = $arValToEnumList[$propId][$id];
if ($xml_id && count($arColorList) > 0) {
$img = $arColorList[$xml_id];
}
$sort_val = $arList[$id];
$value_id = $arValToEnumOrigList[$propId][$id];
if(!!$value_id && !!$arEnumListSort[$propId]){
$sort_val_enum = $arEnumListSort[$propId][$value_id];
if(!empty($sort_val_enum)){
$sort_val = $sort_val_enum;
}
}
if ($SORT_VALUE == "CLOTH") {
$sort_val = sortClothSizes($arList[$id]);
}
$select['OPTIONS'][$id] = [
"ID" => $id,
"NAME" => $arList[$id],
"VALUE" => $arList[$id],
'IMG' => $img,
"SORT_VALUE" => $sort_val,
];
}
uasort($select['OPTIONS'], function ($a, $b)
{
if ($a['SORT_VALUE'] == $b['SORT_VALUE']) {
return 0;
}
return ($a['SORT_VALUE'] < $b['SORT_VALUE']) ? -1 : 1;
});
$offersChooser[$select['ID']] = $select;
}
$AR_CUSTOM_SKU = array(
"ROWS" => $offersChooser,
"HELP_ARRAYS" => array(
$arNewArray,
$arOffersProp,
$arOfferList,
$arList,
$arValToEnumOrigList,
array_keys($offersChooser),
),
"AVAILABLE" => $arAvailable,
'SORT' => $arSort,
);
$arResultList = array($arResult);
if ($is_detail) {
$arResult['AR_CUSTOM_SKU'] = $AR_CUSTOM_SKU;
} else {
$arResult['ITEMS'][$itemKey]['AR_CUSTOM_SKU'] = $AR_CUSTOM_SKU;
}
}
}
}
if(!function_exists('sortClothSizes')){
function sortClothSizes($value){
$arSizeSortDefaults = array(
"XXXXXXXXXXS"=>100000,
"10XS"=>100000,
"XXXXXXXXXS"=>110000,
"9XS"=>110000,
"XXXXXXXXS"=>120000,
"8XS"=>120000,
"XXXXXXXS"=>130000,
"7XS"=>130000,
"XXXXXXS"=>140000,
"6XS"=>140000,
"XXXXXS"=>150000,
"5XS"=>150000,
"XXXXS"=>160000,
"4XS"=>160000,
"XXXS"=>170000,
"3XS"=>170000,
"XXS"=>180000,
"2XS"=>180000,
"XS"=>190000,
"S"=>200000,
"M"=>210000,
"L"=>220000,
"XL"=>230000,
"XXL"=>240000,
"2XL"=>240000,
"XXXL"=>250000,
"3XL"=>250000,
"XXXXL"=>260000,
"4XL"=>260000,
"XXXXXL"=>270000,
"5XL"=>270000,
"XXXXXXL"=>280000,
"6XL"=>280000,
"XXXXXXXL"=>290000,
"7XL"=>290000,
"XXXXXXXXL"=>300000,
"8XL"=>300000,
"XXXXXXXXXL"=>310000,
"9XL"=>310000,
"XXXXXXXXXXL"=>320000,
"10XL"=>320000,
);
$size = ToUpper($value);
// Регулярные выражения для замены
// \x0425 - Unicode для заглавной русской буквы Х
// \x0445 - Unicode для строчной русской буквы х
// \x041C - Unicode для заглавной русской буквы М
// \x043C - Unicode для строчной русской буквы м
$patterns = ['/\x{0425}/u', '/\x{0445}/u', '/\x{041C}/u', '/\x{043C}/u'];
$replacements = ['X', 'x', 'M', 'm'];
$size = preg_replace($patterns, $replacements, $size);
$size = str_replace("-","/",$size);
$arSize = explode("/",$size);
$arSizeSortValue = array();
$add_step = 100;
$add_value = 0;
if(count($arSize)>1){
$add_value = $add_step;
}
foreach($arSize as $one_size){
$one_size = trim($one_size);
if($arSizeSortDefaults[$one_size]){
$arSizeSortValue[] = $arSizeSortDefaults[$one_size];
}
}
$ret = $value;
if(count($arSizeSortValue)>0){
$min = min($arSizeSortValue)+$add_value;
if($min){
$ret = $min+$add_value;
}
}
return $ret;
}
}
function getOfferTreeFromAspro($arSkuProps,$arItem){
$arReturn = array();
$arFilter = $arShowValues = array();
foreach ($arSkuProps as $key => $arProp){
$strName = 'PROP_'.$arProp['ID'];
$arShowValues = CMax::GetRowValues($arFilter, $strName, $arItem);
if(!is_array($arShowValues))
$arShowValues = array();
if(count($arShowValues)>0 && !empty($arShowValues[0])){
$arReturn[] = $key;
}
}
return $arReturn;
}
Raw
list_template.php
<?
if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED!==true) die();
$arData = $arItem;
$ComponentID = "bx_custom_sku_".$arData['ID']."_".randString(10);
$arJsParams = array(
"ID" => $ComponentID,
"CONTAINER" => "#".$ComponentID, // container selector
//"DEFAULT_OFFER_ID"=>array_values($arData['OFFERS'])[0]['ID'],
//"ORIGIN_OBJ_CATALOG_ELEMENT_NAME"=>$arItemIDs["strObName"]."el",
"HIDE_IF_OFFER_NOT_FIND" => "#".$arItemIDs['strMainID']." .offer_btns",
"ON_OFFER_CHANGE_CALLBACK" => "showOfferButtonInCatalog",
"ALWAYS_SELECT_OFFER"=>"Y",
);
?>
<div id="<?=$ComponentID?>">
<input class="js_custom_sku_offer_id" type="hidden" value="" >
<div class="js_custom_sku_error_text no-choose" >
Выберите товар
</div>
<?php
$i =0;
foreach($arData['AR_CUSTOM_SKU']['ROWS'] as $oneSelect){
$i++;
?>
<? $intCountSizes = count($oneSelect['OPTIONS']);
$NAME = GetMessage('JNS__SEPARATE_SKU_TREE__PROPERTY_'.$i);
if(empty($NAME)){
$NAME = $oneSelect['NAME'];
}
?>
<div class="property_sku_single_block">
<div class="product-data-sizes__name_wrapp ">
<div class="name"><?=$NAME?></div>
<?/*?>
<div class="links">Размер</div>
<?*/?>
</div>
<div class="product-data-sizes__wrapp _flex ">
<div class="product_sizes">
<div class="sizes-swiper-wrap p-0 js_custom_sku_tree " data-prop-id="<?=$oneSelect['ID']?>" >
<div class="sizes-1swiper_<?=$i?> ">
<div id="sizesSlider_<?=$i?>" class="radio-sizes product-data__radio-sizes">
<?
foreach ($oneSelect['OPTIONS'] as $key => $arOption) {
$size_orig = $arOption['VALUE'];
$size_orig = mb_strtoupper($size_orig);
$size_orig_strlower = mb_strtolower($size_orig);?>
<div class="radio-size radio-size_detail js_custom_sku_tree_option
js-popup-separate-size__show" >
<label class="css_radio-sizes__label js_radio-sizes__label">
<input type="radio" name="product-data-size_<?=$oneSelect['ID']?>"
value="<?= $arOption['ID'] ?>">
<span class="radio-size__text">
<span class="orig"> <?= $size_orig ?></span>
</span>
</label>
</div>
<?}?>
</div>
</div>
<? /*if ($intCountSizes >= 8) { ?>
<div class="offer-select-slider-button-prev slider-button-prev_sizes_<?=$i?> swiper-button-disabled"></div>
<div class="offer-select-slider-button-next slider-button-next_sizes_<?=$i?> "></div>
<? } */?>
</div>
</div>
</div>
</div>
<?
}
?>
</div>
<?php
foreach($arData['OFFERS'] as &$arOffer){
unset($arOffer['PROPERTIES']);
}
?>
<script>
$(document).ready(function(){
if($.isEmptyObject(window.ObjNAVcustomSKUTree)){
window.ObjNAVcustomSKUTree = {};
}
var obj = window.NAVcustomSKUTree.Init(
<?=CUtil::PhpToJSObject($arJsParams);?>,
<?=CUtil::PhpToJSObject($arData['AR_CUSTOM_SKU']);?>,
<?=CUtil::PhpToJSObject(array_column($arData['OFFERS'], null, 'ID'));?>);
obj.Exec();
window.ObjNAVcustomSKUTree.obj_<?=$ComponentID;?> = obj;
});
</script>
Raw
result_modifier.php
<?
$arParamsCustom = $arParams;
$arParamsCustom['OFFER_TREE_PROPS'] = array("ROST",'SIZES');
//$arParamsCustom['OFFER_TREE_PROPS'] = array_keys($arResult['SKU_PROPS']);
//$arParamsCustom['OFFER_TREE_PROPS'] = getOfferTreeFromAspro($arResult['SKU_PROPS'],$arResult);
createCustomSkuTree(
$arResult,
$arParamsCustom,
array(
"SORT_AS_CLOTH_SIZES"=>array('SIZES'),
'SELECT_VIEW'=>array(),
'COLOR_XML_LINK'=>array(),
)
);
Raw
script.js
//https://gist.github.com/EscApp2/19b1b0ff89aa6770e96a4199b4e4fdc5
(function (window) {
window.NAVcustomSKUTree = {
/**
* Initialization
*/
Init: function (arParams, AR_CUSTOM_SKU, offersJsData) {
var that = this;
that.SEPARATE_SKU_TREE__LAST_CLICK_ELEM = false;
that.SEPARATE_SKU_TREE__OFFER_ID = false;
that.offersJsData = offersJsData;
that.AR_CUSTOM_SKU = AR_CUSTOM_SKU;
that.ID = arParams.ID;
that.params = {};
that.params.alwaysSelectOffer = false;
that.params.default_offer_id = false;
that.params.notAvailableClickable = false;
that.params.set_first_active_as_default = false;
that.errorCode = 0;
if(!arParams.CONTAINER){
that.errorCode = "Not set container selector";
}
if($(arParams.CONTAINER).length<=0){
that.errorCode = "Not find container";
}else{
that.container = $(arParams.CONTAINER);
}
if(arParams.DEFAULT_OFFER_ID){
that.params.default_offer_id = arParams.DEFAULT_OFFER_ID;
}
that.ORIGIN_OBJ_CATALOG_ELEMENT_NAME = arParams.ORIGIN_OBJ_CATALOG_ELEMENT_NAME;
if(!!arParams.ORIGIN_OBJ_CATALOG_ELEMENT_NAME && !window[arParams.ORIGIN_OBJ_CATALOG_ELEMENT_NAME]){
that.errorCode = "Not find default obj for catalog element";
}else{
that.origin_object = window[arParams.ORIGIN_OBJ_CATALOG_ELEMENT_NAME];
}
that.params.hideIfOffersNotFind = false;
if(that.errorCode === 0){
if(!!arParams.HIDE_IF_OFFER_NOT_FIND){
that.params.hideIfOffersNotFind = $(arParams.HIDE_IF_OFFER_NOT_FIND);
}
if("Y" == arParams.ALWAYS_SELECT_OFFER){
that.params.alwaysSelectOffer = true;
}
if("Y" == arParams.SET_FIRST_ACTIVE_AS_DEFAULT){
that.params.set_first_active_as_default = true;
}
if(!!arParams.ON_OFFER_CHANGE_CALLBACK){
that.params.OnOfferChangeCallback = arParams.ON_OFFER_CHANGE_CALLBACK;
}
if(!!arParams.ON_TREE_CHANGE_CALLBACK){
that.params.OnTreeChangeCallback = arParams.ON_TREE_CHANGE_CALLBACK;
}
if("Y" == arParams.NOT_AVAILABLE_CLICKABLE){
that.params.notAvailableClickable = true;
}
if("Y" == arParams.DISABLE_ROWS){
that.params.disableRows = true;
}
}
//console.log(that.errorCode);
//clone object
return Object.assign({}, that);
},
Exec: function () {
var that = this;
if(that.errorCode === 0){
that.container.on('change, click, change.ikSelect', '.js_custom_sku_tree input, .js_custom_sku_tree select', function (event, param) {
that.SEPARATE_SKU_TREE__LAST_CLICK_ELEM = $(this);
that.changeHandle($(this), event, param);
});
BX.addCustomEvent('onChangeTree.'+that.ID, BX.proxy(that.onChangeTree, that));
BX.addCustomEvent('onChangeTree.'+that.ID, BX.proxy(that.hideVariants, that));
BX.addCustomEvent('onChangeTree.'+that.ID, BX.proxy(that.hideNotAvailable, that));
BX.addCustomEvent('onChangeOffer.'+that.ID, BX.proxy(that.onChangeOffer, that));
BX.addCustomEvent('onChangeOffer.'+that.ID, BX.proxy(that.fireChangeOfferInOriginObj, that));
if(that.params.set_first_active_as_default) {
that.setDefaultActiveOffer();
}
if(that.params.default_offer_id) {
that.setDefaultOfferID(that.params.default_offer_id);
}
if(that.params.disableRows) {
let count = 0;
that.container.find('.js_custom_sku_tree').each(function (ind, val) {
count++;
if (count > 1) {
$(this).addClass('disabled').css({'pointer-events': 'none'});
}
});
}
}else{
console.log(that.errorCode);
}
},
changeHandle: function (elem, event, param) {
var that = this;
let value = $(elem).val();
var arData = $(elem).parents('.js_custom_sku_tree').data();
let stop = false;
if (!!param && !!param.stop_cycle) {
stop = true;
}
let stop_cycle = $(elem).data('stop_cycle');
if (!!stop_cycle) {
$(elem).data({"stop_cycle": false});
stop = true;
}
$(elem).closest('.js_custom_sku_tree').find('label').removeClass('active');
//$(elem).closest('label').addClass('active');
if (!stop) {
let prev_offer_id = that.SEPARATE_SKU_TREE__OFFER_ID;
//console.log(arData.propId, value, prev_offer_id);
that.setHtmlValuesOnChange(arData.propId, value);
BX.onCustomEvent("onChangeTree."+that.ID, [that.ID, that.getSelectedTree()]); // fire events
let offer_id_selected = that.getOffersIdBySelected();
if(that.params.alwaysSelectOffer && !offer_id_selected){
offer_id_selected = that.customSkuTreeGetNearestOffer(arData.propId, value, prev_offer_id);
if(!!offer_id_selected){
that.setDefaultOfferID(offer_id_selected);
}
}else{
if (!!offer_id_selected) {
that.SEPARATE_SKU_TREE__OFFER_ID = offer_id_selected;
BX.onCustomEvent("onChangeOffer."+that.ID, [that.ID, offer_id_selected, that.offersJsData]); // fire events
} else {
}
}
}
if ($(elem).get(0).tagName == "SELECT") {
if ($(elem).next().hasClass('nice-select')) {
$(elem).niceSelect('update');
}
}
},
_compareSkuObject: function ($object, $cur_object) {
var $arChanges = {};
$.each($object, function ($key, $val) {
if (typeof $cur_object[$key] !== 'undefined') {
if ($cur_object[$key] == $val) {
//similar
} else {
$arChanges[$key] = $val;
}
} else {
//TODO
}
});
return $arChanges;
},
_compareSkuObject2: function ($object, $cur_object){
var $arChanges = {};
$.each($object, function($key, $val){
if (typeof $cur_object[$key] !== 'undefined') {
if($cur_object[$key] == $val){
//similar
}else{
$arChanges[$key] = $val;
}
}else{
$arChanges[$key] = $val;
}
});
return $arChanges;
},
_ObjectToArray:function(obj){
var values = [];
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
values.push(obj[key]);
}
}
return values;
},
setHtmlValuesOnChange: function (prop_id, value, not_remove) {
var that = this;
value = new String(value).toString();
that.container.find('.js_custom_sku_tree[data-prop-id="' + prop_id + '"]')
.find('input, select')
.each(function (ind, val) {
let elem = $(this);
let tag = $(this).get(0).tagName;
if (tag == "INPUT") {
if (new String($(this).val()).toString() == value) {
//console.log($(this));
//console.log(!!$(this).attr('checked'), !!$(this).is(':checked'));
//throw "error";
if (!!$(this).attr('checked')) {
if (!not_remove) {
$(this).removeAttr('checked');
$(this).prop('checked', false);
elem.closest('.js_custom_sku_tree_option').find('label').removeClass('active');
}
} else {
$(this).attr('checked', 'checked');
$(this).prop('checked', true);
elem.closest('.js_custom_sku_tree_option').find('label').addClass('active');
}
} else {
$(this).removeAttr('checked');
$(this).prop('checked', false);
elem.closest('.js_custom_sku_tree_option').find('label').removeClass('active');
}
} else if (tag == "SELECT") {
$(this).find('option').each(function () {
if ($(this).val() == value) {
$(this).attr('selected', 'selected');
} else {
$(this).removeAttr('selected');
}
});
}
});
},
setDefaultOfferID: function (offer_id, stop_click_event) {
var that = this;
if (!that.AR_CUSTOM_SKU || !that.AR_CUSTOM_SKU['HELP_ARRAYS'] || !that.AR_CUSTOM_SKU['HELP_ARRAYS'][2]) {
return false;
}
var ob_offer_props = that.AR_CUSTOM_SKU['HELP_ARRAYS'][2][offer_id];
if (!!ob_offer_props) {
that.SEPARATE_SKU_TREE__OFFER_ID = offer_id;
$.each(ob_offer_props, function (_prop_id, value) {
that.setHtmlValuesOnChange(_prop_id, value, true);
});
}
BX.onCustomEvent("onChangeTree."+that.ID, [that.ID, that.getSelectedTree()]); // fire events
if (!stop_click_event) {
BX.onCustomEvent("onChangeOffer."+that.ID, [that.ID, offer_id, that.offersJsData]); // fire events
}
},
setDefaultActiveOffer: function ( stop_click_event) {
var that = this;
if (!that.AR_CUSTOM_SKU || !that.AR_CUSTOM_SKU['HELP_ARRAYS'] || !that.AR_CUSTOM_SKU['HELP_ARRAYS'][2]) {
return false;
}
let offer_id;
$.each(that.AR_CUSTOM_SKU['SORT'], function(key, tmp_offer_id){
if(that.AR_CUSTOM_SKU['AVAILABLE'][tmp_offer_id]){
let ob_offer_props = that.AR_CUSTOM_SKU['HELP_ARRAYS'][2][tmp_offer_id];
if (!!ob_offer_props) {
that.SEPARATE_SKU_TREE__OFFER_ID = tmp_offer_id;
$.each(ob_offer_props, function (_prop_id, value) {
that.setHtmlValuesOnChange(_prop_id, value, true);
});
offer_id = tmp_offer_id;
return false; //break;
}
}
});
BX.onCustomEvent("onChangeTree."+that.ID, [that.ID, that.getSelectedTree()]); // fire events
if (!stop_click_event) {
BX.onCustomEvent("onChangeOffer."+that.ID, [that.ID, offer_id, that.offersJsData]); // fire events
}
},
getSelectedTree: function () {
var that = this;
if (!that.AR_CUSTOM_SKU || !that.AR_CUSTOM_SKU['HELP_ARRAYS']) {
return false;
}
let $arTree = {};
$.each(that.AR_CUSTOM_SKU['HELP_ARRAYS'][1], function (_prop_id, ob_offer) {
that.container.find('.js_custom_sku_tree[data-prop-id="' + _prop_id + '"]')
.find('input, select option:selected')
.each(function (ind, val) {
let tag = $(this).get(0).tagName;
if (tag == "INPUT") {
if(!!$(this).attr('checked')){
$arTree[_prop_id] = $(this).val();
}
} else if (tag == "OPTION") {
$arTree[_prop_id] = $(this).val();
}
});
});
return $arTree;
},
getSelectedTreeForConnect: function () {
var that = this;
if (!that.AR_CUSTOM_SKU || !that.AR_CUSTOM_SKU['HELP_ARRAYS']) {
return false;
}
let $arTree = that.getSelectedTree();
if($arTree){
let originObjSelectedValues = {};
$.each($arTree, function(ind,val){
//originObjSelectedValues['PROP_'+ind] = that.AR_CUSTOM_SKU['HELP_ARRAYS'][4][ind][val];
let value = that.AR_CUSTOM_SKU['HELP_ARRAYS'][4][ind][val];
if(!!value) {
originObjSelectedValues[ind] = value;
}
});
$arTree = originObjSelectedValues;
}
return $arTree;
},
getOffersIdBySelected: function () {
var that = this;
let $arTree = that.getSelectedTree();
return that.getOfferIdByTree($arTree);
},
getOfferIdByTree: function ($paramTree) {
var that = this;
if (!that.AR_CUSTOM_SKU || !that.AR_CUSTOM_SKU['HELP_ARRAYS']) {
return false;
}
let $checkedOfferId = false;
let $arTreeList = that.AR_CUSTOM_SKU['HELP_ARRAYS'][2];
$.each($arTreeList, function (offerId, $arTree) {
let $arChanges = that._compareSkuObject2($arTree, $paramTree);
//console.log($arTree, $paramTree, $arChanges);
if (Object.keys($arChanges).length == 0) {
$checkedOfferId = offerId;
return false; //break;
}
});
return $checkedOfferId;
},
onChangeTree: function(ID){
var that = this;
if(that.ID != ID){
return false;
}
setTimeout(function(){
if(that.params.hideIfOffersNotFind){
if(that.params.hideIfOffersNotFind.length>0){
that.params.hideIfOffersNotFind.hide();
}
}
let offerId = that.getOffersIdBySelected();
if(!offerId){
let arTree = that.getSelectedTreeForConnect();
if (Object.keys(arTree).length == Object.keys(that.AR_CUSTOM_SKU.ROWS).length) {
$('.js_custom_sku_error_text').addClass('show');
}else{
$('.js_custom_sku_error_text').removeClass('show');
}
}else{
$('.js_custom_sku_error_text').removeClass('show');
}
if(!!that.params.OnTreeChangeCallback && window[that.params.OnTreeChangeCallback]){
window[that.params.OnTreeChangeCallback].call(that);
}
},10);
},
hideVariants: function (ID, $CUR_TREE) {
// скрыть не существующие варианты
var that = this;
if(that.ID != ID){
return false;
}
let MISSING_CLICKABLE = that.params.notAvailableClickable;
that.container.find('.js_custom_sku_tree .missing').each(function(ind,val){
//console.log($(this).get(0).tagName);
if ($(this).get(0).tagName == "OPTION") {
let select = $(this).closest('select');
if($(select).data('plugin_ikSelect')){
//console.log('enable');
$(select).ikSelect('enableOptions', $(this).val());
}
}
});
that.container.find('.js_custom_sku_tree .missing')
.removeClass('missing')
.removeAttr('disabled')
.css({'pointer-events': 'initial'});
if(that.params.disableRows) {
that.container.find('.js_custom_sku_tree').each(function (ind, val) {
$(this).removeClass('disabled').css({'pointer-events': 'initial'});
});
}
if (Object.keys($CUR_TREE).length > 0) {
if(that.params.disableRows) {
let arValues = Object.values($CUR_TREE).filter(element => element !== "");
let count = 0;//
let count_limit = arValues.length+1;
that.container.find('.js_custom_sku_tree').each(function (ind, val) {
count++;
if (count > count_limit) {
$(this).addClass('disabled').css({'pointer-events': 'none'});
}
});
}
let arData = {};
//if( that.SEPARATE_SKU_TREE__LAST_CLICK_ELEM.length > 0){
// ищем последний кликнутый
// arData = $(that.SEPARATE_SKU_TREE__LAST_CLICK_ELEM).closest('.js_custom_sku_tree').data();
//}else{
// ищем первый элемент
//arData = that.container.find('.js_custom_sku_tree').first().data();
//}
// ищем первый элемент
arData = that.container.find('.js_custom_sku_tree').first().data();
let $PROP_ID = arData.propId;
let $CUR_VALUE = $CUR_TREE[$PROP_ID];
/*
* Первый ряд tree всегда доступен
* */
/*
* $arRes список доступных элементов tree
* */
let $arRes = {};
/*
* Обходим все offers и ищем те у которых в tree есть первое выбранное значение
* */
$.each(that.offersJsData, function ($o_key, $oneOffer) {
let oneTREE = that.AR_CUSTOM_SKU['HELP_ARRAYS'][2][$oneOffer.ID];
if (!!oneTREE && !!oneTREE[$PROP_ID] && oneTREE[$PROP_ID] == $CUR_VALUE) {
$.each(oneTREE, function ($prop, $value) {
let $prop_id = $prop.replace("PROP_", "");
if ($PROP_ID == $prop_id) {
return true; //continue;
}
if (!$arRes[$prop_id]) {
$arRes[$prop_id] = {};
}
$arRes[$prop_id][$value] = $value;
});
}
});
/*
* логика для последней строки tree
* */
let arAllProperties = Object.keys(that.AR_CUSTOM_SKU['HELP_ARRAYS'][0]);
let arSelectedProperties = Object.keys($CUR_TREE);
let arNotSelectedProperties = arAllProperties.filter(function(n) {
return arSelectedProperties.indexOf(n) == -1;
});
if(arNotSelectedProperties.length == 1 || arAllProperties.length == Object.keys($CUR_TREE).length){
let lastProp = false;
if(arNotSelectedProperties.length == 1){
lastProp = arNotSelectedProperties[0];
}else{
let arLastData = that.container.find('.js_custom_sku_tree').last().data();
lastProp = arLastData.propId;
}
if( !! lastProp && !!$arRes[lastProp] && lastProp != $PROP_ID){
let tmpTree = $CUR_TREE;
$.each($arRes[lastProp], function ($ind, $val) {
tmpTree[lastProp] = $val;
let $is_offer = that.getOfferIdByTree(tmpTree);
if(!$is_offer){
delete $arRes[lastProp][$ind];
}
});
}
}
/*
* добавить класс missing для элементов tree которых нет в $arRes, кроме первой линии tree
* */
let arKeys = Object.keys($arRes);
$.each(that.AR_CUSTOM_SKU['HELP_ARRAYS'][0], function ($prop_id, arValue) {
if (-1 == $.inArray($prop_id, arKeys)) {
return true; //continue;
}
$.each(arValue, function ($value, _ar) {
if ($arRes[$prop_id] && $arRes[$prop_id][$value] && $arRes[$prop_id][$value] == $value) {
//ok
//}else if(_ar[offerId] && _ar[offerId] == offerId){
// current
} else {
let input = that.container.find('.js_custom_sku_tree[data-prop-id="' + $prop_id + '"] .js_custom_sku_tree_option input[value="' + $value + '"]');
let option = that.container.find('.js_custom_sku_tree[data-prop-id="' + $prop_id + '"] .js_custom_sku_tree_option[value="' + $value + '"]');
if(input.length>0) {
let event = 'initial';
if (!MISSING_CLICKABLE) {
event = 'none';
}
let js_custom_sku_tree_option = input.closest('.js_custom_sku_tree_option');
js_custom_sku_tree_option.addClass('missing').css({'pointer-events': event});
// only for input
if (that.params.alwaysSelectOffer) {
input.removeAttr('checked');
input.prop('checked', false);
js_custom_sku_tree_option.find('label').removeClass('active');
}
}else if(option.length>0){
option.addClass('missing');
option.prop('disabled',true);
let select = option.closest('select');
if($(select).data('plugin_ikSelect')){
$(select).ikSelect('disableOptions', option.val());
}
}
}
});
});
}
},
hideNotAvailable: function (ID, $CUR_TREE) {
// скрыть варианты не доступных ТП
var that = this;
if(that.ID != ID){
return false;
}
if(!that.AR_CUSTOM_SKU || !that.AR_CUSTOM_SKU['HELP_ARRAYS']
|| !that.AR_CUSTOM_SKU['AVAILABLE']){
return false;
}
that.container.find('.js_custom_sku_tree .disable')
.removeClass('disable')
.css({'pointer-events': 'initial'});
if(Object.keys($CUR_TREE).length > 0){
let offerId = that.getOfferIdByTree($CUR_TREE);
$.each(that.offersJsData, function($o_key, $oneOffer){
let oneOfferId = $oneOffer.ID;
let oneTREE = that.AR_CUSTOM_SKU['HELP_ARRAYS'][2][oneOfferId];
let $arChanges = that._compareSkuObject2(oneTREE, $CUR_TREE);
let $available = that.AR_CUSTOM_SKU['AVAILABLE'][oneOfferId];
let $workTree = false;
if(
// Если ТП выбрано
// !!offerId &&
//Object.keys($CUR_TREE).length == Object.keys(AR_CUSTOM_SKU['HELP_ARRAYS'][0]).length
// Если ТП отличаеться на 1 параметр от текущего ТП, работаем с ними
Object.keys($arChanges).length == 1
){
$workTree = $arChanges;
}
// Если это текуший ТП, то тоже работаем с ним
if(!!offerId){
if(oneOfferId == offerId){
//console.log($workTree);
$workTree = oneTREE;
}
}
if(!!$workTree){
$.each($workTree, function($prop, $value){
let $prop_id = $prop.replace("PROP_", "");
var input = that.container.find('.js_custom_sku_tree[data-prop-id="'+$prop_id+'"] .js_custom_sku_tree_option input[value="'+$value+'"]');
var label = input.closest('.js_radio-sizes__label');
var wrap = input.closest('.radio-size_detail');
if(!$available){
let event = 'initial';
if (!that.params.notAvailableClickable) {
event = 'none';
}
wrap.addClass('disable')
.css({'pointer-events': event});
}
});
}
});
}
window.AR_CUSTOM_SKU = that.AR_CUSTOM_SKU;
//Если у первого параметра нет ни одного доступного второго параметра
// то добавляем класс disabled к такому первому параметру
$.each(that.AR_CUSTOM_SKU['HELP_ARRAYS'][1], function($prop_id, $ob_offer){
let $arValues = {};
$.each($ob_offer, function($offer, $value){
if(! $arValues[$value]){
$arValues[$value]={};
$arValues[$value]['count'] = 0;
$arValues[$value]['disabled'] = 0;
}
$arValues[$value]['count']++;
let $available = that.AR_CUSTOM_SKU['AVAILABLE'][$offer];
if(!$available){
$arValues[$value]['disabled']++;
}
});
$.each($arValues, function($value, $ob_info){
if($ob_info['count'] == $ob_info['disabled']){
let input = that.container.find('.js_custom_sku_tree[data-prop-id="'+$prop_id+'"] .js_custom_sku_tree_option input[value="'+$value+'"]');
let label = input.closest('.js_radio-sizes__label');
let wrap = input.closest('.radio-size_detail');
let event = 'initial';
if (!that.params.notAvailableClickable) {
event = 'none';
}
wrap.addClass('disable')
.css({'pointer-events': event});
}
});
});
},
onChangeOffer: function(ID){
var that = this;
if(that.ID != ID){
return false;
}
setTimeout(function(){
let offerId = that.getOffersIdBySelected();
if(offerId){
$('.js_custom_sku_offer_id').val(offerId);
}
if(that.params.hideIfOffersNotFind){
if(that.params.hideIfOffersNotFind.length>0){
that.params.hideIfOffersNotFind.show();
}
}
if(!!that.params.OnOfferChangeCallback && window[that.params.OnOfferChangeCallback]){
window[that.params.OnOfferChangeCallback].call(that,offerId);
}
},20);
},
fireChangeOfferInOriginObj: function(ID){
var that = this;
if(that.ID != ID){
return false;
}
if(that.origin_object){
let offerId = that.getOffersIdBySelected();
//let $arTree = that.getSelectedTree();
//let originObjSelectedValues = {};
//$.each($arTree, function(ind,val){
// originObjSelectedValues['PROP_'+ind] = that.AR_CUSTOM_SKU['HELP_ARRAYS'][4][ind][val];
//});
//that.origin_object.selectedValues = originObjSelectedValues;
that.origin_object.ChangeInfo(false, offerId);
}
},
customSkuTreeGetNearestOffer: function (prop_id, value, prev_offer_id) {
var that = this;
if (!that.AR_CUSTOM_SKU || !that.AR_CUSTOM_SKU['HELP_ARRAYS'] || !that.AR_CUSTOM_SKU['HELP_ARRAYS'][0]) {
return false;
}
let STOP_SELECT_OFFER_BY_ONE_CLICK = !that.params.alwaysSelectOffer;
var ob_offer_id = that.AR_CUSTOM_SKU['HELP_ARRAYS'][0][prop_id][value];
if (!!ob_offer_id) {
if (!!prev_offer_id) {
let $obMin = {};
$.each(ob_offer_id, function (each_offer, val) {
if (each_offer != prev_offer_id) {
let $arChanges = that._compareSkuObject(
that.AR_CUSTOM_SKU['HELP_ARRAYS'][2][each_offer],
that.AR_CUSTOM_SKU['HELP_ARRAYS'][2][prev_offer_id]
);
let SORT_KEY = Object.keys($arChanges).length*100;
$.each( that.AR_CUSTOM_SKU['HELP_ARRAYS'][5], function (sort, val) {
if(!!$arChanges[val]){
SORT_KEY -= sort;
}
});
$obMin[SORT_KEY] = each_offer;
}
});
let $arMin = Object.keys($obMin);
let $min = Math.min.apply(Math, $arMin);
var offer_id = $obMin[$min];
} else {
if (!STOP_SELECT_OFFER_BY_ONE_CLICK) {
var offer_id = Object.values(ob_offer_id)[0];
} else {
return false;
}
}
return offer_id;
}
return false;
},
getHoverOfferId: function (elem) {
var that = this;
let arData = $(elem).closest('.js_custom_sku_tree').data();
let $HOVER_PROP_ID = arData.propId;
let $HOVER_VALUE = false;
if ($(elem).hasClass('js_custom_sku_tree_option')) {
$HOVER_VALUE = $(elem).find('input').val();
} else {
$HOVER_VALUE = $(elem).find('.js_custom_sku_tree_option input').val();
}
let $curOfferId = that.SEPARATE_SKU_TREE__OFFER_ID;
if ($curOfferId && $HOVER_VALUE && $HOVER_PROP_ID) {
let $curTREE = that.AR_CUSTOM_SKU['HELP_ARRAYS'][2][$curOfferId];
let $hoverTREE = Object.assign({}, $curTREE);
$hoverTREE[$HOVER_PROP_ID] = $HOVER_VALUE;
let $hoverOfferId = that.getOfferIdByTree($hoverTREE);
if (!!$hoverOfferId) {
return $hoverOfferId;
}
}
return false;
},
getOfferSizeValue: function (offerId) {
var that = this;
if (!that.AR_CUSTOM_SKU || !that.AR_CUSTOM_SKU['HELP_ARRAYS']) {
return false;
}
if (offerId) {
let $arTree = that.AR_CUSTOM_SKU['HELP_ARRAYS'][2][offerId];
let arSize = [];
$.each($arTree, function (prop, id) {
let val = that.AR_CUSTOM_SKU['HELP_ARRAYS'][3][id];
if (!!val) {
arSize.push(val);
}
});
return arSize.join('/').toLowerCase();
}
return false;
},
}
})(window);
Raw
y__aspto lite component.php
<?
//result_modifier.php
OnBeforeItemComponent($arParams, $arResult, $this);
OnBeforeItemListComponent($arParams, $arResult, $this);
//component_epilog.php
<script type="text/javascript">
window.AVAILABLE_JS_FOR_SKU = <?=json_encode($arResult['AVAILABLE_JS_FOR_SKU']);?>;
window.AVAILABLE_JS_FOR_SKU = eval( '(' +window.AVAILABLE_JS_FOR_SKU + ')' );
window.JS_FOR_SKU_TO_PRODUCT = <?=json_encode($arResult['JS_FOR_SKU_TO_PRODUCT']);?>;
window.JS_FOR_SKU_TO_PRODUCT = eval( '(' +window.JS_FOR_SKU_TO_PRODUCT + ')' );
</script>
Raw
y__aspto lite init.php
<?
function OnBeforeItemComponent(&$arParams, &$arItem, $component){
$arReturn = fillAvailvableJsForSKU($arItem);
$arItem['AVAILABLE_JS_FOR_SKU'] = CUtil::PhpToJSObject($arReturn);
$arReturn = fillSKUToProduct($arItem);
$arItem['JS_FOR_SKU_TO_PRODUCT'] = CUtil::PhpToJSObject($arReturn);
$component->getComponent()->SetResultCacheKeys(array('AVAILABLE_JS_FOR_SKU',"JS_FOR_SKU_TO_PRODUCT"));
}
function OnBeforeItemListComponent(&$arParams, &$arResult, $component){
$arReturn = array();
foreach($arResult['ITEMS'] as &$arItem){
$arRet = fillAvailvableJsForSKU($arItem);
$arReturn = $arReturn+$arRet;
}
$arResult['AVAILABLE_JS_FOR_SKU'] = CUtil::PhpToJSObject($arReturn);
$arReturn = array();
foreach($arResult['ITEMS'] as &$arItem){
$arRet = fillSKUToProduct($arItem);
$arReturn = $arReturn+$arRet;
}
$arResult['JS_FOR_SKU_TO_PRODUCT'] = CUtil::PhpToJSObject($arReturn);
$component->getComponent()->SetResultCacheKeys(array('AVAILABLE_JS_FOR_SKU',"JS_FOR_SKU_TO_PRODUCT"));
}
function fillAvailvableJsForSKU($arItem){
$arReturn = array();
foreach($arItem['OFFERS'] as $arOffer){
$arReturn[$arItem['ID']][$arOffer['ID']] = $arOffer['PRODUCT']['AVAILABLE'] == "Y";
}
return $arReturn;
}
function fillSKUToProduct($arItem){
$arReturn = array();
foreach($arItem['OFFERS'] as $arOffer){
$arReturn[$arOffer['ID']] = $arItem['ID'];
}
return $arReturn;
}
Raw
y__aspto lite.js
///select_offer.js
/* get sku */
if (offersTree && typeofExt(offersTree) === "array") {
appAspro.sku.UpdateSKUInfoByProps(offersTree);
obParams["SELECTED_OFFER_INDEX"] = appAspro.sku.GetCurrentOfferIndex(offersTree);
obParams["SELECTED_OFFER_ID"] = offersTree[obParams["SELECTED_OFFER_INDEX"]]['ID'];
if (appAspro.sku.obOffers[obParams["SELECTED_OFFER_ID"]] && item.is(appAspro.sku.obOffers[obParams["SELECTED_OFFER_ID"]]['item'])) {
appAspro.sku.ChangeInfo(item, offersTree, obParams["SELECTED_OFFER_ID"]);
!!!!!!!!!!!!!
appAspro.sku.HideNotAvailable(item, offersTree, obParams["SELECTED_OFFER_ID"]);
!!!!!!!!!!!!!!!!!
} else {
if (appAspro.sku.xhr[obParams["ID"]]) {
appAspro.sku.xhr[obParams["ID"]].abort();
}
appAspro.sku.xhr[obParams["ID"]] = $.ajax({
url: arAsproOptions["SITE_TEMPLATE_PATH"] + "/ajax/js_item_detail.php" + add_url,
type: "POST",
dataType: 'json',
data: obParams,
}).done(function (jsonData) {
appAspro.sku.obOffers[obParams["SELECTED_OFFER_ID"]] = jsonData;
appAspro.sku.obOffers[obParams["SELECTED_OFFER_ID"]]['item'] = item;
appAspro.sku.ChangeInfo(item, offersTree, obParams["SELECTED_OFFER_ID"]);
!!!!!!!!!!!
appAspro.sku.HideNotAvailable(item, offersTree, obParams["SELECTED_OFFER_ID"]);
!!!!!!!!!!!!!
delete appAspro.sku.xhr[obParams["ID"]];
});
}
}
Raw
y__aspto lite2.js
//select_offer_func.js
window.appAspro = window.appAspro || {}
if (!window.appAspro.sku) {
window.appAspro.sku = {
xhr: {},
obOffers: {},
init: function (options) {
const optionDefault = {
containerClass: '.sku-props.js-selected',
depth: 0,
strPropValue: '',
selectedValues: '',
};
this.options = Object.assign({}, optionDefault, options);
},
GetRowValues: function (arFilter, index, offersTree) {
var i = 0,
j,
arValues = [],
boolSearch = false,
boolOneSearch = true;
if (0 === arFilter.length) {
for (i = 0; i < offersTree.length; i++) {
if (!BX.util.in_array(offersTree[i].TREE[index], arValues))
arValues[arValues.length] = offersTree[i].TREE[index].toString();
}
boolSearch = true;
} else {
for (i = 0; i < offersTree.length; i++) {
boolOneSearch = true;
for (j in arFilter) {
//if (arFilter[j]) {
if (arFilter[j].toString() !== offersTree[i].TREE[j].toString()) {
boolOneSearch = false;
break;
}
//}
}
if (boolOneSearch) {
if (!BX.util.in_array(offersTree[i].TREE[index], arValues))
arValues[arValues.length] = offersTree[i].TREE[index].toString();
boolSearch = true;
}
}
}
return (boolSearch ? arValues : false);
},
GetCurrentOfferIndex: function (offersTree) {
let i = 0,
j,
index = -1,
boolOneSearch = true;
if ($(this.options.containerClass).data('selected')) {
this.options.selectedValues = $(this.options.containerClass).data('selected');
}
for (i = 0; i < offersTree.length; i++) {
boolOneSearch = true;
for (j in this.options.selectedValues) {
if (this.options.selectedValues[j]) {
if (this.options.selectedValues[j].toString() !== offersTree[i].TREE[j].toString()) {
boolOneSearch = false;
break;
}
}
}
if (boolOneSearch) {
index = i;
break;
}
}
return index;
},
GetCurrentOfferTree: function (item,currentOfferId) {
let offersTree;
let templateJson = item.find('.offers-template-json');
try {
offersTree = JSON.parse(templateJson.html());
} catch (error) {
console.error(error);
return;
}
let TREE = false;
$.each(offersTree,function(inv,val){
if(val.ID == currentOfferId ){
TREE = val.TREE;
}
})
return TREE;
},
_compareSkuObject2: function ($object, $cur_object){
var $arChanges = {};
$.each($object, function($key, $val){
if (typeof $cur_object[$key] !== 'undefined') {
if($cur_object[$key] == $val){
//similar
}else{
$arChanges[$key] = $val;
}
}else{
$arChanges[$key] = $val;
}
});
return $arChanges;
},
isIntersect: function ($object, $cur_object){
var intersect = false;
$.each($object, function($key, $val){
if (typeof $cur_object[$key] !== 'undefined') {
if($cur_object[$key] == $val){
intersect = true;
return false; //break
}
}else{
}
});
return intersect;
},
HideNotAvailable: function(wrapper, offersTree, currentOfferId = 0){
let that = this;
let index = -1;
if (!currentOfferId) {
// old code never run
index = this.GetCurrentOfferTree(wrapper, currentOfferId);
currentOfferId = offersTree[index]['ID'];
}
let curElemAvail = {};
if(window.JS_FOR_SKU_TO_PRODUCT){
if(window.JS_FOR_SKU_TO_PRODUCT[currentOfferId]){
curElemAvail = window.AVAILABLE_JS_FOR_SKU[window.JS_FOR_SKU_TO_PRODUCT[currentOfferId]];
}
}
$(wrapper).find('[data-onevalue]').addClass('sku-props__value--not_available');
let $CUR_TREE = this.GetCurrentOfferTree(wrapper, currentOfferId);
if(Object.keys($CUR_TREE).length > 0){
$.each(offersTree, function($o_key, $oneOffer){
let oneOfferId = $oneOffer.ID;
let oneTREE = $oneOffer.TREE;
let $arChanges = that._compareSkuObject2(oneTREE, $CUR_TREE);
let $available = curElemAvail[oneOfferId];
let $workTree = false;
if(
// Если ТП отличаеться на 1 параметр от текущего ТП, работаем с ними
Object.keys($arChanges).length == 1
){
$workTree = $arChanges;
}
let cur_flag = false;
// Если это текуший ТП, то тоже работаем с ним
if(!!currentOfferId){
if(oneOfferId == currentOfferId){
$workTree = oneTREE;
cur_flag = true;
}
}
if(!$workTree){
if(!that.isIntersect(oneTREE, $CUR_TREE)){
$workTree = {};
$.each(oneTREE, function(ind,val){
$workTree[ind] = val;
return false; //break
});
}
}
if(!!$workTree){
$.each($workTree, function($prop, $value){
let $prop_id = $prop.replace("PROP_", "");
var input = $(wrapper).find('[data-id="'+$prop_id+'"] [data-onevalue="'+$value+'"]');
if($available){
input.removeClass('sku-props__value--not_available');
}
});
if(cur_flag){
$.each($workTree, function($prop, $value){
let $prop_id = $prop.replace("PROP_", "");
var input = $(wrapper).find('[data-id="'+$prop_id+'"] [data-onevalue="'+$value+'"]');
input.removeClass('sku-props__value--not_available');
return false; //break;
});
}
}
});
}
},
ChangeInfo: function (wrapper, offersTree, currentOfferId = 0) {
let index = -1;
if (!currentOfferId) {
// old code never run
index = this.GetCurrentOfferIndex(offersTree);
currentOfferId = offersTree[index]['ID'];
}
if (currentOfferId) {
this.UpdateStatus(currentOfferId, '.js-replace-status:first', wrapper);
this.UpdateStatus(currentOfferId, '.js-popup-block-adaptive .js-replace-status:first', wrapper);
this.UpdateArticle(currentOfferId, '.js-replace-article:first', wrapper);
this.UpdateArticle(currentOfferId, '.js-popup-block-adaptive .js-replace-article:first', wrapper);
this.UpdatePrice(currentOfferId, '.js-popup-price:first', wrapper);
this.UpdatePrice(currentOfferId, '.js-popup-block-adaptive .js-popup-price:first', wrapper);
this.UpdateItemInfoForBasket(currentOfferId, '[data-item]:first', wrapper);
this.UpdateItemInfoForBasket(currentOfferId, '.js-popup-block-adaptive [data-item]:first', wrapper);
this.UpdateBtnBasket(currentOfferId, '.js-replace-btns:first', wrapper);
this.UpdateBtnBasket(currentOfferId, '.js-popup-block-adaptive .js-replace-btns:first', wrapper);
this.UpdateOneClickBuy(currentOfferId, '.js-replace-ocb:first', wrapper)
this.UpdateProps(currentOfferId, wrapper);
this.UpdateGroupPropsSKU(currentOfferId, wrapper);
this.UpdateImages(currentOfferId, wrapper);
this.UpdateSideIcons(currentOfferId, wrapper);
this.UpdateLink(currentOfferId, wrapper);
this.UpdateName(currentOfferId, '.switcher-title:first', wrapper);
this.UpdateSKUBlocks(currentOfferId);
this.Add2Viewed(currentOfferId);
JItemActionBasket.markItems();
JItemActionCompare.markItems();
JItemActionFavorite.markItems();
JItemActionSubscribe.markItems();
}
},
Add2Viewed: function (index) {
let viewedParams = this.obOffers[index]['VIEWED_PARAMS'];
if (
typeof viewedParams === 'object' &&
viewedParams
) {
if (typeof JViewed === 'function') {
JViewed.get().addProduct(
viewedParams.ID,
viewedParams
);
}
}
},
UpdateName: function (index, selector, wrapper) {
const $node = wrapper.find(selector);
if ($node.length && this.CheckWrapper($node, wrapper)) {
$node.text(this.obOffers[index]['NAME'])
}
},
UpdateLink: function (index, wrapper) {
const $titleLink = wrapper.find('.js-popup-title:first')
if ($titleLink.length && this.CheckWrapper($titleLink, wrapper)) {
let url = $titleLink.attr('href');
const $detailBlock = wrapper.find('.detail-block');
if (arAsproOptions['OID']) {
const re = new RegExp('(' + arAsproOptions['OID'] + '=)' + '(\\d+)');
if (url && !$detailBlock.length) {
const matches = url.match(re);
if (matches && matches.length === 3) {
url = url.replace(matches[2], this.obOffers[index]['ID'])
$titleLink.attr('href', url)
if (wrapper.find('.image-list__link').length) {
wrapper.find('.image-list__link').attr('href', url)
}
}
const $moreLink = wrapper.find('.js-replace-more')
if ($moreLink.length) {
$moreLink.attr('href', url)
}
const data = wrapper.find('[data-item]:first').data('item');
if (data) {
data['DETAIL_PAGE_URL'] = url;
wrapper.find('[data-item]:first').data('item', data)
}
} else {
let href = window.location.href
let matches = href.match(re);
if (matches && matches.length === 3) {
href = href.replace(matches[2], this.obOffers[index]['ID'])
} else {
let queryString = location.search;
if (queryString) {
matches = queryString.match(re);
if (!matches) {
queryString += '&' + arAsproOptions['OID'] + '=' + this.obOffers[index]['ID']
}
} else {
queryString = '?' + arAsproOptions['OID'] + '=' + this.obOffers[index]['ID']
}
href = location.pathname + queryString;
}
history.replaceState(null, null, href);
}
}
}
},
UpdateStatus: function (index, selector, wrapper) {
const $status = wrapper.find(selector);
if ($status.length && this.CheckWrapper($status, wrapper)) {
let value = $status.closest('[data-value]').data('value');
let code = $status.closest('[data-code]').data('code');
let state = $status.closest('[data-state]').data('state');
let $iconContainer = $status.closest('.status-container').find('.status__svg-icon');
let $icon = $iconContainer.find('use');
let xlink = '';
$status.removeClass(state);
if (this.obOffers[index]['STATUS']['NAME']) {
const prevState = state;
value = this.obOffers[index]['STATUS']['NAME'];
state = this.obOffers[index]['STATUS']['CODE'];
if ($icon.length) {
$iconContainer.removeClass(prevState);
xlink = $icon.attr('xlink:href').replace(prevState, state);
}
}
$status.html(value);
$status.closest('[data-state]').data('state', state);
$status.addClass(state);
if ($icon.length) {
$icon.attr('xlink:href', xlink)
$iconContainer.addClass(state);
}
if (funcDefined('showItemStoresAmount')) {
showItemStoresAmount();
}
}
},
UpdateArticle: function (index, selector, wrapper) {
const $article = wrapper.find(selector);
if ($article.length && this.CheckWrapper($article, wrapper) && this.obOffers[index]["DISPLAY_PROPERTIES"] && this.obOffers[index]['DISPLAY_PROPERTIES']["CML2_ARTICLE"]) {
let value = $article.data('value');
if (this.obOffers[index]['DISPLAY_PROPERTIES']['CML2_ARTICLE']['VALUE']) {
value = this.obOffers[index]['DISPLAY_PROPERTIES']['CML2_ARTICLE']['VALUE'];
}
$article.text(value);
}
},
UpdatePrice: function (index, selector, wrapper) {
const $price = wrapper.find(selector);
if ($price.length && this.CheckWrapper($price, wrapper)) {
if (this.obOffers[index]['PRICES_HTML']) {
$price.parent('.line-block').removeClass('hidden');
} else {
$price.parent('.line-block').addClass('hidden');
}
$price.html(this.obOffers[index]['PRICES_HTML']);
}
},
UpdateItemInfoForBasket: function (index, selector, wrapper) {
const $infoBasket = wrapper.find(selector);
if ($infoBasket.length && this.CheckWrapper($infoBasket, wrapper)) {
$infoBasket
.data('id', this.obOffers[index]['ID'])
.data('item', this.obOffers[index]['BASKET_JSON']);
}
},
UpdateBtnBasket: function (index, selector, wrapper) {
const $btn = wrapper.find(selector);
if ($btn.length && this.CheckWrapper($btn, wrapper)) {
if (this.obOffers[index]['BASKET_HTML']) {
$btn.closest('.js-btn-state-wrapper').removeClass('hidden');
$btn.closest('.catalog-detail__cart').removeClass('hidden');
} else {
$btn.closest('.js-btn-state-wrapper').addClass('hidden');
$btn.closest('.catalog-detail__cart').addClass('hidden');
}
$btn.html(this.obOffers[index]['BASKET_HTML']);
if ($btn.closest('.catalog-detail__cell-block')) {
if ($btn.closest('.catalog-detail__cell-block').find('>*:not(.hidden)').length) {
$btn.closest('.catalog-detail__cell-block').closest('.grid-list__item').removeClass('hidden');
} else {
$btn.closest('.catalog-detail__cell-block').closest('.grid-list__item').addClass('hidden');
}
}
}
},
UpdateOneClickBuy: function (index, selector, wrapper) {
const $btn = wrapper.find(selector);
if ($btn.length && this.CheckWrapper($btn, wrapper)) {
$btn[0].outerHTML = this.obOffers[index]['ONE_CLICK_BUY_HTML'];
}
},
UpdateProps: function (index, wrapper) {
const $props = wrapper.find('.js-offers-prop:first')
if ($props.length && this.CheckWrapper($props, wrapper)) {
wrapper.find('.js-prop').remove();
if (this.obOffers[index]['OFFER_PROP']) {
if (!Object.keys(this.obOffers[index]['OFFER_PROP']).length) {
return;
}
if (!window['propTemplate']) {
let $clone = $props.clone()
$clone.find('> *:not(:first-child)').remove()
$clone.find('.js-prop-replace').removeClass('js-prop-replace').addClass('js-prop');
$clone.find('.js-prop-title').text('#PROP_TITLE#')
$clone.find('.js-prop-value').text('#PROP_VALUE#')
$clone.find('.hint').remove()
let cloneHtml = $clone.html()
window['propTemplate'] = cloneHtml;
}
let html = '';
for (let key in this.obOffers[index]['OFFER_PROP']) {
let title = this.obOffers[index]['OFFER_PROP'][key]['NAME'];
let value = this.obOffers[index]['OFFER_PROP'][key]['DISPLAY_VALUE'];
if (this.obOffers[index]['OFFER_PROP'][key]['HINT']) {
title += '<div class="hint hint--down">' +
'<span class="hint__icon rounded bg-theme-hover border-theme-hover bordered"><i>?</i></span>' +
'<div class="tooltip">' + this.obOffers[index]['OFFER_PROP'][key]['HINT'] + '</div>' +
'</div>'
}
let str = window['propTemplate']
.replace('#PROP_TITLE#', title)
.replace('#PROP_VALUE#', value);
html += str;
}
if (html) {
$props[0].insertAdjacentHTML('beforeend', html);
}
}
}
},
UpdateGroupPropsSKU(index, wrapper) {
let container = wrapper.closest('.product-container');
const $props = container.find(".js-offers-group-wrap:first");
if ($props.length) {
container.find(".js-offers-group").remove();
container.find(".js-offers-group__item").remove();
if (this.obOffers[index]["OFFER_PROP"] && this.obOffers[index]["PROPS_GROUP_HTML"]) {
if (!Object.keys(this.obOffers[index]["OFFER_PROP"]).length) {
return;
}
let tmpDiv = document.createElement("div");
tmpDiv.innerHTML = this.obOffers[index]["PROPS_GROUP_HTML"];
let offerPropGroups = tmpDiv.querySelectorAll(".js-offers-group");
if (offerPropGroups.length) {
let groupCode, elementPropGroup;
for (let keyGroup = 0; keyGroup < offerPropGroups.length; keyGroup++) {
groupCode = offerPropGroups[keyGroup].getAttribute("data-group-code");
elementPropGroup = container.find("[data-group-code='" + groupCode + "'] .js-offers-group__items-wrap");
if (elementPropGroup.length) {
elementPropGroup.append(offerPropGroups[keyGroup].querySelectorAll(".js-offers-group__item"));
}
else {
let noGroupContainer = container.find("[data-group-code='no-group']");
if (noGroupContainer.length) {
noGroupContainer.before(offerPropGroups[keyGroup]);
}
else {
$props.append(offerPropGroups[keyGroup]);
}
}
}
}
}
}
},
UpdateImages: function (index, wrapper) {
if (wrapper.find('.js-detail-img').length) {
this.UpdateDetailImages(index, wrapper)
} else {
this.UpdateListImages(index, wrapper)
}
},
UpdateListImages: function (index, wrapper) {
let $img = wrapper.find('.js-replace-img')
let $gallery = wrapper.find('.js-image-block')
if ($gallery.length && this.CheckWrapper($gallery, wrapper) && this.obOffers[index]['GALLERY_HTML']) {
let sticker = $gallery.find('.sticker')
if (sticker.length) {
sticker.appendTo(wrapper.find('.js-config-img'))
}
$gallery.html($(this.obOffers[index]['GALLERY_HTML']).find('.js-image-block').html())
$gallery.prepend(sticker)
} else if ($img.length && this.CheckWrapper($img, wrapper)) {
let src = $img.data('js') ? $img.data('js') : $img.attr('src');
if (this.obOffers[index]['PICTURE_SRC']) {
src = this.obOffers[index]['PICTURE_SRC'];
}
$img.prop('src', src)
//fast_view
if (this.obOffers[index]['FAST_VIEW_HTML']) {
wrapper.find('.btn-fast-view').html(this.obOffers[index]['FAST_VIEW_HTML']);
}
}
},
UpdateDetailImages: function (index, wrapper) {
let $gallery = wrapper.find('.js-detail-img')
let $galleryThumb = wrapper.find('.js-detail-img-thumb')
if ($gallery.length && this.CheckWrapper($gallery, wrapper) && this.obOffers[index]['GALLERY']) {
const mainSlider = $gallery.data('swiper')
const countPhoto = this.obOffers[index]['GALLERY'].length
const mainSlideClassList = $gallery.data('slideClassList');
const slideHtml = [];
const thumbsSlider = $galleryThumb.data('swiper');
const thumbsSlideClassList = $galleryThumb.data('slideClassList');
const slideThmbHtml = [];
if (countPhoto > 0) {
for (let i in this.obOffers[index]['GALLERY']) {
const image = this.obOffers[index]['GALLERY'][i]
const title = (image['TITLE'] ? image['TITLE'] : this.obOffers[index]['NAME'])
const alt = (image['ALT'] ? image['ALT'] : this.obOffers[index]['NAME'])
if (typeof image === 'object') {
slideHtml.push(
'<div id="photo-' + i + '" class="' + mainSlideClassList + '">' +
'<a href="' + image['SRC'] + '" data-fancybox="gallery" class="catalog-detail__gallery__link popup_link fancy fancy-thumbs" title="' + title + '">' +
'<img class="catalog-detail__gallery__picture" src="' + image['SRC'] + '" alt="' + alt + '" title="' + title + '" />' +
'</a>' +
'</div>'
);
}
}
if ($galleryThumb.length) {
if (countPhoto > 1) {
for (let i in this.obOffers[index]['GALLERY']) {
const image = this.obOffers[index]['GALLERY'][i]
const title = (image['TITLE'] ? image['TITLE'] : this.obOffers[index]['NAME'])
const alt = (image['ALT'] ? image['ALT'] : this.obOffers[index]['NAME'])
if (typeof image === 'object') {
slideThmbHtml.push(
'<div id="thumb-photo-' + i + '" class="' + (i == 0 ? "swiper-slide-thumb-active " : '') + '' + thumbsSlideClassList + '">' +
'<img class="gallery__picture rounded-x" src="' + image['SRC'] + '" alt="' + alt + '" title="' + title + '" />' +
'</div>'
);
}
}
}
$galleryThumb.attr('data-size', countPhoto)
}
wrapper.find('[itemprop="image"]').attr('href', this.obOffers[index]['GALLERY'][0]['SRC']);
} else {
slideHtml.push(
'<div class="detail-gallery-big__item detail-gallery-big__item--big detail-gallery-big__item--no-image swiper-slide">' +
'<span data-fancybox="gallery" class="detail-gallery-big__link" >' +
'<img class="catalog-detail__gallery__picture" src="' + arAsproOptions["SITE_TEMPLATE_PATH"] + '/images/svg/noimage_product.svg' + '" />' +
'</span>' +
'</div>'
);
}
if (mainSlider !== undefined) {
mainSlider.removeAllSlides();
mainSlider.appendSlide(slideHtml);
mainSlider.update();
}
if (thumbsSlider !== undefined) {
thumbsSlider.removeAllSlides();
thumbsSlider.appendSlide(slideThmbHtml);
thumbsSlider.update();
}
InitFancyBox();
}
},
UpdateSideIcons: function (index, wrapper) {
let $icons = wrapper.find('.js-replace-icons:first')
if ($icons.length && this.CheckWrapper($icons, wrapper) && this.obOffers[index]['ICONS_HTML']) {
$icons.html($(this.obOffers[index]['ICONS_HTML']))
}
},
UpdateRow: function (intNumber, activeID, showID, canBuyID) {
var i = 0,
showI = 0,
countShow = 0,
obData = {},
obDataCont = {},
isCurrent = false,
selectIndex = 0,
RowItems = null,
$titleNode;
if (-1 < intNumber && intNumber < $(this.options.containerClass + ' .sku-props__inner').length) {
var activeClass = 'sku-props__value--active';
RowItems = BX.findChildren($(this.options.containerClass + ' .sku-props__inner:eq(' + intNumber + ') .sku-props__values')[0], { 'tag': 'div' }, false);
if (!!RowItems && 0 < RowItems.length) {
countShow = showID.length;
obData = {
style: {},
props: {
disabled: '',
selected: '',
},
};
obDataCont = {
style: {},
};
$titleNode = $(this.options.containerClass + ' .sku-props__inner:eq(' + intNumber + ') .sku-props__js-size')
for (i = 0; i < RowItems.length; i++) {
let $item = RowItems[i].querySelector('.sku-props__value');
let classList = $item.classList.value.replace(activeClass, '');
let value = $item.getAttribute('data-onevalue');
let title = $item.getAttribute('data-title');
isCurrent = (value === activeID /*&& value !=0*/);
if (isCurrent) {
classList += ' ' + activeClass;
$titleNode.text(title)
}
obData.style.display = 'none';
if (BX.util.in_array(value, showID)) {
obData.style.display = '';
if (isCurrent) {
selectIndex = showI;
}
if (value != 0)
showI++;
//showI++;
}
$item.className = classList;
BX.adjust(RowItems[i], obData);
}
// activeID is string, and can be 0 or empty
if (!showI /*|| activeID == 0*/) {
obDataCont.style.display = 'none';
} else {
obDataCont.style.display = '';
}
BX.adjust($(this.options.containerClass + ' .sku-props__inner:eq(' + intNumber + ')')[0], obDataCont);
}
}
},
CheckWrapper: function (replaceBlock, wrapper) {
return replaceBlock.closest(".js-popup-block")[0] === wrapper[0];
},
UpdateSKUInfoByProps: function (offersTree) {
let arCanBuyValues,
arShowValues = false
strName = '',
arFilter = {};
for (i = 0; i < this.options.depth; i++) {
strName = 'PROP_' + $(this.options.containerClass + ' .sku-props__inner:eq(' + i + ')').data('id');
if (this.options.selectedValues[strName]) {
arFilter[strName] = this.options.selectedValues[strName].toString();
}
}
strName = 'PROP_' + $(this.options.containerClass + ' .sku-props__inner:eq(' + this.options.depth + ')').data('id');
arShowValues = this.GetRowValues(arFilter, strName, offersTree);
if (arShowValues && BX.util.in_array(this.options.strPropValue, arShowValues)) {
if ($(this.options.containerClass).data('selected')) {
this.options.selectedValues = $(this.options.containerClass).data('selected');
}
arFilter[strName] = this.options.strPropValue.toString();
for (i = ++this.options.depth; i < $(this.options.containerClass + ' .sku-props__inner').length; i++) {
strName = 'PROP_' + $(this.options.containerClass + ' .sku-props__inner:eq(' + i + ')').data('id');
arShowValues = this.GetRowValues(arFilter, strName, offersTree);
if (!arShowValues) {
break;
}
arCanBuyValues = arShowValues;
if (this.options.selectedValues[strName] && BX.util.in_array(this.options.selectedValues[strName], arCanBuyValues)) {
arFilter[strName] = this.options.selectedValues[strName].toString();
} else {
arFilter[strName] = arCanBuyValues[0];
}
this.UpdateRow(i, arFilter[strName], arShowValues, arCanBuyValues);
}
$(this.options.containerClass).data('selected', arFilter);
//ChangeInfo();
}
},
UpdateSKUBlocks: function (index) {
const blockID = this.obOffers[index]['ID'];
const $blocks = document.querySelectorAll('[data-sku_block_id]');
if ($blocks.length) {
for (let i = 0; i < $blocks.length; i++) {
$blocks[i].dataset.sku_block_id == blockID
? $blocks[i].classList.remove('hidden')
: $blocks[i].classList.add('hidden');
}
}
}
}
}
Raw
y_aspro max custom.js
function AsproTreeChange(){
var that = this;
let offerId = that.getOffersIdBySelected();
if(offerId){
}else{
addSelectToSKUChoose();
setTimeout(function(){
$('.fastview-product .counter_wrapp').addClass('js_hide_on_first');
$('.product-container.catalog_detail .counter_wrapp').addClass('js_hide_on_first');
$('#headerfixed .with-product .buy_block ').addClass('js_hide_on_first_small');
addTooltipToBuyButton();
},100)
}
}
function AsproOfferChange(){
var that = this;
let arTree = that.getSelectedTreeForConnect();
$.each(arTree, function(prop_id, prop_val){
let select = $(".bx_catalog_item_scu.sku_in_detail .bx_item_detail_size[data-id='"+prop_id+"'] select");
let input_group = $(".bx_catalog_item_scu.sku_in_detail .bx_item_detail_size[data-id='"+prop_id+"'] .list_values_wrapper");
if(select.length>0){
select.find("option").removeAttr( "selected" );
select.find("option[data-onevalue='"+prop_val+"']").prop('selected',true);
select.find("option[data-onevalue='"+prop_val+"']").attr('selected',"selected");
select.change();
}else{
input_group.find(".item[data-onevalue='"+prop_val+"']").click();
}
});
}
Raw
y_aspro max result_modifier.php
<?
$arParamsCustom = $arParams;
$arParamsCustom['OFFER_TREE_PROPS'] = getOfferTreeFromAspro($arResult['SKU_PROPS'],$arResult);
$SELECT_VIEW = $arParamsCustom['OFFER_TREE_PROPS'];
createCustomSkuTree(
$arResult,
$arParamsCustom,
array(
"SORT_AS_CLOTH_SIZES"=>array(),
//'SELECT_VIEW'=>array(),
'SELECT_VIEW'=>$SELECT_VIEW,
'COLOR_XML_LINK'=>array(),
)
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment