Editing nodes in a modal? Yes, so you can preview the content before you hit save!

Drupal is a leading content management system that has been reigning in the CMS market for more than two decades. From giant organizations such as Tesla and General Electric to small businesses, Drupal has evolved into the preferred choice of all. This has made Drupal development a promising career for developers. If you have also decided to step into the field, it is imperative to get all psyched up for the steep learning curve involved. As Drupal CMS is high-tech in nature, the initial phase of getting acquainted with the system might seem challenging. But, over time, you’ll get the hang of it.

In this blog, we’ll discuss the Drupal learning process to help you sail your ship in the right direction.

READ MORE

The Drupal Association recently welcomed Alejandro Moreno López to its team. TDT had the opportunity to learn more about Moreno's involvement with Drupal, his experience at DrupalCon Pittsburgh 23, and his role as a Drupal Innovation Coordinator.

If you are still using Drupal 7 to run your business website, you are not alone. More than 50% of Drupal websites continue to be supported by Drupal 7. Drupal 8 introduced a change in the codebase which made switching to it or other higher versions far from being a simple upgrade. The entire website required rebuilding which is primarily why a majority of companies avoided availing Drupal migration services and continued sticking to Drupal 7. This hasn’t changed even today. Those relying on Drupal 7 are extremely delighted about the extension in its lifespan.

However, there are several reasons why you should undertake the taxing journey of migration from Drupal 7 without waiting any longer.

Hey, picture this: you want to buy a couch for your newly built home, but the furniture store is too far away. And you’re not excited about shopping for it online because you don’t want last minute surprises (or shocks) when you finally receive them. Augmented Reality (AR) is here to change your opinion. With AR, you can simply select your favorite couch from an e-commerce store and point to the location you want to place your new couch. You get to see how the couch looks in real-time in your real environment. So, that’s it. That’s AR, which now bags popularity in the market, with an estimate of AR device users to increase to 1.4 billion by the end of the year 2023. In this blog, we’ll introduce you to the basics of Augmented Reality, take you through the process of implementing it on your Drupal e-commerce site, and explain the difference between Augmented Reality and Virtual Reality. Let’s dive in! Augmented Reality Augmented Reality (AR) allows you to experience your products in real time in your real environment. It lets you superimpose virtual content in the real-world space. Please, check the image below.  When you scan the QR from the phone, the 3D model is rendered virtually by the phone screen. Virtual Reality Virtual Reality is a wholly immersive experience that allows you to interact with new virtual worlds. In the GIF below, you can see the user is completely immersed in the virtual world. He is cut off from and is unable to interact with the real world. Types of Augmented Reality Augmented Reality (AR) is, therefore, not the same as Virtual Reality. However, there are different types of AR. Check out how you can render 3D models, videos, etc. with AR. 1. Marker-Based Augmented Reality Marker-based augmented reality (AR) is a type of AR technology that relies on specific markers or images to trigger virtual content overlay in the real world.   2. Markerless Augmented Reality Markerless augmented reality (AR) is a type of AR technology that does not require specific markers or images to trigger virtual content overlay. 3. Projection-Based Augmented Reality Projection-based augmented reality (AR) is a type of AR technology th at uses projectors to display virtual content directly onto physical objects or surfaces in the real world. 4. Superimposition-Based Augmented Reality Superimposition-based augmented reality (AR) is a type of AR technology that involves overlaying virtual objects or information onto the real-world environment in real time. Augmented Reality Data Types Augmented reality can be rendered by using a few data types. Below is the list mentioning all the augmented reality data types for augmented reality: Visual Data Geolocation Data Sensor Data Environmental Data User Input Data Machine Learning Data 1. Visual Data Visual data is one of the primary types of data used in AR. It includes images, videos, 3D models, animations, and graphical overlays that are superimposed onto the real-world view. 2. Geolocation Data Geolocation Data refers to information related to the user's location. It can include GPS coordinates, maps, points of interest, and location-based services. 3. Sensor Data AR can utilize various sensor data to enhance the experience. This includes data from cameras, accelerometers, and other sensors available on the device. 4. Environmental Data Environmental data pertains to information about the physical environment. It can include data about lighting conditions, object recognition, surface detection, depth sensing, and spatial mapping. 5. User Input Data User input data refers to data generated by user interactions, such as touch, gestures, voice commands, or other input methods. 6. Machine Learning Data Machine learning techniques can be employed in AR to analyze and interpret data in real time. Augmented Reality Applications In E-commerce Now, as promised, let’s take a closer look at the ways we can use AR on E-commerce applications. Virtual Try-on Product Visualization Interactive Product Demonstration Enhanced Packaging and Unboxing 1. Virtual Try-on With the help of this feature, you can easily try different e-commerce products and check if they suit you or not. 2. Product Visualization You can also use this to visualize a particular product before buying. Check the GIF below. 3. Product Demonstration You can use product demonstrations to implement manuals for any product. 4. Enhanced Packaging and Unboxing We can use it before unboxing our product if you have any instructions. We can use it. Next Steps? Now that we’ve briefed you about the various AR types, Data types to process AR, and Usage in Ecommerce Applications, get ready to learn how you can actually implement the following into your Drupal e-commerce site: AR Types: Marker-Based AR E-Commerce Application: Product visualization AR Data Type: Visual Data The Process We are going to need two libraries for this purpose: A-frame Ar.js A-frame A-Frame is a virtual reality (VR) framework that enables developers to build immersive web experiences. It is open-source and maintained by the talented developers at Supermedium (Diego Marcos, Kevin Ngo) and Google (Don McCurdy). Utilizing an entity component system framework for Three.js, A-Frame empowers developers to create stunning 3D scenes and WebXR experiences using familiar HTML. Ar.js AR.js is a user-friendly and efficient library designed for Augmented Reality experiences on the Web. This lightweight library offers advanced features such as Image Tracking, Location-based AR, and Marker tracking. The best part? It's a pure web solution, meaning you don't have to install anything. Powered by three.js, A-Frame, and jsartoolkit5, AR.js utilizes jsartoolkit5 for tracking while providing the flexibility to display augmented content with either three.js or A-Frame. How Augmented Reality Works? The Code For this purpose, you need to know the basics of Drupal E-commerce site setup /  Configurations. If you are new to Drupal E-commerce websites, need not fret. We’ll demonstrate with the product entity. Just think of it as a node and proceed further. Prerequisite Drupal E-commerce website with few products. Let’s dive into the code: We are going to render 3D objects in our Drupal instance. You can download free 3D models from SketchFab. While you download them, please make sure the file is in GLTF format. It basically gives you the zip file. Once you extract it, you can see the files as mentioned in the image below:  We’re going to use scene.gltf in our code, but we need to keep scene.bin and textures in the same folder. Only then we can render 3D models on our website. Since it’s a zip file, we’re going to manually extract and keep them in our Files folder.    To do that, create a File field on the product entity with the allowed extension “zip”. Check out the code on this preserve function below: Ar_render_object.module /** * Implements hook_entity_presave(). */ function ar_render_object_entity_presave(\Drupal\Core\Entity\EntityInterface $entity) { $request = \Drupal::request(); $is_ajax = $request->isXmlHttpRequest(); if ($entity->getEntityTypeId() == "commerce_product" && !$is_ajax) { if (!empty($entity->get("field_modal_upload")->referencedEntities())) { $zipuri = $entity->get("field_modal_upload")->referencedEntities()[0]->createFileUrl(FALSE); $directory = "temporary://3dmodels"; // If not exists, create. if (!file_exists($directory)) { mkdir($directory); } $parsed_url = parse_url($zipuri); $file_system = \Drupal::service('file_system'); $destination = $directory . '/' . $file_system->basename($parsed_url['path']); $tzipuri = system_retrieve_file($zipuri, $destination, FALSE, FileSystemInterface::EXISTS_REPLACE); $publicuri = "public://3dmodels/" . $entity->getEntityTypeId() . "/" . $entity->id(); if (!file_exists($publicuri)) { mkdir($publicuri); } // Archiver is to extract zip file. $archiver = \Drupal::service('plugin.manager.archiver')->getInstance([ 'filepath' => $tzipuri, ]); $archiver->extract($publicuri); } } }In the code above, we’ve moved the zip to a temporary folder and extracted it to the  Public Files folder. As we extract the filed to the 3Dmodels folder, the structure would look as mentioned below: Structure: 3dmodels/{entity_type_id}/{entityid} For product: 3dmodels/commerce_product/1 The extracted files will look like the following:     3dmodels/commerce_product/1/scene.gltf    3dmodels/commerce_product/1/scene.bin    3dmodels/commerce_product/1/textures    3dmodels/commerce_product/1/license.txt Now, we successfully extracted all the files from the zip file and placed it according to the entity type and entity ID. Next, let’s work on displaying it. To display it, you need to create a new field formatter for the file field. As mentioned already, it’s a marker-based approach. Generate the QR code and attract it to the field formatter of the file. You can use the contrib module - Endroid Qr Code - to generate the QR. Here, we’ve generated a QR with a custom logo. So, we’ve created this patch for this module. Check the patch link below. Link to patch: https://www.drupal.org/project/endroid_qr_code/issues/3231972#comment-15061322 Endroid Qr Code module provides a config form where you can upload your custom logo to add in your QR code. Here, we’re using Hiro marker to render 3D models. Make sure to upload the Hiro marker as a custom logo in the config. (https://smartlab.tmit.bme.hu/csapo/AR/img/hiro.png) Before we jump into talking about the custom field formatter of the file field, let’s understand the controller to render the AR model. A field formatter will allow you to generate the QR code. That QR code will point to the controller which you’ve created. The controller will render the AR model. On the Controller, override the controller page and render the code to superimpose 3D objects. Here’s the controller code: Ar_render_object.routing.yml ar_render_object.threed: path: '/threed/object/{commerce_product}' defaults: _controller: '\Drupal\ar_render_object\Controller\ThreeDObject::render' _title: '3D view' requirements: _permission: "access content" options: parameters: commerce_product: type: entity:commerce_productsrc/Controller/ThreeDObject.php <?php namespace Drupal\ar_render_object\Controller; class ThreeDObject { public function render($commerce_product) { $file_url_generator = \Drupal::service('file_url_generator'); $publicuri = "public://3dmodels/commerce_product/" . $commerce_product->id() . "/scene.gltf"; $absolutepath = $file_url_generator->generateAbsoluteString($publicuri); $build = [ "#markup" => "Sample Page", ]; return $build; } }In this file, we’ve simply used some static text to return. But in the theme, we’ll have to override this page: Create a custom theme, on the .theme file: <?php function custom_theme_preprocess_html__threed__object(&$variables) { $commerce_product = \Drupal::routeMatch()->getParameter("commerce_product"); $file_url_generator = \Drupal::service('file_url_generator'); $publicuri = "public://3dmodels/commerce_product/" . $commerce_product->id() . "/scene.gltf"; $absolutepath = $file_url_generator->generateAbsoluteString($publicuri); $variables['path'] = $absolutepath; }Pass the scene.gltf path of the file field to the twig file. The twig template file will look like the following: templates/ar-render-object.html.twig Now, let’s jump into the field formatter: src/Plugin/Field/FieldFormatter/ARObjectRender.php <?php namespace Drupal\ar_render_object\Plugin\Field\FieldFormatter; use Drupal\Core\Field\FieldItemListInterface; use Drupal\file\Plugin\Field\FieldFormatter\DescriptionAwareFileFormatterBase; use Drupal\Core\Url; /** * Plugin implementation of the 'ar_render_object' formatter. * * @FieldFormatter( * id = "ar_render_object", * label = @Translation("AR Object Render"), * field_types = { * "file" * } * ) */ class ARObjectRender extends DescriptionAwareFileFormatterBase { /** * {@inheritdoc} */ public function viewElements(FieldItemListInterface $items, $langcode) { $elements = []; $entityid = $items->getEntity()->id(); $host = \Drupal::request()->getHost(); foreach ($items as $delta => $item) { // generating QR code for controller page $option = [ 'query' => ['path' => $host . "/threed/object/" . $entityid], ]; $uri = Url::fromRoute('endroid_qr_code.qr.url', [], $option) ->toString(); $elements[$delta] = [ '#theme' => 'image', '#uri' => $uri, '#attributes' => ['class' => 'module-name-center-image'], ]; } return $elements; } }This field formatter generates QR code. The QR code points to the Controller. The controller page renders the AR model. Final Thoughts That’s all about implementing Augmented Reality on your Drupal e-commerce site to experience 360° AR product previews.Evidently, Augmented Reality has shown better customer engagement rates and new customer retention. It has been seen to boost the sales of e-commerce shopping platforms significantly. Potentially, AR is the future of e-commerce sites. Let’s say AR is here to stay, and it acts only as a pro to liven up your e-commerce business website. To boost up your chances of implementing AR on your Drupal e-commerce website like an expert, you can contact a professional Drupal development company to assist you in the process!

Aaaand... liftoff! The 2023 edition is in orbit. Clearer, fully reviewed for Drupal 10, new documentation system, translated in French, and a dark theme.

Today we are talking about The Drupal 10 Development Cookbook with Kevin Quillen & Matt Glaman.

For show notes visit: www.talkingDrupal.com/406

Topics

• What is the Drupal 10 Development Cookbook
  • Contrast with Selwyn Polit’s Drupal At Your Fingertips
• Who is the book for
• How much experience to start
• What should a reader expect to get out of reading the book
• Core or contrib
• Why write the book
• Book writing process
• Co-writing
• Why a physical book
  • Is there a digital copy
  • Does it get updated
• How long did it take to write
  • How did you write it
• How did you break Drupal down to 14 chapters
• Most surprising thing you had to research
• Are you or the publisher going to translate the book
• Would you write another book
• Where is the best place to get the book

Resources

• Drupal 10 Development Cookbook (Amazon)
• Drupal 10.1 Change Records
• Single Directory Components DrupalCon Session
• Blog post about checkbox
  • https://herchel.com/articles/disabling-twig-caching-just-got-helluva-lotta-easier-101
  • https://mglaman.dev/blog/simplifying-frontend-developer-experience-drupal-click-butto
• Talking Drupal #398 - Drupal At Your Fingertips Book
• Driesnote (time stamp 42:30)

Guests

Kevin Quillen - @kevinquillen Matt Glaman- @nmdmatt

Hosts

Nic Laflin - www.nLighteneddevelopment.com @nicxvan John Picozzi - www.epam.com @johnpicozzi Sean T. Walsh - @seantwalsh

MOTW Correspondent

Martin Anderson-Clutz - @mandclu Drupal 10.1 The module of the week this week is “Drupal 10.1"