Ultimo (1.19.1) partially working but "Zoom" extension stopped working after upgrading to PHP 8.2

[LuizSantos22]

Summary (*)

 Install OpenMage 19.5.0-rc1 
+ legacy Library/extensions package (zip file provided along with OM)
+ Ultimo (1.19.1 - latest version for M1) - One of the most used Magento theme 
+ PHP8.2 (deactivate pdo_mysql and activate nd_pdo_mysql extension)

Examples (*)

After installing PHP 8.2 we need to deactivate "pdo_mysql" and activate "nd_pdo_mysql" extension to make
Ultimo theme work. After that, almost everything works, except (so far in my tests) the "Zoom" extension
that deals with product images at product page, it stays blank.

Proposed solution

The temporary "workaround" is deactivating "Zoom" extension at system/config/Zoom
it will make the product image show up again at frontend but the issue is that every time you
click in another image, it will pop up new window to show the image, just like the old default theme

My idea with this report is having a more elegant solution for this issue. Most of the errors with this theme
were fixed by the trick mentioned above, by changing the extension for PHP 8.2. But it would be nice if someone
could fix this little issue with "Zoom" extension to make this perfect. And yes, I tried to leave only "lightbox" enabled, it doesn't work.

[kiatng]

Are there any error messages? This can provide clue to whether the error is caused by OM or Ultimo. If it is OM, we should be able to fix it. If it is Ultimo, you can notify them of the issue.

[LuizSantos22]

@kiatng Sadly the company behind Ultimo does not exist anymore. They just stopped providing support and it was taken down from Themeforest, which is a pitty as in my opinion it is the best theme ever made for M1, a bit complex to understand but highly customizable. Setting it even in a shared cPanel hosting with Litespeed on + Cloudflare + Zaraz runnig scripts on cloud the store loads really fast!
I guess the issue is these two PHP extensions: pdo_mysql and "nd_pdo_mysql"
In PHP 7.4 it does not matter which one you set, it works out of th box
In PHP 8.2 if pdo_mysql extension is activated, the site does not function if you change to
"nd_pdo_mysql" 99% of the site works, just the Zoom extesion that deals with pictures at the
product page does not work. It stays blank. If you deactivate the extension, Ultimo uses the "default"
product picture extension (given by Magento default theme) and it works, but is is not elegant as
eveytime you click in another picture it opens a new window.

I am still investigating I don't see any error but if you want, I can provide a test environment.

[justinbeaty]

@LuizSantos22 do you want to ask them if they will open source the theme?

[LuizSantos22]

@justinbeaty For what I know, the company does not operate anymore. Their last twitter comment was in 2017.

[LuizSantos22]

@kiatng and @justinbeaty
In my investigations about PHP8.2 I see that product page image when handled by RWD theme, works fine
I mean, it is not as pretty as Cloudzoom but it does the job, apart from the fact that Cloudzoom version used is outdated

So I have checked out this path
app/design/frontend/ultimo/default/template/infortis/cloudzoom/product/view/media.phtml

Looking at the code I get:

    <?php else: //Module disabled. Show images in Magento default style ?>
    
        <p class="product-image" style="max-width: <?php echo $imgWidth; ?>px;">
            <img src="<?php echo $helpImg->getImg($_product, $imgWidth, $imgHeight); ?>" alt="<?php echo $this->escapeHtml($this->getImageLabel());?>" title="<?php echo $this->escapeHtml($this->getImageLabel());?>" itemprop="image" />
        </p>
    
    <?php endif; ?>

I guess this code is the fallback in case CloudZoom is disabled

How can I make it to fall back to "rwd theme" rather than "default theme"?

Regards

[kiatng]

@LuizSantos22 To fallback to rwd, add a file app\design\frontend\ultimo\default\etc\theme.xml with the following content:

<theme>
    <parent>rwd/default</parent>
</theme>

More info here.

But I doubt it will fix your issue.

[kiatng]

If you want to replace CloudZoom with rwd zoom, you need to update the layout template of app\design\frontend\ultimo\default\layout. In the dir, you need to search for and update this handle:

<catalog_product_view translate="label">

by removing the associated block (/infortis/cloudzoom) with name="product.info.media". Then couple with the fallback directive in my last comment above, it may do what you intended to do.

[addison74]

For about 10 years I have been aware of Magento 1 themes. When I bought the first theme from Template Monster I noticed a lot of issues, fortunately the developers helped me to solve them, but I was disappointed by the lack of intensive testing of the products for sale. I could say that Ultimo was the best-selling of them, but with many problems. Porto would probably be maintained, but otherwise the shutters have been drawn. Theme Forest removed a lot of themes for Magento 1. It is best to start from scratch based on the RWD theme by adding a lot of features inspired by popular themes from Wordpress, Joomla, Magento 2. You can add Tailwind, Bootstrap, AlpineJS and many other libraries that are active projects on GitHub.

Regarding CloodZoom feature, I think it is a relic of the past. When the majority of visitors of a website use smartphones, the specific features related to the desktop are no longer necessary, but simplicity and visibility. I used EcommerceTeam CloudZoom extension for a while then gave up using another implementation. I recommend using or not lightGallery with main image. The rest of the images (colors, detailed) are placed in a carousel that takes the entire width of the main container. Clicking on any of them does not change the image of the product, but enlarges with lightGallery. For the mobile version, at a certain size of the viewport, these containers can be hidden and only a carousel with all the images in it is visible. You can try MagicToolbox products but I don't like extension with encrypted files.

As a golden rule, when compatibility issues arise and you can't solve them, you either replace them with something else, or completely abandon that whole framework. If OpenMage / Mage One did not continue Magento 1 in a few years, users were forced to migrate to something else due to new versions of PHP.

[LuizSantos22]

@addison74 @kiatng @justinbeaty

Hi guys, I really appreciate all the effort in trying to help me
After considering all ideas and I appreciate them, I haven't given up and made Ultimo's CloudZoom
extension work with PHP 8.2

To do that, I fired up the errors which was hugue:

Fatal error: Uncaught TypeError: implode(): Argument #2 ($array) must be of type ?array, string given in /app/code/local/Infortis/CloudZoom/Helper/Data.php:100 Stack trace: #0 /app/code/local/Infortis/CloudZoom/Helper/Data.php(100): implode() #1 /app/design/frontend/ultimo/default/template/infortis/cloudzoom/product/view/media.phtml(77): Infortis_CloudZoom_Helper_Data->getCloudZoomOptions() #2 /app/code/core/Mage/Core/Block/Template.php(257): include('/home/e1testec/...') #3 /app/code/core/Mage/Core/Block/Template.php(294): Mage_Core_Block_Template->fetchView() #4 /app/code/core/Mage/Core/Block/Template.php(307): Mage_Core_Block_Template->renderView() #5 /app/code/core/Mage/Core/Block/Abstract.php(933): Mage_Core_Block_Template->_toHtml() #6 /app/code/core/Mage/Core/Block/Abstract.php(650): Mage_Core_Block_Abstract->toHtml() #7 /app/code/core/Mage/Core/Block/Abstract.php(594): Mage_Core_Block_Abstract->_getChildHtml() #8 /app/design/frontend/ultimo/default/template/catalog/product/view.phtml(137): Mage_Core_Block_Abstract->getChildHtml() #9 /app/code/core/Mage/Core/Block/Template.php(257): include('/home/e1testec/...') #10 /app/code/core/Mage/Core/Block/Template.php(294): Mage_Core_Block_Template->fetchView() #11 /app/code/core/Mage/Core/Block/Template.php(307): Mage_Core_Block_Template->renderView() #12 /app/code/core/Mage/Core/Block/Abstract.php(933): Mage_Core_Block_Template->_toHtml() #13 /app/code/core/Mage/Core/Block/Text/List.php(42): Mage_Core_Block_Abstract->toHtml() #14 /app/code/core/Mage/Core/Block/Abstract.php(933): Mage_Core_Block_Text_List->_toHtml() #15 /app/code/core/Mage/Core/Block/Abstract.php(650): Mage_Core_Block_Abstract->toHtml() #16 /app/code/core/Mage/Core/Block/Abstract.php(594): Mage_Core_Block_Abstract->_getChildHtml() #17 /app/design/frontend/ultimo/default/template/page/1column.phtml(34): Mage_Core_Block_Abstract->getChildHtml() #18 /app/code/core/Mage/Core/Block/Template.php(257): include('/home/e1testec/...') #19 /app/code/core/Mage/Core/Block/Template.php(294): Mage_Core_Block_Template->fetchView() #20 /app/code/core/Mage/Core/Block/Template.php(307): Mage_Core_Block_Template->renderView() #21 /app/code/core/Mage/Core/Block/Abstract.php(933): Mage_Core_Block_Template->_toHtml() #22 /app/code/core/Mage/Core/Model/Layout.php(580): Mage_Core_Block_Abstract->toHtml() #23 /app/code/core/Mage/Core/Controller/Varien/Action.php(397): Mage_Core_Model_Layout->getOutput() #24 /app/code/core/Mage/Catalog/Helper/Product/View.php(149): Mage_Core_Controller_Varien_Action->renderLayout() #25 /app/code/core/Mage/Catalog/controllers/ProductController.php(128): Mage_Catalog_Helper_Product_View->prepareAndRender() #26 /app/code/core/Mage/Core/Controller/Varien/Action.php(428): Mage_Catalog_ProductController->viewAction() #27 /app/code/core/Mage/Core/Controller/Varien/Router/Standard.php(262): Mage_Core_Controller_Varien_Action->dispatch() #28 /app/code/core/Mage/Core/Controller/Varien/Front.php(188): Mage_Core_Controller_Varien_Router_Standard->match() #29 /app/code/core/Mage/Core/Model/App.php(371): Mage_Core_Controller_Varien_Front->dispatch() #30 /app/Mage.php(745): Mage_Core_Model_App->run() #31 /index.php(65): Mage::run() #32 {main} thrown in /app/code/local/Infortis/CloudZoom/Helper/Data.php on line 100

Anyway, that gave the the clue where the error was, the line 100
Which says this:

return implode($cfg, ',');

Changed to this:

// Implode the $cfg array with a comma return implode(',', $cfg);

Which was supposed to work but I was having symtax errors

So I refactored the "Data.php" entire code from this:

`<?php

class Infortis_CloudZoom_Helper_Data extends Mage_Core_Helper_Abstract
{
public function getCfg($optionString)
{
return Mage::getStoreConfig('cloudzoom/' . $optionString);
}

/**
 * Check if module is enabled.
 * @return bool
 */
public function isCloudZoomEnabled()
{
	return (bool) $this->getCfg('general/enable');
}

/**
 * Check if lightbox is enabled
 * @return bool
 */
public function useLightbox()
{
	return (bool) $this->getCfg('lightbox/enable');
}

/**
 * Check if cloud zoom is enabled
 * @return bool
 */
public function useCloudZoom()
{
	if ($this->getCfg('general/use_cloud_zoom') && $this->getCfg('general/enable'))
		return true;
	else
		return false;
}

/**
 * Check if cloud zoom position equals 'inside'
 * @return bool
 */
public function isPositionInside()
{
	return ($this->getCfg('general/position') == 'inside');
}

/**
 * Get string with Cloud Zoom options
 * @return string
 */
public function getCloudZoomOptions()
{		
	//Get Cloud Zoom config
	$position       = $this->getCfg('general/position');
	$lensOpacity    = intval($this->getCfg('general/lens_opacity')) / 100;
	$zoomWidth      = intval($this->getCfg('general/zoom_width'));
	$zoomHeight     = intval($this->getCfg('general/zoom_height'));
	$tintColor      = trim($this->getCfg('general/tint_color'));
	$tintOpacity    = intval($this->getCfg('general/tint_opacity')) / 100;
	$softFocus		= intval($this->getCfg('general/soft_focus'));
	$smoothMove		= intval($this->getCfg('general/smooth_move'));
	
    //Create Cloud Zoom config array
    $cfg = array(
        "position:'{$position}'",
        "showTitle:false",
        "lensOpacity:{$lensOpacity}",
        "smoothMove:{$smoothMove}",
    );
    
    if ($zoomWidth) {
        $cfg[] = "zoomWidth:{$zoomWidth}";
    }
    if ($zoomHeight) {
        $cfg[] = "zoomHeight:{$zoomHeight}";
    }

    //Right and bottom: move 10px (+ 2 * 1px border). Left and top: move -10px (- 2 * 1px border).
    if ($position == 'inside') {
        $cfg[] = 'adjustX:0,adjustY:0';
    } elseif ($position == 'right') {
        $cfg[] = 'adjustX:15,adjustY:-6';
    } elseif ($position == 'bottom') {
        $cfg[] = 'adjustX:-6,adjustY:10';
    } elseif ($position == 'left') {
        $cfg[] = 'adjustX:-12,adjustY:-6';
    } elseif ($position == 'top') {
        $cfg[] = 'adjustX:-6,adjustY:-12';
    }

    if ($tintColor) {
        $cfg[] = "tint:'{$tintColor}',tintOpacity:{$tintOpacity}";
    }
    if ($softFocus) {
        $cfg[] = "softFocus:{$softFocus}";
    }
	
	return implode($cfg, ',');
}

}
`

To this new one:

`<?php

class Infortis_CloudZoom_Helper_Data extends Mage_Core_Helper_Abstract
{
public function getCfg($optionString)
{
return Mage::getStoreConfig('cloudzoom/' . $optionString);
}

/**
 * Check if module is enabled.
 * @return bool
 */
public function isCloudZoomEnabled()
{
    return (bool) $this->getCfg('general/enable');
}

/**
 * Check if lightbox is enabled
 * @return bool
 */
public function useLightbox()
{
    return (bool) $this->getCfg('lightbox/enable');
}

/**
 * Check if cloud zoom is enabled
 * @return bool
 */
public function useCloudZoom()
{
    if ($this->getCfg('general/use_cloud_zoom') && $this->getCfg('general/enable')) {
        return true;
    } else {
        return false;
    }
}

/**
 * Check if cloud zoom position equals 'inside'
 * @return bool
 */
public function isPositionInside()
{
    return ($this->getCfg('general/position') == 'inside');
}

/**
 * Get string with Cloud Zoom options
 * @return string
 */
public function getCloudZoomOptions()
{
    // Initialize an empty array for $cfg
    $cfg = array();

    //Get Cloud Zoom config
    $position       = $this->getCfg('general/position');
    $lensOpacity    = intval($this->getCfg('general/lens_opacity')) / 100;
    $zoomWidth      = intval($this->getCfg('general/zoom_width'));
    $zoomHeight     = intval($this->getCfg('general/zoom_height'));
    $tintColor      = trim($this->getCfg('general/tint_color'));
    $tintOpacity    = intval($this->getCfg('general/tint_opacity')) / 100;
    $softFocus      = intval($this->getCfg('general/soft_focus'));
    $smoothMove     = intval($this->getCfg('general/smooth_move'));

    // ... (other $cfg[] assignments)

    // Check if $tintColor and $tintOpacity are set and add them to $cfg
    if ($tintColor) {
        $cfg[] = "tint:'{$tintColor}',tintOpacity:{$tintOpacity}";
    }
    if ($softFocus) {
        $cfg[] = "softFocus:{$softFocus}";
    }

    // Implode the $cfg array with a comma
    return implode(',', $cfg);
}

}
`

It has fewer lines and the only thing I have noticed I cannot do anymore, is "swapping" the pictures to the side when using mobile devices which in the original code I could. But that is a minor issue.

I hope that can help someone which has the same issue.

Right now the only thing missing to make it "perfect" is setting thumbnails vertically on the left side of the main image.