How to Add Custom Global Variable in Hyva Theme Magento 2

In this tutorial, Today I will explain you how to add custom global variable in Hyva Theme Magento 2. In Hyva Theme, They offers many global variables which we can access throughout the website. It will helpful when there are value which developers need into multiple pages and it’s value will not change.

Let’s follow the below steps for create custom global variable in Hyva Theme Magento 2.

You may also like this :

1) Let’s assume that you have installed Hyva theme and created child theme as well. Now, Create a variables.phtml template file at app/design/frontend/RH/CustomHyva/Hyva_Theme/templates/page/js/ and paste the below code :

Copy Code


<?php
/**
* Created By : Rohan Hapani
*/

declare(strict_types=1);

use Hyva\Theme\Model\ViewModelRegistry;
use Hyva\Theme\ViewModel\Cookie as CookieViewModel;
use Hyva\Theme\ViewModel\Store as StoreViewModel;
use Magento\Cookie\Helper\Cookie;
use Magento\Framework\App\PageCache\FormKey;
use Magento\Framework\App\PageCache\Version;
use Magento\Framework\Escaper;
use Magento\Framework\View\Element\Template;
use Magento\Theme\Controller\Result\MessagePlugin;
use Hyva\Theme\ViewModel\Media as MediaViewModel;

// phpcs:disable Magento2.Templates.ThisInTemplate.FoundHelper

/** @var Template $block */
/** @var Escaper $escaper */
/** @var ViewModelRegistry $viewModels */

/** @var CookieViewModel $cookieViewModel */
$cookieViewModel = $viewModels->require(Hyva\Theme\ViewModel\Cookie::class);

/** @var StoreViewModel $storeViewModel */
$storeViewModel = $viewModels->require(StoreViewModel::class);

/** @var MediaViewModel $mediaViewModel */
$mediaViewModel = $viewModels->require(MediaViewModel::class);


/** @var Magento\Cookie\Helper\Cookie $cookieHelper */
$cookieHelper = $this->helper(Cookie::class);
$cookieRestriction = $cookieHelper->isCookieRestrictionModeEnabled();
?>
<script>
    var BASE_URL = '<?= /* @noEscape */ $block->getUrl('/') ?>';
    var MEDIA_URL = '<?= /* @noEscape */ $mediaViewModel->getMediaUrl() ?>';
    var THEME_PATH = '<?= /* @noEscape */ $block->getViewFileUrl('/') ?>';
    var COOKIE_CONFIG = {
        "expires": null,
        "path": "<?= $escaper->escapeJs($cookieViewModel->getPath()) ?>",
        "domain": "<?= $escaper->escapeJs($cookieViewModel->getDomain()) ?>",
        "secure": <?= $cookieViewModel->getCookieSecure() ? 'true' : 'false' ?>,
        "lifetime": "<?= $escaper->escapeJs($cookieViewModel->getLifetime()) ?>",
        "cookie_restriction_enabled": <?= /* @noEscape */ $cookieRestriction ? 'true' : 'false'?>
    };
    var CURRENT_STORE_CODE = '<?= /* @noEscape */ $storeViewModel->getStoreCode(); ?>';
    var CURRENT_WEBSITE_ID = '<?= /* @noEscape */ $storeViewModel->getWebsiteId(); ?>';

    window.hyva = window.hyva || {}

    window.cookie_consent_groups = window.cookie_consent_groups || {}
    window.cookie_consent_groups['necessary'] = true;

    window.cookie_consent_config = window.cookie_consent_config || {};
    window.cookie_consent_config['necessary'] = [].concat(
        window.cookie_consent_config['necessary'] || [],
        [
            '<?= /* @noEscape */ Cookie::IS_USER_ALLOWED_SAVE_COOKIE ?>',
            '<?= /* @noEscape */ FormKey::COOKIE_NAME ?>',
            '<?= /* @noEscape */ MessagePlugin::MESSAGES_COOKIES_NAME ?>',
            '<?= /* @noEscape */ Version::COOKIE_NAME ?>',
            'mage-cache-sessid',
            'last_visited_store',
            'section_data_ids'
        ]
    );
</script>

Here, I added MEDIA_URL custom variable to access media base url in all the website. To get value of base media url I added Hyva\Theme\ViewModel\Media default viewModel into this phtml file and get value of base media url path.

Output :

That’s it !!!

I hope this blog is easy to understand about how to add custom global variable in Hyva Theme Magento 2. In case, I missed anything or need to add some information, always feel free to leave a comment on this blog, I’ll get back with a proper solution.

Keep liking and sharing !!!

Post Views: 35