将云化组件整合到自定义属性编辑器

概述

云化SFCC页面设计程序盒提供两个组件:

• 云状图像组件
• 云视频组件

安装墨盒并让您从云产品环境嵌入页面设计器创建网页时,这些组件可用开发页面设计器组件时,可合并云式组件提供功能与自机功能实现这一点的方法是将云化元件综合进你自己自定义属性编辑器.

将云化组件整合到自定义属性编辑器

将云化图像和/或视频组件整合到自定义属性编辑器中

1. 安装云形页面设计器墨盒

2. 在您的元定义文件中添加以下内容公元前原封attribute_definitions:

   图像组件 :

   JSON

   {
       "id": "cld_image",
       "name": "Image from Cloudinary",
       "type": "custom",
       "required": true,
       "editor_definition": {
           "type": "cloudinary.imageForm"
       }
   }

   视频组件:

   JSON

   {
       "id": "cld_video",
       "name": "Video from Cloudinary",
       "type": "custom",
       "required": true,
       "editor_definition": {
           "type": "cloudinary.videoForm"
       }
   }

   你可以改变名称并标识符需要时,并添加尽可能多的这些组件

3. 内.isml文件,添加下列代码实现云分输出

   图像组件 :

   Html

   <isscript>
       // Check for duplicates before adding.
       assets = require('*/cartridge/scripts/assets.js');
       // Cloudinary Core JS
       var src = 'https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.min.js';
       if (assets.scripts.lastIndexOf(src) < 0) {
           assets.addJs(src);
       }
       assets.addJs('*/js/cloudinaryImages.js');
   </isscript>
   
   <script>
       var value = JSON.parse('<isprint value="${JSON.stringify(pdict.viewmodel)}" encoding="jsonvalue"/>');
       window.cldImages = window.cldImages || [];
       window.cldImages.push(value);
       window.cloudName = value.cloudName;
       window.cname = value.cname || null;
       console.log(value);
   </script>
   
   <div class="cloudinary-media-library-container sfdc-component-mock sfdc-component-assets-media_library-mock">
       <img class="component-media_library ml-image" 
           src="${pdict.viewmodel.placeholder}"  
           data-real-url="${pdict.viewmodel.src}"
           id="${pdict.viewmodel.id}"
           alt="${pdict.viewmodel.altText}"
           style="max-width: 100%">
   </div>

   视频组件:

   Html

   <isscript>
       // Check for duplicates before adding.
       var assets = require('*/cartridge/scripts/assets.js');
   
       // Video Player CSS
       var src = 'https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.css';
       if (assets.styles.lastIndexOf(src) < 0) {
           assets.addCss(src);
       }
   
       // Cloudinary Core JS
       src = 'https://unpkg.com/cloudinary-core/cloudinary-core-shrinkwrap.min.js';
       if (assets.scripts.lastIndexOf(src) < 0) {
           assets.addJs(src);
       }
   
       // Cloudinary Video Player JS
       src = 'https://unpkg.com/cloudinary-video-player/dist/cld-video-player.min.js';
       if (assets.scripts.lastIndexOf(src) < 0) {
           assets.addJs(src);
       }
   
       assets.addJs('/js/cloudinaryVideos.js');
   </isscript>
   
   <div class="cloudinary-video-container sfdc-component-mock sfdc-component-assets-media_library_video-mock">
       <video id="${pdict.viewmodel.id}"></video>
       <script>
           var value = JSON.parse('<isprint value="${JSON.stringify(pdict.viewmodel)}" encoding="jsonvalue"/>');
           window.players = window.players || [];
           window.players.push(value);
           window.cloudName = value.cloudName;
           window.cname = value.cname || null;
           console.log(value);
       </script>
   </div>

样本代码

这个示例类提供样本代码将云设计器组件整合入自定义属性编辑器