modal commerce done

app/composer.json

@@ -15,6 +15,7 @@
     "cweagans/composer-patches": "^1.6",
     "drupal/admin_toolbar": "^2.4",
     "drupal/commerce": "^2.30",
+    "drupal/commerce_cart_api": "^1.5",
     "drupal/config_ignore": "^2.3",
     "drupal/core": "^9.1",
     "drupal/core-composer-scaffold": "^9",

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

+name: Ajax form Cart
+description: create the ajax
+package: Custom
+type: module
+core_version_requirement: ^8.8 || ^9

app/docroot/modules/custom/ajax/ajax.libraries.yml

+modal.form.js:
+  js:
+    js/modal_form.js: {}
+  dependencies:
+    - core/drupal.dialog.ajax
+    - core/jquery
+    - core/jquery.once

app/docroot/modules/custom/ajax/ajax.module

+<?php
+
+use Drupal\Core\Ajax\AjaxResponse;
+use Drupal\Core\Ajax\InvokeCommand;
+use Drupal\Core\Form\FormStateInterface;
+
+/**
+ * Implements hook_form_alter().
+ */
+function ajax_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {
+ foreach ($form["#attributes"]["class"] as $id){
+   if ($id == 'commerce-order-item-add-to-cart-form'){
+
+    $form['actions']['submit']['#ajax'] = [
+        'callback' => 'ajax_callback',
+        'event' =>'click',
+    ];
+    $form['#attached']['library'][] = 'ajax/modal.form.js';
+   }
+ }
+}
+function ajax_callback(array &$form, FormStateInterface $form_state){
+  $ajax_response = new AjaxResponse();
+  $ajax_response->addCommand(new InvokeCommand(NULL, 'myTest', ['some Var']));
+  return $ajax_response;
+}

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

+(function($) {
+  $.fn.myTest = function() {
+    var totalarray = [];
+    var request = new XMLHttpRequest();
+    request.open("GET", "http://store.loc/cart?_format=json");
+    request.send();
+    request.onload = function (){
+      let test =  JSON.parse(request.response);
+      test.forEach( // перебираем все элементы массива array
+        function sumNumber( currentValue ) {
+          console.log(currentValue);
+          //  total.push(currentValue.total_price.formatted);
+          currentValue.order_items.forEach( // перебираем все элементы массива array
+            function Items( currentItem ) {
+              totalarray.push(currentItem.title+"<br>"+currentItem.quantity+"<br>"+currentValue.total_price.formatted+"<br>");
+              //title1.push(currentItem.title);
+              //quantity.push(currentItem.quantity);
+              // присваивает
+            }
+          );
+          //  title2 = title1.toString();
+        }
+      );
+
+      var frontpageModal = Drupal.dialog("<div>"+totalarray+"</div>",{
+        title: 'Modal on frontpage',
+        dialogClass: 'front-modal',
+        width: 400,
+        height: 400,
+        autoResize: true,
+        close: function (event) {
+          // Удаляем элемент который использовался для содержимого.
+          jquery(event.target).remove();
+        }
+      });
+      // Отображает модальное окно с overlay.
+      frontpageModal.showModal();
+      // Вы также можете использовать
+      // frontpageModal.show();
+      // чтобы отобразить модальное окно без overlay, и все элементы за
+      // модальным окном останутся активными.
+
+    }
+  };
+})(jQuery);
+
+/*(function ($, Drupal, drupalSettings) {
+
+Drupal.behaviors.block = {
+    attach: function (context, settings) {
+
+      jQuery(document, context).once('block').each( function() {
+        var totalarray = [];
+        var title1 = [];
+        var quantity =[];
+        var total =[];
+        var title2 ='';
+        var request = new XMLHttpRequest();
+        request.open("GET", "http://store.loc/cart?_format=json");
+        request.send();
+        request.onload = function (){
+          let test =  JSON.parse(request.response);
+          test.forEach( // перебираем все элементы массива array
+            function sumNumber( currentValue ) {
+              console.log(currentValue);
+              total.push(currentValue.total_price.formatted);
+              currentValue.order_items.forEach( // перебираем все элементы массива array
+                function Items( currentItem ) {
+                  totalarray.push(currentItem.title+"<br>"+currentItem.quantity+"<br>"+currentValue.total_price.formatted+"<br>");
+                  //title1.push(currentItem.title);
+                 //quantity.push(currentItem.quantity);
+                  // присваивает
+                }
+              );
+              title2 = title1.toString();
+            }
+          );
+
+          var frontpageModal = Drupal.dialog("<div>"+totalarray+"</div>",{
+            title: 'Modal on frontpage',
+            dialogClass: 'front-modal',
+            width: 400,
+            height: 400,
+            autoResize: true,
+            close: function (event) {
+              // Удаляем элемент который использовался для содержимого.
+              jquery(event.target).remove();
+            }
+          });
+          // Отображает модальное окно с overlay.
+          frontpageModal.showModal();
+          // Вы также можете использовать
+          // frontpageModal.show();
+          // чтобы отобразить модальное окно без overlay, и все элементы за
+          // модальным окном останутся активными.
+
+        }
+
+      });
+
+    }
+  }
+} (jQuery, Drupal, drupalSettings));*/
+
+