SMM-12 Hyva CSP compatibility

Block/NodeType/CategoryChild.php

@@ -7,13 +7,18 @@
 use Magento\Catalog\Api\CategoryRepositoryInterface;
 use Snowdog\Menu\Model\TemplateResolver;
 use Snowdog\Menu\Model\NodeType\Category as ModelCategory;
+use Snowdog\Menu\Model\NodeType\CategoryChild as ModelCategoryChild;
 
 class CategoryChild extends Category
 {
     /**
      * @var string
      */
     protected $defaultTemplate = 'menu/node_type/category_child.phtml';
+    /**
+     * @var string
+     */
+    protected $customTemplateFolder = 'menu/custom/category_child/';
     /**
      * @var string
      */
@@ -22,6 +27,10 @@ class CategoryChild extends Category
      * @var CategoryRepositoryInterface
      */
     protected $categoryRepository;
+    /**
+     * @var ModelCategoryChild
+     */
+    private $categoryChildModel;
 
     /**
      * Category constructor.
@@ -31,6 +40,7 @@ class CategoryChild extends Category
      * @param ModelCategory $categoryModel
      * @param TemplateResolver $templateResolver
      * @param CategoryRepositoryInterface $categoryRepository
+     * @param ModelCategoryChild $categoryChildModel
      * @param array $data
      */
     public function __construct(
@@ -39,10 +49,12 @@ public function __construct(
         ModelCategory $categoryModel,
         TemplateResolver $templateResolver,
         CategoryRepositoryInterface $categoryRepository,
+        ModelCategoryChild $categoryChildModel,
         array $data = []
     ) {
         parent::__construct($context, $coreRegistry, $categoryModel, $templateResolver, $data);
         $this->categoryRepository = $categoryRepository;
+        $this->categoryChildModel = $categoryChildModel;
     }
 
     /**
@@ -58,6 +70,14 @@ public function getNodeCacheKeyInfo()
         ];
     }
 
+    /**
+     * @inheritDoc
+     */
+    public function getJsonConfig()
+    {
+        return $this->categoryChildModel->fetchConfigData();
+    }
+
     /**
      * @return \Magento\Framework\Phrase
      */

CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 
 ## [Unreleased]
+### Fixed
+- Hyvä footer menu compatibility with Alpine CSP and cached menu HTML (SMM-58)
+- Mobile top menu remaining visible in Hyvä Checkout (SMM-58)
+- Custom URL field keeping the previous node type's content after changing a node's type (SMM-59)
 ### Updated
 - Bump minimatch from 3.1.2 to 3.1.5 ([#395](https://github.com/SnowdogApps/magento2-menu/pull/395))
 - Bump lodash from 4.17.21 to 4.17.23 ([#390](https://github.com/SnowdogApps/magento2-menu/pull/390))

Console/Command/NodesValidatorCommand.php

@@ -60,7 +60,7 @@ public function __construct(
     /**
      * {@inheritdoc}
      */
-    protected function configure()
+    protected function configure(): void
     {
         $description = 'It will loop all menu nodes and return the IDs and description of invalid menu nodes.'
             . PHP_EOL
@@ -72,7 +72,7 @@ protected function configure()
         parent::configure();
     }
 
-    public function execute(InputInterface $input, OutputInterface $output)
+    public function execute(InputInterface $input, OutputInterface $output): int
     {
         $this->setAreaCode();
         $invalidNodeIds = [];

Model/NodeType/CategoryChild.php

@@ -4,10 +4,58 @@
 
 namespace Snowdog\Menu\Model\NodeType;
 
+use Magento\Framework\Profiler;
+use Snowdog\Menu\Model\Menu\Node\Image\File as NodeImage;
 use Snowdog\Menu\Model\NodeType\AbstractNode;
+use Snowdog\Menu\Model\TemplateResolver;
 
 class CategoryChild extends AbstractNode
 {
+    /**
+     * @var TemplateResolver
+     */
+    private $templateResolver;
+
+    /**
+     * @param Profiler $profiler
+     * @param NodeImage $nodeImage
+     * @param TemplateResolver $templateResolver
+     */
+    public function __construct(
+        Profiler $profiler,
+        NodeImage $nodeImage,
+        TemplateResolver $templateResolver
+    ) {
+        $this->templateResolver = $templateResolver;
+
+        parent::__construct($profiler, $nodeImage);
+    }
+
+    /**
+     * @inheritDoc
+     */
+    public function fetchConfigData()
+    {
+        $this->profiler->start(__METHOD__);
+
+        $data = [
+            'snowMenuNodeCustomTemplates' => [
+                'defaultTemplate' => 'category_child',
+                'options' => $this->templateResolver->getCustomTemplateOptions('category_child'),
+                'message' => __('Template not found'),
+            ],
+            'snowMenuSubmenuCustomTemplates' => [
+                'defaultTemplate' => 'sub_menu',
+                'options' => $this->templateResolver->getCustomTemplateOptions('sub_menu'),
+                'message' => __('Template not found'),
+            ],
+        ];
+
+        $this->profiler->stop(__METHOD__);
+
+        return $data;
+    }
+
     /**
      * @inheritDoc
      */

Service/Menu/SaveRequestProcessor.php

@@ -176,7 +176,7 @@ public function processNodeObject(
             $nodeObject->setClasses($nodeData['classes']);
         }
 
-        if (isset($nodeData['content'])) {
+        if (array_key_exists('content', $nodeData)) {
             $nodeObject->setContent($nodeData['content']);
         }
 

view/adminhtml/web/vue/field-type/autocomplete-lazy.vue

@@ -230,7 +230,9 @@
                     }
                     else if (option && typeof option === 'string') {
                         this.$set(this.item, this.itemKey, option);
-                        this.$set(this.item, 'title', this.options.find(item => item.value === option)?.label);
+                        if (!this.item.title) {
+                            this.$set(this.item, 'title', this.options.find(item => item.value === option)?.label);
+                        }
                     }
                     else {
                         this.$set(this.item, this.itemKey, this.defaultSelectedOption ? this.defaultSelectedOption.value.toString() : '');

view/adminhtml/web/vue/field-type/autocomplete.vue

@@ -50,8 +50,8 @@
 
 <script>
     define(['Vue'], function(Vue) {
         Vue.component('autocomplete', {
             name: 'autocomplete',
             props: {
                 label: {
                     type: String,
@@ -131,11 +131,15 @@
                         if (option && typeof option === 'object') {
                             this.$set(this.item, this.itemKey, option.value.toString());
                             this.$set(this.item, this.itemIdKey, option.id.toString());
-                            this.$set(this.item, 'title', option.label);
+                            if (!this.item.title) {
+                                this.$set(this.item, 'title', option.label);
+                            }
                         }
                         else if (option && typeof option === 'string') {
                             this.$set(this.item, this.itemKey, option);
-                            this.$set(this.item, 'title', this.options.find(item => item.value === option)?.label);
+                            if (!this.item.title) {
+                                this.$set(this.item, 'title', this.options.find(item => item.value === option)?.label);
+                            }
                         }
                         else {
                             this.$set(this.item, this.itemKey, this.defaultSelectedOption ? this.defaultSelectedOption.value.toString() : '');

view/frontend/layout/default_hyva.xml

@@ -39,6 +39,11 @@
         </referenceBlock>
 
         <referenceBlock name="script-alpine-js">
+            <block
+                name="snowdog-menu-footer-js"
+                class="Magento\Framework\View\Element\Template"
+                template="Snowdog_Menu::page/js/menu-footer.phtml"
+            />
             <block
                 name="alpine-plugin-collapse"
                 template="Snowdog_Menu::page/js/plugins/collapse.phtml"

view/frontend/layout/hyva_checkout_index_index.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0"?>
+<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
+    <body>
+        <referenceBlock name="topmenu-desktop" remove="true"/>
+        <referenceBlock name="topmenu-mobile" remove="true"/>
+        <referenceBlock name="menu-footer" remove="true"/>
+    </body>
+</page>

view/frontend/tailwind/tailwind-source.css

@@ -1,7 +1,5 @@
-@layer utilities {
-    .snowdog-menu-text-hover {
-        @apply text-blue-700;
-    }
+@utility snowdog-menu-text-hover {
+    color: var(--color-blue-700);
 }
 
 [x-cloak="tablet"] {

view/frontend/templates/hyva-menu-footer/menu.phtml

@@ -10,49 +10,22 @@ use Snowdog\Menu\Block\Menu;
 /** @var ViewModelRegistry $viewModels */
 
 $menu = $block->getMenu();
-$uniqueId = '_' . uniqid();
 
 $heroicons = $viewModels->require(HeroiconsOutline::class);
 ?>
 
 <?php if ($menu): ?>
-    <script>
-        'use strict';
-
-        const initMenuFooter<?= $escaper->escapeHtml($uniqueId) ?> = () => ({
-            isDesktop: true,
-            checkIsDesktopResolution() {
-                this.isDesktop = window.matchMedia('(min-width: 1024px)').matches
-            },
-            toggleSubmenu(event, index) {
-                const focusableElements = 'button:not([disabled]), a[href]:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"])'
-
-                event.stopPropagation()
-                this[index] = !this[index]
-
-                if (this[index]) {
-                    this.$nextTick(() => {
-                        this.$refs['submenu-' + index]?.querySelector(focusableElements)?.focus()
-                    })
-                } else {
-                    this.$nextTick(() => {
-                        this.$refs['submenu-toggle-' + index]?.focus()
-                    })
-                }
-            },
-        })
-    </script>
     <div
         class="
             <?= $escaper->escapeHtmlAttr($menu->getCssClass()) ?>
              snowdog-menu-footer w-full flex flex-wrap text-primary-darker
         "
-        x-data="initMenuFooter<?= $escaper->escapeHtml($uniqueId) ?>()"
+        x-data="snowdogMenuFooter"
     >
         <ul class="w-full flex flex-col flex-wrap lg:flex-row lg:justify-between lg:gap-6 divide-y divide-container lg:divide-y-0"
-            x-init="checkIsDesktopResolution()"
-            @resize.window.debounce="checkIsDesktopResolution()"
-            @visibilitychange.window.debounce="checkIsDesktopResolution()"
+            x-init="checkIsDesktopResolution"
+            @resize.window.debounce="checkIsDesktopResolution"
+            @visibilitychange.window.debounce="checkIsDesktopResolution"
         >
             <?php foreach ($block->getNodes() as $node): ?>
                 <?php
@@ -64,44 +37,45 @@ $heroicons = $viewModels->require(HeroiconsOutline::class);
                 $nodeType = $node->getType();
                 $nodeClasses = $node->getClasses();
                 ?>
-                <li x-data="{'<?= /* @noEscape */ (string) $indexId ?>': false }"
+                <li x-data="snowdogMenuFooterNode"
+                    data-node-id="<?= $escaper->escapeHtmlAttr($indexId) ?>"
                     class="flex-1"
                 >
                     <?php if ($node->getIsParent() && !$node->getIsViewAllLink()): ?>
-                        <div @keydown.escape="(event) => !isDesktop && toggleSubmenu(event, '<?= /* @noEscape */ (string) $indexId ?>')">
+                        <div @keydown.escape="handleEscape">
                             <span x-show="isDesktop"
                                 x-cloak="tablet"
                                 class="block font-bold mb-6"
                             >
                                 <?= $escaper->escapeHtml($title) ?>
                             </span>
-                            <button x-show="!isDesktop"
+                            <button x-show="isMobile"
                                 x-cloak="desktop"
-                                x-ref="submenu-toggle-<?= /* @noEscape */ (string) $indexId ?>"
+                                x-ref="submenu-toggle-<?= $escaper->escapeHtmlAttr($indexId) ?>"
                                 class="
                                     w-full py-4 font-bold
                                 "
-                                @click="(event) => toggleSubmenu(event, '<?= /* @noEscape */ (string) $indexId ?>')"
-                                :aria-expanded="<?= /* @noEscape */ (string) $indexId ?> === true"
+                                @click="toggleSubmenu"
+                                :aria-expanded="open"
                                 type="button"
                             >
                                 <div class="flex items-center justify-between">
                                     <span>
                                         <?= $escaper->escapeHtml($title) ?>
                                     </span>
                                     <div class="transition-transform"
-                                        :class="{'rotate-180' : <?= /* @noEscape */ (string) $indexId ?> === true}"
+                                        :class="chevronClasses"
                                     >
                                         <?= $heroicons->chevronDownHtml('text-gray-500', 20, 20, ['aria-hidden' => 'true']); ?>
                                     </div>
                                 </div>
                             </button>
-                            <div x-show="isDesktop || !!<?= /* @noEscape */ (string) $indexId ?>"
+                            <div x-show="submenuVisible"
                                 x-cloak="tablet"
-                                x-ref="submenu-<?= /* @noEscape */ (string) $indexId ?>"
+                                x-ref="submenu-<?= $escaper->escapeHtmlAttr($indexId) ?>"
                                 x-collapse
                                 class="pb-2"
-                                :aria-hidden="!isDesktop && <?= /* @noEscape */ (string) $indexId ?> === false ? 'true' : 'false'"
+                                :aria-hidden="submenuHidden"
                             >
                                 <?= /* @noEscape */ $block->renderSubmenu($children, $node, $childrenLevel) ?>
                             </div>

view/frontend/templates/hyva-topmenu-mobile/menu.phtml

@@ -47,7 +47,7 @@ $uniqueId = '_' . uniqid();
     <nav
         class="
             <?= $escaper->escapeHtmlAttr($menu->getCssClass()) ?>
-            snowdog-topmenu-mobile z-20 order-2 text-primary-darker sm:order-1 navigation lg:hidden
+            snowdog-topmenu-mobile flex z-20 order-1 text-primary-darker sm:-order-1 navigation lg:hidden
         "
         x-data="initMenuMobile<?= $escaper->escapeHtml($uniqueId) ?>()"
         @keydown.escape="open && closeMenu"