Skip to content

J
joshine
Commit 0d843a60 by dhn
Options

默认第一选项 js修改

parent 1ac9ccfe
Showing with 72 additions and 35 deletions
app/design/frontend/Joshine/breeze/Magento_Swatches/web/js/swatch-renderer.js
...@@ -400,7 +400,7 @@ define([ ...@@ -400,7 +400,7 @@ define([
* *
* @private * @private
*/ */
_RenderControls: function () { _RenderControls: function (index) {
var $widget = this, var $widget = this,
container = this.element, container = this.element,
classes = this.options.classes, classes = this.options.classes,
...@@ -408,13 +408,14 @@ define([ ...@@ -408,13 +408,14 @@ define([
showTooltip = this.options.showTooltip; showTooltip = this.options.showTooltip;
$widget.optionsMap = {}; $widget.optionsMap = {};
$.each(this.options.jsonConfig.attributes, function () { $.each(this.options.jsonConfig.attributes, function () {
var item = this, var item = this,
controlLabelId = 'option-label-' + item.code + '-' + item.id, controlLabelId = 'option-label-' + item.code + '-' + item.id,
options = $widget._RenderSwatchOptions(item, controlLabelId), options = $widget._RenderSwatchOptions(item, controlLabelId),
select = $widget._RenderSwatchSelect(item, chooseText), select = $widget._RenderSwatchSelect(item, chooseText),
input = $widget._RenderFormInput(item), areaCheckedId =$widget._RenderSwatchFirstOptionsId(item, controlLabelId),
CheckedId =$widget._RenderSwatchCheckedOptionsId(item),
input = $widget._RenderFormInput(item,CheckedId),
listLabel = '', listLabel = '',
label = ''; label = '';
...@@ -422,7 +423,6 @@ define([ ...@@ -422,7 +423,6 @@ define([
if ($widget.options.onlySwatches && !$widget.options.jsonSwatchConfig.hasOwnProperty(item.id)) { if ($widget.options.onlySwatches && !$widget.options.jsonSwatchConfig.hasOwnProperty(item.id)) {
return; return;
} }
if ($widget.options.enableControlLabel) { if ($widget.options.enableControlLabel) {
var tem_size = ''; var tem_size = '';
if (item.label.toLowerCase() == "size"){ if (item.label.toLowerCase() == "size"){
...@@ -436,7 +436,7 @@ define([ ...@@ -436,7 +436,7 @@ define([
label += label +=
'<span id="' + controlLabelId + '" class="' + classes.attributeLabelClass + '">' + '<span id="' + controlLabelId + '" class="' + classes.attributeLabelClass + '">' +
$('<i></i>').text(item.label).html() + $('<i></i>').text(item.label).html() +
'</span>'+ '<span class="' + classes.attributeSelectedOptionLabelClass + '"></span>' ; '</span>'+ '<span class="' + classes.attributeSelectedOptionLabelClass + '">'+item.options[0].label+'</span>' ;
} }
} }
...@@ -450,14 +450,17 @@ define([ ...@@ -450,14 +450,17 @@ define([
} }
if (item.label.toLowerCase() == "size") { if (item.label.toLowerCase() == "size") {
// Create new control // Create new control
var sizeContent = '<div class="swatch-attribute-selected-option-size-content" ><div style="font-size:.32rem;color:#999999;">'+$.mage.__("Product Size Describe")+ '</div>'+'<span style="color:#0a0a0a;" class="'+classes.attributeSelectedOptionLabelClass + '"></span></div>'; var sizeContent = '<div class="swatch-attribute-selected-option-size-content" style="display:block;">'+
'<div style="font-size:.32rem;color:#999999;">'+$.mage.__("Product Size Describe")+ '</div>'+
'<span style="color:#0a0a0a;" class="'+classes.attributeSelectedOptionLabelClass + '">'+item.options[0].label+'</span></div>';
container.append( container.append(
'<div class="' + classes.attributeClass + ' ' + item.code + '" ' + '<div class="' + classes.attributeClass + ' ' + item.code + '" ' +
'data-attribute-code="' + item.code + '" ' + 'data-attribute-code="' + item.code + '" ' +
'data-attribute-id="' + item.id + '">' + 'data-attribute-id="' + item.id + '" '+
'data-option-selected="' + CheckedId + '">' +
label + label +
'<div aria-activedescendant="" ' + '<div aria-activedescendant="'+areaCheckedId+'" ' +
'tabindex="0" ' + 'tabindex="0" ' +
'aria-invalid="false" ' + 'aria-invalid="false" ' +
'aria-required="true" ' + 'aria-required="true" ' +
...@@ -471,9 +474,10 @@ define([ ...@@ -471,9 +474,10 @@ define([
container.append( container.append(
'<div class="' + classes.attributeClass + ' ' + item.code + '" ' + '<div class="' + classes.attributeClass + ' ' + item.code + '" ' +
'data-attribute-code="' + item.code + '" ' + 'data-attribute-code="' + item.code + '" ' +
'data-attribute-id="' + item.id + '">' + 'data-attribute-id="' + item.id + '" '+
'data-option-selected="' + CheckedId + '">' +
label + label +
'<div aria-activedescendant="" ' + '<div aria-activedescendant="'+areaCheckedId+'" ' +
'tabindex="0" ' + 'tabindex="0" ' +
'aria-invalid="false" ' + 'aria-invalid="false" ' +
'aria-required="true" ' + 'aria-required="true" ' +
...@@ -485,7 +489,6 @@ define([ ...@@ -485,7 +489,6 @@ define([
); );
} }
$widget.optionsMap[item.id] = {}; $widget.optionsMap[item.id] = {};
// Aggregate options array to hash (key => value) // Aggregate options array to hash (key => value)
...@@ -577,9 +580,15 @@ define([ ...@@ -577,9 +580,15 @@ define([
label = this.label ? $('<i></i>').text(this.label).html() : ''; label = this.label ? $('<i></i>').text(this.label).html() : '';
attr = attr =
' id="' + controlId + '-item-' + id + '"' + ' id="' + controlId + '-item-' + id + '"' +
' index="' + index + '"' + ' index="' + index + '"';
' aria-checked="false"' + if(index == 0)
' aria-describedby="' + controlId + '"' + {
attr += ' aria-checked="true"';
}
else {
attr += ' aria-checked="false"';
}
attr += ' aria-describedby="' + controlId + '"' +
' tabindex="0"' + ' tabindex="0"' +
' data-option-type="' + type + '"' + ' data-option-type="' + type + '"' +
' data-option-id="' + id + '"' + ' data-option-id="' + id + '"' +
...@@ -598,35 +607,73 @@ define([ ...@@ -598,35 +607,73 @@ define([
if (!this.hasOwnProperty('products') || this.products.length <= 0) { if (!this.hasOwnProperty('products') || this.products.length <= 0) {
attr += ' data-option-empty="true"'; attr += ' data-option-empty="true"';
} }
var selectedStr = '';
if(index == 0)
{
selectedStr = ' selected';
}
if (type === 0) { if (type === 0) {
// Text // Text
html += '<div class="' + optionClass + ' text" ' + attr + '>' + (value ? value : label) +
html += '<div class="' + optionClass + ' text' + selectedStr + '" ' + attr + '>' + (value ? value : label) +
'</div>'; '</div>';
} else if (type === 1) { } else if (type === 1) {
// Color // Color
html += '<div class="' + optionClass + ' color" ' + attr + html += '<div class="' + optionClass + ' color' + selectedStr + '" ' + attr +
' style="background: ' + value + ' style="background: ' + value +
' no-repeat center; background-size: cover;">' + '' + ' no-repeat center; background-size: cover;">' + '' +
'</div>'; '</div>';
} else if (type === 2) { } else if (type === 2) {
// Image // Image
html += '<div class="' + optionClass + ' image" ' + attr + html += '<div class="' + optionClass + ' image' + selectedStr + '" ' + attr +
' style="background: url(' + value + ') no-repeat center; background-size: cover;width:' + ' style="background: url(' + value + ') no-repeat center; background-size: cover;width:' +
swatchImageWidth + 'px; height:' + swatchImageHeight + 'px">' + '' + swatchImageWidth + 'px; height:' + swatchImageHeight + 'px">' + '' +
'</div>'; '</div>';
} else if (type === 3) { } else if (type === 3) {
// Clear // Clear
html += '<div class="' + optionClass + '" ' + attr + '></div>'; html += '<div class="' + optionClass + selectedStr + '" ' + attr + '></div>';
} else { } else {
// Default // Default
html += '<div class="' + optionClass + '" ' + attr + '>' + label + '</div>'; html += '<div class="' + optionClass + selectedStr + '" ' + attr + '>' + label + '</div>';
} }
}); });
return html; return html;
}, },
_RenderSwatchFirstOptionsId: function (config, controlId) {
var optionConfig = this.options.jsonSwatchConfig[config.id];
if (!this.options.jsonSwatchConfig.hasOwnProperty(config.id)) {
return '';
}
var returnId = '';
$.each(config.options, function (index) {
if (!optionConfig.hasOwnProperty(this.id)) {
return '';
}
if(index == 0)
{
returnId = controlId + '-item-' + this.id;
}
});
return returnId;
},
_RenderSwatchCheckedOptionsId: function (config) {
var optionConfig = this.options.jsonSwatchConfig[config.id];
if (!this.options.jsonSwatchConfig.hasOwnProperty(config.id)) {
return '';
}
var returnId = '';
$.each(config.options, function (index) {
if (!optionConfig.hasOwnProperty(this.id)) {
return '';
}
if(index == 0)
{
returnId = this.id;
}
});
return returnId;
},
/** /**
* Render select by part of config * Render select by part of config
* *
...@@ -669,14 +716,15 @@ define([ ...@@ -669,14 +716,15 @@ define([
* @param {Object} config * @param {Object} config
* @private * @private
*/ */
_RenderFormInput: function (config) { _RenderFormInput: function (config,CheckedId) {
return '<input class="' + this.options.classes.attributeInput + ' super-attribute-select" ' + return '<input class="' + this.options.classes.attributeInput + ' super-attribute-select" ' +
'name="super_attribute[' + config.id + ']" ' + 'name="super_attribute[' + config.id + ']" ' +
'type="text" ' + 'type="text" ' +
'value="" ' + 'value="'+CheckedId+'" ' +
'data-selector="super_attribute[' + config.id + ']" ' + 'data-selector="super_attribute[' + config.id + ']" ' +
'data-validate="{required: true}" ' + 'data-validate="{required: true}" ' +
'aria-required="true" ' + 'aria-required="true" ' +
'data-attr-name="'+config.code+'" ' +
'aria-invalid="false">'; 'aria-invalid="false">';
}, },
...@@ -1490,20 +1538,9 @@ define([ ...@@ -1490,20 +1538,9 @@ define([
* @param {HTMLElement} element - DOM element associated with a gallery. * @param {HTMLElement} element - DOM element associated with a gallery.
*/ */
_onGalleryLoaded: function (element) { _onGalleryLoaded: function (element) {
var galleryObject = element.data('gallery');
var galleryObject = element.data('gallery');
this.options.mediaGalleryInitial = galleryObject.returnCurrentImages(); this.options.mediaGalleryInitial = galleryObject.returnCurrentImages();
/*
if($('.swatch-attribute .swatch-option'))
{
var swatchObj = $('.swatch-attribute');
for(var i=0;i<swatchObj.length;i++)
{
$(swatchObj[i]).find('.swatch-option:first').trigger('click');
}
}
*/
}, },
/** /**
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment