Blogg – KIND hjälper dig med e-handel och internetmarknadsföring

augusti 2, 2017augusti 2, 2017

Menu editor for Magento 2 – new module that replace category based menus

Snowdog’s Magento 2 Menu implements a long awaited feature for Magento. The ability to work with menus as a modifiable node-list as a content element in the admin area. There are modules available that does this, but at a substantial cost if you run multi-store. There are also nice hacks available, using a plugin-approach, but the hacks that are readily available doesn’t support multi-store and is not implemented for editors with access only to the store admin. Personally, I think that such a feature should be part of the core. Hence, I was delighted when Alan Storm informed about the existence of this module.

FYI: It turned out to be a bit of work to get it working as I wanted. What I initially thought was a substantial cost for the available commercial modules are close to zero in comparison to the effort I put into understanding the Snowdog menu master module. Add any potential maintenance to that and the substantial cost is… close to zero for the commercial available modules. But hey, I enjoy learning, it is why I work with Magento and internet!

Installation (one way to do it)

Download the files from https://github.com/SnowdogApps/magento2-menu and select download ZIP.
Unzip on your machine.
Upload to your server, I’ve put it in MagentoWebRoot/app/code/Snowdog. Within the Snowdog-folder, I’ve got the Menu-folder.
Run CLI-command php magento setup:upgrade and follow the instructions.

Use

If installation worked, you should see a new section in the Content-menu, within the Element-section, namely, Menus. In this, you can easily create a new menu. It is quite self-instructing. It will work well in multi-store as you select to which store each menu is applicable to.

The position of the Menu editor in the admin is located within the "Content" area in the menu, with title "Menus". Once Menus has been clicked, a "Create new menu" button and a list of existing menus will appear. — The Menu editor appears in the Content section of the Magento 2 admin.

Once the "Create new menu" has been selected, a page is shown where configuration (title, identifier, menu main css class, store view) is made. — The configuration once a new menu is created with Menu editor

Within the Nodes tab, once creating a new menu, the menu nodes are added. Different types are available, such as category, custom url, cms page, etc. Within this tab, CSS class, node text, link etc. are set. — Adding a node to the menu. The tree that gets created has a drag and drop feature. If you select Add [some] node, it is a bit finicky to get the node at the right level. It is possible to put all nodes without any node being the parent of another (typically, the top-level of any menu shouldn’t have an explicit parent specified).

Once the menu is created, you need to include it your theme. To do so, edit default.xml in your theme. By editing default.xml, you can also remove existing menu. The code I’ve added in my default.xml (in the MagentoWebRoot/app/design/frontend/VendorName/themeName/Magento_Theme/layout/default.xml) is below. When I created the menu, I’ve named it main and added a couples of nodes of different types. You can see the menu-identifier in the arguments section and need to adjust it according to the identifier you select.

<referenceContainer name="store.menu">
  <block name="main.menu" class="Snowdog\Menu\Block\Menu" template="Snowdog_Menu::menu.phtml">
     <arguments>
        <argument name="menu" xsi:type="string">main</argument>
     </arguments>
  </block>
</referenceContainer>

</arguments>

</block>

</referenceContainer>

To remove existing menu, add the below code in your default.xml.

<referenceBlock name="catalog.topnav" remove="true"/>

1	<referenceBlock name="catalog.topnav" remove="true"/>

Its not pretty – out of the box

Out of the box with Luma-theme or similar theme, the menu will not look good. Well, yes, you can add certain CSS-classes when you create the menu, but what you can add and what gets automatically added isn’t in the same as Magento standard menu CSS. Furthermore, Menu master implements certain Html-elements that doesn’t exist in the native menu and seems to have a different approach to responsive web design.

Stay tuned, I’ll come back with some technical in-depth stuff and what I did to get the Menu Editor work with a Luma child theme.

augusti 1, 2017augusti 1, 2017

The logic of Magento 2 menu CSS classes

This post describes the CSS of the Magento 2 standard menu through example. This post will not describe how to add additional items to the menu.

Below is a general menu, with three first level nav items. It can be described generally as below, where each child and sub-child has an implicit url item. Within (), I’ve included the standard Magento CSS class for each navigation item. I’m not showing the classes called active and has-active. The active is assigned to the nav item, child or sub-child if it is the current page displayed. The has-active is assigned if its child is active.

Nav item 1 (level0 nav-1 first level-top)
	- url item (level-top)
Nav item 2 (level0 nav-2 level-top parent)
	- url item (level-top)
	- sub-menu (level0 submenu)
		- child 1 (level1 nav-2-1 first parent)
			- url item 
			- sub-menu (level1 submenu)
				- sub-child 1 (level2 nav-2-1-1 first)
				- sub-child 2 (level2 nav-2-1-2)
				- sub-child 3 (level2 nav-2-1-3 last)
		- child 2 (level1 nav-2-2 last parent)
			- url item
			- sub-menu (level1 submenu)
				- sub-child 1 (level2 nav-3-2-1 first)
				- sub child 2 (level2 nav-3-2-2 last)
Nav item 3  (level0 nav-3 last level-top)
	- url item (level-top)
	- sub-menu (level0 submenu)
		- child 1 (level1 nav-3-1 first parent)
			- url item
			- sub-menu (level1 submenu)
				- sub-child 1 (level2 nav-3-1-1 first)
				- sub-child 2 (level2 nav-3-1-2)
				- sub-child 3 (level2 nav-3-1-3)
				- sub-child 4 (level2 nav-3-1-4 last)
		- child 2 (level1 nav-3-2 last parent)
			- url item
			- sub-menu (level1 submenu)
				- sub-child 1 (level2 nav-3-2-1 first)
				- sub child 2 (level2 nav-3-2-2 last)

Nav item 1 (level0 nav-1 first level-top)

- url item (level-top)

Nav item 2 (level0 nav-2 level-top parent)

- url item (level-top)

- sub-menu (level0 submenu)

- child 1 (level1 nav-2-1 first parent)

- url item

- sub-menu (level1 submenu)

- sub-child 1 (level2 nav-2-1-1 first)

- sub-child 2 (level2 nav-2-1-2)

- sub-child 3 (level2 nav-2-1-3 last)

- child 2 (level1 nav-2-2 last parent)

- url item

- sub-menu (level1 submenu)

- sub-child 1 (level2 nav-3-2-1 first)

- sub child 2 (level2 nav-3-2-2 last)

Nav item 3 (level0 nav-3 last level-top)

- url item (level-top)

- sub-menu (level0 submenu)

- child 1 (level1 nav-3-1 first parent)

- url item

- sub-menu (level1 submenu)

- sub-child 1 (level2 nav-3-1-1 first)

- sub-child 2 (level2 nav-3-1-2)

- sub-child 3 (level2 nav-3-1-3)

- sub-child 4 (level2 nav-3-1-4 last)

- child 2 (level1 nav-3-2 last parent)

- url item

- sub-menu (level1 submenu)

- sub-child 1 (level2 nav-3-2-1 first)

- sub child 2 (level2 nav-3-2-2 last)

If you prefer Html-code and to see it as it looks in Magento, this is shown below.

<nav class="navigation">
	<ul>
		<li class="level0 nav-1 first level-top">
			<a href="" class="level-top">
				<span></span>
			</a>
		</li>
		<li class="level0 nav-2 level-top parent>
			<a href="" class="level-top>
				<span></span>
			</a>
			<ul class="level0 submenu">
				<li class="level1 nav-2-1 first parent">
					<a href="">
						<span></span>
					</a>
					<ul class="level1 submenu">
						<li class="level2 nav-2-1-1 first" >
							<a href="">
								<span></span>
							</a>
						</li>
						<li class="level2 nav-2-1-2">
							<a href="">
								<span></span>
							</a>
						</li>
						<li class="level2 nav-2-1-3">
							<a href="">
								<span></span>
							</a>
						</li>
						<li class="level2 nav-2-1-4 last">
							<a href="">
								<span></span>
							</a>
						</li>
					</ul>
				</li>
				<li class="level1 nav-2-2 last parent">
					<a href="">
						<span></span>
					</a>
					<ul class="level1 submenu">
						<li class="level2 nav-2-2-1 first">
							<a href="">
								<span></span>
							</a>
						</li>
						<li class="level2 nav-2-2-2 last">
							<a href="">
								<span></span>
							</a>
						</li>
					</ul>
				</li>
			</ul>
		</li>
		<li class="level0 nav-3 level-top parent last">
			<a href="" class="level-top">
				<span></span>
			</a>
			<ul class="level0 submenu">
				<li class="level1 nav-3-1 first parent">
					<a href="">
						<span></span>
					</a>
					<ul class="level1 submenu">
						<li class="level2 nav-3-1-1 first">
							<a href="">
								<span></span>
							</a>
						</li>
						<li class="level2 nav-3-1-2">
							<a href="">
								<span></span>
							</a>
						</li>
						<li class="level2 nav-3-1-3">
							<a href="">
								<span></span>
							</a>
						</li>
						<li class="level2 nav-3-1-4 last">
							<a href="">
								<span></span>
							</a>
						</li>
					</ul>
				</li>
				<li class="level1 nav-3-2 last parent ui-menu-item" role="presentation">
					<a href="">
						<span></span>
					</a>
					<ul class="level1 submenu">
						<li class="level2 nav-3-2-1 first">
							<a href="">
								<span></span>
							</a>
						</li>
						<li class="level2 nav-3-2-2 last">
							<a href="">
								<span></span>
							</a>
						</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>
</nav>

100

101

102

103

104

105

106

107

108

109

110

111

<ul>

</a>

</li>

</a>

</a>

</a>

</li>

</a>

</li>

</a>

</li>

</a>

</li>

</ul>

</li>

</a>

</a>

</li>

</a>

</li>

</ul>

</li>

</ul>

</li>

</a>

</a>

</a>

</li>

</a>

</li>

</a>

</li>

</a>

</li>

</ul>

</li>

</a>

</a>

</li>

</a>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</nav>

From a css and html-structure perspective, the depth and size of the menu could be substantially larger, but above should provide enough input on how the css and html looks like, independent of size and depth.

juli 2, 2017juli 2, 2017

Dekryptera data i core_config_data för att migrera till Magento 2

Det finns en mängd konfigurationsdata i tabellen core_config_data. En del av datan är sparad krypterad. Då krypteringen varierar mellan olika magento-installationer kan du inte kopiera värdena från en butik till en annan.

För att få tillgång till datan behöver du använda Magento’s funktion för att dekryptera.

&lt;?php
require_once("app/Mage.php"); //absolut eller relativ sökväg
Mage::app()-&gt;setCurrentStore(1);

$hlp = Mage::helper('core');
//Mina värden
echo ($hlp-&gt;decrypt("mitt-krypterade-värde-1")."&lt;br/&gt;");
echo ($hlp-&gt;decrypt("mitt-krypterade-värde-2")."&lt;br/&gt;");
//..
?&gt;

<?php

require_once("app/Mage.php"); //absolut eller relativ sökväg

Mage::app()->setCurrentStore(1);

$hlp = Mage::helper('core');

//Mina värden

echo ($hlp->decrypt("mitt-krypterade-värde-1")." ");

echo ($hlp->decrypt("mitt-krypterade-värde-2")." ");

//..

Mer specifikt: skapa en fil i din Magento-root, och besök den genom webbläsaren. Då får du upp de icke-krypterade strängarna.

När kan detta vara användbart? Jag migrerade Magento 1 till Magento 2 och fick inte tillgång till PayPal-kontot och dess API-uppgifter. Istället för att vänta på svaret använde jag denna metod.

Ovanstående metod fungerar inte på lösenord eller annat som är hashat.

juni 22, 2017juli 19, 2017

Tre buggar i Magento 2 som kan kosta dig dagar

Det finns buggar i Magento. Överallt. Nedan är några buggar som finns Magento 2, upp till åtminstone 2.17.

Statiskt innehåll genereras inte – sidan visas utan CSS och JS

I kommandotolken ska kommandot Magento static:content:deploy generera allt innehåll i foldern /pub/static/. Detta är problemtaiskt eftersom det ibland är önskvärt att radera allt innehåll i den mappen. Använder du ett anpassat tema, som bara innehåller layout-filer, så kommer Magento hoppa över ditt tema. För att komma runt problemet kan du:

- Lägg in dummy-innehåll i tema-mappen, t.ex. media/dinbild.png.
- Kör kommandot, men specificera vilket tema och språk (sv_SE för svenska).
  - php magento setup:static-content:deploy --language sv_SE --theme Kind/temanamn

Hur ser det ut om du har gått på den här buggen? Sidan visar bara grundläggande html, den ser blank eller naken ut. Använder du Chrome, kan du genom att högerklicka, välja inspect och gå in i fliken Console, där kommer du se 404-error på CSS-filer och eventuellt JS-filer.

Här kan du läsa på GitHub.

Lägg till i varukorgen och mini-varukorgen fungerar inte

Om du använder ett tema som ärver från blank eller luma, och inget händer när du trycker på Lägg i varukorgen / Add to cart, eller om inget händer när du trycker på kundkorgen i det högra övre hörnet, är det mycket troligt att du har ett fel i JS. Använder du Chrome, kan du genom att högerklicka, välja inspect och gå in i fliken Console, där kommer du se ett uttryck i stil med Fatal error: Uncaught exception.

En förklaring kan vara att ditt välkomst-meddelande innehåller udda tecken, t.ex. ’ (apostrof). Lösningen är att ändra ditt välkomst-meddelande, genom att ta bort special-tecken eller genom att ange HTML-koden för tecknet. ’ representeras av '

Blocket product_list_toolbar går inte att ta bort genom Layout update

En väg för att uppdatera innehåll på Magento är att använda Custom Layout Update. Varje element har olika namn och det går att lägga till, flytta eller ta bort block. Ett lite mer problematiskt block är product_list_toolbar. Följande kod borde ta bort det blocket:

Nu händer dock ingenting. Det är lätt att tro att du gjort fel – men det råkar vara så att Magento initierar det igenom om du tagit bort det.

Läs mer här och se GitHub. För att komma runt problemet behöver du skriva över den filen (block-fil) som har problemet. Det gör du i ditt anpassade tema.

Mejla för hela lösningen.