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.

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

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

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

#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:

</div>

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

<a href="#" id="tab0">{{generalTranslation}}</a>

<a href="#" id="tab1">{{additionalSettings}}</a>

</div>

Teraz odszukaj instrukcję:

A linijkę przed nią wklej:

</div>

<div id="tab1Content" class="additionalSettingsTab">
		<fieldset>
			<legend>{{multiVariantProducts}}</legend>

<section>
				<h3 class='section-title'>{{grapicalVariantsPresentation_Title}}</h3>
				<div>
					<div>
						<div>
							<input type="radio" name='grapicalVariantsPresentation' value='Variants_No' id="grapicalVariantsPresentation-No" {% if settings.grapicalVariantsPresentation == 'Variants_No' %} checked {% endif %}/>
							<label class="label" for="grapicalVariantsPresentation-No">{{grapicalVariantsPresentation_No}}</label>
						</div>
						<div>
							<input type="radio" name='grapicalVariantsPresentation' value='Variants_Colors' id="grapicalVariantsPresentation-Colors" {% if settings.grapicalVariantsPresentation == 'Variants_Colors' %} checked {% endif %}/>
							<label class="label" for="grapicalVariantsPresentation-Colors">{{grapicalVariantsPresentation_Colors}}</label>
						</div>
						<div>
							<input type="radio" name='grapicalVariantsPresentation' value='Variants_Thumbnails' id="grapicalVariantsPresentation-Thumbnails" {% if settings.grapicalVariantsPresentation == 'Variants_Thumbnails' %} checked {% endif %}/>
							<label class="label" for="grapicalVariantsPresentation-Thumbnails">{{grapicalVariantsPresentation_Thumbnails}}</label>
						</div>
					</div>
				</div>
			</section>

<section class="variantsGroupingAttributeSettings">
				<h3 class='section-title grouping-attribute-thumbnails'>{{variantsGroupingAttribute_Title}}</h3>
				<h3 class='section-title grouping-attribute-colors'>{{variantsGroupingAttributeColors_Title}}</h3>
				<div>
					<div>
						<div>
							<input type="radio" name='variantsGroupingAttribute' value='Grouping_First' id="variantsGroupingAttribute-First" {% if settings.variantsGroupingAttribute == 'Grouping_First' %} checked {% endif %}/>
							<label class="label" for="variantsGroupingAttribute-First">{{variantsGroupingAttribute_First}}</label>
						</div>
						<div>
							<input type="radio" name='variantsGroupingAttribute' value='Grouping_Last' id="variantsGroupingAttribute-Last" {% if settings.variantsGroupingAttribute == 'Grouping_Last' %} checked {% endif %}/>
							<label class="label" for="variantsGroupingAttribute-Last">{{variantsGroupingAttribute_Last}}</label>
						</div>
						<div>
							<input type="radio" name='variantsGroupingAttribute' value='Grouping_All' id="variantsGroupingAttribute-All" {% if settings.variantsGroupingAttribute == 'Grouping_All' %} checked {% endif %}/>
							<label class="label" for="variantsGroupingAttribute-All">{{variantsGroupingAttribute_All}}</label>
						</div>
					</div>
				</div>
			</section>

<section class="grapicalVariantsPresentationColorSettings">
				<h3 class='section-title'>{{grapicalVariantsPresentationColorSettings_Title}}</h3>
				{% 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: ',' -%}
				<p>{{chooseColorVariantsPresentationLanguage}}:</p>
				<select class="grapicalVariantsPresentationColorSelectLng">
					{% for language in colorVariantsPresentationLanguageTable -%}
						<option {% if language == 'PL' -%}selected{% endif -%}>{{language}}</option>
					{% endfor -%}
				</select>
				<br />
				<button class="add-variant-color">{{addColor}}</button>

{% for language in colorVariantsPresentationLanguageTable -%}
					{% assign variableName = 'grapicalVariantsPresentationColors' | Append: language -%}
					{% if settings[variableName] -%}
						<div class="grapicalVariantsPresentationColorTable {{language}}" {% if language != 'PL' -%}style="display:none;"{% endif -%}>
							{% assign grapicalVariantsColorArr = settings[variableName] | Split: '|||' -%}
							{% assign variantColorIteration = 0 -%}
							<div class="colors-row colors-row-title">
								<div class="colors-cell colors-cell-title colors-cell-name">
									<p>{{grapicalVariantsPresentationColorSettings_Color}} ({{language}})</p>
								</div>
								<div class="colors-cell colors-cell-title colors-cell-color colors-cell-name">
									<p>{{grapicalVariantsPresentationColorSettings_Value}}</p>
								</div>
								<div class="colors-cell colors-cell-title colors-cell-delete">
									<p>{{delete}}</p>
								</div>
							</div>
							{% for variantColor in grapicalVariantsColorArr -%}
								{% assign grapicalVariantColorValue = variantColor | Split: '||' -%}
								{% assign grapicalVariantColorHash = grapicalVariantColorValue[1] -%}
								{% assign grapicalVariantColorName = grapicalVariantColorValue[0] -%}

{% assign variantColorIteration = variantColorIteration |Plus:1 -%}
							{% endfor -%}
						</div>
					{% endif -%}
				{% endfor -%}
			</section>
		</fieldset>
		<fieldset>
			<legend>{{SizeChartTitle}}</legend>
			<section>
				<h3 class='section-title'>{{SizeChartSectionOne}}</h3>
				<div>
					<div>
						<div>
							<input type="radio" name='sizeChart' value='no' id="sizeChart-no" {% if settings.sizeChart == 'no' %} checked {% endif %}/>
							<label class="label" for="sizeChart-no">{{SizeChartNo}}</label>
						</div>
						<div>
							<input type="radio" name='sizeChart' value='underAddToCartBtn' id="sizeChart-underAddToCartBtn" {% if settings.sizeChart == 'underAddToCartBtn' %} checked {% endif %}/>
							<label class="label" for="sizeChart-underAddToCartBtn">{{SizeChartUnderBtn}}</label>
						</div>
						<div>
							<input type="radio" name='sizeChart' value='underTheAttribute' id="sizeChart-underTheAttribute" {% if settings.sizeChart == 'underTheAttribute' %} checked {% endif %}/>
							<label class="label" for="sizeChart-underTheAttribute">{{SizeChartUnderFirtsAttribute}}</label>
						</div>
					</div>
				</div>
			</section>
			<section class="variantsOfSizeChart">
				<h3 class='section-title'>{{SizeChartSectionTwo}}</h3>
				<div>
					<div>
						<div>
							<input type="radio" name='variantsOfSizeChart' value='sizeChart-banner' id="variantsOfSizeChart-banner" {% if settings.variantsOfSizeChart == 'sizeChart-banner' %} checked {% endif %}/>
							<label class="label" for="variantsOfSizeChart-banner">{{SizeChartBennerOption}}</label>
						</div>
						<div>
							<input type="radio" name='variantsOfSizeChart' value='sizeChart-site' id="variantsOfSizeChart-site" {% if settings.variantsOfSizeChart == 'sizeChart-site' %} checked {% endif %}/>
							<label class="label" for="variantsOfSizeChart-site">{{SizeChartPageOption}}</label>
						</div>
						<div class="sizeChartSiteID">
							<label>{{SizeChartSelectPageId}}</label> <input name='sizeChartSiteID' type="text" value="27">
						</div>
						<div>
							<input type="radio" name='variantsOfSizeChart' value='sizeChart-attachPDF' id="variantsOfSizeChart-attachPDF" {% if settings.variantsOfSizeChart == 'sizeChart-attachPDF' %} checked {% endif %}/>
							<label class="label" for="variantsOfSizeChart-attachPDF">{{SizeChartPdfOption}}</label>
						</div>
					</div>
				</div>
			</section>
		</fieldset>	
	</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

</div>

<legend>{{multiVariantProducts}}</legend>

<h3 class='section-title'>{{grapicalVariantsPresentation_Title}}</h3>

<div>

<label class="label" for="grapicalVariantsPresentation-No">{{grapicalVariantsPresentation_No}}</label>

</div>

<div>

<label class="label" for="grapicalVariantsPresentation-Colors">{{grapicalVariantsPresentation_Colors}}</label>

</div>

<div>

<label class="label" for="grapicalVariantsPresentation-Thumbnails">{{grapicalVariantsPresentation_Thumbnails}}</label>

</div>

</section>

<h3 class='section-title grouping-attribute-thumbnails'>{{variantsGroupingAttribute_Title}}</h3>

<h3 class='section-title grouping-attribute-colors'>{{variantsGroupingAttributeColors_Title}}</h3>

<div>

<label class="label" for="variantsGroupingAttribute-First">{{variantsGroupingAttribute_First}}</label>

</div>

<div>

<label class="label" for="variantsGroupingAttribute-Last">{{variantsGroupingAttribute_Last}}</label>

</div>

<div>

<label class="label" for="variantsGroupingAttribute-All">{{variantsGroupingAttribute_All}}</label>

</div>

</section>

<h3 class='section-title'>{{grapicalVariantsPresentationColorSettings_Title}}</h3>

{% 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: ',' -%}

<p>{{chooseColorVariantsPresentationLanguage}}:</p>

{% for language in colorVariantsPresentationLanguageTable -%}

<option {% if language == 'PL' -%}selected{% endif -%}>{{language}}</option>

{% endfor -%}

</select>

<br />

<button class="add-variant-color">{{addColor}}</button>

{% for language in colorVariantsPresentationLanguageTable -%}

{% assign variableName = 'grapicalVariantsPresentationColors' | Append: language -%}

{% if settings[variableName] -%}

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

{% assign variantColorIteration = 0 -%}

<p>{{grapicalVariantsPresentationColorSettings_Color}} ({{language}})</p>

</div>

<p>{{grapicalVariantsPresentationColorSettings_Value}}</p>

</div>

<p>{{delete}}</p>

</div>

{% for variantColor in grapicalVariantsColorArr -%}

{% assign grapicalVariantColorValue = variantColor | Split: '||' -%}

{% assign grapicalVariantColorHash = grapicalVariantColorValue[1] -%}

{% assign grapicalVariantColorName = grapicalVariantColorValue[0] -%}

</div>

</div>

</div>

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

{% endfor -%}

</div>

{% endif -%}

{% endfor -%}

</section>

</fieldset>

<legend>{{SizeChartTitle}}</legend>

<h3 class='section-title'>{{SizeChartSectionOne}}</h3>

<div>

<label class="label" for="sizeChart-no">{{SizeChartNo}}</label>

</div>

<div>

<label class="label" for="sizeChart-underAddToCartBtn">{{SizeChartUnderBtn}}</label>

</div>

<div>

<label class="label" for="sizeChart-underTheAttribute">{{SizeChartUnderFirtsAttribute}}</label>

</div>

</section>

<h3 class='section-title'>{{SizeChartSectionTwo}}</h3>

<div>

<label class="label" for="variantsOfSizeChart-banner">{{SizeChartBennerOption}}</label>

</div>

<div>

<label class="label" for="variantsOfSizeChart-site">{{SizeChartPageOption}}</label>

</div>

<label>{{SizeChartSelectPageId}}</label> <input name='sizeChartSiteID' type="text" value="27">

</div>

<div>

<label class="label" for="variantsOfSizeChart-attachPDF">{{SizeChartPdfOption}}</label>

</div>

</section>

</fieldset>

</div>

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('<div class="colors-row">'+
							'<div class="colors-cell colors-cell-name"><input type="text" class="variantColorInput variantColorInputName" value="Nowy"></div>'+
							'<div class="colors-cell colors-cell-name colors-cell-color">'+
							'<div class="colorSquare openPaletteBtn-js" type="colorVariant" data-name="colorVariant'+colorsTableClass+newColorNumber+'" data-value="#FFFFFF" style="background: #FFFFFF"></div>'+
							'<input type="text" class="colorInput" data-name="colorVariant'+colorsTableClass+newColorNumber+'" data-value="#FFFFFF" value="#FFFFFF"></div>'+
							'<div class="colors-cell colors-cell-delete"><div class="fa fa-trash colors-delete-js"></div></div></div>');

$('.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('<div class="grapicalVariantsPresentationColorTable ' + languageToDisplay + '">' +
										'<div class="colors-row colors-row-title">' +
										'<div class="colors-cell colors-cell-title colors-cell-name">' +
										'<p>Kolor (' + languageToDisplay + ')</p></div>' +
										'<div class="colors-cell colors-cell-title colors-cell-color colors-cell-name">' +
										'<p>Wartość</p></div>' +
										'<div class="colors-cell colors-cell-title colors-cell-delete">' +
										'<p>Usuń</p></div></div></div>');
		}
	});

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

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('<div class="colors-row">'+

'<div class="colors-cell colors-cell-name"><input type="text" class="variantColorInput variantColorInputName" value="Nowy"></div>'+

'<div class="colors-cell colors-cell-name colors-cell-color">'+

'<div class="colorSquare openPaletteBtn-js" type="colorVariant" data-name="colorVariant'+colorsTableClass+newColorNumber+'" data-value="#FFFFFF" style="background: #FFFFFF"></div>'+

'<input type="text" class="colorInput" data-name="colorVariant'+colorsTableClass+newColorNumber+'" data-value="#FFFFFF" value="#FFFFFF"></div>'+

'<div class="colors-cell colors-cell-delete"><div class="fa fa-trash colors-delete-js"></div></div></div>');

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('<div class="grapicalVariantsPresentationColorTable ' + languageToDisplay + '">' +

'<div class="colors-row colors-row-title">' +

'<div class="colors-cell colors-cell-title colors-cell-name">' +

'<p>Kolor (' + languageToDisplay + ')</p></div>' +

'<div class="colors-cell colors-cell-title colors-cell-color colors-cell-name">' +

'<p>Wartość</p></div>' +

'<div class="colors-cell colors-cell-title colors-cell-delete">' +

'<p>Usuń</p></div></div></div>');

}

});

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($('<span data-value="' + s[el].ValueId + '" class="button-option">' + s[el].Value + '</span>').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($('<span data-value="' + s[el].ValueId + '" class="button-option button-option-variants" title="' + s[el].Value + '"><div class="button-option-variants-content"><div class="button-option-variants-content__color" style="background: ' + bgVariantColor + '; border-color: ' + borderVariantColor + ';"></div><div class="button-option-variants-content__text">' + s[el].Value + '</div></div></span>').data('el', JSON.stringify(s[el])));

}

else {

drop.append($('<span data-value="' + s[el].ValueId + '" class="button-option">' + s[el].Value + '</span>').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($('<span data-value="' + s[el].ValueId + '" class="button-option button-option-variants" title="' + s[el].Value + '"><div class="button-option-variants-content"><div class="button-option-variants-content__color" style="background: ' + bgVariantImage + '; border: none;"></div><div class="button-option-varian-content__text">' + s[el].Value + '</div></div></span>').data('el', JSON.stringify(s[el])));

} else {

drop.append($('<span data-value="' + s[el].ValueId + '" class="button-option">' + s[el].Value + '</span>').data('el', JSON.stringify(s[el])));

}

} else {

drop.append($('<span data-value="' + s[el].ValueId + '" class="button-option">' + s[el].Value + '</span>').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($('<span data-value="' + s[el].ValueId + '" class="button-option">' + s[el].Value + '</span>').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 -%}

<span class="attribute-name">{{ attribute.Name | H }}</span>

{% endfor -%}

</div>

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 -%}
<div class="input-group">
    {% if settings.grapicalVariantsPresentation == 'Variants_Colors' -%}
	{% assign firstAttribute = product.Supplies.AttributeNames|First -%}
	{% assign lastAttribute = product.Supplies.AttributeNames|Last -%}
        {% for attribute in product.Supplies.AttributeNames -%}
            <span class="attribute-name">{{ attribute.Name | H }}</span>
            <div class="attributes-select button-option attributeId"
            data-page-bg="{{settings.primaryPageBgColor}}"
            data-page-language="{{page.LanguageId}}"
            data-colors-option='{{settings.variantsGroupingAttribute}}'
            data-first-attribute-id="{{firstAttribute.Id}}"
            data-last-attribute-id="{{lastAttribute.Id}}"
            data-attribute-id="{{ attribute.Id }}"
            data-variants-colors='{{grapicalVariantsPresentationColorsData}}'></div>
        {% endfor -%}
    {% elseif settings.grapicalVariantsPresentation == 'Variants_Thumbnails' -%}
        {% assign firstAttribute = product.Supplies.AttributeNames|First -%}
        {% assign lastAttribute = product.Supplies.AttributeNames|Last -%}
        {% for attribute in product.Supplies.AttributeNames -%}
            <span class="attribute-name">{{ attribute.Name | H }}</span>
            <div class="attributes-select button-option attributeId"
            data-thumbnails='{{attributesThumbnails}}'
            data-thumbnails-option='{{settings.variantsGroupingAttribute}}'
            data-first-attribute-id="{{firstAttribute.Id}}"
            data-last-attribute-id="{{lastAttribute.Id}}"
            data-attribute-id="{{ attribute.Id }}"></div>
        {% endfor -%}
     {% else -%}
        {% for attribute in product.Supplies.AttributeNames -%}
            <span class="attribute-name">{{ attribute.Name | H }}</span>
            <div class="attributes-select button-option attributeId"></div>
        {% endfor -%}
     {% endif -%}
</div>

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

<span class="attribute-name">{{ attribute.Name | H }}</span>

<div class="attributes-select button-option attributeId"

data-page-bg="{{settings.primaryPageBgColor}}"

data-page-language="{{page.LanguageId}}"

data-colors-option='{{settings.variantsGroupingAttribute}}'

data-first-attribute-id="{{firstAttribute.Id}}"

data-last-attribute-id="{{lastAttribute.Id}}"

data-attribute-id="{{ attribute.Id }}"

data-variants-colors='{{grapicalVariantsPresentationColorsData}}'></div>

{% endfor -%}

{% elseif settings.grapicalVariantsPresentation == 'Variants_Thumbnails' -%}

{% assign firstAttribute = product.Supplies.AttributeNames|First -%}

{% assign lastAttribute = product.Supplies.AttributeNames|Last -%}

{% for attribute in product.Supplies.AttributeNames -%}

<span class="attribute-name">{{ attribute.Name | H }}</span>

<div class="attributes-select button-option attributeId"

data-thumbnails='{{attributesThumbnails}}'

data-thumbnails-option='{{settings.variantsGroupingAttribute}}'

data-first-attribute-id="{{firstAttribute.Id}}"

data-last-attribute-id="{{lastAttribute.Id}}"

data-attribute-id="{{ attribute.Id }}"></div>

{% endfor -%}

{% else -%}

{% for attribute in product.Supplies.AttributeNames -%}

<span class="attribute-name">{{ attribute.Name | H }}</span>

{% endfor -%}

{% endif -%}

</div>

Teraz znajdź:

{% elseif product.AttributesPolyvalent != empty -%}

{% for attribute in product.AttributesPolyvalent -%}

<span class="attribute-name">{{ attribute.Name }}</span>

{% assign i = 0 -%}

{% for value in attribute.Values -%}

<span data-value="{{ value.ValueId }}" class="button-option {% if i >= 3 -%} hidden {% endif -%} {% if value.ValueId == attribute.Values[0].ValueId -%}active{% endif -%}">{{ value.Value | H }}</span>

{% assign i = i | Plus: 1 -%}

{% endfor -%}

{% if i >= 4 -%}

{% assign diff = i | Minus: 4 -%}

<p class="attribute-more js-showAttributePopup open-popup-with-form" data-attr-name="{{ attribute.Name }}" data-popup-class=".choose-attribute-popup" data-attribute-popup="true">{{translations.ReadMore}} +{{diff}}</p>

{% 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 -%}
             <div class="input-group">
                 <span class="attribute-name">{{ attribute.Name }}</span>
                 <div class="button-option attributes-select attributeId">
                     {% 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 -%}

<span data-value="{{ value.ValueId }}" class="button-option button-option-variants {% if i >= 3 -%} hidden {% endif -%} {% if value.ValueId == attribute.Values[0].ValueId -%}active{% endif -%}" title="{{ value.Value | H }}">
                             <div class="button-option-variants-content">
                                 <div class="button-option-variants-content__color" style="background: {{ bgColorValue }}; border: {{ borderColorValue }};"></div>
                                 <div class="button-option-variants-content__text">{{ value.Value | H }}</div>
                             </div>
                             </span>
                             {% assign i = i | Plus: 1 -%}
                         {% endfor -%}
                         {% if i >= 4 -%}
                              {% assign diff = i | Minus: 4 -%}
                              <p class="attribute-more js-showAttributePopup open-popup-with-form" data-attr-name="{{ attribute.Name }}" data-popup-class=".choose-attribute-popup" data-attribute-popup="true">{{translations.ReadMore}} +{{diff}}</p>
                         {% endif -%}
                     {% else -%}
                         {% for value in attribute.Values -%}
                              <span data-value="{{ value.ValueId }}" class="button-option {% if i >= 3 -%} hidden {% endif -%} {% if value.ValueId == attribute.Values[0].ValueId -%}active{% endif -%}">{{ value.Value | H }}</span>
                              {% assign i = i | Plus: 1 -%}
                         {% endfor -%}
                         {% if i >= 4 -%}
                              {% assign diff = i | Minus: 4 -%}
                              <p class="attribute-more js-showAttributePopup open-popup-with-form" data-attr-name="{{ attribute.Name }}" data-popup-class=".choose-attribute-popup" data-attribute-popup="true">{{translations.ReadMore}} +{{diff}}</p>
                         {% endif -%}
                     {% endif -%}

{% elseif product.AttributesPolyvalent != empty -%}

{% assign loopAttributeFlag = false -%}

{% assign attributeQuantity = product.AttributesPolyvalent | Size -%}

{% assign loopIterationVariable = 0 -%}

{% for attribute in product.AttributesPolyvalent -%}

<span class="attribute-name">{{ attribute.Name }}</span>

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

<div class="button-option-variants-content__text">{{ value.Value | H }}</div>

</div>

</span>

{% assign i = i | Plus: 1 -%}

{% endfor -%}

{% if i >= 4 -%}

{% assign diff = i | Minus: 4 -%}

{% endif -%}

{% else -%}

{% for value in attribute.Values -%}

<span data-value="{{ value.ValueId }}" class="button-option {% if i >= 3 -%} hidden {% endif -%} {% if value.ValueId == attribute.Values[0].ValueId -%}active{% endif -%}">{{ value.Value | H }}</span>

{% assign i = i | Plus: 1 -%}

{% endfor -%}

{% if i >= 4 -%}

{% assign diff = i | Minus: 4 -%}

{% 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 -%}
<input aria-label="supplyId" name="supplyId" type="hidden" id="supplyId"
   data-supplies="{{ product.SuppliesJSON | H }}" {% if product.Clip -%} data-clip="1"
   {% endif -%} {% if product.Batch -%} data-batch="1" {% endif -%}
   data-parent-id="{{ product.Id }}" data-weight="{{ product.Weight }}"
   data-netweight="{{ product.NetWeight }}" />
{% if product.Clip or product.Batch -%}
<input aria-label="askForPrice" type="hidden" name="ask-for-price" id="ask-for-price"
   value="{{ product.AskForPrice }}" />
{% endif -%}
<div class="input-group">
   {% for attribute in product.Supplies.AttributeNames -%}
       <span class="attribute-name">{{ attribute.Name | H }}</span>
       <div class="attributes-select button-option attributeId"></div>
       <br>
   {% endfor -%}
</div>
{% elseif product.AttributesPolyvalent != empty -%}
{% for attribute in product.AttributesPolyvalent -%}
    <div class="input-group">
       <span class="attribute-name">{{ attribute.Name }}</span>
       <div class="button-option attributes-select attributeId">
           {% for value in attribute.Values -%}
               <span data-value="{{ value.ValueId }}"
               class="button-option {% if value.ValueId == attribute.Values[0].ValueId -%}active{% endif -%}">{{ value.Value | H }}</span>
           {% endfor -%}

{% if product.Archival == false -%}

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

<input aria-label="supplyId" name="supplyId" type="hidden" id="supplyId"

data-supplies="{{ product.SuppliesJSON | H }}" {% if product.Clip -%} data-clip="1"

{% endif -%} {% if product.Batch -%} data-batch="1" {% endif -%}

data-parent-id="{{ product.Id }}" data-weight="{{ product.Weight }}"

data-netweight="{{ product.NetWeight }}" />

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

<input aria-label="askForPrice" type="hidden" name="ask-for-price" id="ask-for-price"

value="{{ product.AskForPrice }}" />

{% endif -%}

{% for attribute in product.Supplies.AttributeNames -%}

<span class="attribute-name">{{ attribute.Name | H }}</span>

<br>

{% endfor -%}

</div>

{% elseif product.AttributesPolyvalent != empty -%}

{% for attribute in product.AttributesPolyvalent -%}

<span class="attribute-name">{{ attribute.Name }}</span>

{% for value in attribute.Values -%}

<span data-value="{{ value.ValueId }}"

class="button-option {% if value.ValueId == attribute.Values[0].ValueId -%}active{% endif -%}">{{ value.Value | H }}</span>

{% 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 -%}
        <input aria-label="supplyId" name="supplyId" type="hidden" id="supplyId"
        data-supplies="{{ product.SuppliesJSON | H }}" {% if product.Clip -%} data-clip="1"
        {% endif -%} {% if product.Batch -%} data-batch="1" {% endif -%}
        data-parent-id="{{ product.Id }}" data-weight="{{ product.Weight }}"
        data-netweight="{{ product.NetWeight }}" />
        {% if product.Clip or product.Batch -%}
             <input aria-label="askForPrice" type="hidden" name="ask-for-price" id="ask-for-price"
             value="{{ product.AskForPrice }}" />
        {% endif -%}
        <div class="input-group">
            {% if settings.grapicalVariantsPresentation == 'Variants_Colors' -%}
		{% assign firstAttribute = product.Supplies.AttributeNames|First -%}
                {% assign lastAttribute = product.Supplies.AttributeNames|Last -%}
                {% for attribute in product.Supplies.AttributeNames -%}
                     <span class="attribute-name">{{ attribute.Name | H }}</span>
                     <div class="attributes-select button-option attributeId"
                     data-page-bg="{{settings.primaryPageBgColor}}"
                     data-page-language="{{page.LanguageId}}"
                     data-colors-option='{{settings.variantsGroupingAttribute}}'
                     data-first-attribute-id="{{firstAttribute.Id}}"
                     data-last-attribute-id="{{lastAttribute.Id}}"
                     data-attribute-id="{{ attribute.Id }}"
                     data-variants-colors='{{grapicalVariantsPresentationColorsData}}'></div>
                     <br>
                {% endfor -%}
            {% elseif settings.grapicalVariantsPresentation == 'Variants_Thumbnails' -%}
                {% assign firstAttribute = product.Supplies.AttributeNames|First -%}
                {% assign lastAttribute = product.Supplies.AttributeNames|Last -%}
                {% for attribute in product.Supplies.AttributeNames -%}
                     <span class="attribute-name">{{ attribute.Name | H }}</span>
                     <div class="attributes-select button-option attributeId"
                     data-thumbnails='{{attributesThumbnails}}'
                     data-thumbnails-option='{{settings.variantsGroupingAttribute}}'
                     data-first-attribute-id="{{firstAttribute.Id}}"
                     data-last-attribute-id="{{lastAttribute.Id}}"
                     data-attribute-id="{{ attribute.Id }}"></div>
                     <br>
                {% endfor -%}
            {% else -%}
                {% for attribute in product.Supplies.AttributeNames -%}
                     <span class="attribute-name">{{ attribute.Name | H }}</span>
                     <div class="attributes-select button-option attributeId"></div>
                     <br>
                {% endfor -%}
            {% endif -%}
        </div>
    {% elseif product.AttributesPolyvalent != empty -%}
	{% assign loopAttributeFlag = false -%}
        {% assign attributeQuantity = product.AttributesPolyvalent | Size -%}
        {% assign loopIterationVariable = 0 -%}
        {% for attribute in product.AttributesPolyvalent -%}
            <div class="input-group">
                <span class="attribute-name">{{ attribute.Name }}</span>
                <div class="button-option attributes-select attributeId">
                   {% 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 -%}
                           <span data-value="{{ value.ValueId }}" class="button-option button-option-variants {% if value.ValueId == attribute.Values[0].ValueId -%}active{% endif -%}" title="{{ value.Value | H }}">
                           <div class="button-option-variants-content">
                               <div class="button-option-variants-content__color" style="background: {{bgColorValue}}; border-color: {{borderColorValue}};"></div>
                               <div class="button-option-variants-content__text">{{ value.Value | H }}</div>
                           </div>
                           </span>
                       {% endfor -%}
                   {% else -%}
                       {% for value in attribute.Values -%}
                            <span data-value="{{ value.ValueId }}"
                            class="button-option {% if value.ValueId == attribute.Values[0].ValueId -%}active{% endif -%}">{{ value.Value | H }}</span>
                       {% endfor -%}
                   {% endif -%}

100

101

102

103

104

105

106

107

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

<input aria-label="supplyId" name="supplyId" type="hidden" id="supplyId"

data-supplies="{{ product.SuppliesJSON | H }}" {% if product.Clip -%} data-clip="1"

{% endif -%} {% if product.Batch -%} data-batch="1" {% endif -%}

data-parent-id="{{ product.Id }}" data-weight="{{ product.Weight }}"

data-netweight="{{ product.NetWeight }}" />

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

<input aria-label="askForPrice" type="hidden" name="ask-for-price" id="ask-for-price"

value="{{ product.AskForPrice }}" />

{% endif -%}

{% if settings.grapicalVariantsPresentation == 'Variants_Colors' -%}

{% assign firstAttribute = product.Supplies.AttributeNames|First -%}

{% assign lastAttribute = product.Supplies.AttributeNames|Last -%}

{% for attribute in product.Supplies.AttributeNames -%}

<span class="attribute-name">{{ attribute.Name | H }}</span>

<div class="attributes-select button-option attributeId"

data-page-bg="{{settings.primaryPageBgColor}}"

data-page-language="{{page.LanguageId}}"

data-colors-option='{{settings.variantsGroupingAttribute}}'

data-first-attribute-id="{{firstAttribute.Id}}"

data-last-attribute-id="{{lastAttribute.Id}}"

data-attribute-id="{{ attribute.Id }}"

data-variants-colors='{{grapicalVariantsPresentationColorsData}}'></div>

<br>

{% endfor -%}

{% elseif settings.grapicalVariantsPresentation == 'Variants_Thumbnails' -%}

{% assign firstAttribute = product.Supplies.AttributeNames|First -%}

{% assign lastAttribute = product.Supplies.AttributeNames|Last -%}

{% for attribute in product.Supplies.AttributeNames -%}

<span class="attribute-name">{{ attribute.Name | H }}</span>

<div class="attributes-select button-option attributeId"

data-thumbnails='{{attributesThumbnails}}'

data-thumbnails-option='{{settings.variantsGroupingAttribute}}'

data-first-attribute-id="{{firstAttribute.Id}}"

data-last-attribute-id="{{lastAttribute.Id}}"

data-attribute-id="{{ attribute.Id }}"></div>

<br>

{% endfor -%}

{% else -%}

{% for attribute in product.Supplies.AttributeNames -%}

<span class="attribute-name">{{ attribute.Name | H }}</span>

<br>

{% endfor -%}

{% endif -%}

</div>

{% elseif product.AttributesPolyvalent != empty -%}

{% assign loopAttributeFlag = false -%}

{% assign attributeQuantity = product.AttributesPolyvalent | Size -%}

{% assign loopIterationVariable = 0 -%}

{% for attribute in product.AttributesPolyvalent -%}

<span class="attribute-name">{{ attribute.Name }}</span>

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

<div class="button-option-variants-content__text">{{ value.Value | H }}</div>

</div>

</span>

{% endfor -%}

{% else -%}

{% for value in attribute.Values -%}

<span data-value="{{ value.ValueId }}"

class="button-option {% if value.ValueId == attribute.Values[0].ValueId -%}active{% endif -%}">{{ value.Value | H }}</span>

{% endfor -%}

{% endif -%}

Na koniec znajdź jeszcze fragment:

<div class="productDetails-attributes">
    {% if product.Archival == false -%}
        {% if product.Clip or product.Batch -%}
        <input aria-label="supplyId" name="supplyId" type="hidden" id="supplyId" data-supplies="{{ product.SuppliesJSON | H }}" {% if product.Clip -%} data-clip="1" {% endif -%} {% if product.Batch -%} data-batch="1" {% endif -%} data-parent-id="{{ product.Id }}" data-weight="{{ product.Weight }}" data-netweight="{{ product.NetWeight }}"/>
        {% if product.Clip or product.Batch -%}
        <input aria-label="askForPrice" type="hidden" name="ask-for-price" id="ask-for-price" value="{{ product.AskForPrice }}" />
        {% endif -%}
        <div class="input-group">
            {% for attribute in product.Supplies.AttributeNames -%}
                <span class="attribute-name">{{ attribute.Name | H }}</span>
                <div class="attributes-select button-option attributeId"></div>
            {% endfor -%}
        </div>
        {% elseif product.AttributesPolyvalent != empty -%}
        {% for attribute in product.AttributesPolyvalent -%}
        <div class="input-group">
            <span class="attribute-name">{{ attribute.Name }}</span>
            <div class="button-option attributes-select attributeId">
                 {% assign i = 0 -%}
                 {% for value in attribute.Values -%}
                     <span data-value="{{ value.ValueId }}" class="button-option {% if i >= 3 -%} hidden {% endif -%} {% if value.ValueId == attribute.Values[0].ValueId -%}active{% endif -%}">{{ value.Value | H }}</span>
                     {% assign i = i | Plus: 1 -%}
                 {% endfor -%}
                 {% if i >= 4 -%}
                     {% assign diff = i | Minus: 4 -%}
                     <p class="attribute-more js-showAttributePopup open-popup-with-form" data-attr-name="{{ attribute.Name }}" data-popup-class=".choose-attribute-popup" data-attribute-popup="true">{{translations.ReadMore}} +{{diff}}</p>
                 {% endif -%}

{% if product.Archival == false -%}

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

{% endif -%}

{% for attribute in product.Supplies.AttributeNames -%}

<span class="attribute-name">{{ attribute.Name | H }}</span>

{% endfor -%}

</div>

{% elseif product.AttributesPolyvalent != empty -%}

{% for attribute in product.AttributesPolyvalent -%}

<span class="attribute-name">{{ attribute.Name }}</span>

{% assign i = 0 -%}

{% for value in attribute.Values -%}

<span data-value="{{ value.ValueId }}" class="button-option {% if i >= 3 -%} hidden {% endif -%} {% if value.ValueId == attribute.Values[0].ValueId -%}active{% endif -%}">{{ value.Value | H }}</span>

{% assign i = i | Plus: 1 -%}

{% endfor -%}

{% if i >= 4 -%}

{% assign diff = i | Minus: 4 -%}

{% endif -%}

I zastąp go poniższym kodem:

<div class="productDetails-attributes">
   {% 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 -%}
            <input aria-label="supplyId" name="supplyId" type="hidden" id="supplyId" data-supplies="{{ product.SuppliesJSON | H }}" {% if product.Clip -%} data-clip="1" {% endif -%} {% if product.Batch -%} data-batch="1" {% endif -%} data-parent-id="{{ product.Id }}" data-weight="{{ product.Weight }}" data-netweight="{{ product.NetWeight }}"/>
            {% if product.Clip or product.Batch -%}
                 <input aria-label="askForPrice" type="hidden" name="ask-for-price" id="ask-for-price" value="{{ product.AskForPrice }}" />
            {% endif -%}
            <div class="input-group">
               {% if settings.grapicalVariantsPresentation == 'Variants_Colors' -%}
		   {% assign firstAttribute = product.Supplies.AttributeNames|First -%}
                   {% assign lastAttribute = product.Supplies.AttributeNames|Last -%}
                   {% for attribute in product.Supplies.AttributeNames -%}
                        <span class="attribute-name">{{ attribute.Name | H }}</span>
                        <div class="attributes-select button-option attributeId"
                        data-page-bg="{{settings.primaryPageBgColor}}"
                        data-page-language="{{page.LanguageId}}"
                        data-colors-option='{{settings.variantsGroupingAttribute}}'
                        data-first-attribute-id="{{firstAttribute.Id}}"
                        data-last-attribute-id="{{lastAttribute.Id}}"
                        data-attribute-id="{{ attribute.Id }}"
                        data-variants-colors='{{grapicalVariantsPresentationColorsData}}'></div>
                   {% endfor -%}
               {% elseif settings.grapicalVariantsPresentation == 'Variants_Thumbnails' -%}
                   {% assign firstAttribute = product.Supplies.AttributeNames|First -%}
                   {% assign lastAttribute = product.Supplies.AttributeNames|Last -%}
                   {% for attribute in product.Supplies.AttributeNames -%}
                        <span class="attribute-name">{{ attribute.Name | H }}</span>
                        <div class="attributes-select button-option attributeId"
                        data-thumbnails='{{attributesThumbnails}}'
                        data-thumbnails-option='{{settings.variantsGroupingAttribute}}'
                        data-first-attribute-id="{{firstAttribute.Id}}"
                        data-last-attribute-id="{{lastAttribute.Id}}"
                        data-attribute-id="{{ attribute.Id }}"></div>
                   {% endfor -%}
               {% else -%}
                   {% for attribute in product.Supplies.AttributeNames -%}
                        <span class="attribute-name">{{ attribute.Name | H }}</span>
                        <div class="attributes-select button-option attributeId"></div>
                   {% endfor -%}
               {% endif -%}
           </div>
       {% elseif product.AttributesPolyvalent != empty -%}
	   {% assign loopAttributeFlag = false -%}
           {% assign attributeQuantity = product.AttributesPolyvalent | Size -%}
           {% assign loopIterationVariable = 0 -%}
           {% for attribute in product.AttributesPolyvalent -%}
                <div class="input-group">
                    <span class="attribute-name">{{ attribute.Name }}</span>
                    <div class="button-option attributes-select attributeId">
                        {% 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 -%}

<span data-value="{{ value.ValueId }}" class="button-option button-option-variants {% if i >= 3 -%} hidden {% endif -%} {% if value.ValueId == attribute.Values[0].ValueId -%}active{% endif -%}" title="{{ value.Value | H }}">
                                    <div class="button-option-variants-content">
                                        <div class="button-option-variants-content__color" style="background: {{ bgColorValue }}; border: {{ borderColorValue }};"></div>
                                        <div class="button-option-variants-content__text">{{ value.Value | H }}</div>
                                    </div>
                                </span>
                                {% assign i = i | Plus: 1 -%}
                            {% endfor -%}
                            {% if i >= 4 -%}
                                 {% assign diff = i | Minus: 4 -%}
                                 <p class="attribute-more js-showAttributePopup open-popup-with-form" data-attr-name="{{ attribute.Name }}" data-popup-class=".choose-attribute-popup" data-attribute-popup="true">{{translations.ReadMore}} +{{diff}}</p>
                            {% endif -%}
                        {% else -%}
                            {% for value in attribute.Values -%}
                                 <span data-value="{{ value.ValueId }}" class="button-option {% if i >= 3 -%} hidden {% endif -%} {% if value.ValueId == attribute.Values[0].ValueId -%}active{% endif -%}">{{ value.Value | H }}</span>
                                 {% assign i = i | Plus: 1 -%}
                            {% endfor -%}
                            {% if i >= 4 -%}
                                {% assign diff = i | Minus: 4 -%}
                                <p class="attribute-more js-showAttributePopup open-popup-with-form" data-attr-name="{{ attribute.Name }}" data-popup-class=".choose-attribute-popup" data-attribute-popup="true">{{translations.ReadMore}} +{{diff}}</p>
                            {% endif -%}
                        {% endif -%}

100

101

102

103

104

105

106

107

108

109

110

111

112

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

{% endif -%}

{% if settings.grapicalVariantsPresentation == 'Variants_Colors' -%}

{% assign firstAttribute = product.Supplies.AttributeNames|First -%}

{% assign lastAttribute = product.Supplies.AttributeNames|Last -%}

{% for attribute in product.Supplies.AttributeNames -%}

<span class="attribute-name">{{ attribute.Name | H }}</span>

<div class="attributes-select button-option attributeId"

data-page-bg="{{settings.primaryPageBgColor}}"

data-page-language="{{page.LanguageId}}"

data-colors-option='{{settings.variantsGroupingAttribute}}'

data-first-attribute-id="{{firstAttribute.Id}}"

data-last-attribute-id="{{lastAttribute.Id}}"

data-attribute-id="{{ attribute.Id }}"

data-variants-colors='{{grapicalVariantsPresentationColorsData}}'></div>

{% endfor -%}

{% elseif settings.grapicalVariantsPresentation == 'Variants_Thumbnails' -%}

{% assign firstAttribute = product.Supplies.AttributeNames|First -%}

{% assign lastAttribute = product.Supplies.AttributeNames|Last -%}

{% for attribute in product.Supplies.AttributeNames -%}

<span class="attribute-name">{{ attribute.Name | H }}</span>

<div class="attributes-select button-option attributeId"

data-thumbnails='{{attributesThumbnails}}'

data-thumbnails-option='{{settings.variantsGroupingAttribute}}'

data-first-attribute-id="{{firstAttribute.Id}}"

data-last-attribute-id="{{lastAttribute.Id}}"

data-attribute-id="{{ attribute.Id }}"></div>

{% endfor -%}

{% else -%}

{% for attribute in product.Supplies.AttributeNames -%}

<span class="attribute-name">{{ attribute.Name | H }}</span>

{% endfor -%}

{% endif -%}

</div>

{% elseif product.AttributesPolyvalent != empty -%}

{% assign loopAttributeFlag = false -%}

{% assign attributeQuantity = product.AttributesPolyvalent | Size -%}

{% assign loopIterationVariable = 0 -%}

{% for attribute in product.AttributesPolyvalent -%}

<span class="attribute-name">{{ attribute.Name }}</span>

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

<div class="button-option-variants-content__text">{{ value.Value | H }}</div>

</div>

</span>

{% assign i = i | Plus: 1 -%}

{% endfor -%}

{% if i >= 4 -%}

{% assign diff = i | Minus: 4 -%}

{% endif -%}

{% else -%}

{% for value in attribute.Values -%}

<span data-value="{{ value.ValueId }}" class="button-option {% if i >= 3 -%} hidden {% endif -%} {% if value.ValueId == attribute.Values[0].ValueId -%}active{% endif -%}">{{ value.Value | H }}</span>

{% assign i = i | Plus: 1 -%}

{% endfor -%}

{% if i >= 4 -%}

{% assign diff = i | Minus: 4 -%}

{% 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:

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

Graficzna prezentacja atrybutów – szablon Topaz

Wstęp

Zmiana ustawień w Panelu Administracyjnym

Zmiany w plikach szablonu

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt