Graficzna prezentacja atrybutów – szablon Topaz

Wstęp

W szablonie Topaz od wersji 2022.4 wprowadzono możliwość graficznej prezentacji atrybutów towaru. Funkcja umożliwia prezentację atrybutów, w formie kolorów dla towarów zgrupowanych (fantomów) i tych posiadających atrybuty oraz w formie miniatur dla towarów zgrupowanych. W tym artykule dowiesz się jak zmodyfikować swój szablon, aby obsługiwał graficzną prezentację atrybutów.

Zmiana ustawień w Panelu Administracyjnym

W Panelu Administracyjnym wybierz zakładkę Wygląd sklepu/Ustawienia szablonu, a następnie w prawym górnym rogu kliknij na ikonę z trzema kwadratami i wybierz opcję Edytuj ustawienia zaawansowane. Następnie w zakładce Ustawienia (JSON) w oknie JSON znajdź na końcu kodu znak „}” i wklej przed nim poniższą instrukcję, po czym zapisz zmiany.

,"grapicalVariantsPresentation":"Variants_No","variantsGroupingAttribute":"Grouping_First","grapicalVariantsPresentationColorsPL":"Błękitny||#99CCFF|||Czerwony||#FF3300|||Niebieski||#3366FF|||Brązowy||#964b00|||Czarny||#000000|||Biały||#FFFFFF|||Złoty||#ffd700|||Różowy||#ffc0cb|||Turkusowy||#76D7C4|||Pomarańczowy||#fc9303|||Zielony||#008000|||Beżowy||#c2b280|||Bordowy||#800000|||Ciemny szary||#909090|||Fioletowy||#87599d|||Granatowy||#000080|||Szary||#b4b4b4|||Zgniło zielony||#a5a542|||Żółty||#ffef00","grapicalVariantsPresentationColorsEN":"Azure||#99CCFF|||Red||#FF3300|||Blue||#3366FF|||Brown||#964b00|||Black||#000000|||White||#FFFFFF|||Gold||#ffd700|||Pink||#ffc0cb|||Turquoise||#76D7C4|||Orange||#fc9303|||Green||#008000|||Beige||#c2b280|||Burgundy||#800000|||Dark grey||#909090|||Purple||#87599d|||Navy blue||#000080|||Gray||#b4b4b4|||Rotten green||#a5a542|||Yellow||#ffef00","grapicalVariantsPresentationColorsDE":"Azurblau||#99CCFF|||Rot||#FF3300|||Blau||#3366FF|||Braun||#964b00|||Schwarz||#000000|||Weiß||#FFFFFF|||Gold||#ffd700|||Rosa||#ffc0cb|||Türkis||#76D7C4|||Orange||#fc9303|||Grün||#008000|||Beige||#c2b280|||Kastanienbraun||#800000|||Dunkelgraué||#909090|||Violett||#87599d|||Marineblau||#000080|||Grau||#b4b4b4|||Fauliges Grün||#a5a542|||Gelb||#ffef00","grapicalVariantsPresentationColorsFR":"Azur||#99CCFF|||Rouge||#FF3300|||Bleu||#3366FF|||Marron||#964b00|||Noir||#000000|||Blanc||#FFFFFF|||Or||#ffd700|||Rose||#ffc0cb|||Turquoise||#76D7C4|||Orange||#fc9303|||Vert||#008000|||Beige||#c2b280|||Bordeaux||#800000|||Gris foncé||#909090|||Violet||#87599d|||Bleu marine||#000080|||Gris||#b4b4b4|||Vert pourri||#a5a542|||Jaune||#ffef00"

Zmiany w plikach szablonu

W pliku __settings.liquid znajdź frazę:

{% when '1' -%}

Pod podaną treścią należy wkleić poniższy kod:

{% assign additionalSettings = "Dodatkowe" -%}
{% assign grapicalVariantsPresentation_Title = "Graficzna prezentacja wariantów towarów" -%}
{% assign grapicalVariantsPresentation_No = "Nie" -%}
{% assign grapicalVariantsPresentation_Colors = "Kolory" -%}
{% assign grapicalVariantsPresentation_Thumbnails = "Miniatury (tylko dla towarów zgrupowanych)" -%}
{% assign grapicalVariantsPresentationColorSettings_Title = "Dodaj własne wartości atrybutów i przypisane dla nich wartości do poniższej listy" -%}
{% assign multiVariantProducts = "Towary wielowariantowe" -%}
{% assign variantsGroupingAttributeColors_Title = "W formie graficznej prezentowany będzie atrybut" -%}
{% assign variantsGroupingAttribute_Title = "W formie graficznej prezentowany będzie atrybut grupujący" -%}
{% assign variantsGroupingAttribute_First = "Pierwszy" -%}
{% assign variantsGroupingAttribute_Last = "Ostatni" -%}
{% assign variantsGroupingAttribute_All = "Wszystkie" -%}
{% assign addColor = "Dodaj kolor" -%}
{% assign grapicalVariantsPresentationColorSettings_Color = "Kolor" -%}
{% assign grapicalVariantsPresentationColorSettings_Value = "Wartość" -%}
{% assign delete = "Usuń" -%}

Następnie wyszukaj najbliższą frazę:

{% else %}

I wklej pod nią następujący kod:

{% assign additionalSettings = "Additional" -%}
{% assign grapicalVariantsPresentation_Title = "Graphical presentation of product variants" -%}
{% assign grapicalVariantsPresentation_No = "No" -%}
{% assign grapicalVariantsPresentation_Colors = "Colors" -%}
{% assign grapicalVariantsPresentation_Thumbnails = "Miniatures (only for grouped goods)" -%}
{% assign grapicalVariantsPresentationColorSettings_Title = "Add customized attribute values and assign them to the list below" -%}
{% assign multiVariantProducts = "Multivariant products" -%}
{% assign variantsGroupingAttributeColors_Title = "The attribute will be presented graphically" -%}
{% assign variantsGroupingAttribute_Title = "Grouping attribute will be presented in graphical form" -%}
{% assign variantsGroupingAttribute_First = "First" -%}
{% assign variantsGroupingAttribute_Last = "Last" -%}
{% assign variantsGroupingAttribute_All = "All" -%}
{% assign addColor = "Add color" -%}
{% assign grapicalVariantsPresentationColorSettings_Color = "Color" -%}
{% assign grapicalVariantsPresentationColorSettings_Value = "Value" -%}
{% assign delete = "Delete" -%}

Teraz znajdź fragment kodu:

#lg-settings-content .mainHeader {
	font-size: 22px;
	margin: 45px auto 10px;
}

A następnie zmień wartości marginesów na:

margin: 10px auto;

Kolejno wyszukaj:

#lg-settings-content .themeSettings__inputs > section

Podany fragment zastąp:

#lg-settings-content .themeSettings__inputs > section, #lg-settings-content .additionalSettingsTab section

Teraz wyszukaj:

#lg-settings-content .themeSettings__inputs .section-title

I zmień kod na poniższy:

#lg-settings-content .themeSettings__inputs .section-title, #lg-settings-content .additionalSettingsTab .section-title

Kolejno odnajdź instrukcję:

#lg-settings-content .colorInput {
	position: relative;
	box-shadow: 2px 8px 10px 0 rgba(0, 0, 0, .25);
	cursor: pointer;
	width: 80px !important;
	min-width: 80px !important;
	height: 22px;
	border-radius: 5px;
	margin: 5px 0 -5px 5px;
}

A następnie zastąp ją podanym fragmentem:

#lg-settings-content .colorInput, #lg-settings-content .variantColorInput {
	position: relative;
	box-shadow: 2px 8px 10px 0 rgba(0, 0, 0, .25);
	cursor: pointer;
	width: 80px !important;
	min-width: 80px !important;
	height: 22px;
	border-radius: 5px;
	margin: 5px 0 -5px 5px;
} 

#lg-settings-content .variantColorInput {
	width: 110px !important;
	min-width: 110px !important;
}

#lg-settings-content .colors-row {
	display: flex;
	width: 290px;
	border-bottom: 1px solid #ddd;
	border-right: 1px solid #ddd;
}

#lg-settings-content .colors-row:first-child {
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	font-weight: bold;
}

#lg-settings-content .colors-cell-title {
	display: flex;
	align-items: center;
}

#lg-settings-content .colors-cell-title p {
	padding: 0 5px;
}

#lg-settings-content .colors-cell {
	border-left: 1px solid #ddd;
	padding: 5px 0 10px;
}

#lg-settings-content .colors-cell-name {
	width: 120px;
}

#lg-settings-content .colors-cell-color {
	display: flex;
	width: 130px !important;
}

#lg-settings-content .colors-cell-delete {
	width: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#lg-settings-content .colors-cell-delete div {
	cursor: pointer;
	padding: 5px;
}

#lg-settings-content .add-variant-color {
	margin: 10px 0;
}

Kolejnym etapem jest zmiana wyświetlanej treści w ustawieniach Panelu Administracyjnego. Wyszukaj fragment:

I poniżej powyższego kodu wklej poniższe instrukcje:

Teraz odszukaj instrukcję:

A linijkę przed nią wklej:

Ostatnim etapem zmian w pliku jest edycja kodu JavaScript. Znajdź fragment:

function __SaveLiquidSettings(){
        var o = {};
        $('#lg-settings-content input[name], #lg-settings-content div[data-name]').each(function(i,el) {
            if($(el).attr('type') == 'radio' || $(el).attr('type') == 'checkbox') {
                if($(el).is(':checked')) {
                    o[el.name] = el.value;
                }
            } else if ($(el).attr('type') == 'color') {
                o[el.dataset.name] = el.dataset.value;
				(el.dataset.value).length > 7 ? el.classList.add('transparent-js') : el.classList.remove('transparent-js');
            } else {
                o[el.name] = el.value;
			}
        });
        return o;
    }

A nastepnie podmień go na:

if($('#grapicalVariantsPresentation-Colors').prop('checked')){
	    $('.grapicalVariantsPresentationColorSettings').show();
		$('.grouping-attribute-thumbnails').hide();
		$('.grouping-attribute-colors').show();
    } else {
	    $('.grapicalVariantsPresentationColorSettings').hide();
    }

	if($('#grapicalVariantsPresentation-Thumbnails').prop('checked')){
		$('.grouping-attribute-thumbnails').show();
		$('.grouping-attribute-colors').hide();
    }

	if($('#grapicalVariantsPresentation-No').prop('checked')){
		$('.variantsGroupingAttributeSettings').hide();
		$('.grouping-attribute-thumbnails').hide();
		$('.grouping-attribute-colors').hide();
    } else {
	    $('.variantsGroupingAttributeSettings').show();
    }

	$('[name=grapicalVariantsPresentation]').on('change', function(){
	    if($('#grapicalVariantsPresentation-Colors').prop('checked')){
			$('.grapicalVariantsPresentationColorSettings').show();
			$('.variantsGroupingAttributeSettings').show();
			$('.grouping-attribute-thumbnails').hide();
			$('.grouping-attribute-colors').show();
		} else if($('#grapicalVariantsPresentation-Thumbnails').prop('checked')) {
			$('.variantsGroupingAttributeSettings').show();
			$('.grapicalVariantsPresentationColorSettings').hide();
			$('.grouping-attribute-thumbnails').show();
			$('.grouping-attribute-colors').hide();
		} else {
			$('.grapicalVariantsPresentationColorSettings').hide();
			$('.variantsGroupingAttributeSettings').hide();
			$('.grouping-attribute-thumbnails').hide();
			$('.grouping-attribute-colors').hide();
		}
    });

	$('#lg-settings-content .add-variant-color').on('click', function(e){
		var colorsTableClass = $(e.currentTarget).prev().prev().val();
		var colorsTable = $(e.currentTarget).parent().find('.' + colorsTableClass);
		var newColorNumber = colorsTable.find('.colors-row').length - 1;
		var colorsTableTitle = colorsTable.find('.colors-row-title');
		colorsTableTitle.after('

’); var openPaletteBtns = document.querySelectorAll(’.openPaletteBtn-js’); var colorInputs = document.querySelectorAll(’.colorInput’); var oldColor; for (let i = 0; i < openPaletteBtns.length; i++) { openPaletteBtns[i].addEventListener(’click’, function() { var pickerColor = colorPicker.checkIfHex(this.dataset.value); oldColor = pickerColor; colorPicker.openPalette(this); colorPicker.setTransparencyGradient(pickerColor); colorPicker.setTransparencyPicker(this.dataset.value); }); } for (let i = 0; i < colorInputs.length;i++) { colorInputs[i].addEventListener(’change’, function() { var hex = $(this).val(); var alphaPickerPosition = (document.querySelector(’.selectedAlpha-js’).style.left).replace(/\D/g, ”); var alphaValue = (1 – (alphaPickerPosition / 300)).toFixed(2); var rgbaColor = „rgba(” + colorPicker.hexToRgb(hex).r + „,” + colorPicker.hexToRgb(hex).g + „,” + colorPicker.hexToRgb(hex).b + „,” + alphaValue + „)”; colorPicker.clearCanvas(); colorPicker.drawElements(hex); colorPicker.setTransparencyGradient(hex); openPaletteBtns[i].style.backgroundColor = rgbaColor; openPaletteBtns[i].setAttribute(„data-value”,rgbaColor); this.setAttribute(„data-value”, hex); this.setAttribute(„value”, hex); }); } $(’.colors-delete-js’).on(’click’, function(e) { var colorToRemove = $(e.currentTarget).parent().parent(); colorToRemove.remove(); }); }); $(’.colors-delete-js’).on(’click’, function(e) { var colorToRemove = $(e.currentTarget).parent().parent(); colorToRemove.remove(); }); $(’.grapicalVariantsPresentationColorSelectLng’).on(’change’, function() { var colorsTables = $(’.grapicalVariantsPresentationColorTable’); for(var i = 0; i < colorsTables.length; i++) { $(colorsTables[i]).hide(); } var languageToDisplay = $(’.grapicalVariantsPresentationColorSelectLng’).val(); var tableToDisplay = ’.grapicalVariantsPresentationColorTable.’ + languageToDisplay; if($(tableToDisplay).length > 0) { $(tableToDisplay).show(); } else { var colorsTablesSection = $(’.grapicalVariantsPresentationColorSettings’); colorsTablesSection.append(’

’); } }); function __SaveLiquidSettings(){ var o = {}; var colorsVariants = []; var tempColorsVariants = []; $(’#lg-settings-content input[name], #lg-settings-content div[data-name]’).each(function(i,el) { if($(el).attr(’type’) == 'radio’ || $(el).attr(’type’) == 'checkbox’) { if($(el).is(’:checked’)) { o[el.name] = el.value; } } else if ($(el).attr(’type’) == 'colorVariant’) { var colorLanguage = $(el).closest(’.grapicalVariantsPresentationColorTable’)[0].classList[1]; var toAdd = true; var hexColorVariant = el.dataset.value; var colorRow = el.parentElement.parentElement; var colorName = colorRow.querySelector(’.variantColorInputName’).value.trim(); if(colorRow.querySelector(’.variantColorInputName’).value !== colorName) { colorRow.querySelector(’.variantColorInputName’).value = colorName; } var arrayIndex = 0; var hasLanguage = false; if(!tempColorsVariants) { tempColorsVariants[0][0] = colorLanguage; colorsVariants[0][0] = colorLanguage; } else { for(var i = 0; i < tempColorsVariants.length; i++) { if(tempColorsVariants[i][0] == colorLanguage) { arrayIndex = i; hasLanguage = true; break; } } if(!hasLanguage) { tempColorsVariants.push([colorLanguage]); colorsVariants.push([colorLanguage]); arrayIndex = tempColorsVariants.length – 1; } } for(var i=1; i < tempColorsVariants[arrayIndex].length; i++) { if (tempColorsVariants[arrayIndex][i].toLowerCase() === colorName.toLowerCase()) { toAdd = false; break; } } if (!colorName) { toAdd = false; } if (toAdd) { if (colorsVariants[arrayIndex][1] && hexColorVariant) { colorsVariants[arrayIndex][1] = colorsVariants[arrayIndex][1] + '|||’; } if (colorsVariants[arrayIndex].length < 2) { colorsVariants[arrayIndex].push(colorName + '||’ + hexColorVariant); } else { colorsVariants[arrayIndex][1] = colorsVariants[arrayIndex][1] + colorName + '||’ + hexColorVariant; } tempColorsVariants[arrayIndex].push(colorName); } else { var elementToRemove = colorRow.querySelector(’.variantColorInputName’).parentElement.parentElement; elementToRemove.remove(); } } else if ($(el).attr(’type’) == 'color’) { o[el.dataset.name] = el.dataset.value; (el.dataset.value).length > 7 ? el.classList.add(’transparent-js’) : el.classList.remove(’transparent-js’); } else { o[el.name] = el.value; } }); if (colorsVariants !== „”) { for(var i = 0; i < colorsVariants.length; i++) { o[’grapicalVariantsPresentationColors’ + colorsVariants[i][0]] = colorsVariants[i][1]; } } $(’.selectedTheme-js’).attr(’id’) === „themecolorDark” ? o[„defaultColor”] = „#ffffff” : o[„defaultColor”] = „#000000”; return o; }

Kolejne zmiany w plikach szablonu Topaz dotyczą plików widoku szczegółów towaru. Kreator szablonów umożliwia wygenerowanie czterech różnych widoków szczegółów towarów, dlatego zmiany dla każdego z nich mogą się różnić.

Na początku wykonaj zmiany w pliku z kodem JavaScript. Są one identyczne dla wszystkich widoków i należy ich dokonać w pliku js/layout2.js. Wyszukaj w pliku fragment:

function SetSuplFirst(drop, s, lvl, valId) {
    var form = drop.parent().parent().parent();
    var fDrop = form.find('.attributes-select');
    drop.empty();
    for (var el in s) {
        drop.append($('' + s[el].Value + '').data('el', JSON.stringify(s[el])));
    }

Przedstawioną powyżej pętle for podmień na następujący kod:

var attributesColorsData = drop.data('variants-colors');
    var attributesColors = [];
    if (attributesColorsData) {
        attributesColorsData = attributesColorsData.split('|||');
        for (var i = 0; i < attributesColorsData.length; i++) {
            var attributesColor = attributesColorsData[i].split('||');
            attributesColors.push([attributesColor[0],attributesColor[1]]);
        }
    }
    for (var el in s) {
        if (drop.data('variants-colors')) {
            if ((drop.data('colors-option') === 'Grouping_First' && drop.data('attribute-id') === drop.data('first-attribute-id'))
                || (drop.data('colors-option') === 'Grouping_Last' && drop.data('attribute-id') === drop.data('last-attribute-id'))
                || (drop.data('colors-option') === 'Grouping_All')) {
                var bgVariantColor = null;
                var borderVariantColor = null
                for (var i = 0; i < attributesColors.length; i++) {
                    if (attributesColors[i][0].toLowerCase() === s[el].Value.toLowerCase()) {
                        bgVariantColor = attributesColors[i][1];
                        borderVariantColor = attributesColors[i][1];
                    }
                }
				if (!bgVariantColor) {
                    bgVariantColor = '#FFFFFF';
                }
                if (bgVariantColor === '#FFFFFF' || bgVariantColor === drop.data('page-bg')) {
                    borderVariantColor = null;
                }
                drop.append($('

').data('el', JSON.stringify(s[el])));
            }
            else {
                drop.append($('' + s[el].Value + '').data('el', JSON.stringify(s[el])));
            }  
        }
        else if (drop.data('thumbnails')) {
            var bgVariantImage
            if (s[el].Product) {
                if (s[el].Product.ImagesExt[0].ExternalUrl) {
                    bgVariantImage = "url(" + s[el].Product.ImagesExt[0].ExternalUrl + ")";
                }
                else {
                    bgVariantImage = "url(img/" + s[el].Product.ImagesExt[0].Id + "/" + s[el].Product.ImagesExt[0].Link + ")";
                }
            } else {
                var chcekImagesLoopObj = s[el].Supplies[0]
                while (!chcekImagesLoopObj.Product) {
                    chcekImagesLoopObj = chcekImagesLoopObj.Supplies[0];
                }
                if (chcekImagesLoopObj.Product.ImagesExt[0].ExternalUrl) {
                    bgVariantImage = "url(" + chcekImagesLoopObj.Product.ImagesExt[0].ExternalUrl + ")";
                } else {
                    bgVariantImage = "url(img/" + chcekImagesLoopObj.Product.ImagesExt[0].Id + "/" +  chcekImagesLoopObj.Product.ImagesExt[0].Link + ")";
                }
            }
            if ((drop.data('thumbnails-option') === 'Grouping_First' && drop.data('attribute-id') === drop.data('first-attribute-id'))
                || (drop.data('thumbnails-option') === 'Grouping_Last' && drop.data('attribute-id') === drop.data('last-attribute-id'))
                || (drop.data('thumbnails-option') === 'Grouping_All')) {
                drop.append($('

').data('el', JSON.stringify(s[el])));
            } else {
                drop.append($('' + s[el].Value + '').data('el', JSON.stringify(s[el])));
            }
        } else {
            drop.append($('' + s[el].Value + '').data('el', JSON.stringify(s[el])));
        }
    }

Analogiczną zmianę wykonaj w sekcji:

function SetSupl(drop, s) {
    var form = drop.closest('#AddToCartForm');
    var fDrop = form.find('.attributes-select');
    drop.empty();
    for (var el in s) {
        drop.append($('' + s[el].Value + '').data('el', JSON.stringify(s[el])));
    }

Instrukcję pętli for podmień na ten sam kod, co dla fragmentu znajdującego się w funkcji SetSuplFirst.

Następne zmiany dotyczyć będą pliku html. Zmiany zostaną omówione na przykładzie pliku elements/product/product-details-3.html, lecz omawiany kod będzie identyczny dla innych widoków szczegółów towaru. Róźnić się będzie jedynie nazwa edytowanego pliku, a dokładniej cyfra znajdująca się w nazwie.

Na początku wyszukaj fragment:

{% if product.Archival == false -%}
          {% if product.Clip or product.Batch -%}
          
          {% if product.Clip or product.Batch -%}
          
          {% endif -%}

Przedstawiony powyżej element div (linijka od 7 do 12) zamień na następujący kod:

{% assign pageLanguageShort = page.Language | Upcase -%}
{% assign settingsVariableName = 'grapicalVariantsPresentationColors' | Append: pageLanguageShort -%}
{% assign grapicalVariantsPresentationColorsData = settings[settingsVariableName] -%}
{% if settings.grapicalVariantsPresentation == 'Variants_Thumbnails' -%}
    {% assign attributesThumbnails = true -%}
{% endif -%}

Teraz znajdź:

{% elseif product.AttributesPolyvalent != empty -%}
{% for attribute in product.AttributesPolyvalent -%}

I powyższy kod zamień na:

{% elseif product.AttributesPolyvalent != empty -%}
	{% assign loopAttributeFlag = false -%}
        {% assign attributeQuantity = product.AttributesPolyvalent | Size -%}
        {% assign loopIterationVariable = 0 -%}
        {% for attribute in product.AttributesPolyvalent -%}

W przypadku kiedy szablon Topaz umożliwia zakup z listy towarów, konieczne są zmiany w pliku partials/products-list/add-to-cart-popup.html. Jeśli Twój szablon nie posiada tej opcji, możesz pominąć ten krok. Na początku wyszukaj fragment:

{% if product.Archival == false -%}
{% if product.Clip or product.Batch -%}

{% if product.Clip or product.Batch -%}

{% endif -%}

{% elseif product.AttributesPolyvalent != empty -%} {% for attribute in product.AttributesPolyvalent -%}

A następnie zamień go na:

{% if product.Archival == false -%}
    {% assign pageLanguageShort = page.Language | Upcase -%}
    {% assign settingsVariableName = 'grapicalVariantsPresentationColors' | Append: pageLanguageShort -%}
    {% assign grapicalVariantsPresentationColorsData = settings[settingsVariableName] -%}
    {% if settings.grapicalVariantsPresentation == 'Variants_Thumbnails' -%}
        {% assign attributesThumbnails = true -%}
    {% endif -%}
    {% if product.Clip or product.Batch -%}
        
        {% if product.Clip or product.Batch -%}
             
        {% endif -%}

{% elseif product.AttributesPolyvalent != empty -%} {% assign loopAttributeFlag = false -%} {% assign attributeQuantity = product.AttributesPolyvalent | Size -%} {% assign loopIterationVariable = 0 -%} {% for attribute in product.AttributesPolyvalent -%}

Na koniec znajdź jeszcze fragment:

I zastąp go poniższym kodem:

Ostatnim etapem zmian w szablonie Topaz w celu graficznej prezentacji atrybutów jest zmiana plików css w szablonie. Pliki ze stylami różnią się w zależności od wybranego szczegółu towaru. Poniższe zmiany dotyczą pierwszego i drugiego widoku szczegółów towaru. Zmiany dla pozostałych widoków przedstawione są w dalszej częsci artykułu.

W pliku css/layout1.css zlokalizuj podany fragment:

.product-details .input-group .wrongInput{border-bottom:1px solid #ce283e !important}.product-details .input-group .wrongInput--info{font-size:11px;text-align:left;color:#ce283e;position:absolute;left:0%;margin-top:-10px}.product-details .input-group input[name="attributeEditable"]{margin:30px 0 15px;padding-bottom:10px}.product-details .input-group .attributes-select{display:inline-block}

A następnie zaraz po ostatnim znaku powyższego kodu wklej:

.product-details .input-group .button-option-variants{height:auto;font-size:13px;padding:0 8px}.product-details .input-group .button-option-variants .button-option-variants-content{display:flex;flex-direction:column;align-items:center;padding:5px 0;margin:0 auto}.product-details .input-group .button-option-variants .button-option-variants-content__color{width:50px;height:50px;border:1px solid {{settings.secondaryFontColor}};border-radius:50%;margin-bottom:5px;background-size:cover !important}.product-details .input-group .button-option-variants .button-option-variants-content__text{line-height:1em;width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

Na koniec odnajdź fragment:

.product-details .dropdown .dropdown-content{display:none;position:absolute;background-color:{{settings.primaryPageBgColor}};box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);z-index:1;overflow-y:auto;max-height:190px;min-width:220px;padding:10px 15px}

I zmień wartość maksymalnej wysokości:

max-height:180px;

Następne zmiany stylistyki szablonu Topaz dotyczą wyłącznie trzeciego i czwartego widoku szczegółów towaru. W przypadku pozostałych widoków, wszystkie zmiany zostały już przedstawione.

W pliku css/layout2.css należy wyszukać w pliku fragment:

.productDetails-attributes .breakLine{display:block;width:100%;height:0;margin:0}

A następnie przed powyższym kodem dodaj:

.productDetails-attributes .button-option:not(.dropdown):not(.units-container) .button-option-variants{height:auto;font-size:13px;padding:0 6px}.productDetails-attributes .button-option:not(.dropdown):not(.units-container) .button-option-variants .button-option-variants-content{display:flex;flex-direction:column;align-items:center;padding:10px 0}.productDetails-attributes .button-option:not(.dropdown):not(.units-container) .button-option-variants .button-option-variants-content__color{width:50px;height:50px;border:1px solid {{settings.secondaryFontColor}};border-radius:50%;margin-bottom:5px;background-size:cover !important}.productDetails-attributes .button-option:not(.dropdown):not(.units-container) .button-option-variants .button-option-variants-content__text{line-height:1em;width:65px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

Teraz odnajdź w pliku instrukcje:

.choose-attribute-popup .attribute-name,.choose-attribute-popup .attr-ed-name{color:{{settings.primaryFontColor}};width:30%;font-size:14px;font-weight:bold;line-height:1.43;letter-spacing:normal;margin-bottom:10px}.choose-attribute-popup .attribute-name::first-letter,.choose-attribute-popup .attr-ed-name::first-letter{text-transform:capitalize}

I wklej przed podanym fragmentem takie instrukcje:

.choose-attribute-popup .attributes-select .button-option-variants{height:auto;font-size:13px;padding:0 6px;width:fit-content;margin:0 auto}.choose-attribute-popup .attributes-select .button-option-variants .button-option-variants-content{display:flex;flex-direction:column;align-items:center;padding:10px 0}.choose-attribute-popup .attributes-select .button-option-variants .button-option-variants-content__color{width:50px;height:50px;border:1px solid {{settings.secondaryFontColor}};border-radius:50%;margin-bottom:5px;background-size:cover !important}.choose-attribute-popup .attributes-select .button-option-variants .button-option-variants-content__text{line-height:1em;width:65px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

Następnie wyszukaj fragment:

@media screen and (min-width: 769px){.productDetails .popup-dialog .form-container{width:35rem !important;max-width:unset !important;padding:3rem 4rem 2rem}}

Aby podmienić go na poniższe wartości:

@media screen and (min-width: 769px){.productDetails .popup-dialog .form-container{width:55rem !important;max-width:unset !important;padding:3rem 4rem 2rem}}

Kolejno zlokalizuj instrukcje:

.choose-attribute-popup .form-container{padding:20px}.choose-attribute-popup .input-group{width:100%;display:flex;flex-direction:row;align-items:center;flex-wrap:wrap}.choose-attribute-popup .attributes-select{display:grid;width:100%;grid-template-columns:33% 33% 33%;grid-row-gap:10px;max-width:unset}

I zastąp je następującymi:

.choose-attribute-popup .form-container{padding:20px}.choose-attribute-popup .close-button{right:40px}.choose-attribute-popup .input-group{width:100%;display:flex;flex-direction:row;align-items:center;flex-wrap:wrap}.choose-attribute-popup .attributes-select{display:grid;width:100%;grid-template-columns:16% 16% 16% 16% 16% 16%;column-gap:6px;grid-row-gap:10px;max-width:unset}

Ostatnim etapem zmian w pliku jest aktualizacja podanego kodu:

.choose-attribute-popup .attr-popup-button{width:calc(100%-34px);height:16px;font-size:14px;font-weight:normal;font-stretch:normal;font-style:normal;line-height:16px;letter-spacing:1.2px;text-align:center}.choose-attribute-popup .button-option[data-selected="true"]{border:2px solid {{settings.linkFontColor}} !important}.choose-attribute-popup .attr-values{display:grid;grid-template-columns:33% 33% 33%;grid-row-gap:10px;width:100%;background-color:{{settings.primaryPageBgColor}} !important}

Na poniższy fragment:

.choose-attribute-popup .attr-popup-button{width:50%;margin:0 auto;height:16px;font-size:14px;font-weight:normal;font-stretch:normal;font-style:normal;line-height:16px;letter-spacing:1.2px;text-align:center}.choose-attribute-popup .button-option[data-selected="true"]{border:2px solid {{settings.linkFontColor}} !important}.choose-attribute-popup .attr-values{display:grid;grid-template-columns:16% 16% 16% 16% 16% 16%;column-gap:6px;grid-row-gap:10px;width:100%;background-color:{{settings.primaryPageBgColor}} !important}

W przypadku trzeciego i czwartego widoku szczegółów towaru, konieczne są jeszcze dodatkowe zmiany w pliku css/layout-m0.css.

Na początku wyszukaj fragment:

.productDetails .popup-dialog .main-title{max-width:85%}.productDetails .popup-dialog .primary-action-button{line-height:11px}.productDetails .popup-dialog .form-container{width:95%;padding:2rem 1.5rem;overflow-y:scroll;max-height:90vh}

Teraz podmień go na poniższy kod:

.productDetails .popup-dialog .main-title{max-width:85%}.productDetails .popup-dialog .primary-action-button{line-height:11px}.productDetails .popup-dialog .form-container{width:95%;padding:2rem 1.2rem;overflow-y:scroll;overflow-x:hidden;max-height:90vh}

Na koniec odnajdź w pliku instrukcje:

@media screen and (max-width: 400px){.choose-attribute-popup .attributes-select,.choose-attribute-popup .attr-values{grid-template-columns:49% 49%}

I zastąp je następującym fragmentem:

@media screen and (max-width: 768px){.choose-attribute-popup .attributes-select,.choose-attribute-popup .attr-values{grid-template-columns:33% 33% 33%;column-gap:0}.choose-attribute-popup .button-option-variants{padding:0 4px;word-break:break-word}.close-button{right:8px !important}.attr-popup-button{width:calc(100% - 34px) !important}.button-option-variants-content{padding:8px 0}}