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

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

Zmiany w plikach szablonu

W pliku __settings.liquid znajdź frazę:


{% when '1' -%}

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

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

#lg-settings-content .mainHeader {

font-size: 22px;

margin: 45px auto 10px;

}

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


margin: 10px auto;

margin: 10px auto;

Kolejno wyszukaj:


#lg-settings-content .themeSettings__inputs > section

#lg-settings-content .themeSettings__inputs > section

Podany fragment zastąp:


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

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

Teraz wyszukaj:


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

#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

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

#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: 650px;
	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: 650px;

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 class="alert info">
	{{saveChangesTranslation}}
</div>

</div>

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


<div class="otabs m">
	<a href="#" id="tab0">{{generalTranslation}}</a>
	<a href="#" id="tab1">{{additionalSettings}}</a>
</div>

<div class="hr"></div>

<div id="tab0Content">

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

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

</div>

Teraz odszukaj instrukcję:


<div class="colorPalette__bg colorPalette__bg-js"></div>

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>
				<button class="add-variant-color">{{addColor}}</button>
				<div>
					{% assign grapicalVariantsColorArr = settings.grapicalVariantsPresentationColors | Split: '|||' -%}
					{% assign variantColorIteration = 0 -%}
					<div class="colors-row colors-row-title">
						<div class="colors-cell colors-cell-title colors-cell-name">
							<p>{{grapicalVariantsPresentationColorSettings_Color}}<br/>(polski)</p>
						</div>
						<div class="colors-cell colors-cell-title colors-cell-name">
							<p>{{grapicalVariantsPresentationColorSettings_Color}}<br/>(English)</p>
						</div>
						<div class="colors-cell colors-cell-title colors-cell-name">
							<p>{{grapicalVariantsPresentationColorSettings_Color}}<br/>(Deutsch)</p>
						</div>
						<div class="colors-cell colors-cell-title colors-cell-name">
							<p>{{grapicalVariantsPresentationColorSettings_Color}}<br/>(français)</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 grapicalVariantColorAllName = grapicalVariantColorValue[0] | Split: '|' -%}
						{% assign grapicalVariantColorHash = grapicalVariantColorValue[1] -%}
						{% assign grapicalVariantColorNamePl = grapicalVariantColorAllName[0] -%}
						{% assign grapicalVariantColorNameEn = grapicalVariantColorAllName[1] -%}
						{% assign grapicalVariantColorNameDe = grapicalVariantColorAllName[2] -%}
						{% assign grapicalVariantColorNameFr = grapicalVariantColorAllName[3] -%}

						<div class="colors-row">
							<div class="colors-cell colors-cell-name">
								<input type="text" class="variantColorInput variantColorInputPl" value="{{grapicalVariantColorNamePl}}">
							</div>
							<div class="colors-cell colors-cell-name">
								<input type="text" class="variantColorInput variantColorInputEn" value="{{grapicalVariantColorNameEn}}">
							</div>
							<div class="colors-cell colors-cell-name">
								<input type="text" class="variantColorInput variantColorInputDe" value="{{grapicalVariantColorNameDe}}">
							</div>
							<div class="colors-cell colors-cell-name">
								<input type="text" class="variantColorInput variantColorInputFr" value="{{grapicalVariantColorNameFr}}">
							</div>
							<div class="colors-cell colors-cell-name colors-cell-color">
								<div class="colorSquare openPaletteBtn-js" type="colorVariant" data-name="colorVariant{{variantColorIteration}}" data-value="{{grapicalVariantColorHash}}" style="background: {{grapicalVariantColorHash}}"></div>
								<input type="text" class="colorInput" data-name="colorVariant{{variantColorIteration}}" data-value="{{grapicalVariantColorHash}}">
							</div>
							<div class="colors-cell colors-cell-delete">
								<div class="fa fa-trash colors-delete-js"></div>
							</div>
						</div>

						{% assign variantColorIteration = variantColorIteration |Plus:1 -%}
					{% endfor -%}
				</div>
			</section>
		</fieldset>
	</div>

100

101

102

103

104

105

106

107

108

109

110

111

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

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

<div>

{% assign grapicalVariantsColorArr = settings.grapicalVariantsPresentationColors | Split: '|||' -%}

{% assign variantColorIteration = 0 -%}

<p>{{grapicalVariantsPresentationColorSettings_Color}}<br/>(polski)</p>

</div>

<p>{{grapicalVariantsPresentationColorSettings_Color}}<br/>(English)</p>

</div>

<p>{{grapicalVariantsPresentationColorSettings_Color}}<br/>(Deutsch)</p>

</div>

<p>{{grapicalVariantsPresentationColorSettings_Color}}<br/>(français)</p>

</div>

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

</div>

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

</div>

{% for variantColor in grapicalVariantsColorArr -%}

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

{% assign grapicalVariantColorAllName = grapicalVariantColorValue[0] | Split: '|' -%}

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

{% assign grapicalVariantColorNamePl = grapicalVariantColorAllName[0] -%}

{% assign grapicalVariantColorNameEn = grapicalVariantColorAllName[1] -%}

{% assign grapicalVariantColorNameDe = grapicalVariantColorAllName[2] -%}

{% assign grapicalVariantColorNameFr = grapicalVariantColorAllName[3] -%}

</div>

</div>

</div>

</div>

</div>

</div>

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

{% endfor -%}

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

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 colorsTable = $(e.currentTarget).next();
	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 variantColorInputPl" value="Nowy"></div>'+
						'<div class="colors-cell colors-cell-name"><input type="text" class="variantColorInput variantColorInputEn" value="New"></div>'+
						'<div class="colors-cell colors-cell-name"><input type="text" class="variantColorInput variantColorInputDe" value="Neu"></div>'+
						'<div class="colors-cell colors-cell-name"><input type="text" class="variantColorInput variantColorInputFr" value="Nouveau"></div>'+
						'<div class="colors-cell colors-cell-name colors-cell-color">'+
						'<div class="colorSquare openPaletteBtn-js" type="colorVariant" data-name="colorVariant'+newColorNumber+'" data-value="#FFFFFF" style="background: #FFFFFF"></div>'+
						'<input type="text" class="colorInput" data-name="colorVariant'+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();
});

    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 toAdd = true;
				var hexColorVariant = el.dataset.value;
				var colorRow = el.parentElement.parentElement;
				var colorNamePl = colorRow.querySelector('.variantColorInputPl').value;
				var colorNameEn = colorRow.querySelector('.variantColorInputEn').value;
				var colorNameDe = colorRow.querySelector('.variantColorInputDe').value;
				var colorNameFr = colorRow.querySelector('.variantColorInputFr').value;

				for(var i=0; i < tempColorsVariants.length; i++) {
					if (tempColorsVariants[i][0].toLowerCase() === colorNamePl.toLowerCase()) {
						toAdd = false;
						break;
					}
				}
				if (!colorNamePl || !colorNameEn || !colorNameDe || !colorNameFr) {
					toAdd = false;
				}
				if (toAdd) {
					if (colorsVariants !== "" && hexColorVariant) {
						colorsVariants = colorsVariants + '|||';
					}
					tempColorsVariants.push([colorNamePl, colorNameEn, colorNameDe, colorNameFr]);
					colorsVariants = colorsVariants + colorNamePl + '|' + colorNameEn + '|' + colorNameDe + '|' + colorNameFr + '||' + hexColorVariant;
				} else {
					var elementToRemove = colorRow.querySelector('.variantColorInputPl').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 !== "") {
			o['grapicalVariantsPresentationColors'] = colorsVariants;
		}
        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

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 colorsTable = $(e.currentTarget).next();

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 variantColorInputPl" value="Nowy"></div>'+

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

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

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

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

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

'<input type="text" class="colorInput" data-name="colorVariant'+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();

});

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 toAdd = true;

var hexColorVariant = el.dataset.value;

var colorRow = el.parentElement.parentElement;

var colorNamePl = colorRow.querySelector('.variantColorInputPl').value;

var colorNameEn = colorRow.querySelector('.variantColorInputEn').value;

var colorNameDe = colorRow.querySelector('.variantColorInputDe').value;

var colorNameFr = colorRow.querySelector('.variantColorInputFr').value;

for(var i=0; i < tempColorsVariants.length; i++) {

if (tempColorsVariants[i][0].toLowerCase() === colorNamePl.toLowerCase()) {

toAdd = false;

break;

}

if (!colorNamePl || !colorNameEn || !colorNameDe || !colorNameFr) {

toAdd = false;

}

if (toAdd) {

if (colorsVariants !== "" && hexColorVariant) {

colorsVariants = colorsVariants + '|||';

}

tempColorsVariants.push([colorNamePl, colorNameEn, colorNameDe, colorNameFr]);

colorsVariants = colorsVariants + colorNamePl + '|' + colorNameEn + '|' + colorNameDe + '|' + colorNameFr + '||' + hexColorVariant;

} else {

var elementToRemove = colorRow.querySelector('.variantColorInputPl').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 !== "") {

o['grapicalVariantsPresentationColors'] = colorsVariants;

}

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

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 pageLanguage = drop.data('page-language');
    var attributesColors = [];
    if (attributesColorsData) {
        attributesColorsData = attributesColorsData.split('|||');
        for (var i = 0; i < attributesColorsData.length; i++) {
            var attributesColor = attributesColorsData[i].split('||');
            var attributeColorName = attributesColor[0].split('|');
            switch (pageLanguage) {
                case 1:
                    attributeColorName = attributeColorName[0];
                    break;
                case 2:
                    attributeColorName = attributeColorName[1];
                    break;
                case 3:
                    attributeColorName = attributeColorName[2];
                    break;
                case 5:
                    attributeColorName = attributeColorName[3];
                    break;
                default:
                    break;
            }
            attributesColors.push([attributeColorName,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])));
        }
    }

var attributesColorsData = drop.data('variants-colors');

var pageLanguage = drop.data('page-language');

var attributesColors = [];

if (attributesColorsData) {

attributesColorsData = attributesColorsData.split('|||');

for (var i = 0; i < attributesColorsData.length; i++) {

var attributesColor = attributesColorsData[i].split('||');

var attributeColorName = attributesColor[0].split('|');

switch (pageLanguage) {

case 1:

attributeColorName = attributeColorName[0];

break;

case 2:

attributeColorName = attributeColorName[1];

break;

case 3:

attributeColorName = attributeColorName[2];

break;

case 5:

attributeColorName = attributeColorName[3];

break;

default:

break;

}

attributesColors.push([attributeColorName,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])));
    }

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

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


{% 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='{{settings.grapicalVariantsPresentationColors}}'></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>

{% 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='{{settings.grapicalVariantsPresentationColors}}'></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 -%}
<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 -%}

{% 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 settings.grapicalVariantsPresentationColors and loopAttributeFlag -%}
            {% assign variantsColorArr = settings.grapicalVariantsPresentationColors | Split: '|||' -%}
            {% for value in attribute.Values -%}
                {% assign bgColorValue = '' -%}
                {% assign borderColorValue = '' -%}
                {% for colorValue in variantsColorArr -%}
                    {% assign colorValueArr = colorValue | Split: '||' -%}
                    {% assign colorValueNameAll = colorValueArr[0] | Split: '|' -%}
                    {% assign colorValueHash = colorValueArr[1] -%}
                    {% if page.LanguageId == 1 -%}
			{% assign colorValueName = colorValueNameAll[0] | Downcase -%}
		    {% elseif page.LanguageId == 2 -%}
			{% assign colorValueName = colorValueNameAll[1] | Downcase -%}
		    {% elseif page.LanguageId == 3 -%}
			{% assign colorValueName = colorValueNameAll[2] | Downcase -%}
		    {% elseif page.LanguageId == 5 -%}
			{% assign colorValueName = colorValueNameAll[3] | Downcase -%}
		    {% else -%}
			{% assign colorValueName = colorValueNameAll[0] | Downcase -%}
		    {% endif -%}
		    {% 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 settings.grapicalVariantsPresentationColors and loopAttributeFlag -%}

{% assign variantsColorArr = settings.grapicalVariantsPresentationColors | Split: '|||' -%}

{% for value in attribute.Values -%}

{% assign bgColorValue = '' -%}

{% assign borderColorValue = '' -%}

{% for colorValue in variantsColorArr -%}

{% assign colorValueArr = colorValue | Split: '||' -%}

{% assign colorValueNameAll = colorValueArr[0] | Split: '|' -%}

{% assign colorValueHash = colorValueArr[1] -%}

{% if page.LanguageId == 1 -%}

{% assign colorValueName = colorValueNameAll[0] | Downcase -%}

{% elseif page.LanguageId == 2 -%}

{% assign colorValueName = colorValueNameAll[1] | Downcase -%}

{% elseif page.LanguageId == 3 -%}

{% assign colorValueName = colorValueNameAll[2] | Downcase -%}

{% elseif page.LanguageId == 5 -%}

{% assign colorValueName = colorValueNameAll[3] | Downcase -%}

{% else -%}

{% assign colorValueName = colorValueNameAll[0] | Downcase -%}

{% endif -%}

{% 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__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 -%}
{% 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='{{settings.grapicalVariantsPresentationColors}}'></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 settings.grapicalVariantsPresentationColors and loopAttributeFlag -%}
                          {% assign variantsColorArr = settings.grapicalVariantsPresentationColors | Split: '|||' -%}
                          {% for value in attribute.Values -%}
                               {% assign bgColorValue = '' -%}
                               {% assign borderColorValue = '' -%}
                               {% for colorValue in variantsColorArr -%}
                                    {% assign colorValueArr = colorValue | Split: '||' -%}
                                    {% assign colorValueNameAll = colorValueArr[0] | Split: '|' -%}
                                    {% assign colorValueHash = colorValueArr[1] -%}
                                    {% if page.LanguageId == 1 -%}
					{% assign colorValueName = colorValueNameAll[0] | Downcase -%}
				    {% elseif page.LanguageId == 2 -%}
					{% assign colorValueName = colorValueNameAll[1] | Downcase -%}
				    {% elseif page.LanguageId == 3 -%}
					{% assign colorValueName = colorValueNameAll[2] | Downcase -%}
				    {% elseif page.LanguageId == 5 -%}
					{% assign colorValueName = colorValueNameAll[3] | Downcase -%}
				    {% else -%}
					{% assign colorValueName = colorValueNameAll[0] | Downcase -%}
				    {% endif -%}
				    {% 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

108

109

110

111

112

113

114

115

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

{% 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='{{settings.grapicalVariantsPresentationColors}}'></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 settings.grapicalVariantsPresentationColors and loopAttributeFlag -%}

{% assign variantsColorArr = settings.grapicalVariantsPresentationColors | Split: '|||' -%}

{% for value in attribute.Values -%}

{% assign bgColorValue = '' -%}

{% assign borderColorValue = '' -%}

{% for colorValue in variantsColorArr -%}

{% assign colorValueArr = colorValue | Split: '||' -%}

{% assign colorValueNameAll = colorValueArr[0] | Split: '|' -%}

{% assign colorValueHash = colorValueArr[1] -%}

{% if page.LanguageId == 1 -%}

{% assign colorValueName = colorValueNameAll[0] | Downcase -%}

{% elseif page.LanguageId == 2 -%}

{% assign colorValueName = colorValueNameAll[1] | Downcase -%}

{% elseif page.LanguageId == 3 -%}

{% assign colorValueName = colorValueNameAll[2] | Downcase -%}

{% elseif page.LanguageId == 5 -%}

{% assign colorValueName = colorValueNameAll[3] | Downcase -%}

{% else -%}

{% assign colorValueName = colorValueNameAll[0] | Downcase -%}

{% endif -%}

{% 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 -%}
	{% 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='{{settings.grapicalVariantsPresentationColors}}'></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 settings.grapicalVariantsPresentationColors and loopAttributeFlag -%}
                        {% assign variantsColorArr = settings.grapicalVariantsPresentationColors | Split: '|||' -%}

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

                            {% for colorValue in variantsColorArr -%}
                                {% assign colorValueArr = colorValue | Split: '||' -%}
                                {% assign colorValueNameAll = colorValueArr[0] | Split: '|' -%}
                                {% assign colorValueHash = colorValueArr[1] -%}

                                {% if page.LanguageId == 1 -%}
					{% assign colorValueName = colorValueNameAll[0] | Downcase -%}
				{% elseif page.LanguageId == 2 -%}
					{% assign colorValueName = colorValueNameAll[1] | Downcase -%}
				{% elseif page.LanguageId == 3 -%}
					{% assign colorValueName = colorValueNameAll[2] | Downcase -%}
				{% elseif page.LanguageId == 5 -%}
					{% assign colorValueName = colorValueNameAll[3] | Downcase -%}
				{% else -%}
					{% assign colorValueName = colorValueNameAll[0] | Downcase -%}
				{% endif -%}
				{% 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

113

114

115

116

117

118

119

120

121

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

{% 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='{{settings.grapicalVariantsPresentationColors}}'></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 settings.grapicalVariantsPresentationColors and loopAttributeFlag -%}

{% assign variantsColorArr = settings.grapicalVariantsPresentationColors | Split: '|||' -%}

{% for value in attribute.Values -%}

{% assign bgColorValue = '' -%}

{% assign borderColorValue = '' -%}

{% for colorValue in variantsColorArr -%}

{% assign colorValueArr = colorValue | Split: '||' -%}

{% assign colorValueNameAll = colorValueArr[0] | Split: '|' -%}

{% assign colorValueHash = colorValueArr[1] -%}

{% if page.LanguageId == 1 -%}

{% assign colorValueName = colorValueNameAll[0] | Downcase -%}

{% elseif page.LanguageId == 2 -%}

{% assign colorValueName = colorValueNameAll[1] | Downcase -%}

{% elseif page.LanguageId == 3 -%}

{% assign colorValueName = colorValueNameAll[2] | Downcase -%}

{% elseif page.LanguageId == 5 -%}

{% assign colorValueName = colorValueNameAll[3] | Downcase -%}

{% else -%}

{% assign colorValueName = colorValueNameAll[0] | Downcase -%}

{% endif -%}

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

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

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

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

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}

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

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

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

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

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

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

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

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

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

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

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

Teraz podmień go na poniższy kod:


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

Na koniec odnajdź w pliku instrukcje:


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

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

@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 ERP

Oferta e-Commerce

Przydatne linki

Kontakt