1

I am trying to modify product details page on Magento PWA Studio. I have a custom attribute(text-editor type), and I have some html there. When I am trying to call that attribute it comes as string instead of html. Like image src in that html provided as media path, it does not convert that as actual path instead it showing the media path directly(see below).enter image description here

Same html is working fine when I put that in description/short_description. Below is my graphql query-

import { gql } from '@apollo/client';
export const GET_PRODUCT_SHORT_DESCRIPTION = gql`
query getProductShortDescription($urlKey: String!) {
    products(filter: { url_key: { eq: $urlKey } }) {
        items {
            id,
            uid,
            url_key,
            short_description {
                html
            },
            top_banner_image
        }
    }
}`;

Now I understand that my html working in short_description because in graphql query short_description has sub selection html so I tried to use that in my custom attribute top_banner_image but getting bellow error in console-

Message: Field "top_banner_image" of type "String" must not have a sub selection

enter image description here

Does anyone have any idea how can I get that attributes value as html as similar like short_description? Thanks

5
  • Please check the attribute type, and compare it with the short description you'll get an Idea about that.
    – Sathya
    May 23, 2022 at 6:56
  • I did check it already and make both attribute similar, but still not working
    – Nayem323
    May 23, 2022 at 7:01
  • It looks like your attribute is defined as a string where as description and short description are defined as ComplexTextValue - As for where you define this I'm not sure :(
    – Ben Crook
    May 26, 2022 at 10:41
  • This is the schema for short_description, I think you need to do something similar? short_description: ComplexTextValue @doc(description: "A short description of the product. Its use depends on the theme.") @resolver(class: "\\Magento\\CatalogGraphQl\\Model\\Resolver\\Product\\ProductComplexTextAttribute") - vendor/magento/module-catalog-graph-ql/etc/schema.graphqls line 97
    – Ben Crook
    May 26, 2022 at 10:43
  • @BenCrook yes, you are right about that. I made the attribute similar to short description in terms of settings but that didn't change anything. I will keep checking how can I make it complextextvalue. Thanks for the info though.
    – Nayem323
    May 26, 2022 at 13:24

3 Answers 3

1

You can display it like this, and change your code according to your need, this is just an example.

<img src="' . $this->getUrl('media/') . $post->getImage() . '" width="' . $wid . '" height="' . $hei . '" >
1
  • It's not phtml. I have to pul that html in product attribute
    – Nayem323
    May 29, 2022 at 17:07
1

VendorName/Modulename/etc/schema.graphqls

interface ProductInterface {
        wysiwyngattributename: String @resolver(class: "VendorName\\Modulename\\Model\\Resolver\\ProductWysiwygAttribute")
    }

VendorName\Modulename\Model\Resolver\ProductWysiwygAttribute.php
<?php

declare(strict_types=1);

namespace VendorName\Modulename\Model\Resolver;

use Magento\Framework\Exception\LocalizedException;
use Magento\Framework\GraphQl\Config\Element\Field;
use Magento\Framework\GraphQl\Query\ResolverInterface;
use Magento\Framework\GraphQl\Schema\Type\ResolveInfo;
use Magento\Catalog\Model\Product;
use Magento\Catalog\Helper\Output as OutputHelper;

/**
 * Resolve attributes where HTML content is allowed
 */
class ProductWysiwygAttribute implements ResolverInterface
{
    /**
     * @var OutputHelper
     */
    private $outputHelper;

    /**
     * @param OutputHelper $outputHelper
     */
    public function __construct(
        OutputHelper $outputHelper
    ) {
        $this->outputHelper = $outputHelper;
    }

    /**
     * @inheritdoc
     */
    public function resolve(
        Field $field,
        $context,
        ResolveInfo $info,
        array $value = null,
        array $args = null
    ): string {
        if (!isset($value['model'])) {
            throw new LocalizedException(__('"model" value should be specified'));
        }

        /* @var $product Product */
        $product = $value['model'];
        $fieldName = $field->getName();
        $renderedValue = $this->outputHelper->productAttribute($product, $product->getData($fieldName), $fieldName);

        return $renderedValue ?? '';
    }
}
0

Did you fix it? I have the same issue.

1
  • I haven't. If you got any solution please let me know
    – Nayem323
    Nov 17, 2022 at 4:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.