Shopware 6：如何为自定义CMS元素映射产品自定义字段？

1. 开启自定义字段的API访问权限 #

你给产品添加的自定义字段，得先在后台开启API访问权限，不然前端拿不到对应数据。找到后台的「自定义字段管理」模块，找到对应产品的自定义字段，勾选允许API访问即可。

2. 修改自定义CMS元素的Vue组件 #

核心逻辑是在组件中从产品数据里提取自定义字段值，再赋值给demovalue。给你一个基础的组件示例，你可以照着修改：

组件代码示例（假设文件名为custom-product-element.vue） #

<template>
  <div class="custom-product-block">
    <!-- 这里展示自定义字段内容 -->
    <p>{{ productCustomField }}</p>
  </div>
</template>

<script>
export default {
  name: 'CustomProductElement',
  // 产品数据会通过props传递到组件中
  props: {
    product: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      demovalue: '' // 你需要赋值的变量
    };
  },
  computed: {
    // 从产品数据中获取自定义字段值
    productCustomField() {
      // 把custom_field_name替换成你实际的自定义字段名称
      return this.product.customFields?.custom_field_name || '无数据';
    }
  },
  mounted() {
    // 将自定义字段值赋值给demovalue
    this.demovalue = this.productCustomField;
  }
};
</script>

关键注意点 #

• 确认组件的props中包含product（不同CMS可能命名不同，比如entity，以你使用的CMS文档为准），确保产品数据能传递进来。
• 自定义字段都存储在product.customFields对象下，字段名称要和后台定义的完全一致，注意大小写匹配。
• 使用?.可选链操作符是为了避免字段不存在时页面报错，后面的|| '无数据'是设置默认值，防止显示空内容。

3. 注册并关联产品数据源 #

确保你的自定义CMS元素已经在后台完成注册，在页面编辑器中添加该元素时，要选择关联对应的产品数据源，保证产品数据能正确传递到组件中。

4. 调试与验证 #

添加元素后预览页面，如果自定义字段没有正常显示，检查以下几点：

• 自定义字段的API访问权限是否开启
• 组件中使用的字段名称是否和后台定义的完全一致
• 产品数据是否成功传递到组件，可以在组件中添加console.log(this.product)查看数据是否存在

内容的提问来源于stack exchange，提问作者NixH