Graficzna prezentacja atrybutów – szablon Topaz

Kategoria Przykładowe modyfikacje
Utworzony 18 lipca 2022

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.

Wskazówka

W tym artykule dowiesz się jak wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować.

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:


	{{saveChangesTranslation}}

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


	{{generalTranslation}}
	{{additionalSettings}}

Teraz odszukaj instrukcję:

A linijkę przed nią wklej:

{% assign colorVariantsPresentationLanguageTableText = 'PL,EN,DE,FR,UK,RU,CS,SK,BG,DA,EL,ES,FI,IT,NO,NL,PT,RO,HR,ET,BE,IS,SV,LT,LV,HU,SR,SL,MK,TR,JA,SQ,KA' -%} {% assign colorVariantsPresentationLanguageTable = colorVariantsPresentationLanguageTableText | Split: ',' -%}

{{chooseColorVariantsPresentationLanguage}}:

{% for language in colorVariantsPresentationLanguageTable -%} {% assign variableName = 'grapicalVariantsPresentationColors' | Append: language -%} {% if settings[variableName] -%}

{% assign grapicalVariantsColorArr = settings[variableName] | Split: '|||' -%} {% assign variantColorIteration = 0 -%}

{{grapicalVariantsPresentationColorSettings_Color}} ({{language}})

{% for variantColor in grapicalVariantsColorArr -%} {% assign grapicalVariantColorValue = variantColor | Split: '||' -%} {% assign grapicalVariantColorHash = grapicalVariantColorValue[1] -%} {% assign grapicalVariantColorName = grapicalVariantColorValue[0] -%}

{% assign variantColorIteration = variantColorIteration |Plus:1 -%} {% endfor -%}

{% endif -%} {% endfor -%}

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('' +
										'' +
										'' +
										'Kolor (' + languageToDisplay + ')' +
										'' +
										'Wartość' +
										'' +
										'Usuń');
		}
	});

    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($('
' + s[el].Value + '').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($('
' + s[el].Value + '').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 -%}
          
              {% for attribute in product.Supplies.AttributeNames -%}
                    {{ attribute.Name | H }}
                    
              {% endfor -%}

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 -%}

    {% if settings.grapicalVariantsPresentation == 'Variants_Colors' -%}
	{% assign firstAttribute = product.Supplies.AttributeNames|First -%}
	{% assign lastAttribute = product.Supplies.AttributeNames|Last -%}
        {% for attribute in product.Supplies.AttributeNames -%}
            {{ attribute.Name | H }}
            
        {% endfor -%}
    {% elseif settings.grapicalVariantsPresentation == 'Variants_Thumbnails' -%}
        {% assign firstAttribute = product.Supplies.AttributeNames|First -%}
        {% assign lastAttribute = product.Supplies.AttributeNames|Last -%}
        {% for attribute in product.Supplies.AttributeNames -%}
            {{ attribute.Name | H }}
            
        {% endfor -%}
     {% else -%}
        {% for attribute in product.Supplies.AttributeNames -%}
            {{ attribute.Name | H }}
            
        {% endfor -%}
     {% endif -%}

Teraz znajdź:

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

    {{ attribute.Name }}
    
        {% assign i = 0 -%}
        {% for value in attribute.Values -%}
             {{ value.Value | H }}
             {% assign i = i | Plus: 1 -%}
        {% endfor -%}
        {% if i >= 4 -%}
             {% assign diff = i | Minus: 4 -%}
             {{translations.ReadMore}} +{{diff}}
        {% endif -%}

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 -%}
             
                 {{ attribute.Name }}
                 
                     {% assign i = 0 -%}
                     {% assign loopIterationVariable = loopIterationVariable | Plus: 1 -%}
                     {% if settings.variantsGroupingAttribute == 'Grouping_First' and loopIterationVariable == 1 -%}
                          {% assign loopAttributeFlag = true -%}
                     {% elseif settings.variantsGroupingAttribute == 'Grouping_Last' and loopIterationVariable == attributeQuantity -%}
                          {% assign loopAttributeFlag = true -%}
                     {% elseif settings.variantsGroupingAttribute == 'Grouping_All' -%}
                         {% assign loopAttributeFlag = true -%}
                     {% else -%}
                         {% assign loopAttributeFlag = false -%}
                     {% endif -%}
                     {% if settings.grapicalVariantsPresentation == 'Variants_Colors' and grapicalVariantsPresentationColorsData and loopAttributeFlag -%}
                         {% assign variantsColorArr = grapicalVariantsPresentationColorsData | Split: '|||' -%}

                         {% for value in attribute.Values -%}
                             {% assign bgColorValue = '' -%}
                             {% assign borderColorValue = '' -%}

                             {% for colorValue in variantsColorArr -%}
                                  {% assign colorValueArr = colorValue | Split: '||' -%}
                                  {% assign colorValueName = colorValueArr[0] | Downcase -%}
                                  {% assign colorValueHash = colorValueArr[1] -%}
				  {% assign colorValueToCheck = value.Value | H | Downcase -%}
				  {% if colorValueName == colorValueToCheck -%}
					{% assign bgColorValue = colorValueHash -%}
				  {% endif -%}
                             {% endfor -%}
                             {% if bgColorValue == '' -%}
                                 {% assign bgColorValue = '#FFFFFF' -%}
                             {% endif -%}
                             {% if bgColorValue != '#FFFFFF' or bgColorValue != settings.primaryPageBgColor -%}
                                 {% assign borderColorValue = bgColorValue -%}
                             {% endif -%}

                             
                             
                                 
                                 {{ value.Value | H }}
                             
                             
                             {% assign i = i | Plus: 1 -%}
                         {% endfor -%}
                         {% if i >= 4 -%}
                              {% assign diff = i | Minus: 4 -%}
                              {{translations.ReadMore}} +{{diff}}
                         {% endif -%}
                     {% else -%}
                         {% for value in attribute.Values -%}
                              {{ value.Value | H }}
                              {% assign i = i | Plus: 1 -%}
                         {% endfor -%}
                         {% if i >= 4 -%}
                              {% assign diff = i | Minus: 4 -%}
                              {{translations.ReadMore}} +{{diff}}
                         {% endif -%}
                     {% endif -%}

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 -%}

   {% for attribute in product.Supplies.AttributeNames -%}
       {{ attribute.Name | H }}
       
       

   {% endfor -%}

{% elseif product.AttributesPolyvalent != empty -%}
{% for attribute in product.AttributesPolyvalent -%}
    
       {{ attribute.Name }}
       
           {% for value in attribute.Values -%}
               {{ value.Value | H }}
           {% endfor -%}

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 -%}
        
            {% if settings.grapicalVariantsPresentation == 'Variants_Colors' -%}
		{% assign firstAttribute = product.Supplies.AttributeNames|First -%}
                {% assign lastAttribute = product.Supplies.AttributeNames|Last -%}
                {% for attribute in product.Supplies.AttributeNames -%}
                     {{ attribute.Name | H }}
                     
                     

                {% endfor -%}
            {% elseif settings.grapicalVariantsPresentation == 'Variants_Thumbnails' -%}
                {% assign firstAttribute = product.Supplies.AttributeNames|First -%}
                {% assign lastAttribute = product.Supplies.AttributeNames|Last -%}
                {% for attribute in product.Supplies.AttributeNames -%}
                     {{ attribute.Name | H }}
                     
                     

                {% endfor -%}
            {% else -%}
                {% for attribute in product.Supplies.AttributeNames -%}
                     {{ attribute.Name | H }}
                     
                     

                {% endfor -%}
            {% endif -%}
        
    {% elseif product.AttributesPolyvalent != empty -%}
	{% assign loopAttributeFlag = false -%}
        {% assign attributeQuantity = product.AttributesPolyvalent | Size -%}
        {% assign loopIterationVariable = 0 -%}
        {% for attribute in product.AttributesPolyvalent -%}
            
                {{ attribute.Name }}
                
                   {% assign loopIterationVariable = loopIterationVariable | Plus: 1 -%}
                   {% if settings.variantsGroupingAttribute == 'Grouping_First' and loopIterationVariable == 1 -%}
                       {% assign loopAttributeFlag = true -%}
                   {% elseif settings.variantsGroupingAttribute == 'Grouping_Last' and loopIterationVariable == attributeQuantity -%}
                       {% assign loopAttributeFlag = true -%}
                   {% elseif settings.variantsGroupingAttribute == 'Grouping_All' -%}
                       {% assign loopAttributeFlag = true -%}
                   {% else -%}
                       {% assign loopAttributeFlag = false -%}
                   {% endif -%}

                   {% if settings.grapicalVariantsPresentation == 'Variants_Colors' and grapicalVariantsPresentationColorsData and loopAttributeFlag -%}
                       {% assign variantsColorArr = grapicalVariantsPresentationColorsData | Split: '|||' -%}
                       {% for value in attribute.Values -%}
                           {% assign bgColorValue = '' -%}
                           {% assign borderColorValue = '' -%}
                           {% for colorValue in variantsColorArr -%}
                                {% assign colorValueArr = colorValue | Split: '||' -%}
                                {% assign colorValueName = colorValueArr[0] | Downcase -%}
                                {% assign colorValueHash = colorValueArr[1] -%}
				{% assign colorValueToCheck = value.Value | H | Downcase -%}
				{% if colorValueName == colorValueToCheck -%}
				    {% assign bgColorValue = colorValueHash -%}
				{% endif -%}
                           {% endfor -%}
                           {% if bgColorValue == '' -%}
                               {% assign bgColorValue = '#FFFFFF' -%}
                           {% endif -%}
                           {% if bgColorValue != '#FFFFFF' or bgColorValue != settings.primaryPageBgColor -%}
                               {% assign borderColorValue = bgColorValue -%}
                           {% endif -%}
                           
                           
                               
                               {{ value.Value | H }}
                           
                           
                       {% endfor -%}
                   {% else -%}
                       {% for value in attribute.Values -%}
                            {{ value.Value | H }}
                       {% endfor -%}
                   {% endif -%}

Na koniec znajdź jeszcze fragment:


    {% if product.Archival == false -%}
        {% if product.Clip or product.Batch -%}
        
        {% if product.Clip or product.Batch -%}
        
        {% endif -%}
        
            {% for attribute in product.Supplies.AttributeNames -%}
                {{ attribute.Name | H }}
                
            {% endfor -%}
        
        {% elseif product.AttributesPolyvalent != empty -%}
        {% for attribute in product.AttributesPolyvalent -%}
        
            {{ attribute.Name }}
            
                 {% assign i = 0 -%}
                 {% for value in attribute.Values -%}
                     {{ value.Value | H }}
                     {% assign i = i | Plus: 1 -%}
                 {% endfor -%}
                 {% if i >= 4 -%}
                     {% assign diff = i | Minus: 4 -%}
                     {{translations.ReadMore}} +{{diff}}
                 {% endif -%}

I zastąp go poniższym kodem:


   {% 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 -%}
            
               {% if settings.grapicalVariantsPresentation == 'Variants_Colors' -%}
		   {% assign firstAttribute = product.Supplies.AttributeNames|First -%}
                   {% assign lastAttribute = product.Supplies.AttributeNames|Last -%}
                   {% for attribute in product.Supplies.AttributeNames -%}
                        {{ attribute.Name | H }}
                        
                   {% endfor -%}
               {% elseif settings.grapicalVariantsPresentation == 'Variants_Thumbnails' -%}
                   {% assign firstAttribute = product.Supplies.AttributeNames|First -%}
                   {% assign lastAttribute = product.Supplies.AttributeNames|Last -%}
                   {% for attribute in product.Supplies.AttributeNames -%}
                        {{ attribute.Name | H }}
                        
                   {% endfor -%}
               {% else -%}
                   {% for attribute in product.Supplies.AttributeNames -%}
                        {{ attribute.Name | H }}
                        
                   {% endfor -%}
               {% endif -%}
           
       {% elseif product.AttributesPolyvalent != empty -%}
	   {% assign loopAttributeFlag = false -%}
           {% assign attributeQuantity = product.AttributesPolyvalent | Size -%}
           {% assign loopIterationVariable = 0 -%}
           {% for attribute in product.AttributesPolyvalent -%}
                
                    {{ attribute.Name }}
                    
                        {% assign i = 0 -%}
                        {% assign loopIterationVariable = loopIterationVariable | Plus: 1 -%}
                        {% if settings.variantsGroupingAttribute == 'Grouping_First' and loopIterationVariable == 1 -%}
                            {% assign loopAttributeFlag = true -%}
                        {% elseif settings.variantsGroupingAttribute == 'Grouping_Last' and loopIterationVariable == attributeQuantity -%}
                            {% assign loopAttributeFlag = true -%}
                        {% elseif settings.variantsGroupingAttribute == 'Grouping_All' -%}
                            {% assign loopAttributeFlag = true -%}
                        {% else -%}
                            {% assign loopAttributeFlag = false -%}
                        {% endif -%}
                        {% if settings.grapicalVariantsPresentation == 'Variants_Colors' and grapicalVariantsPresentationColorsData and loopAttributeFlag -%}
                            {% assign variantsColorArr = grapicalVariantsPresentationColorsData | Split: '|||' -%}

                            {% for value in attribute.Values -%}
                                {% assign bgColorValue = '' -%}
                                {% assign borderColorValue = '' -%}

                                {% for colorValue in variantsColorArr -%}
                                     {% assign colorValueArr = colorValue | Split: '||' -%}
                                     {% assign colorValueName = colorValueArr[0] | Downcase -%}
                                     {% assign colorValueHash = colorValueArr[1] -%}
				     {% assign colorValueToCheck = value.Value | H | Downcase -%}
				     {% if colorValueName == colorValueToCheck -%}
					{% assign bgColorValue = colorValueHash -%}
				     {% endif -%}
                                {% endfor -%}
                                {% if bgColorValue == '' -%}
				    {% assign bgColorValue = '#FFFFFF' -%}
				{% endif -%}
				{% if bgColorValue != '#FFFFFF' or bgColorValue != settings.primaryPageBgColor -%}
				    {% assign borderColorValue = bgColorValue -%}
				{% endif -%}

                                
                                    
                                        
                                        {{ value.Value | H }}
                                    
                                
                                {% assign i = i | Plus: 1 -%}
                            {% endfor -%}
                            {% if i >= 4 -%}
                                 {% assign diff = i | Minus: 4 -%}
                                 {{translations.ReadMore}} +{{diff}}
                            {% endif -%}
                        {% else -%}
                            {% for value in attribute.Values -%}
                                 {{ value.Value | H }}
                                 {% assign i = i | Plus: 1 -%}
                            {% endfor -%}
                            {% if i >= 4 -%}
                                {% assign diff = i | Minus: 4 -%}
                                {{translations.ReadMore}} +{{diff}}
                            {% endif -%}
                        {% endif -%}

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}}

Czy ten artykuł był pomocny?

( 1 )

( 0 )

Graficzna prezentacja atrybutów – szablon Topaz

Wstęp

Zmiana ustawień w Panelu Administracyjnym

Zmiany w plikach szablonu

{{grapicalVariantsPresentation_Title}}

{{variantsGroupingAttribute_Title}}

{{variantsGroupingAttributeColors_Title}}

{{grapicalVariantsPresentationColorSettings_Title}}

{{SizeChartSectionOne}}

{{SizeChartSectionTwo}}

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt