Any possible to change the design (Add a design and functionality) ?

[sankar9659]

I'm using the package to show and publish the products.
Its working fine now.
I want a new feature like I want to add a dropdown in the dialogue box, In that dropdown I ll show some items,
When I select the item, I want to show the products based on the dropdown field, Is this possible?

[Jwhiles]

Hey Sankar,
do you mean that you are using one of our libraries inside your own codebase? Or is this a feature request for the apps that we maintain?

[sankar9659]

@Jwhiles Thanks for your response.

I mean, I m using the ecommerce app base package (https://www.npmjs.com/package/@contentful/ecommerce-app-base) to populate the products in contentful dialogue modal.
like the below image,

I want to customize the design and need to add some functionality like the below image,
I want to add some checkbox fields like product types and categories, When I click the product type checkbox, I want to show the products based on the product type key. Is this possible with this package?
or Is there any other way to implement this design?

[Jwhiles]

Hey @sankar9659 thanks for the detailed explanation.

I think it's unlikely at this point that we'll add functionality like this to the ecommerce app base packages. However, the setup method of the package accepts a renderDialogMethod which you can use to create your own custom dialog. You could base a custom dialog on the the existing renderSkuPicker code.

Cheers,
John

[sankar9659]

Yes, I have passed some props to the render sku picker like below code,

renderSkuPicker(DIALOG_ID, {
    sdk,
    fetchProductPreviews,
    fetchProducts: async (search, pagination) => {
      const result = await fetchSKUs(
        sdk.parameters.installation,
        search,
        pagination
      );

      return {
        pagination: {
          count: PREVIEWS_PER_PAGE,
          limit: PREVIEWS_PER_PAGE,
          total: 10, // as of now we are not getting total products in API so given static total.
          offset: 1,
        },
        products: result.data.map(multipleProductdataTransformers()),
      };
    },
  });

You mean I dont need use the renderSkuPicker and I will create a custom design and functionality right?

[sankar9659]

But I need the existing functionality also, (when i select a product, the product id stored in contentful, then I can save the selected products and publish that), Can you please give a documentation or example code to implement this?

[sankar9659]

@Jwhiles Any possible to implement this?