Alpinejs xtext 在 magento 项目中的性能

Question

我是使用 Hyvä Theme 和 Alpine.js 开发 Magento 项目的新手。

在产品页面上，我有一个包含将从 Typesense 收到的产品模型的 JSON。我的计划是使用 PHP 进行初始渲染（优先考虑 SEO），并使用 Alpine.js 在使用选择器选择不同模型时动态管理 HTML 更新。

我正在考虑使用 x-text 将 JavaScript 对象绑定到必要的 html 标签，并在选择器更改时更新保存该对象的变量。这种方法会导致 SEO 或性能出现任何问题吗？使用使用 .innerHTML 而不是 x-text 修改必要 HTML 元素的函数来管理更新会更好吗？

这是我正在尝试做的一个小例子：

> $products = json_decode(json with models);
>  $defaultProduct = $products[0];
>  <div x-data="initProductPage()">
>          <select id="model-selector" @change="updateModel($event)" >
>           <option value="Model1">Model1</option>
>           <option value="Model2">Model2</option>
>          </select>
>         <h1 id="example" class="flex" x-text="currentProduct?.name"><?= $escaper->escapeHtml(__($defaultProduct['name']))?></h1>
>  </div>
>  <script>
function initProductPage() {
products: <?= json_encode($products) ?>,
currentProduct: <?= json_encode($defaultProduct) ?>,
updateModel(event) {
this.currentProduct = this.products.find(product => product.model === event.target.value);
other option
document.getElementById("example").innerText = this.currentProduct.name;
>                 }
>       }
>  </script>

谢谢大家！

Answer 1

我没有看到本机 x-text 选项的性能问题。也许如果有很多产品，JSON 会使 HTML 变得臃肿，并且在

this.products.find()

中遍历可能会很长。一些 AJAX 分页将是相关的。

对于 $defaultProduct 的 SEO，我不得不承认我并不相信。您仅使用一个产品名称填充 HTML；在我看来，这对于 SEO 来说相当糟糕。我认为更好的方法是：

1. 在 PHP 中加载一系列产品，使用主要数据（名称、描述、图像、链接...）填充 JSON-LD

2. 忘记用

   defaultProduct['name']

   填充 h1

3. 将 Alpine x-href 放在 JSON-LD 脚本标签上（如果可能的话；从未测试过）

4. 解析 Alpine 组件中的 x-ref 内容以检索产品并用其填充组件的数据。

您可能还对使用 Zermatt (https://www.zermatt.dev) 将 Alpine JS 与模板解耦并实现更清晰的 JS 逻辑感兴趣；也许与第 3 方库一起。