vue.js 如何正确设置产品的sw-entity-multi-select字段并将其保存到扩展

u1ehiz5o  于 2023-04-21  发布在  Vue.js
关注(0)|答案(1)|浏览(105)

我对shopware完全陌生,对javascript不是很熟悉,并且正在努力解决sw-entity-multi-select字段

我想保存选定的项目到我的扩展,但我还没有找到一个简单的解决方案,而是我做了一些可怕的Object.assign的东西,所以我至少可以保存一些东西。

问题1:如何将选择正确保存到扩展?
问题2:如何正确显示已保存的选项
下面是我的html.twig:

{% block sw_product_detail_attribute_sets %}
    {% parent() %}
    <div v-if="!isLoading && parentProduct && product">
        <sw-card :title="$tc('sw-product.detail.requiredProductsCardLabel')"
                :isLoading="isLoading">

            <sw-inherit-wrapper
                v-if="!isLoading"
                v-model="RPExtension"
                :has-parent="!!parentProduct.id"
                :inherited-value="parentRPExtension"
            > 
                <template #content="{ isInherited }">
                <sw-entity-multi-select
                    v-if="!isLoading"
                    entity="product"
                    :key="isInherited"
                    :entity-collection="products"
                    @change="setProducts"
                    :placeholder="$tc('sw-product.detail.requiredProductsPlaceholder')">
                </sw-entity-multi-select>
            </sw-inherit-wrapper>

        </sw-card>
    </div>
{% endblock %}

还有html.twig的index.js:

import template from './sw-product-detail-requiredProducts.html.twig';

const { Component, Context } = Shopware;
const { mapState, mapGetters } = Component.getComponentHelper();
const { EntityCollection, Criteria } = Shopware.Data;

Component.override('sw-product-detail-base', {
    template,

    inject: ['repositoryFactory'],

    data() {
      return {
        products: null,
      };
    },

    computed: {
        ...mapState('swProductDetail', [
            'product',
            'parentProduct',
        ]),

        ...mapGetters('swProductDetail', [
            'isLoading',
        ]),

        productRepository() {
          console.log('productRepository');
          return this.repositoryFactory.create('product');

        },

        requiredProductsRepository() {
          return this.repositoryFactory.create('product_preconditions')
        },

      productContext() {
        return { ...Shopware.Context.api, inheritance: true };
    },

      RPExtension: {
          get: function() {
              if (this.product && this.product.extensions && this.product.extensions['requiredProducts']) {
                  return (
                      this.product.extensions['requiredProducts']['productPrecondition']
                  );
              }

              return null;
          },
          set: function(value) {
              this.$set(this.product.extensions['requiredProducts'], 'productPrecondition', value ?? null);
          }
      },

      parentRPExtension() {
          if (this.parentProduct && this.parentProduct.extensions && this.parentProduct.extensions['requiredProducts']) {
              return (
                  this.product.extensions['requiredProducts']['productPrecondition']
              );
          }

          return null;
      },
    },

    created() {
      this.createdComponent();
    }, 
    
    methods: {
      createdComponent() {
        this.products = new EntityCollection(
          this.productRepository.route,
          this.productRepository.entityName,
          Shopware.Context.api,
        );
      },

      setProducts(selectedProducts) {
        this.products = selectedProducts;
        this.products.forEach((selectedProduct) => {
          const precondition = this.createProductPreconditionEntity(selectedProduct);
          this.product.extensions.requiredProducts.push(precondition);
        });
      },

      createProductPreconditionEntity(selectedProduct) {
          const productPreconditions = this.requiredProductsRepository.create(Context.api);
          Object.assign(productPreconditions, {
              productId: this.product.id,
              productPrecondition: selectedProduct.id,
              directPrecondition: false
          });

          return productPreconditions;
      },
    },
});
qoefvg9y

qoefvg9y1#

你能简单地解释一下你想做什么吗?你想保存什么属性?它应该做什么?你的产品数据中需要它吗?
我想最简单的方法是使用自定义字段,所以如果你不熟悉vuejs,你不需要在vuejs中创建管理演示。

相关问题