update
This commit is contained in:
@@ -26,17 +26,23 @@
|
||||
{foreach from=$groups key=id_attribute_group item=group}
|
||||
{if !empty($group.attributes)}
|
||||
<div class="clearfix product-variants-item">
|
||||
<span class="control-label">{$group.name}</span>
|
||||
<span class="control-label{if (($product.id|intval == 35920) || ($product.id_product|intval == 35920)) && ($id_attribute_group|intval == 3)} js-size-control-label{/if}"{if (($product.id|intval == 35920) || ($product.id_product|intval == 35920)) && ($id_attribute_group|intval == 3)} data-attribute-group="{$id_attribute_group}"{/if}>{$group.name}</span>
|
||||
{if $group.group_type == 'select'}
|
||||
<select
|
||||
class="form-control form-control-select"
|
||||
id="group_{$id_attribute_group}"
|
||||
data-product-attribute="{$id_attribute_group}"
|
||||
name="group[{$id_attribute_group}]">
|
||||
{foreach from=$group.attributes key=id_attribute item=group_attribute}
|
||||
<option value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} selected="selected"{/if}>{$group_attribute.name}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
<div class="js-size-select-wrap" data-attribute-group="{$id_attribute_group}" style="width: 100%;">
|
||||
<select
|
||||
class="form-control form-control-select"
|
||||
id="group_{$id_attribute_group}"
|
||||
data-product-attribute="{$id_attribute_group}"
|
||||
name="group[{$id_attribute_group}]">
|
||||
{foreach from=$group.attributes key=id_attribute item=group_attribute}
|
||||
{if (($product.id|intval == 35920) || ($product.id_product|intval == 35920)) && ($id_attribute_group|intval == 3) && (($id_attribute|intval == 857) || ($id_attribute|intval == 858))}
|
||||
<option value="{$id_attribute}" title="{$group_attribute.name}" class="js-custom-size-option" hidden="hidden" data-custom-size="1"{if $group_attribute.selected} selected="selected"{/if}>{$group_attribute.name}</option>
|
||||
{else}
|
||||
<option value="{$id_attribute}" title="{$group_attribute.name}"{if $group_attribute.selected} selected="selected"{/if}>{$group_attribute.name}</option>
|
||||
{/if}
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
{elseif $group.group_type == 'color'}
|
||||
<ul id="group_{$id_attribute_group}">
|
||||
{foreach from=$group.attributes key=id_attribute item=group_attribute}
|
||||
@@ -67,3 +73,205 @@
|
||||
{/if}
|
||||
{/foreach}
|
||||
</div>
|
||||
|
||||
{if (($product.id|intval == 35920) || ($product.id_product|intval == 35920))}
|
||||
{foreach from=$groups key=id_attribute_group item=group}
|
||||
{if ($id_attribute_group|intval == 3) && ($group.group_type == 'select') && !empty($group.attributes)}
|
||||
<div class="m-t-1 js-custom-size-open-wrap" data-attribute-group="{$id_attribute_group}">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-primary js-open-custom-size-modal"
|
||||
data-toggle="modal"
|
||||
data-target="#custom-size-modal-{$id_attribute_group}" style="width: 100%; margin-bottom: 10px;">
|
||||
Wybierz niestandardowy rozmiar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="m-t-1 js-custom-size-selected-wrap" data-attribute-group="{$id_attribute_group}" style="display:none; margin-bottom: 25px;">
|
||||
<span style="font-size: 16px;">Wybrano niestandardowy rozmiar: <strong class="js-custom-size-selected-name"></strong></span>
|
||||
<button type="button" class="js-custom-size-cancel" style="margin-left: 10px; position: relative; top: -2px; cursor: pointer;" data-attribute-group="{$id_attribute_group}" title="Anuluj" aria-label="Anuluj">X</button>
|
||||
</div>
|
||||
|
||||
<div class="modal fade" id="custom-size-modal-{$id_attribute_group}" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title">Wybierz niestandardowy rozmiar</h4>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="list-group">
|
||||
{foreach from=$group.attributes key=custom_id_attribute item=custom_group_attribute}
|
||||
{if ($custom_id_attribute|intval == 857) || ($custom_id_attribute|intval == 858)}
|
||||
<button
|
||||
type="button"
|
||||
class="list-group-item list-group-item-action js-custom-size-choice"
|
||||
data-attribute-group="{$id_attribute_group}"
|
||||
data-attribute-id="{$custom_id_attribute}"
|
||||
onclick="window.selectCustomSizeFromModal(this); return false;">
|
||||
{$custom_group_attribute.name|escape:'html':'UTF-8'}
|
||||
</button>
|
||||
{/if}
|
||||
{/foreach}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/foreach}
|
||||
{/if}
|
||||
{if (($product.id|intval == 35920) || ($product.id_product|intval == 35920))}
|
||||
<script>
|
||||
(function () {
|
||||
window.selectCustomSizeFromModal = function (button) {
|
||||
var jq = window.jQuery;
|
||||
var attributeId = String(button.getAttribute('data-attribute-id') || '');
|
||||
var attributeGroup = String(button.getAttribute('data-attribute-group') || '');
|
||||
|
||||
if (!attributeId || !attributeGroup) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (jq) {
|
||||
var $targets = jq('select[data-product-attribute="' + attributeGroup + '"]');
|
||||
$targets.each(function () {
|
||||
var $select = jq(this);
|
||||
var $option = $select.find('option[value="' + attributeId + '"]');
|
||||
|
||||
if ($option.length) {
|
||||
$option.prop('selected', true);
|
||||
$select.val(attributeId);
|
||||
$select.trigger('change');
|
||||
}
|
||||
});
|
||||
|
||||
jq(button).closest('.modal').modal('hide');
|
||||
return;
|
||||
}
|
||||
|
||||
var select = document.querySelector('select[data-product-attribute="' + attributeGroup + '"]');
|
||||
if (select) {
|
||||
select.value = attributeId;
|
||||
select.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
}
|
||||
|
||||
var modalElement = button.closest('.modal');
|
||||
if (modalElement) {
|
||||
modalElement.classList.remove('in');
|
||||
modalElement.style.display = 'none';
|
||||
modalElement.setAttribute('aria-hidden', 'true');
|
||||
document.body.classList.remove('modal-open');
|
||||
var backdrops = document.querySelectorAll('.modal-backdrop');
|
||||
backdrops.forEach(function (backdrop) {
|
||||
backdrop.parentNode.removeChild(backdrop);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
window.updateCustomSizeUi = function (attributeGroup) {
|
||||
var select = document.querySelector('select[data-product-attribute="' + attributeGroup + '"]');
|
||||
var controlLabel = document.querySelector('.js-size-control-label[data-attribute-group="' + attributeGroup + '"]');
|
||||
var selectWrap = document.querySelector('.js-size-select-wrap[data-attribute-group="' + attributeGroup + '"]');
|
||||
var openWrap = document.querySelector('.js-custom-size-open-wrap[data-attribute-group="' + attributeGroup + '"]');
|
||||
var selectedWrap = document.querySelector('.js-custom-size-selected-wrap[data-attribute-group="' + attributeGroup + '"]');
|
||||
var selectedName = selectedWrap ? selectedWrap.querySelector('.js-custom-size-selected-name') : null;
|
||||
|
||||
if (!select || !selectedWrap) {
|
||||
return;
|
||||
}
|
||||
|
||||
var selectedOption = select.options[select.selectedIndex];
|
||||
var isCustom = selectedOption && selectedOption.getAttribute('data-custom-size') === '1';
|
||||
|
||||
if (isCustom) {
|
||||
if (controlLabel) {
|
||||
controlLabel.style.display = 'none';
|
||||
}
|
||||
if (selectWrap) {
|
||||
selectWrap.style.display = 'none';
|
||||
}
|
||||
if (openWrap) {
|
||||
openWrap.style.display = 'none';
|
||||
}
|
||||
if (selectedName) {
|
||||
selectedName.textContent = selectedOption.textContent || '';
|
||||
}
|
||||
selectedWrap.style.display = '';
|
||||
} else {
|
||||
if (controlLabel) {
|
||||
controlLabel.style.display = '';
|
||||
}
|
||||
if (selectWrap) {
|
||||
selectWrap.style.display = '';
|
||||
}
|
||||
if (openWrap) {
|
||||
openWrap.style.display = '';
|
||||
}
|
||||
selectedWrap.style.display = 'none';
|
||||
}
|
||||
};
|
||||
|
||||
window.cancelCustomSize = function (attributeGroup) {
|
||||
var select = document.querySelector('select[data-product-attribute="' + attributeGroup + '"]');
|
||||
if (!select) {
|
||||
return;
|
||||
}
|
||||
|
||||
var standardOption = null;
|
||||
for (var i = 0; i < select.options.length; i++) {
|
||||
if (select.options[i].getAttribute('data-custom-size') !== '1') {
|
||||
standardOption = select.options[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (standardOption) {
|
||||
select.value = standardOption.value;
|
||||
select.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
}
|
||||
|
||||
window.updateCustomSizeUi(attributeGroup);
|
||||
};
|
||||
|
||||
document.removeEventListener('click', window.__customSizeChoiceHandler || function () {});
|
||||
window.__customSizeChoiceHandler = function (event) {
|
||||
var button = event.target.closest('.js-custom-size-choice');
|
||||
if (!button) {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
window.selectCustomSizeFromModal(button);
|
||||
};
|
||||
document.addEventListener('click', window.__customSizeChoiceHandler);
|
||||
|
||||
document.removeEventListener('click', window.__customSizeCancelHandler || function () {});
|
||||
window.__customSizeCancelHandler = function (event) {
|
||||
var cancelButton = event.target.closest('.js-custom-size-cancel');
|
||||
if (!cancelButton) {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
var attributeGroup = String(cancelButton.getAttribute('data-attribute-group') || '');
|
||||
if (attributeGroup) {
|
||||
window.cancelCustomSize(attributeGroup);
|
||||
}
|
||||
};
|
||||
document.addEventListener('click', window.__customSizeCancelHandler);
|
||||
|
||||
document.removeEventListener('change', window.__customSizeSelectChangeHandler || function () {});
|
||||
window.__customSizeSelectChangeHandler = function (event) {
|
||||
var select = event.target;
|
||||
if (!select || !select.matches || !select.matches('select[data-product-attribute="3"]')) {
|
||||
return;
|
||||
}
|
||||
window.updateCustomSizeUi('3');
|
||||
};
|
||||
document.addEventListener('change', window.__customSizeSelectChangeHandler);
|
||||
|
||||
window.updateCustomSizeUi('3');
|
||||
})();
|
||||
</script>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user