阿里云大使专享

Fancy Product Designer二次开发实用教程

技术 2017-10-22 199 0 1

fancyproductdesigner 是一款非常优秀的产品定制功能插件,使用了应用广泛的JavaScript以及PHP作为后台,结合先进的H5技术。官网提供了多种UI和布局样式,你甚至可以在这个页面上进行定制。如果你想要更多自定义功能,可以仔细阅读本文所提供的使用教程进行二次开发。

Fancy Product Designer二次开发实用教程-甜果网|探索和引领技术派电商 Fancy Product Designer二次开发实用教程-甜果网|探索和引领技术派电商

不仅支持自适应布局,多端兼容,还可以添加第三方插件,支持wordpress和woocommerce平台。

实用链接:

快速开始

引入JS文件
jQuery 1.7版本或更高, jQuery UI (core.js, widget.js, mouse.js, draggable.js, sortable.js)
第三方插件
  • https://github.com/bennoleslie/jsjpegmeta
  • http://www.elevateweb.co.uk/image-zoom
  • http://manos.malihu.gr/jquery-custom-content-scroller/http://iamceege.github.io/tooltipster/
  • https://github.com/MrRio/jsPDF
  • https://github.com/davidshimjs/qrcodejs
  • http://rangeslider.js.org/
  • https://bgrins.github.io/spectrum/

在头部引入必须的CSS和JS文件

<!-- Main CSS for the product designer -->
<link rel="stylesheet" type="text/css" href="css/FancyProductDesigner-all.min.css" />
<!-- Optional - only when you would like to use custom fonts -->
<link rel="stylesheet" type="text/css" href="css/jquery.fancyProductDesigner-fonts.css" />
<!-- 引入JS文件 -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<!-- HTML5 canvas library -->
<script src="js/fabric.min.js" type="text/javascript"></script>
<!-- The plugin itself -->
<script src="js/FancyProductDesigner-all.min.js" type="text/javascript"></script>

添加产品元素标签

<div id="fpd">
  <div class="fpd-product" title="TITLE" data-thumbnail="PREVIEW.png">
  </div>
  <div class="fpd-product" title="ANOTHER_TITLE" data-thumbnail="ANOTHER_PREVIEW.png">
  </div>
  <!-- Here you can add more product divs -->
</div>

多个分类产品

<div id="fpd">
	<div class="fpd-category" title="First Category">
  		<div class="fpd-product" title="TITLE" data-thumbnail="PREVIEW.png"></div>
  		<div class="fpd-product" title="ANOTHER_TITLE" data-thumbnail="ANOTHER_PREVIEW.png"></div>
	</div>
	<div class="fpd-category" title="Second Category">
  		<div class="fpd-product" title="TITLE" data-thumbnail="PREVIEW.png"></div>
  		<div class="fpd-product" title="ANOTHER_TITLE" data-thumbnail="ANOTHER_PREVIEW.png"></div>
	</div>
  <!-- Here you can add more product divs -->
</div>

图片请使用透明背景的PNG格式。

添加图片设计边栏

<div id="fpd">
  <div class="fpd-product" title="TITLE" data-thumbnail="PREVIEW.png">
    <img src="URL_OF_THE_IMAGE.png" title="TITLE_FOR_IMAGE" data-parameters='{"x": 100, "y": 200, "colors": "#D5D5D5", "price": 20}' />
    <span title="TITLE_FOR_TEXT" data-parameters='{"x": 150, "y": 250, "removable": true, "draggable": true, "rotatable": true, "resizable": true, "colors": "#000000,#ffffff,#990000"}' >Default Text</span>
  </div>
  <!-- Here you can add more product divs -->
  <div class="fpd-design">
    <img src="URL_OF_THE_IMAGE.png" title="TITLE_FOR_IMAGE" data-parameters='{"x": 215, "y": 200, "colors": "#000000", "removable": true, "draggable": true, "rotatable": true, "resizable": true, "price": 10}' />
    <!-- Here you can add more img designs -->
  </div>
</div>

添加分类化的图片设计边栏

<div id="fpd">
  <div class="fpd-product" title="TITLE" data-thumbnail="PREVIEW.png">
    <img src="URL_OF_THE_IMAGE.png" title="TITLE_FOR_IMAGE" data-parameters='{"x": 100, "y": 200, "colors": "#D5D5D5", "price": 20}' />
    <span title="TITLE_FOR_TEXT" data-parameters='{"x": 150, "y": 250, "removable": true, "draggable": true, "rotatable": true, "resizable": true, "colors": "#000000,#ffffff,#990000"}' >Default Text</span>
  </div>
  <!-- Here you can add more product divs -->
  <div class="fpd-design">
    <div class="fpd-category" data-parameters='{"price": 10}'>
      <img src="URL_OF_THE_IMAGE.png" title="TITLE_FOR_IMAGE" data-parameters='{"x": 215, "y": 200, "colors": "#000000", "removable": true, "draggable": true, "rotatable": true, "resizable": true}' />
      <!-- Here you can add more img designs -->
    </div>
    <div class="fpd-category" data-parameters='{"price": 20}'>
      <img src="URL_OF_THE_IMAGE.png" title="TITLE_FOR_IMAGE" data-parameters='{"x": 215, "y": 200, "colors": "#000000", "removable": true, "draggable": true, "rotatable": true, "resizable": true}' />
      <!-- Here you can add more img designs -->
    </div>
  </div>
</div>

使用插件

$(document).ready(function(){

  var $fpd = $('#fpd'),
        pluginOpts = {stageWidth: 1200, stageHeight: 800};

  var yourDesigner = new FancyProductDesigner($fpd, pluginOpts);

 //api methods can be used
 yourDesigner.print()

  //you can listen to events
  $fpd.on('productCreate', function() {
	//do something
  });
});

模块管理

添加模块的代码:

//will display in the order how you define the values in the array
var opts = {mainBarModules: ['products', 'designs', 'images', 'text']};
var fpd = new FancyProductDesigner($fpd, opts);

模块分类

键值  释义
products 产品模块可显示所有分类列表中的产品
designs 设计模块可以在线选择一些图案
images 图片模块允许你上传自定义的图片,它包含一个多图上传插件,以及Facebook 和 Instagram 图片.
text 文字模块可以让你在产品图片上添加自定义的文字内容.

 操作按钮

此功能可以让你在产品周围展示不同功能的操作按钮,示例代码:

var pluginOpts = {actions:  {
	'top': ['download','print', 'snap', 'preview-lightbox'],
	'right': ['magnify-glass', 'zoom', 'reset-product', 'qr-code'],
	'bottom': ['undo','redo'],
	'left': ['manage-layers','info','save','load']
});
var fpd = new FancyProductDesigner($('#fpd'), pluginOpts);

可用操作按钮:

download 允许将图片下载为 PNG, JPEG, PDF导出。
print 打印生成的产品图片。
snap 当你拖拽一个元素时,将会显示此元素的帮助信息。
preview-lightbox 在 lightbox 里查看产品图片。
magnify-glass 开启放大功能。
zoom 通过滑块局部放大。
reset-product 重置添加在产品图片上的所有效果。
qr-code 允许添加QR-Code。
undo 撤销。
redo 恢复。
manage-layers 显示并可管理图片的图层及其顺序。
 info 在模态框显示自定义的文字. 文字可以是JSON语言。
 save 将操作定制的产品保存在浏览器中。
 load 加载保存在浏览器中的定制产品。

 UI和布局设置

CSS类列表

 CSS Classes  下列CSS属性添加至product designer组件的外层元素
fpd-topbar 将主导航显示在顶部的主导航处。
fpd-sidebar 将主导航显示在左边栏。
fpd-sidebar fpd-sidebar-right 将主导航显示在右边栏
fpd-tabs fpd-tabs-side 将tab标签放置在边栏左侧。
fpd-tabs fpd-tabs-top 将tab标签放置在边栏顶部。
fpd-shadow-{1-9} 设置阴影. 请选择9种, e.g. fpd-shadow-2
fpd-views-inside-{top, right, bottom, left} Choose between four different inside position for the view selection.
fpd-views-outside Sets the view selection after the product designer.
fpd-top-actions-centered Centers the top actions.
fpd-left-actions-centered Centers the left actions.
fpd-right-actions-centered Centers the right actions.
fpd-bottom-actions-centered Centers the bottom actions.

 

 CSS Classes - 辅助类 将此CSS属性添加到body标签中
fpd-hidden-tablets 平板中隐藏product designer组件
fpd-hidden-smartphones 智能手机中隐藏product designer组件

示例代码:

<div id="fpd" class="fpd-shadow-2 fpd-topbar fpd-tabs fpd-tabs-side fpd-top-actions-centered fpd-bottom-actions-centered fpd-views-inside-left fpd-grid-columns-2"></div>

元素参数

使用元素参数,你可以设置元素的属性和行为,e.g.元素是否可以被拖动,

在哪里设置元素参数

1. 通过调用插件选项方法

第一种方法可以修改所有插件默认的选项参数,你可以找到4个选项参数来修改分割,文本和自定义图片及文本参数:

new FancyProductDesigner($('#fpd'),
  elementParameters: {draggable: true},
  textParameters: {textSize: 16},
  customImagesParameters: {minW: 1000, minH: 2000},
  customTextParameters: {removable: true}
});

2. 使用HTML标签

<img src="URL_OF_THE_IMAGE.png" title="TITLE_FOR_IMAGE" data-parameters='{"x": 100, "y": 200, "colors": "#D5D5D5", "price": 20}' />

3. 使用API

$(document).ready(function(){
  var myProductDesigner = new FancyProductDesigner($('#fpd'));
  myProductDesigner.addElement('image', 'image_url.png', 'Image Title', {autoCenter: true, price: 20, draggable: true});
});

自定义文本字体

给文本下拉框添加新的字体:

new FancyProductDesigner($('#fpd'), {
  fonts: [{name: "Pacifico", url: "http://yourdomain.com/fonts/Pacifico.ttf"}]
});
添加Google字体

如果需要添加Google字体,可以加上字体名称,并将url参数直接设置为google。

new FancyProductDesigner($('#fpd'), {
  fonts: [
    {name: "Pacifico", url: "http://yourdomain.com/fonts/Pacifico.ttf"},
    {name: "Lobster", url: "google"}
  ]
});

为文本元素添加匹配模式

new FancyProductDesigner($('#fpd'), {
 patterns: ["patterns/pattern1.png", "patterns/pattern2.jpg"],
 customTextParameters : {patternable: true}
});

站长微信二维码
打赏
  • 打赏支付宝扫一扫
  • 打赏微信扫一扫

猜你喜欢

发表评论

微信号