Wstęp
W szablonie Topaz od wersji 2022.4 wprowadzono możliwość graficznej prezentacji atrybutów towaru. Funkcja umożliwia prezentację atrybutów, w formie kolorów dla towarów zgrupowanych (fantomów) i tych posiadających atrybuty oraz w formie miniatur dla towarów zgrupowanych. W tym artykule dowiesz się jak zmodyfikować swój szablon, aby obsługiwał graficzną prezentację atrybutów.
Zmiana ustawień w Panelu Administracyjnym
W Panelu Administracyjnym wybierz zakładkę Wygląd sklepu/Ustawienia szablonu, a następnie w prawym górnym rogu kliknij na ikonę z trzema kwadratami i wybierz opcję Edytuj ustawienia zaawansowane. Następnie w zakładce Ustawienia (JSON) w oknie JSON znajdź na końcu kodu znak „}” i wklej przed nim poniższą instrukcję, po czym zapisz zmiany.
0 1 2 |
,"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ę:
0 1 2 |
{% when '1' -%} |
Pod podaną treścią należy wkleić poniższy kod:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
{% 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ę:
0 1 2 |
{% else %} |
I wklej pod nią następujący kod:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
{% 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:
0 1 2 3 4 5 |
#lg-settings-content .mainHeader { font-size: 22px; margin: 45px auto 10px; } |
A następnie zmień wartości marginesów na:
0 1 2 |
margin: 10px auto; |
Kolejno wyszukaj:
0 1 2 |
#lg-settings-content .themeSettings__inputs > section |
Podany fragment zastąp:
0 1 2 |
#lg-settings-content .themeSettings__inputs > section, #lg-settings-content .additionalSettingsTab section |
Teraz wyszukaj:
0 1 2 |
#lg-settings-content .themeSettings__inputs .section-title |
I zmień kod na poniższy:
0 1 2 |
#lg-settings-content .themeSettings__inputs .section-title, #lg-settings-content .additionalSettingsTab .section-title |
Kolejno odnajdź instrukcję:
0 1 2 3 4 5 6 7 8 9 10 11 |
#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:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
#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:
0 1 2 3 4 |
<div class="alert info"> {{saveChangesTranslation}} </div> |
I poniżej powyższego kodu wklej poniższe instrukcje:
0 1 2 3 4 5 6 7 8 9 |
<div class="otabs m"> <a href="#" id="tab0">{{generalTranslation}}</a> <a href="#" id="tab1">{{additionalSettings}}</a> </div> <div class="hr"></div> <div id="tab0Content"> |
Teraz odszukaj instrukcję:
0 1 2 |
<div class="colorPalette__bg colorPalette__bg-js"></div> |
A linijkę przed nią wklej:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
</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> |
Ostatnim etapem zmian w pliku jest edycja kodu JavaScript. Znajdź fragment:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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:
0 1 2 3 4 5 6 7 8 |
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:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
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:
0 1 2 3 4 5 6 7 8 |
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:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
{% 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> |
Przedstawiony powyżej element div (linijka od 7 do 12) zamień na następujący kod:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
{% 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> |
Teraz znajdź:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{% 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 -%} |
I powyższy kod zamień na:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
{% 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 -%} |
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:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
{% 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 -%} |
A następnie zamień go na:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 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 -%} <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 -%} |
Na koniec znajdź jeszcze fragment:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<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 -%} |
I zastąp go poniższym kodem:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
<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 -%} |
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:
0 1 2 |
.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:
0 1 2 |
.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:
0 1 2 |
.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:
0 1 2 |
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:
0 1 2 |
.productDetails-attributes .breakLine{display:block;width:100%;height:0;margin:0} |
A następnie przed powyższym kodem dodaj:
0 1 2 |
.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:
0 1 2 |
.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:
0 1 2 |
.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:
0 1 2 |
@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:
0 1 2 |
@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:
0 1 2 |
.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:
0 1 2 |
.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:
0 1 2 |
.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:
0 1 2 |
.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:
0 1 2 |
.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} |
0 1 2 |
.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} |
0 1 2 |
@media screen and (max-width: 400px){.choose-attribute-popup .attributes-select,.choose-attribute-popup .attr-values{grid-template-columns:49% 49%} |
0 1 2 |
@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}} |