Fixing Hyva Theme & Scandiweb Issues: A Troubleshooting Guide

by Admin 62 views
Fixing Hyva Theme & Scandiweb Issues: A Troubleshooting Guide

Hey guys, let's dive into some common problems and solutions when working with the Hyva Theme and the Scandiweb setup. We'll break down the issues, understand the fixes, and make sure everything runs smoothly. Let's get started!

Double 'Add to Cart' Button Issue in Hyva Theme

Alright, first things first: we've got a visual glitch. You might notice that the "Add to Cart" button is appearing twice on the product page. This can be annoying, and definitely isn't the experience we want for our users.

Image

The root cause of this double button issue often lies in how the theme handles the button rendering, or perhaps some custom modifications that have been made. The solution may require us to look through the template files, layout files, and potentially any custom JavaScript that may influence how the button is rendered on the page.

To troubleshoot, start by inspecting the product page's HTML to identify where these duplicate elements are coming from. Open your browser's developer tools (usually by right-clicking on the page and selecting "Inspect" or "Inspect Element"). Look for the "Add to Cart" button's HTML code and investigate the elements. This will show you exactly what's creating the button.

Next, carefully review the template files, especially the product view template (usually located in app/design/frontend/<YourVendor>/<YourTheme>/Magento_Catalog/templates/product/view.phtml or similar paths). Look for any duplicated code or any conditional rendering that could be causing the button to appear twice. Check also any layout XML files that could be calling the same block or element multiple times. Make sure that there's no unintentional duplication in the layout configurations. Review any custom JavaScript files that might be interfering with button rendering. Finally, you may need to clear the cache after making changes to templates or layouts.

Ultimately, the fix involves locating the source of the duplicate button and removing it, or adjusting the rendering logic to ensure only one button appears. This might mean commenting out or removing duplicated HTML or adjusting any conditional rendering logic to only display the button once. By the end of this process, the problem will be solved and your website will function as expected.

Resolving the Layered Navigation Error in Hyva Theme

Now, let's tackle a common error related to the layered navigation in the Hyva Theme. The error message reads: "Call to a member function getCurrentOrder() on false in .../view.phtml:48". This error occurs when $sorter is false, usually when the child block 'filter_sort' doesn't exist. Let's dig into the fix:

Understanding the Error

The error stems from an attempt to call methods on the $sorter variable without proper checks. The code on line 48 in view.phtml tries to use methods like getCurrentOrder() and getCurrentDirection() on the $sorter variable, assuming it always exists. However, if the child block filter_sort is missing, $sorter becomes false, leading to the error when you try calling those methods. This is an important consideration when using blocks and components within a theme, so that we don't assume that everything will always exist when we need it.

The Solution

To fix this, we'll introduce a check to ensure $sorter exists before calling its methods. Here's how to replace line 48 in view.phtml:

The old code:

php$sorter = $block->getChildBlock('filter_sort') ?? [];

The replacement code:

<div
x-data="Filters('<?= $escaper->escapeUrl($block->getClearUrl()) ?>', { key: '<?= $sorter ? $sorter->getCurrentOrder() : '' ?>', dir: '<?= $sorter ? $sorter->getCurrentDirection() : '' ?>' })"
role="region"
aria-label="<?= $escaper->escapeHtmlAttr(__('Product filters')) ?>"
>

This updated code uses a conditional (ternary operator) to check if $sorter exists before calling getCurrentOrder() and getCurrentDirection(). If $sorter is false, an empty string is used instead, preventing the error. This is a common and effective approach when working with Magento, where blocks and their child components may not always be present.

Implementation

  1. Locate the File: Find the view.phtml file. It's usually located in a path similar to app/design/frontend/<YourVendor>/<YourTheme>/Magento_LayeredNavigation/templates/layer/view.phtml.
  2. Replace the Code: Replace line 48 in the view.phtml file with the provided code. Ensure the surrounding code matches your existing theme structure.
  3. Clear Cache: After saving the changes, clear your Magento cache to reflect the changes in your store. You can clear the cache through the Magento admin panel or using the command-line interface (CLI) with the command php bin/magento cache:flush.

By implementing this fix, you'll resolve the error and ensure your layered navigation works correctly.

Fixing the Hyva Theme ProductListItem ViewModel Errors

Let's move on to an error related to ViewModel classes within the Hyva Theme. You might encounter two exceptions related to the ProductListItem ViewModel class. These exceptions can be tricky, but we'll break them down and show you how to resolve them.

Exception Breakdown

The error messages typically look like this:

  • Exception #0 (Hyva\Theme\Model\InvalidViewModelClass): Class Hyva\Theme\ViewModel\ProductListItem not found.
  • Exception #1 (Magento\Framework\Exception\RuntimeException): Type Error occurred when creating object: Satoshi\Theme\ViewModel\ProductListItem, Too few arguments to function Hyva\Theme\ViewModel\ProductListItem:: __construct(), 5 passed in ...

These errors indicate that there are issues with the ProductListItem ViewModel class.

The Cause

These issues arise because the theme expects a certain structure for the ProductListItem ViewModel. Specifically, the error "Class not found" suggests that the required class is missing or not properly defined. The second error, related to a type error, points to a mismatch in the constructor parameters of the ProductListItem class. The number of parameters being passed to the constructor does not match the expected number.

The Fix

To resolve this, you may need to ensure that the correct class exists or that the constructor has the right set of parameters. Here is the implementation:

First, make sure that the getItemHtml() function is working properly, by creating the function as follows:

/**
 * @param Product $product
 * @param AbstractBlock $parentBlock
 * @param string $viewMode
 * @param string $templateType
 * @param string $imageDisplayArea
 * @param bool $showDescription
 * @param int|null $index
 * @param array $breadcrumbs
 * @return string
 */
public function getItemHtml(
    Product $product,
    AbstractBlock $parentBlock,
    string $viewMode,
    string $templateType,
    string $imageDisplayArea,
    bool $showDescription,
    int $index = null,
    array $breadcrumbs = []
): string {
    if (!$this->isThemeActive->isSatoshiTheme()) {
        return parent::getItemHtml($product, $parentBlock, $viewMode, $templateType, $imageDisplayArea, $showDescription);
    }
}

And the two new uses:

use Magentorameworkootstrapactoryactory; use Magentorameworkootstrapactoryactory; use Magentorameworkootstrapactoryactory; use Magentorameworkootstrapactoryactory;
use Magentorameworkootstrapactoryactory; use Magentorameworkootstrapactoryactory;
use Magentorameworkootstrapactoryactory; use Magentorameworkootstrapactoryactory;

After making these adjustments, you should no longer face the errors. Make sure to flush your cache.

Resolving Index Conflicts with Satoshi UI

Now, let's address an issue related to the Satoshi UI within the Scandiweb theme. This problem involves index conflicts in the di.xml file, which can prevent the theme from working correctly. Let's understand the cause and the fix.

The Problem

The issue arises when the di.xml file, specifically the part related to parentSelectorsToUnderlay, tries to use duplicate indices. The original configuration looks like this:

<item name="parentSelectorsToUnderlay" xsi:type="array">
    <item name="0" xsi:type="string">.column-container</item>
    <item name="1" xsi:type="string">.row-container</item>
</item>

The problem is that the theme tries to add these selectors using the same indexes. When this happens, it leads to a "More than one node matching the query" conflict. This error prevents the theme from applying the necessary styles and functionalities correctly.

The Solution

The solution is simple: change the indices in di.xml to unique values. Here's the corrected code:

<item name="parentSelectorsToUnderlay" xsi:type="array">
    <item name="100" xsi:type="string">.column-container</item>
    <item name="101" xsi:type="string">.row-container</item>
</item>

By using unique indices like 100 and 101, you ensure that there are no conflicts, and the theme can apply the styles and functionalities without issues.

Implementation Steps

  1. Locate the di.xml file: The file is usually located in /var/www/html/vendor/scandiweb/satoshi/src/satoshi-ui/etc/adminhtml/di.xml.
  2. Edit the file: Open the di.xml file and locate the section containing parentSelectorsToUnderlay.
  3. Change the indices: Modify the index values to be unique, like 100 and 101.
  4. Clear the cache: After saving the changes, clear your Magento cache. You can do this via the command line with php bin/magento cache:flush.

By implementing this fix, you can resolve the index conflict and ensure your Scandiweb theme functions correctly.

Final Thoughts

There you have it, guys! We've covered some common issues and their solutions when working with the Hyva Theme and Scandiweb. Remember, troubleshooting can be a process of elimination, so don't be afraid to dig in, experiment, and test your changes. Keep these solutions in mind, and you'll be well on your way to a smoother and more efficient development experience.

If you have any other issues or questions, feel free to ask. Happy coding!