update

app/composer.json

@@ -22,6 +22,7 @@
     "drupal/devel": "^4.0",
     "drupal/devel_php": "^1.0",
     "drupal/module_filter": "^3.1",
+    "drupal/restui": "^1.20",
     "drush/drush": "^10.3",
     "hirak/prestissimo": "^0.3.7",
     "webflo/drupal-finder": "^0|^1.0.0",

app/composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "4d839eaa25886d1f5012f97572ef9101",
+    "content-hash": "d42bf3cbb31a5025595460282d7ca21e",
     "packages": [
         {
             "name": "asm89/stack-cors",
@@ -3336,6 +3336,62 @@
                 "source": "https://git.drupalcode.org/project/profile"
             }
         },
+        {
+            "name": "drupal/restui",
+            "version": "1.20.0",
+            "source": {
+                "type": "git",
+                "url": "https://git.drupalcode.org/project/restui.git",
+                "reference": "8.x-1.20"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://ftp.drupal.org/files/projects/restui-8.x-1.20.zip",
+                "reference": "8.x-1.20",
+                "shasum": "df1d3c486ee0e7b4e9a24e6523a69c9efe73caff"
+            },
+            "require": {
+                "drupal/core": "^8.7.7 || ^9"
+            },
+            "type": "drupal-module",
+            "extra": {
+                "drupal": {
+                    "version": "8.x-1.20",
+                    "datestamp": "1616839543",
+                    "security-coverage": {
+                        "status": "covered",
+                        "message": "Covered by Drupal's security advisory policy"
+                    }
+                }
+            },
+            "notification-url": "https://packages.drupal.org/8/downloads",
+            "license": [
+                "GPL-2.0-or-later"
+            ],
+            "authors": [
+                {
+                    "name": "-enzo-",
+                    "homepage": "https://www.drupal.org/user/294937"
+                },
+                {
+                    "name": "clemens.tolboom",
+                    "homepage": "https://www.drupal.org/user/125814"
+                },
+                {
+                    "name": "juampynr",
+                    "homepage": "https://www.drupal.org/user/682736"
+                },
+                {
+                    "name": "klausi",
+                    "homepage": "https://www.drupal.org/user/262198"
+                }
+            ],
+            "description": "Provides a user interface to manage REST resources.",
+            "homepage": "https://www.drupal.org/project/restui",
+            "support": {
+                "source": "https://git.drupalcode.org/project/restui"
+            }
+        },
         {
             "name": "drupal/state_machine",
             "version": "1.6.0",

app/docroot/modules/custom/ajaxform/js/modal_form.js

@@ -4,13 +4,7 @@
 
   Drupal.behaviors.ajaxform_modal_form_js = {
     attach: function (context, settings) {
-      // let add_card = document.querySelector('.button--add-to-cart');
-      //
-      console.log(context);
-      // add_card.addEventListener('click', event => {
-      //
-      // });
-      $('.button--add-to-cart', context).each(function () {
+      $('.button--add-to-cart', context).click(function () {
 
         // 1. Создаём новый XMLHttpRequest-объект
         let xhr = new XMLHttpRequest();
@@ -31,7 +25,7 @@
             //order[index] = '<div>' + elem['order_items'][''] + '</div>';
             var order_items = elem['order_items'];
             order_items.forEach(function(elem, index2) {
-              result = '<div><p> Title:' + elem['title'] + '</p><p> Count: ' +
+              result = '<div><img width="250" src=' + elem['url_img'] + '><p> Title:' + elem['title'] + '</p><p> Count: ' +
                 elem['quantity']+ '</p><p> Total price:' + elem['total_price']['formatted'] + '</p></div>' ;
               results.push(result);
             });
@@ -42,13 +36,12 @@
             res = res + elem + '<br><br>';
           });
           res = res + '</div>'
-          console.log(results);
 
           var frontpageModal = Drupal.dialog(res, {
             title: 'Modal on frontpage',
             dialogClass: 'front-modal',
-            width: 400,
-            height: 400,
+            width: 500,
+            height: 700,
             autoResize: true,
             close: function (event) {
               // Удаляем элемент который использовался для содержимого.

app/docroot/modules/custom/my_normalizer/my_normalizer.info.yml

+name: My Normalizer
+description: 'Custom examples'
+type: module
+core_version_requirement: ^8.8 || ^9
+dependencies:
+  - commerce:commerce_cart
+version: 1.x
+package: Custom

app/docroot/modules/custom/my_normalizer/my_normalizer.services.yml

+services:
+  my_normalizer.node_entity:
+    class: Drupal\my_normalizer\Normalizer\MyNodeNormalizer
+    arguments: [ '@entity_type.manager' ]
+    tags:
+      - { name: normalizer, priority: 9 }

app/docroot/modules/custom/my_normalizer/src/Normalizer/CustomNormalizer.php

+

app/docroot/modules/custom/my_normalizer/src/Normalizer/MyNodeNormalizer.php

+<?php
+
+namespace Drupal\my_normalizer\Normalizer;
+
+use Drupal\commerce_cart\CartProvider;
+use Drupal\commerce_cart\Event\CartEvents;
+use Drupal\commerce_cart_api\CartTokenSession;
+use Drupal\commerce_cart_api\CommerceCartApiServiceProvider;
+use Drupal\commerce_cart_api\Plugin\rest\resource\CartAddResource;
+use Drupal\commerce_cart_api\Plugin\rest\resource\CartResourceBase;
+use Drupal\commerce_cart_reactjs\Controller\CartController;
+use Drupal\commerce_order\Entity\Order;
+use Drupal\Core\Entity\EntityTypeInterface;
+use Drupal\Core\TypedData\TypedData;
+use Drupal\file\Entity\File;
+use Drupal\image\Entity\ImageStyle;
+use Drupal\node\NodeInterface;
+use Drupal\rest\RequestHandler;
+use Drupal\serialization\Normalizer\ContentEntityNormalizer;
+use Drupal\Core\Datetime\DrupalDateTime;
+use Drupal\serialization\Normalizer\ConfigEntityNormalizer;
+use Drupal\serialization\Normalizer\ComplexDataNormalizer;
+
+/**
+ * Converts the Drupal entity object structures to a normalized array.
+ */
+class MyNodeNormalizer extends ContentEntityNormalizer {
+  /**
+   * The interface or class that this Normalizer supports.
+   *
+   * @var string
+   */
+  //protected $supportedInterfaceOrClass = 'Drupal\node\NodeInterface';
+  public function __construct() {
+    $this->supportedInterfaceOrClass  = Order::class;
+    //$this->supportedInterfaceOrClass = NodeInterface::class;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function normalize($entity, $format = NULL, array $context = array()) {
+    $attributes = parent::normalize($entity, $format, $context);
+
+    $items = $attributes['order_items'];
+    foreach ($items as $key => $item){
+      $id = $item['purchased_entity']['product_id'];
+
+      $request = \Drupal::entityTypeManager()
+        ->getStorage('commerce_product')
+        ->loadByProperties([
+          'type' => 'skirt',
+          'product_id' => $id,
+        ]);
+      $product = $request[$id];
+
+      $ref_node = $product->field_referens->target_id;
+      $request = \Drupal::entityTypeManager()
+        ->getStorage('node')
+        ->loadByProperties([
+          'nid' => $ref_node,
+        ]);
+
+      $img = $request[$ref_node];
+      $img_id = $img->field_img->target_id;
+      $file = File::load($img_id);
+      $url_img = $file->createFileUrl();
+
+      $attributes['order_items'][$key]['url_img'] = $url_img;
+    }
+
+    // Return the $attributes with our new values.
+    return $attributes;
+  }
+}
+
+