小型电子商务网站数据库设计
When making online purchases, most shoppers make their purchasing decisions based on the use of rich-media. Being able to view the product from different angles is known to increase conversions. In fact according to Forbes, “64% of customers are more likely to buy a product online after watching a video about it.”
在进行在线购买时，大多数购物者都基于富媒体的使用来做出购买决定。 能够从不同角度查看产品可以提高转换率。 实际上，据《福布斯 》 报道 ，“有64％的客户在观看有关产品的视频后更有可能在网上购买产品。”
If you’re building an eCommerce store but would like to avoid the painstaking task of customizing it, the Cloudinary Product Gallery is your answer.
如果您要建立电子商务商店，但又想避免自定义商店的艰巨任务，那么Cloudinary产品库将是您的答案。
This easy-to-implement widget can be embedded in any web page, making it quick and simple to provide an interactive, and responsive browsing experience, optimized for any screen out of the box.
这个易于实现的小部件可以嵌入到任何网页中，从而可以快速简便地提供交互式，响应式的浏览体验，并针对开箱即用的任何屏幕进行了优化。
This post guides you through the simple process of creating a customizable and responsive product gallery with Cloudinary.
这篇文章将指导您完成使用Cloudinary创建可定制和响应式产品库的简单过程。
Note: The Cloudinary Product Gallery includes 360 spin sets, 3D models, and video, which are not covered in this post.
注意：Cloudinary产品库包括360个旋转集，3D模型和视频，本文中未介绍。
初步步骤 ( Preliminary Steps )
First, create a free Cloudinary account and log in.
首先， 创建一个免费的Cloudinary帐户并登录。
Next, enable the Product Gallery to dynamically fetch images in your app from Cloudinary by editing your cloud settings: Click the Security tab at the top of Settings. On the page that is displayed, deselect Resource list under Restricted image types. See the screenshot below.
接下来，通过编辑云设置，使Product Gallery能够从Cloudinary动态获取应用中的图像：单击“设置”顶部的“ 安全性”标签。 在显示的页面上，取消选择“ 受限图像类型”下的“ 资源列表 ”。 请参见下面的屏幕截图。
The example app in this post already contains images that have been uploaded to the Cloudinary Media Library. For details on how to dynamically upload images to that library, see this article.
这篇文章中的示例应用程序已经包含已上传到Cloudinary Media Library的图像。 有关如何将图像动态上传到该库的详细信息，请参见本文 。
创建产品图库 ( Creation of Product Gallery )
To create a product gallery, perform the steps below.
要创建产品库，请执行以下步骤。
Start With an HTML File Create an HTML file by typing on the command line the following:
从HTML文件开始通过在命令行上键入以下内容来创建HTML文件：
touch index.htmlAdd the Cloudinary JavaScript Add to the index.html file this JavaScript code to enable the capabilities in the product gallery:
添加Cloudinary JavaScript ，将此JavaScript代码添加到index.html文件，以启用产品库中的功能：
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Cloudy Commerce</title>
</head>
<body>
<script src="https://product-gallery.cloudinary.com/all.js" type="text/javascript"></script>
</body>
</html>Add a Simple Element to the Gallery Now add a banner to display featured deals, as follows:
向图库添加简单元素现在添加横幅以显示特色交易，如下所示：
<!--index.html -->
<!-- -->
<body>
<!-- nav bar -->
<div class="main-carousel">
<div id="main-gallery"></div>
</div
<script src="https://product-gallery.cloudinary.com/all.js" type="text/javascript"></script>
</body>Initialize the Product Gallery Initialize the product gallery as follows:
初始化产品库初始化产品库 ，如下所示：
<!--index.html -->
<!-- -->
<body>
<!-- nav bar -->
<div class="main-carousel">
<div id="main-gallery"></div>
</div
<script src="https://product-gallery.cloudinary.com/all.js" type="text/javascript"></script>
<script>
const prodGallery = cloudinary.galleryWidget({
container: "#main-gallery",
cloudName: "CLOUDINARY_CLOUD_NAME",
mediaAssets: [{ tag: "banner" }],
carouselStyle: "none",
carouselOffset: 0,
navigationButtonProps: { shape: 'square' },
zoom: false
});
prodGallery.render(); // render the product gallery
</script>
</body>Replace the variable CLOUDINARY_CLOUD_NAME with your cloud name, which is specified in your Cloudinary Console.
将变量CLOUDINARY_CLOUD_NAME替换为您在Cloudinary Console中指定的云名称。
The above snippet defines the following:
上面的代码段定义了以下内容：
container: The location in which to display the gallery.container：显示画廊的位置。cloudName: Your Cloudinary cloud namecloudName：您的Cloudinary云名称mediaAssets: The way in which your media assets are identified. You can specify their tags or public IDs (publicId). More details later.mediaAssets：识别媒体资产的方式。 您可以指定其标签或公共ID（publicId）。 稍后会有更多详细信息。carouselStyle: The style of your carousel, for example,thumbnails,indicators, ornone.carouselStyle：carouselStyle的样式，例如，thumbnails，indicators或none。carouselOffset: The space between the container the gallery is rendered and the carousel thumbnails, that is, the padding.carouselOffset：呈现画廊的容器和轮播缩略图之间的空间，即填充。navigationButtonProps: The shape of the navigation arrows in the carousel.navigationButtonProps：轮播中导航箭头的形状。zoom: The property,falseortrue, specifies if you desire a zooming capability for the image.zoom：属性false或true，指定您是否需要图像的缩放功能。
For details on the Cloudinary Product Gallery, see the documentation.
有关Cloudinary产品库的详细信息，请参阅文档 。
Now reload your store, which would look like this:
现在，重新加载商店，如下所示：
画廊的增加 ( Addition of Galleries )
You can easily customize the Cloudinary Product Gallery, which offers an extensive array of options for an outstanding shopping experience. This section describes how to add sub-galleries.
您可以轻松自定义Cloudinary产品库，其中提供了广泛的选项，可提供出色的购物体验。 本节介绍如何添加子库。
Applying Transformations to the Media Assets in the Gallery To transform your media assets, update the index.html file to read like this:
将转换应用于库中的媒体资产要转换媒体资产，请更新index.html文件，使其如下所示：
<!-- index.html -->
<!-- -->
<body>
<!-- nav bar -->
<div class="main-carousel">
<div id="main-gallery"></div>
</div>
<div class="container">
<h2 style="margin-top: 20px">New Products</h2>
<div class="row">
<div class="col-md-4">
<div id="sub-gallery1"></div>
<div class="price_info">
<h4>Headphones: $100</h4>
</div>
</div>
<div class="col-md-4">
<div id="sub-gallery2"></div>
<div class="price_info">
<h4>Laptop: $2,000</h4>
</div>
</div>
<div class="col-md-4">
<div id="sub-gallery3"></div>
<div class="price_info">
<h4>Xbox Controller: $60</h4>
</div>
</div>
</div>
</div>
<script src="https://product-gallery.cloudinary.com/all.js" type="text/javascript"></script>
<script>
// prodGallery initalization
const subGallery1 = cloudinary.galleryWidget({
container: "#sub-gallery1",
cloudName: "CLOUDINARY_CLOUD_NAME",
mediaAssets: [{ tag: "headphones" }],
carouselStyle: "none",
carouselOffset: 0,
transformation: {
overlay: {
text: 'SALE',
font_family: 'Arial',
font_size: 100,
font_weight: 'bold',
font_style: 'italic',
letter_spacing: 2,
text_decoration: 'underline',
font_hinting: 'full'
},
color: "#fff",
x: 0,
y: -300,
},
zoom: false
});
subGallery1.render();
// render other galleries
</script>
</body>
</html>This sub-gallery transforms the media rendered in the library, as defined in the overlay parameters. Your store now looks like this:
该子画廊将按照overlay参数中的定义来转换在库中渲染的媒体。 您的商店现在看起来像这样：
媒体资产上传 ( Uploads of Media Assets )
Seamless uploads of media assets is just as important as their display. You can dynamically upload and add tags to them with Cloudinary. For the procedure, see this section in the documentation.
媒体资产的无缝上传与它们的显示一样重要。 您可以使用Cloudinary动态上传标签并向其中添加标签。 有关过程，请参阅文档中的本节 。
结论 ( Conclusion )
You have now learned how to define and customize the Cloudinary Product Gallery for a eCommerce store. The complete source code resides in the CodePen demo. An upcoming article will show you how to find out how users interact with your galleries by integrating them with Google Tag Manager. Do stay tuned.
您现在已经了解了如何为电子商务商店定义和定制Cloudinary产品库。 完整的源代码位于CodePen演示中 。 即将发表的文章将向您展示如何通过将用户与Google跟踪代码管理器集成来了解用户如何与您的画廊交互。 敬请期待。
翻译自: https://scotch.io/tutorials/building-customizable-product-galleries-for-ecommerce
小型电子商务网站数据库设计
扫一扫
692
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
