Overriding the HTML / PHP

You can override index.html and any other static file by matching its path

By default, ScandiPWA provides this index file:

source: public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Muli font import from Adobe -->
    <link rel="stylesheet" href="https://use.typekit.net/gbk7rfi.css">

    <!-- Default Meta -->
    <title>ScandiPWA</title>
    <meta name="theme-color" content="#ffffff" />
    <meta name="description" content="Web site created using create-scandipwa-app" />

    <!-- Default content-configurations -->
    <script>
        window.contentConfiguration = {};
        window.storeList = ['default'];
        window.storeRegexText = `/(${window.storeList.join('|')})?`;
    </script>
</head>
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>
</html>

If you want to change any of these values, or import additional assets, you will need to override this file. Simply copy it to public/index.html of your theme's directory, and make the changes you need.

When compiling into Magento 2 theme, the application is using different file, the public/index.php:

source: public/index.php

<?php
    $colorConfig = $this->getThemeConfiguration('color_customization');
    $contentConfig = $this->getThemeConfiguration('content_customization');
    $icons = $this->getAppIconData();
?>
<!DOCTYPE html>
<html lang="<?= $this->getLocaleCode() ?>">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">

        <!-- Muli font import from Abode -->
        <link rel="stylesheet" href="https://use.typekit.net/gbk7rfi.css">

        <script>
            (function() {
                if (typeof globalThis === 'object') return;
                Object.prototype.__defineGetter__('__magic__', function() {
                    return this;
                });
                __magic__.globalThis = __magic__;
                delete Object.prototype.__magic__;
            }());

            window.actionName = { type: `<?= $this->getAction(); ?>` };
            window.contentConfiguration = <?= json_encode($contentConfig) ?> || {};
            window.storeList = JSON.parse(`<?= $this->getStoreListJson() ?>`);
            window.storeRegexText = `/(${window.storeList.join('|')})?`;
        </script>

        <!-- Icons -->
        <link rel="shortcut icon" href="/pub/media/favicon/favicon.png">

        <?php foreach ($icons['ios_startup'] as $icon): ?>
            <?= sprintf('<link rel="apple-touch-startup-image" sizes="%s" href="%s">', $icon["sizes"], $icon["href"]); ?>
        <?php endforeach; ?>

        <?php foreach ($icons['ios'] as $icon): ?>
            <?= sprintf('<link rel="apple-touch-icon" sizes="%s" href="%s">', $icon["sizes"], $icon["href"]); ?>
        <?php endforeach; ?>

        <?php foreach ($icons['icon'] as $icon): ?>
            <?= sprintf('<link rel="icon" sizes="%s" href="%s">', $icon["sizes"], $icon["href"]); ?>
        <?php endforeach; ?>

        <!-- Manifest -->
        <link rel="manifest" href="/pub/media/webmanifest/manifest.json">
    <style>
        <?php if ($colorConfig['enable_color_customization']['enable_custom_colors'] !== "0"): ?>
            <?php $colorArray = $colorConfig['primary_colors'] + $colorConfig['secondary_colors']; ?>
            :root {
                <?php foreach ($colorArray as $code => $color): ?>
                    <?php if (strpos($code, 'color') !== false): ?>
                        <?= sprintf('--imported_%s: #%s;', $code, $color); ?>
                    <?php endif; ?>
                <?php endforeach; ?>
            }
        <?php endif; ?>
    </style>
</head>
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>
</html>

If you want to change any of these values, or import additional assets, you will need to override this file. Simply copy it to public/index.php of your theme's directory, and make the changes you need.

PreviousOverriding Styles NextParent Themes

Last updated 3 years ago