{"id":3480,"date":"2023-04-19T08:25:10","date_gmt":"2023-04-19T06:25:10","guid":{"rendered":"https:\/\/auroracreation.pl\/blog\/?p=3480"},"modified":"2023-04-19T08:25:10","modified_gmt":"2023-04-19T06:25:10","slug":"jak-uzywac-mixin-ow-w-magento-2","status":"publish","type":"post","link":"https:\/\/auroracreation.pl\/blog\/jak-uzywac-mixin-ow-w-magento-2\/","title":{"rendered":"Jak u\u017cywa\u0107 mixin-\u00f3w w Magento 2?"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<?xml encoding=\"utf-8\" ?><html><body><p>Aby witryna by&#322;a dynamiczna i wchodzi&#322;a w interakcj&#281; z u&#380;ytkownikiem wykorzystywane s&#261; m.in. skrypty js. Je&#380;eli jednak wbudowane funkcjonalno&#347;ci okazuj&#261; si&#281; niewystarczaj&#261;ce i chcesz je rozbudowa&#263; lub zmieni&#263; dostosowuj&#261;c dzia&#322;anie sklepu do w&#322;asnych oczekiwa&#324; z pomoc&#261; przychodz&#261; mixin-y. <\/p>\n\n\n\n<p><strong>Czym w&#322;a&#347;ciwie s&#261;?<\/strong> Mixin (z ang. mieszanka) jest klas&#261;, kt&oacute;ra rozszerza dzia&#322;anie istniej&#261;cych ju&#380; skrypt&oacute;w. Przy ich pomocy mo&#380;esz dodawa&#263; funkcjonalno&#347;ci lub zmienia&#263; ich dzia&#322;anie bez konieczno&#347;ci tworzenia ca&#322;ych obiekt&oacute;w. Trzeba tylko wiedzie&#263; jak to zrobi&#263;.<\/p>\n\n\n\n<h2>Struktura plik&oacute;w<\/h2>\n\n\n\n<p>Obowi&#261;zuje tutaj podzia&#322; obszar&oacute;w <strong>adminhtml<\/strong>, <strong>frontend<\/strong>, <strong>base<\/strong>.<br>U&#380;ywaj&#261;c mixin-&oacute;w nale&#380;y zachowa&#263; istniej&#261;c&#261; struktur&#281; tak&#261; jak w pliku, kt&oacute;ry zostanie poddany modyfikacji. Dobr&#261; praktyk&#261; jest tak&#380;e utrzymanie oryginalnej nazwy rozszerzonej o &ldquo;-mixin&rdquo;.<\/p>\n\n\n\n<p><strong>[obszar] \/ web \/ js \/ [nazwa]-mixin.js<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"394\" height=\"490\" src=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/mixin-magento-2-screen.png\" alt=\"mixin magento 2 screen\" class=\"wp-image-3481\" srcset=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/mixin-magento-2-screen.png 394w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/mixin-magento-2-screen-241x300.png 241w\" sizes=\"(max-width: 394px) 100vw, 394px\"><\/figure>\n\n\n\n<p>Okre&#347;lenie pliku, kt&oacute;ry zostanie poddany modyfikacji jest zdefiniowany w:<br><strong>[obszar] \/ requirejs-config.js<\/strong>,<br>a sama definicja wygl&#261;da nast&#281;puj&#261;co:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"333\" src=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/mixin-magento-2-definicja-1024x333.png\" alt=\"mixin magento 2 definicja\" class=\"wp-image-3482\" srcset=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/mixin-magento-2-definicja-1024x333.png 1024w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/mixin-magento-2-definicja-300x98.png 300w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/mixin-magento-2-definicja-768x250.png 768w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/mixin-magento-2-definicja.png 1272w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"><\/figure>\n\n\n\n<ol><li>Zbuduj struktur&#281; var config = {&hellip;}<\/li><li>Zdefiniuj plik oryginalny poprzez podanie nazwy modu&#322;u, tutaj:<br>Magento_Ui<br><br>Nast&#281;pnie dodaj &#347;cie&#380;k&#281; do pliku zaczynaj&#261;c od katalogu &ldquo;js&rdquo; w&#322;&#261;cznie. tutaj:<br><strong>\/js\/grid\/columns\/column<\/strong><\/li><li>Analogicznie zdefiniuj plik rozszerzaj&#261;cy<\/li><li>Warto&#347;&#263; true okre&#347;la, czy mixin jest aktywny<\/li><\/ol>\n\n\n\n<p><strong>Uwaga! <\/strong>Nie u&#380;ywaj tutaj rozszerzenia .js.<\/p>\n\n\n\n<h2>Rozszerzanie dzia&#322;ania mixin-&oacute;w r&oacute;&#380;nych typ&oacute;w<\/h2>\n\n\n\n<p>To w jaki spos&oacute;b b&#281;dziesz rozszerza&#263; dzia&#322;anie rodzica zale&#380;y od tego w jaki spos&oacute;b jest zbudowany plik oryginalny, np. oryginalny plik rozpoczyna si&#281; nast&#281;puj&#261;co:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"345\" src=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/mixin-magento-kod-1024x345.png\" alt=\"mixin magento kod\" class=\"wp-image-3483\" srcset=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/mixin-magento-kod-1024x345.png 1024w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/mixin-magento-kod-300x101.png 300w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/mixin-magento-kod-768x258.png 768w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/mixin-magento-kod.png 1272w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"304\" src=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/mixin-kod-1024x304.png\" alt=\"mixin kod \" class=\"wp-image-3484\" srcset=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/mixin-kod-1024x304.png 1024w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/mixin-kod-300x89.png 300w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/mixin-kod-768x228.png 768w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/mixin-kod.png 1272w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"><\/figure>\n\n\n\n<p>Mixin b&#281;dzie zatem rozszerza&#322; dzia&#322;anie w taki sam spos&oacute;b:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"81\" src=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/mixin-rozszerzenie-1024x81.png\" alt=\"mixin rozszerzenie\" class=\"wp-image-3485\" srcset=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/mixin-rozszerzenie-1024x81.png 1024w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/mixin-rozszerzenie-300x24.png 300w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/mixin-rozszerzenie-768x60.png 768w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/mixin-rozszerzenie.png 1272w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"><\/figure>\n\n\n\n<p>Poni&#380;ej przyk&#322;ady dla r&oacute;&#380;nych typ&oacute;w:<\/p>\n\n\n\n<h3>UI Component<\/h3>\n\n\n\n<p>Rozszerzenie dzia&#322;ania funkcji toggleSorting.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"612\" src=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/Rozszerzenie-dzialania-funkcji-toggleSorting.-1024x612.png\" alt=\"Rozszerzenie dzia&#322;ania funkcji toggleSorting\" class=\"wp-image-3486\" srcset=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/Rozszerzenie-dzialania-funkcji-toggleSorting.-1024x612.png 1024w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/Rozszerzenie-dzialania-funkcji-toggleSorting.-300x179.png 300w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/Rozszerzenie-dzialania-funkcji-toggleSorting.-768x459.png 768w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/Rozszerzenie-dzialania-funkcji-toggleSorting..png 1272w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"><\/figure>\n\n\n\n<p>1. Stw&oacute;rz obiekt mixin:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"81\" src=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/obiekt-mixin-1024x81.png\" alt=\"obiekt mixin\" class=\"wp-image-3487\" srcset=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/obiekt-mixin-1024x81.png 1024w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/obiekt-mixin-300x24.png 300w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/obiekt-mixin-768x60.png 768w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/obiekt-mixin.png 1272w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"><\/figure>\n\n\n\n<p>2. Zmodyfikuj oryginaln&#261; funkcj&#281; toggleSorting:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"81\" src=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/modyfikacja-funkcji-toggleSorting-1024x81.png\" alt=\"funkcja toggleSorting\" class=\"wp-image-3488\" srcset=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/modyfikacja-funkcji-toggleSorting-1024x81.png 1024w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/modyfikacja-funkcji-toggleSorting-300x24.png 300w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/modyfikacja-funkcji-toggleSorting-768x60.png 768w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/modyfikacja-funkcji-toggleSorting.png 1272w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"><\/figure>\n\n\n\n<p>3. Aby umo&#380;liwi&#263; zadzia&#322;anie oryginalnej funkcji zastosuj:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"81\" src=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/oryginalna-funkcja-mixin-1024x81.png\" alt=\"oryginalna funkcja\" class=\"wp-image-3489\" srcset=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/oryginalna-funkcja-mixin-1024x81.png 1024w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/oryginalna-funkcja-mixin-300x24.png 300w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/oryginalna-funkcja-mixin-768x60.png 768w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/oryginalna-funkcja-mixin.png 1272w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"><\/figure>\n\n\n\n<p>4. Nast&#281;pnie zwr&oacute;&#263; rezultat &#322;&#261;cz&#261;c oryginalny obiekt (target) z mixinem:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"130\" src=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/pola%CC%A8czenie-oryginalnego-obiektu-z-mixinem-1024x130.png\" alt=\"&#322;&#261;czenie obiektu z mixinem \" class=\"wp-image-3490\" srcset=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/pola&#808;czenie-oryginalnego-obiektu-z-mixinem-1024x130.png 1024w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/pola&#808;czenie-oryginalnego-obiektu-z-mixinem-300x38.png 300w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/pola&#808;czenie-oryginalnego-obiektu-z-mixinem-768x98.png 768w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/pola&#808;czenie-oryginalnego-obiektu-z-mixinem.png 1272w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"><\/figure>\n\n\n\n<h3>JQuery widget<\/h3>\n\n\n\n<p>Rozszerzenie dzia&#322;ania funkcji _OnClick.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"636\" src=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/funkcja-OnClick-1024x636.png\" alt=\"rozszerzenie funkcji OnClick\" class=\"wp-image-3491\" srcset=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/funkcja-OnClick-1024x636.png 1024w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/funkcja-OnClick-300x186.png 300w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/funkcja-OnClick-768x477.png 768w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/funkcja-OnClick.png 1272w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"><\/figure>\n\n\n\n<p>1. Stw&oacute;rz obiekt mixin z funkcj&#261;, na kt&oacute;r&#261; b&#281;dzie oddzia&#322;ywa&#263;. U&#380;ywaj this._super w celu zachowania oryginalnego dzia&#322;ania:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"222\" src=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/obiekt-mixin-magento-2--1024x222.png\" alt=\"obiekt mixin magento 2\" class=\"wp-image-3492\" srcset=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/obiekt-mixin-magento-2--1024x222.png 1024w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/obiekt-mixin-magento-2--300x65.png 300w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/obiekt-mixin-magento-2--768x167.png 768w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/obiekt-mixin-magento-2-.png 1272w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"><\/figure>\n\n\n\n<p>2. Zwr&oacute;&#263; rezultat &#322;&#261;cz&#261;c oryginalny obiekt (target) z mixin-em poprzez u&#380;ycie $.widget z podaniem nazwy widgetu jako pierwszy argument:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"177\" src=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/kod-polaczenie-oryginalnego-obiektu-z-mixinem-1024x177.png\" alt=\"kod polaczenie oryginalnego obiektu z mixinem\" class=\"wp-image-3493\" srcset=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/kod-polaczenie-oryginalnego-obiektu-z-mixinem-1024x177.png 1024w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/kod-polaczenie-oryginalnego-obiektu-z-mixinem-300x52.png 300w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/kod-polaczenie-oryginalnego-obiektu-z-mixinem-768x133.png 768w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/kod-polaczenie-oryginalnego-obiektu-z-mixinem.png 1272w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"><\/figure>\n\n\n\n<h3>JS Object<\/h3>\n\n\n\n<p>Rozszerzenie dzia&#322;ania obiektu. Rozszerzenie dzia&#322;ania funkcji setCollectedTotals.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"776\" src=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/rozszerzenie-funkcji-setCollectedTotals-1024x776.png\" alt=\"kod rozszerzenie funkcji setCollectedTotals\" class=\"wp-image-3494\" srcset=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/rozszerzenie-funkcji-setCollectedTotals-1024x776.png 1024w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/rozszerzenie-funkcji-setCollectedTotals-300x227.png 300w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/rozszerzenie-funkcji-setCollectedTotals-768x582.png 768w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/rozszerzenie-funkcji-setCollectedTotals.png 1272w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"><\/figure>\n\n\n\n<p>1. Obiekt &ldquo;quote&rdquo; zawiera funkcj&#281; setCollectedTotals, kt&oacute;r&#261; chcesz zmodyfikowa&#263;. Stw&oacute;rz wi&#281;c rozszerzenie, aby zachowa&#263; oryginalne dzia&#322;anie wykorzystaj: this._super():<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"262\" src=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/kod-modyfikacja-funkcji-setCollectedTotals-1024x262.png\" alt=\"kod modyfikacja funkcji setCollectedTotals\" class=\"wp-image-3495\" srcset=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/kod-modyfikacja-funkcji-setCollectedTotals-1024x262.png 1024w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/kod-modyfikacja-funkcji-setCollectedTotals-300x77.png 300w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/kod-modyfikacja-funkcji-setCollectedTotals-768x197.png 768w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/kod-modyfikacja-funkcji-setCollectedTotals.png 1272w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"><\/figure>\n\n\n\n<p>2. Zwr&oacute;&#263; rezultat &#322;&#261;cz&#261;c funkcj&#281; setCollectedTotals przy u&#380;yciu &ldquo;narz&#281;dzia&rdquo; wrapper:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"196\" src=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/kod-polaczenie-funkcji-setCollectedTotals-1024x196.png\" alt=\"kod polaczenie funkcji setCollectedTotals\" class=\"wp-image-3496\" srcset=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/kod-polaczenie-funkcji-setCollectedTotals-1024x196.png 1024w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/kod-polaczenie-funkcji-setCollectedTotals-300x58.png 300w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/kod-polaczenie-funkcji-setCollectedTotals-768x147.png 768w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/kod-polaczenie-funkcji-setCollectedTotals.png 1272w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"><\/figure>\n\n\n\n<h3>JS Function<\/h3>\n\n\n\n<p>Rozszerzenie dzia&#322;ania funkcji.<\/p>\n\n\n\n<p>Skrypt oryginalny:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"676\" src=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/skrypt-oryginalny-JS-Function-1024x676.png\" alt=\"skryp oryginalny JS Function\" class=\"wp-image-3497\" srcset=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/skrypt-oryginalny-JS-Function-1024x676.png 1024w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/skrypt-oryginalny-JS-Function-300x198.png 300w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/skrypt-oryginalny-JS-Function-768x507.png 768w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/skrypt-oryginalny-JS-Function.png 1272w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"><\/figure>\n\n\n\n<p>Mixin:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"522\" src=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/Mixin-JS-Function-1024x522.png\" alt=\"Mixin JS Function\" class=\"wp-image-3498\" srcset=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/Mixin-JS-Function-1024x522.png 1024w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/Mixin-JS-Function-300x153.png 300w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/Mixin-JS-Function-768x391.png 768w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/Mixin-JS-Function.png 1272w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"><\/figure>\n\n\n\n<p>1. Tworzenie mixin&oacute;w. Funkcja przyjmuje w pierwszym argumencie oryginaln&#261; funkcj&#281;, a w kolejnych znajduj&#261; si&#281; jej argumenty. W celu wywo&#322;ania jej oryginalnego dzia&#322;ania u&#380;ywaj:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"82\" src=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/tworzenie-mixinu-JS-Function-1024x82.png\" alt=\"tworzenie mixinu JS Function\" class=\"wp-image-3499\" srcset=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/tworzenie-mixinu-JS-Function-1024x82.png 1024w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/tworzenie-mixinu-JS-Function-300x24.png 300w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/tworzenie-mixinu-JS-Function-768x62.png 768w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/tworzenie-mixinu-JS-Function.png 1272w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"><\/figure>\n\n\n\n<p>2. Zwr&oacute;&#263; rezultat &#322;&#261;cz&#261;c oryginaln&#261; funkcj&#281; z mixinem przy u&#380;yciu wrapper-a:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"134\" src=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/polaczenie-pierwotnego-obiektu-z-mixinem-JS-Function-1024x134.png\" alt=\"polaczenie pierwotnego obiektu z mixinem JS Function\" class=\"wp-image-3500\" srcset=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/polaczenie-pierwotnego-obiektu-z-mixinem-JS-Function-1024x134.png 1024w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/polaczenie-pierwotnego-obiektu-z-mixinem-JS-Function-300x39.png 300w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/polaczenie-pierwotnego-obiektu-z-mixinem-JS-Function-768x100.png 768w, https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/polaczenie-pierwotnego-obiektu-z-mixinem-JS-Function.png 1272w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"><\/figure>\n\n\n\n<h2>Podsumowanie<\/h2>\n\n\n\n<p>Mam nadziej&#281;, &#380;e artyku&#322; wyja&#347;ni&#322; Ci w jaki spos&oacute;b u&#380;ywa&#263; mixin-&oacute;w w Magento 2. Dob&oacute;r odpowiedniej metody, zachowanie stref oraz prawid&#322;owe zdefiniowanie w requirejs-config.js jest kluczowe do wprowadzenia skutecznej modyfikacji. Na pocz&#261;tku drogi z mixinami, pomocne b&#281;dzie wykorzystanie console.log do sprawdzenia czy mixin jest u&#380;ywany (przyk&#322;ad: JS Function). Pozwoli to mie&#263; pewno&#347;&#263;, &#380;e nie zosta&#322; pope&#322;niony b&#322;&#261;d na etapie &ldquo;skojarzenia&rdquo; mixin-a z oryginalnym skryptem. Stosuj&#261;c zaprezentowane metody mo&#380;esz w dowolny spos&oacute;b modyfikowa&#263; dzia&#322;anie oryginalnych skrypt&oacute;w dostosowuj&#261;c je do w&#322;asnych potrzeb.<\/p>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Aby witryna by&#322;a dynamiczna i wchodzi&#322;a w interakcj&#281; z u&#380;ytkownikiem wykorzystywane s&#261; m.in. skrypty js. Je&#380;eli jednak wbudowane funkcjonalno&#347;ci okazuj&#261; si&#281; niewystarczaj&#261;ce i chcesz je rozbudowa&#263; lub zmieni&#263; dostosowuj&#261;c dzia&#322;anie sklepu do w&#322;asnych oczekiwa&#324; z pomoc&#261; przychodz&#261; mixin-y. Czym w&#322;a&#347;ciwie s&#261;? Mixin (z ang. mieszanka) jest klas&#261;, kt&oacute;ra rozszerza dzia&#322;anie istniej&#261;cych ju&#380; skrypt&oacute;w. Przy ich&#8230;<\/p>\n","protected":false},"author":24,"featured_media":3506,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,24],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.7.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Jak u\u017cywa\u0107 mixin-\u00f3w w Magento 2? - Blog Aurora Creation<\/title>\n<meta name=\"description\" content=\"Sprawd\u017a, jak za pomoc\u0105 mixin-\u00f3w mo\u017cesz dostosowa\u0107 witryn\u0119 internetow\u0105 do swoich wymaga\u0144! Dowiedz si\u0119 wi\u0119cej.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/auroracreation.pl\/blog\/jak-uzywac-mixin-ow-w-magento-2\/\" \/>\n<meta property=\"og:locale\" content=\"pl_PL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Jak u\u017cywa\u0107 mixin-\u00f3w w Magento 2? - Blog Aurora Creation\" \/>\n<meta property=\"og:description\" content=\"Sprawd\u017a, jak za pomoc\u0105 mixin-\u00f3w mo\u017cesz dostosowa\u0107 witryn\u0119 internetow\u0105 do swoich wymaga\u0144! Dowiedz si\u0119 wi\u0119cej.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/auroracreation.pl\/blog\/jak-uzywac-mixin-ow-w-magento-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Aurora Creation\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/auroracreation\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-19T06:25:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/mixiny-blog-3.png\" \/>\n\t<meta property=\"og:image:width\" content=\"870\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Adam Patalong\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Adam Patalong\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/auroracreation.pl\/blog\/jak-uzywac-mixin-ow-w-magento-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/auroracreation.pl\/blog\/jak-uzywac-mixin-ow-w-magento-2\/\"},\"author\":{\"name\":\"Adam Patalong\",\"@id\":\"https:\/\/auroracreation.pl\/blog\/#\/schema\/person\/2d227d56ba9738d325ac999c6eb39709\"},\"headline\":\"Jak u\u017cywa\u0107 mixin-\u00f3w w Magento 2?\",\"datePublished\":\"2023-04-19T06:25:10+00:00\",\"dateModified\":\"2023-04-19T06:25:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/auroracreation.pl\/blog\/jak-uzywac-mixin-ow-w-magento-2\/\"},\"wordCount\":564,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/auroracreation.pl\/blog\/#organization\"},\"articleSection\":{\"1\":\"Magento Handbook\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/auroracreation.pl\/blog\/jak-uzywac-mixin-ow-w-magento-2\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/auroracreation.pl\/blog\/jak-uzywac-mixin-ow-w-magento-2\/\",\"url\":\"https:\/\/auroracreation.pl\/blog\/jak-uzywac-mixin-ow-w-magento-2\/\",\"name\":\"Jak u\u017cywa\u0107 mixin-\u00f3w w Magento 2? - Blog Aurora Creation\",\"isPartOf\":{\"@id\":\"https:\/\/auroracreation.pl\/blog\/#website\"},\"datePublished\":\"2023-04-19T06:25:10+00:00\",\"dateModified\":\"2023-04-19T06:25:10+00:00\",\"description\":\"Sprawd\u017a, jak za pomoc\u0105 mixin-\u00f3w mo\u017cesz dostosowa\u0107 witryn\u0119 internetow\u0105 do swoich wymaga\u0144! Dowiedz si\u0119 wi\u0119cej.\",\"breadcrumb\":{\"@id\":\"https:\/\/auroracreation.pl\/blog\/jak-uzywac-mixin-ow-w-magento-2\/#breadcrumb\"},\"inLanguage\":\"pl-PL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/auroracreation.pl\/blog\/jak-uzywac-mixin-ow-w-magento-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/auroracreation.pl\/blog\/jak-uzywac-mixin-ow-w-magento-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Strona g\u0142\u00f3wna\",\"item\":\"https:\/\/auroracreation.pl\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Jak u\u017cywa\u0107 mixin-\u00f3w w Magento 2?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/auroracreation.pl\/blog\/#website\",\"url\":\"https:\/\/auroracreation.pl\/blog\/\",\"name\":\"Aurora Creation\",\"description\":\"Blog o Magento i e-commerce - zarz\u0105dzanie projektami\",\"publisher\":{\"@id\":\"https:\/\/auroracreation.pl\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/auroracreation.pl\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pl-PL\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/auroracreation.pl\/blog\/#organization\",\"name\":\"Aurora Creation\",\"url\":\"https:\/\/auroracreation.pl\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/auroracreation\/\"],\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/auroracreation.pl\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2019\/07\/aurora-creation-logo.png\",\"contentUrl\":\"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2019\/07\/aurora-creation-logo.png\",\"width\":550,\"height\":130,\"caption\":\"Aurora Creation\"},\"image\":{\"@id\":\"https:\/\/auroracreation.pl\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/auroracreation.pl\/blog\/#\/schema\/person\/2d227d56ba9738d325ac999c6eb39709\",\"name\":\"Adam Patalong\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pl-PL\",\"@id\":\"https:\/\/auroracreation.pl\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e3a1c9327413ae73bc26a2c93dea37d1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e3a1c9327413ae73bc26a2c93dea37d1?s=96&d=mm&r=g\",\"caption\":\"Adam Patalong\"},\"url\":\"https:\/\/auroracreation.pl\/blog\/author\/a-patalong\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Jak u\u017cywa\u0107 mixin-\u00f3w w Magento 2? - Blog Aurora Creation","description":"Sprawd\u017a, jak za pomoc\u0105 mixin-\u00f3w mo\u017cesz dostosowa\u0107 witryn\u0119 internetow\u0105 do swoich wymaga\u0144! Dowiedz si\u0119 wi\u0119cej.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/auroracreation.pl\/blog\/jak-uzywac-mixin-ow-w-magento-2\/","og_locale":"pl_PL","og_type":"article","og_title":"Jak u\u017cywa\u0107 mixin-\u00f3w w Magento 2? - Blog Aurora Creation","og_description":"Sprawd\u017a, jak za pomoc\u0105 mixin-\u00f3w mo\u017cesz dostosowa\u0107 witryn\u0119 internetow\u0105 do swoich wymaga\u0144! Dowiedz si\u0119 wi\u0119cej.","og_url":"https:\/\/auroracreation.pl\/blog\/jak-uzywac-mixin-ow-w-magento-2\/","og_site_name":"Aurora Creation","article_publisher":"https:\/\/www.facebook.com\/auroracreation\/","article_published_time":"2023-04-19T06:25:10+00:00","og_image":[{"width":870,"height":360,"url":"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2023\/04\/mixiny-blog-3.png","type":"image\/png"}],"author":"Adam Patalong","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Adam Patalong","Est. reading time":"7 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/auroracreation.pl\/blog\/jak-uzywac-mixin-ow-w-magento-2\/#article","isPartOf":{"@id":"https:\/\/auroracreation.pl\/blog\/jak-uzywac-mixin-ow-w-magento-2\/"},"author":{"name":"Adam Patalong","@id":"https:\/\/auroracreation.pl\/blog\/#\/schema\/person\/2d227d56ba9738d325ac999c6eb39709"},"headline":"Jak u\u017cywa\u0107 mixin-\u00f3w w Magento 2?","datePublished":"2023-04-19T06:25:10+00:00","dateModified":"2023-04-19T06:25:10+00:00","mainEntityOfPage":{"@id":"https:\/\/auroracreation.pl\/blog\/jak-uzywac-mixin-ow-w-magento-2\/"},"wordCount":564,"commentCount":0,"publisher":{"@id":"https:\/\/auroracreation.pl\/blog\/#organization"},"articleSection":{"1":"Magento Handbook"},"inLanguage":"pl-PL","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/auroracreation.pl\/blog\/jak-uzywac-mixin-ow-w-magento-2\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/auroracreation.pl\/blog\/jak-uzywac-mixin-ow-w-magento-2\/","url":"https:\/\/auroracreation.pl\/blog\/jak-uzywac-mixin-ow-w-magento-2\/","name":"Jak u\u017cywa\u0107 mixin-\u00f3w w Magento 2? - Blog Aurora Creation","isPartOf":{"@id":"https:\/\/auroracreation.pl\/blog\/#website"},"datePublished":"2023-04-19T06:25:10+00:00","dateModified":"2023-04-19T06:25:10+00:00","description":"Sprawd\u017a, jak za pomoc\u0105 mixin-\u00f3w mo\u017cesz dostosowa\u0107 witryn\u0119 internetow\u0105 do swoich wymaga\u0144! Dowiedz si\u0119 wi\u0119cej.","breadcrumb":{"@id":"https:\/\/auroracreation.pl\/blog\/jak-uzywac-mixin-ow-w-magento-2\/#breadcrumb"},"inLanguage":"pl-PL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/auroracreation.pl\/blog\/jak-uzywac-mixin-ow-w-magento-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/auroracreation.pl\/blog\/jak-uzywac-mixin-ow-w-magento-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Strona g\u0142\u00f3wna","item":"https:\/\/auroracreation.pl\/blog\/"},{"@type":"ListItem","position":2,"name":"Jak u\u017cywa\u0107 mixin-\u00f3w w Magento 2?"}]},{"@type":"WebSite","@id":"https:\/\/auroracreation.pl\/blog\/#website","url":"https:\/\/auroracreation.pl\/blog\/","name":"Aurora Creation","description":"Blog o Magento i e-commerce - zarz\u0105dzanie projektami","publisher":{"@id":"https:\/\/auroracreation.pl\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/auroracreation.pl\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pl-PL"},{"@type":"Organization","@id":"https:\/\/auroracreation.pl\/blog\/#organization","name":"Aurora Creation","url":"https:\/\/auroracreation.pl\/blog\/","sameAs":["https:\/\/www.facebook.com\/auroracreation\/"],"logo":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/auroracreation.pl\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2019\/07\/aurora-creation-logo.png","contentUrl":"https:\/\/auroracreation.pl\/blog\/wp-content\/uploads\/2019\/07\/aurora-creation-logo.png","width":550,"height":130,"caption":"Aurora Creation"},"image":{"@id":"https:\/\/auroracreation.pl\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/auroracreation.pl\/blog\/#\/schema\/person\/2d227d56ba9738d325ac999c6eb39709","name":"Adam Patalong","image":{"@type":"ImageObject","inLanguage":"pl-PL","@id":"https:\/\/auroracreation.pl\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e3a1c9327413ae73bc26a2c93dea37d1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e3a1c9327413ae73bc26a2c93dea37d1?s=96&d=mm&r=g","caption":"Adam Patalong"},"url":"https:\/\/auroracreation.pl\/blog\/author\/a-patalong\/"}]}},"_links":{"self":[{"href":"https:\/\/auroracreation.pl\/blog\/wp-json\/wp\/v2\/posts\/3480"}],"collection":[{"href":"https:\/\/auroracreation.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/auroracreation.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/auroracreation.pl\/blog\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/auroracreation.pl\/blog\/wp-json\/wp\/v2\/comments?post=3480"}],"version-history":[{"count":3,"href":"https:\/\/auroracreation.pl\/blog\/wp-json\/wp\/v2\/posts\/3480\/revisions"}],"predecessor-version":[{"id":3779,"href":"https:\/\/auroracreation.pl\/blog\/wp-json\/wp\/v2\/posts\/3480\/revisions\/3779"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/auroracreation.pl\/blog\/wp-json\/wp\/v2\/media\/3506"}],"wp:attachment":[{"href":"https:\/\/auroracreation.pl\/blog\/wp-json\/wp\/v2\/media?parent=3480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/auroracreation.pl\/blog\/wp-json\/wp\/v2\/categories?post=3480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/auroracreation.pl\/blog\/wp-json\/wp\/v2\/tags?post=3480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}