Aleksandar Krstic

Personal Blog

Magento 2 – Popup/slide modal handling

Magento 2 offers very easy way to use popup or sliding panels.

It can be achieved with the following piece of jQuery code anywhere you want (blocks, pages, templates, …).

<script type="text/javascript">
		function($, modal){
			var options = {
				type: 'popup', // there is also a slide type. By default sliding from the right.
				responsive: true,
				innerScroll: true,
				buttons: [{
					text: $.mage.__('Close'),
					class: '',
					click: function () {

			var popup = modal(options, $('#popup-modal'));
			//Popup appears on click on specific emelent with id=click-me			
			//Popup appears on winodow load

Also, you will need some html.

<!-- Link which will trigger popup on click. -->
<a href="#" id="click-me">Click me</a>

<!-- Popup content. -->
<div id="popup-modal">Here goes content modal</div>

As you can it is very easy to handle events (click, on window load, hover, …).

There are 2 types of modals in magento – Popup and Sliding Panel.

More about modal options you can find in official Magento documentation.

Magento 2 – Bulk update product position in category

Magento 2 offers manual way to update position of product in category. This is okay, but in case when you have 5000 products, it’s not that easy to re-order them one by one.

Also, there is a premium tool called “Store Manager for Magento”, and it’s very good, but if you don’t want to spend money on it, this is what I suggest:

*This presumes that you have csv file with sku and position columns ready.

1. Create table temp1 with the following query

SELECT a.category_id, a.product_id, a.position, b.sku
FROM catalog_category_product AS a, catalog_product_entity AS b
WHERE a.product_id = b.entity_id

2. Create table temp2 with 2 columns sku and position (they need to matach structure of same fields in temp1 table)

3. Import you csv file to temp2 table via phpMyAdmin.

4. Execute the following query in order to update temp1 from temp2

UPDATE temp1 t1 
INNER JOIN temp2 t2 
ON t1.sku = t2.sku 
SET t1.position = t2.position

5. Execute the following query in order to update catalog_category_product from temp1

UPDATE catalog_category_product t1 
INNER JOIN temp1 t2 
ON t1.product_id = t2.product_id 
AND t1.category_id = t2.category_id 
SET t1.position = t2.position

IMPORTANT: This will update position of product in all categories in which that product exist.

Magento – Readiness Check shows non-existing error during the installation of Magento extension.

During the extension installation (via Component Manager in Magento backend) I got some weird message in Readiness Check step (PHP Settings section).

“Your current PHP memory limit is 2048M. Magento 2 requires it to be set to 768M or more. As a user with root privileges, edit your php.ini file to increase memory_limit. (The command php –ini tells you where it is located.) After that, restart your web server and try again.”

So, if my memory limit in php.ini is set to 2048MB, how is that less than 768MB? (and yes, I double checked php.ini on correct location).

Here looks like that issue is not related with memory limit at all, anyway until I find out what is actual problem here this is the workaround if you want to continue with extension installation process.

      Locate file PATH-TO-YOUR-MAGENTO-SITE\setup\src\Magento\Setup\Model\PhpReadinessCheck.php
      Update error variable to false in the checkMemoryLimit function (line 201)
if (
            $currentMemoryInteger > 0
            && $this->dataSize->convertSizeToBytes($currentMemoryLimit)
            < $this->dataSize->convertSizeToBytes($minimumRequiredMemoryLimit)
        ) {
	    //$error = true;
            $error = false;
            $message = sprintf(
                'Your current PHP memory limit is %s.
                 Magento 2 requires it to be set to %s or more.
                 As a user with root privileges, edit your php.ini file to increase memory_limit. 
                 (The command php --ini tells you where it is located.) 
                 After that, restart your web server and try again.',

As you can see, logic for displaying error was correct, but for some reason error gets displayed, and process cannot be continued.

This is just (not so clean) workaround, so if some of readers of this post find real solution, please send the feedback.

Speed up Magento on localhost

Some of you experienced for sure how Magento can be slow on localhost (either you use XAMPP, WAMPP or whatever).

There are a few things that can be done in order to speed up Magento on localhost:

1. Increase memory in php.ini and .htaccess file


Main Magento .htaccess
php_value memory_limit 2048M

2. Enable Cache
Go to System > Cache Management in Magento backend and enable cache for everything listed

3. Static content deploy
Run the following command in terminal (make sure to navigate to Magento site folder first)
php bin/magento setup:static-content:deploy

CSS – How to fix the issue with fixed background on scroll in iOS

Your client want to have a fixed background when user scroll down? First thought – piece of cake, and really it is if you disregard the fact that users with iPhone or iPad like to scroll also.

This piece of code will work for every device except ones that have iOS (iPhone, iPad)

body {
    background-image: url("PATH-TO-YOUR-IMAGE");
    overflow-x: hidden;
    background-attachment: fixed;
    position: relative;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 100%;

Why is that the case here? Per my understanding, Apple disabled position: fixed or background-attachment: fixed style for body element.

So what to do?

1. Open and close div inside of body element

<div class="ios-fixed-bg"></div>

2. Apply the following style to class ios-fixed-bg

.ios-fixed-bg {
	background-image: url("PATH-TO-YOUR-IMAGE");
	height: 100%;
	width: 100%;
	position: fixed;
	background-position: center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
	z-index: -1;