magento模板制作帮助文件

Magento设计人员专业名词（Magento Design Terminologies）为了能够更好的理解本设计人员中文手册，熟悉一下Magento系统中的设计方面的术语是很关键的。

术语的这一章介绍可能对于你来说是比较新的概念，因此，您可以利用这段时间彻底的读通他们。

但最重要的，如果你不能充分把握这些概念，不要灰心，所有这些新名词-本章仅仅向你介绍一次，在后面的章节会对这些简单的定义进一步深入研究和扩大。

这一章介绍的术语包括：网站和网店（Website and Store）Magento中的一个网站（Website）是一些共享相同的客户、订单信息和购物车信息的商店（Store）的集合。

Store是一些Store View的集合。

这些都是比较笼统的概念，我们在确立个别特别需要的网店时用这些概念可以很好的建立。

下面有几种确定不同website, store 和store views用途的：方案 1一家名为Dubloo的公司创建了一个在线销售平台，它包括三个独立的服装商店，每个迎合不同价格水平的受众。

Dubloo公司希望三个商店能够共享所有客户和订单信息。

在这种情况下，Dubloo公司将有一个网站（Website），下面有三个三个商店（Store）。

商店将确定个别的价格水平商店，网站将成为Dubloo公司的总平台。

方案 2一家名为My Laptops要建立两个单独的网站，两个都是销售笔记本电脑，但是不同的价格。

他们还希望每个站点提供英文和西班牙文的选择，每个客户可以在语言选择中选择自己的语言。

它们还需要两个网站同步客户和订单信息。

在这种情况下，Store View将在网站中将确定每个英文和西班牙文版本。

两个网站分别是―My Laptops‖和―Cheap Laptops‖。

方案 3一家名为Bongo's Instruments想创建一个在线的销售网点。

没有其他分支店，Bongo's Instruments就是是商店以及网站。

技术指南总览本文档列出了指导Magento 2开发人员团队的基本编码和应用程序设计原则。

Magento核心开发人员在代码审查期间将本文档用作参考；有些规则在Magento静态测试中具有相应的代码检查。

这些准则来自多年的辛勤工作，经验和讨论。

我们坚信，新的技术倡议应遵循这些建议，并且应改进现有的规范以符合这些建议。

文本约定使用RFC2119来解释关键字，如：•MUST and MUST NOT•REQUIRED•SHALL and SHALL NOT•SHOULD and SHOULD NOT•RECOMMENDED•MAY•OPTIONAL1.基本编程原则1.1。

函数参数不应该被修改。

1.2。

显式返回类型必须在函数上声明。

1.3。

应该使用标量参数的类型提示。

1.3.1。

所有新的PHP文件都必须以declare(strict_types=1)开头启用严格类型模式。

所有更新的PHP文件都应该启用严格类型模式。

PHP接口可能有这样的声明。

2.类的设计2.1。

对象分解必须遵循SOLID原则。

2.2。

对象实例化2.2.1。

对象必须在实例化后准备好使用。

不允许使用其他公共初始化方法。

2.2.2。

Factories应该用于对象实例化而不是new关键字。

为了测试或可扩展性，对象应该是可替换的。

例外：DTO。

DTO中没有任何行为，因此没有理由可替换。

测试可以为存根创建真正的DTO。

数据接口，异常和Zend_Db_Expr是DTO 的示例。

2.3。

类构造函数只能具有依赖项分配操作和/或参数验证操作。

不允许其他操作。

2.3.1。

当参数验证失败时，构造方法应该抛出异常。

2.3.2。

不得在构造函数中触发事件。

2.4。

所有依赖项必须由client对象所需的最通用类型请求。

2.5。

绝对不能在构造函数中明确请求代理和拦截器。

2.6。

不应使用继承。

组合应该用于代码重用。

2.7。

所有非公共属性和方法都应该是私有的。

2.8。

抽象类不得标记为public @api。

Product Labelsfor Magento 2User GuideVersion 1.0Table of ContentsI) Introduction (2)II) Where to Find Extension (3)III) Manage Labels (6)IV) Edit a Label (10)1. General Information (12)2. Design (18)2.1 Product Page (18)2.2 Product List (29)3. Conditions (33)V) Support (35)I) IntroductionProduct Labels for Magento 2is an amazing extension that helps draw customers' attention in the fastest way. Appealing labels along with suitable call-to-action texts like "Hot", "New", "Sale Off", etc can absolutely increase the conversion rate as well as boost the sales.●Configure to display labels freely (On the home page, product list page, productdetail page, etc.)●Create specific labels using 10 predefined variables●Add labels to 21 positions with preview●Flexible conditions for the labels to display●Set time period for labels●Set label priority●Create an unlimited number of labelsII) Where to Find ExtensionFrom the backend interface, go to S tore > Settings > Configuration:On the left panel, span M AGEZON EXTENSIONS, then click on Product Labels. The right section includes General Settings:- Enabled: select Yes or No to enable/disable the extension.- Rounding Method: decide how to round the prices in the labels. There are 3 options to choose.For instance, you have a product of $90 and you apply the sale price of $70 on it. You use the variable {SAVE_PERCENT} to automatically display the sale percent on the label.●Choose N ormal option to display the number with no rounding:●Choose R ounding Down option to round the number down, like this:●Choose R ounding Up option to round the number up, like this:III) Manage LabelsGo to M arketing > Promotions >P roduct Labels to view all created labels:- Click Labels drop-down and you will see the following options:●Add New Label: add a new label.●Manage Labels: go to the l abel grid page.●Settings: access the extension’s c onfiguration.Please note that you can find this dropdown on the l abel edit page as well.- There is a grid containing all labels with such information as label ID, Name, Product Page Label (label on product pages), Product Page Text, Product List Label, Product List Text, Priority, Store View, Status and Action (that allows you to E dit the label).- You can decide which info is displayed in the grid by clicking the C olumns drop-down above the grid. Tick the checkboxes of columns that you want to be visible in the grid. Untick the checkboxes of columns that you want to be invisible in the grid:- Tick the checkboxes of corresponding attachments in the first column, then click A ctionsdrop-down above the grid to:●Delete the chosen labels.●Enable/Disable the chosen labels.- You can filter labels by ID, Store View, Name, Product Page Text, Product List Text, Priority and Status.- To add a new label, click the A dd New Label b utton on the top-right corner and you’ll be redirected to the l abel edit page:IV) Edit a LabelThe edit page will open when you create a new label or edit an existing label.The top of the label edit page contains the following buttons:- B ack: return to the l abel grid page.- D elete: delete the label.- R eset: reset all settings to the last saved ones.-Save and Apply: save the label and apply the label to the chosen products. It means you will see the labels on the frontend.- S ave and Continue Edit: save the label’s settings and stay on the same page.- S ave: save the label’s settings and go back to the label grid page.Note:- By clicking on S ave a nd Continue Edit o r S ave button, you just simply save the label, and the labels will not be displayed on the frontend until you click the S ave and Apply button.- Or you can install cron job and the labels will be displayed on the frontend no matter which kind of save button (Save and Apply, Save and Continue Edit or Save) you click.On the left panel, you’ll see 3 tabs: General Information, Design and Conditions.1. General InformationThis tab lets you configure general settings of a label:- Name: specify a name for the label.- From Date / To Date: set the active time period for the label. Out of this time range, the label will not be displayed on the frontend.- Use for Parent: d ecide whether to assign the label of child products to its parent products. Configurable and group products are the common ones that have parent and children products.For example, the product with SKU ‘WH11’ has a child product that has Green color and S size. And we assign the label M agento t o this child product. If we set U se for Parent toYes, then the label will be assigned to the parent product as well (parent product here is the one with no attribute selected):>> Parent product:>> Child product (with attributes selected):- Hide labels with lower priority: w hen you switch this function to Yes, the labels with lower priority will automatically be hidden.- Store View: C hoose which store views to display the label.- Customer Groups: choose which customer groups to display the label to.For example, choose these following customer groups to display the label to logged in customers only.Let’s check the result:●Not logged in customers:●Logged in customer:- Priority: S et the priority order you want for this label. The lower number, the higher priority. For example, if you have 2 labels with the same position, the label with higher priority will overlap the other.- Status: e nable or disable the label from the frontend.2. Design2.1 P roduct PageThis block is to configure the look of your label on the product detail page.- Image: Choose the image file from your device by clicking on the I nsert Image b utton.- Choose a position you need the label to appear in the L abel Position block. In this case, we place the label on the top left corner of the product image.Let’s check the result:Try another position:And the result:Or, use another image for label and set it like this:The result will be like:Note: If you place the label within the product image, you can preview it in the box on the right:- Label Content:Enter the message you want to display inside the label. You can use the existing variables tosave time. This case, we used “-{SAVE_PERCENT}%” variable.And how it look in the storefront:Or enter another variable:- Design the label using T ext Color, Width (o f the label) and Style fields:And the result:If you want to make the label bigger, set the W idth of the label and the text again:And the result:- URL: when customers click on the label, they will be navigated to the page with the URL you enter in this field. Let's fill the field with our homepage URL:Then see the result:2.2 Product ListAll the settings in this section are similar to those in the P roduct Page section.Let's set the configuration like this:- Choose another I mage and P osition:- Set the L abel Content, Text Color, Width a nd Style like this:And the result will look like this:- URL:Enter the URL of “What is new" page:And the result be like:3. ConditionsBy setting conditions, the label will be applied to the products that meet these conditions.For example, we set the condition A ttribute Set is Bag to apply the label to products that have Bag attribute set.- Product Type: apply the label to products that belong to one of the following types: Latest,N ew Arrival, Best Sellers, Sale, Most Viewed, Wishlist Top, Top Rated, Featured, Free. For example, we choose New Arrival.- Stock Status:apply the label to products that are In Stock or Out of Stock. For example, we choose In Stock.- Use Stock Range:if Yes, you can specify the stock range in D isplay if stock from a nd Display if stock to fields so that the label is applied to products whose stock belongs to this stock range. For example, we set the stock range to be 5-10.Let's see the result:V) SupportIf you have any questions or need any support, feel free to contact us by following ways. We will get back to you within 24 hours since you submit your support request.●Submit c ontact form.●Email us at s******************.●Submit a t icket.●Contact us through S kype:*******************.●Contact us via live chat on our website: .。

The Custom Product Builder For Magento 2 User Guide. Link to User Guide OnlineRevolutionize your online store! Offer an easy and engaging way to order custom made-to-order products.Our plugin works with png images of the same size with transparent backgrounds. Each png image represents a layer on the product preview. By stacking images representing different product parts on top of each other you can create a full representation of the product and offer a true ‘Build Your Own Product’ experience.This app is very flexible and can work with almost an unlimited number of product types: jewelry, apparel, cars, accessories, musical instruments, furniture, sports equipment etc.. We believe that the world would be a better place if more people could order custom products.Here are some examples of the plugin in action:●Custom Hat●Custom Made Jewelry●Custom Made Controller●Build Your Own Controller●Custom Leggings●Build Your Own Sunglasses●Build Your Own Shoes●Personalized PouchCONFIGURE PRODUCTSIn Admin Panel Catalog/Product add new product. By clicking on «Configure» button you can configure your custom options by adding new panels, categories and options.CONDITIONAL LOGICAlso you can create rules to specify behavior (when panels and categories are visible or hidden)CUSTOM LAYERSCustom layers are one of the main parts of the system. With their help, you can create engraving on objects, upload a custom image to any part of the product, paint parts of the product without loading additional images. And much more …Types of Custom Layers1.Path – This type is used to create click areas and load custom photos on a product, boundedby the layer area.2.Text – This type is used to add text to the product. For example, an inscription on a T-shirt orother object or engraving.3.Image – This type is used to add image whose color can be changed later. Or addingtextures to objects whose colors can also be changed.Create Custom LayersSteps to create “Path” Custom LayerClick button. The form for creating a new layer has been opened.Click button “Add New Custom Layer”. The new layer added. Click it in the Layer Selection Column.Fill in the following fields in the Settings tabTitle: some titleType: PathView: change viewPanel to select: The panel to which to go after clicking on the custom layerNext, if you want to change the shape, the size of the layer and the position on the page, you must drag the layer or individual points with the mouse cursor. To delete unnecessary points, you need to press the Shift and click on it with the mouse.Fill in the following fields in the Advanced tabUse Color Hover– If you want to use color hover, turn on the switch. This functionality is only for painting the layer when it has hovered over the mouseImage Upload– If you want to upload some image, for example, print on a T-shirt, you need turn on the switch.Fill in the following fieldsPanel: the panel in which the necessary category is locatedCategory: the category in which the required option is locatedOption: option with “File Upload” type only.Click Save and collapse settings by pressing the buttonSteps to create “Text” Custom LayerClick button. The form for creating a new layer has been opened.Click button “Add New Custom Layer”. The new layer added. Clickit in the Layer Selection Column.Fill in the following fields in the Settings tab Title: some titleType: TextView: change viewPanel to select: there is no need to fill Text: add some textFill in the following fields in the Advanced tab Font SizeFont FamilyFont ColorPanel: the panel in which the necessary category is located Category: the category in which the required option is located Option: option with “Text Field” type only.Click Save and collapse settings by pressing the buttonIf you want to add several fonts you must to create one Custom Layer for each font.Steps to create “Image” Custom LayerClick button. The form for creating a new layer has been opened.Click button “Add New Custom Layer”. The new layer added. Click it in the Layer Selection Column.Fill in the following fields in the Settings tabTitle: some titleType: ImageView: change viewPanel to select: there is no need to fillImage: You need to upload PNG image with transparency and image positioningFill in the following fields in the Advanced tabColorize image layer– If you want to change colors of any texture, for example, aquaprinting pattern colors on any thing, you need turn on the switch.Fill in the following fieldsPanel: the panel in which the necessary category is locatedCategory: the category in which the required option is located with “Image thumbnail” type only Alpha Transparency: alpha transparency level.Image Upload– If you want to upload some image, for example, print on a T-shirt, you need turn on the switch.Fill in the following fieldsPanel: the panel in which the necessary category is locatedCategory: the category in which the required option is locatedOption: option with “File Upload” type only.Layer colorization and on the fly1.Create a new custom layer with “Image” type. How to do this, see the tab “Custom Layers”.2.Create a new Panel with the “Color thumbnail” category and add some color options.3.Enjoy the resultNow, the functionality is ready to use. Switch colors and your image will be painted in the right color without the need to upload new images.Overlaying texturesChanging the colors of individual elementsInserting user image1.Create a new custom layer with “Path” type. How to do this, see the tab “Custom Layers”.2.Create a new Panel with the “File upload” category and add file upload option.3.Enjoy the resultCustom user textWith the help of this instruction you can not just add text, but give the buyer the opportunity to choose from the options for color, size and font. We present you a powerful tool for working with text layers.One color, one font, one size.For most interesting ideas, you do not need more than one type of font design. And you need to perform just a couple of simple actions.1.Create a new custom layer with “Text” type. How to do this, see the tab “Custom Layers”.2.Create a new Panel with the “Text field” category and add text field option.3.Enjoy the resultAn example can be viewed from t his link. The “Simple color” tab.Multi color, multi font, multi size.Sometimes it is necessary that there are a lot of fonts, colors and the possibility of resizing. In this situation, it takes a little longer, but the result is worth it.1.Create a new custom layers with “Text” type. For each color a separate layer. For each font a separatelayer. For each font size a separate layer. How to do this, see the tab “Custom Layers”.2.Create a new Panel3.For color switching create a new “Color thumbnail” category and add color thumbnail options.4.For font switching create a new “Image Thumbnail” category and add image thumbnail options withuploaded samples of font images.5.For size switching create a new “Text list” category and add text list options.6.Create a new Panel with the “Text field” category and add text field option.7.Set up the rulers in each Custom LayerYou need to make Custom layer shown if the user selects the desired color, size and fontAn example can be viewed from t his link. The “Multi color” tab.This description is just an example. The way you set it up depends entirely on your imagination.Click Save and collapse settings by pressing the buttonGeneral Settings:Select currencySelect layouts:(columns tabs)(columns list) Preview Controls:(buttons)(arrows)Change Themes:Customize CSSIf you know CSS, you can customize the themes by following this l ink. You can override theme classes and ids with custom CSS there.************************************************************************** development.If you want to customize your loading screen you need to make a few simply steps1. Go to your admin panel and go to the store setup2. Upload a new image that you want to use (I used the URL of our logo as an example.)3. Then go to your admin panel and go to the store setup4. Go to Edit Code and find ‘customproductbuilder.css’ file there5. Paste the section /*Loading*/ with your image URL there and save changesResult/*Loading*/.cpb-loading-label{background:url(///s/files/1/1774/1587/files/southern_spun_logo_200x.png?v=1494 899763);background-size: contain;background-repeat: no-repeat;text-indent: -400px;display: block;color: rgba(0, 0, 0, 0);margin-top: 15px !important;}Examples of Custom CSS@font-face {font-family: 'retina';src:url("///s/files/1/1162/8602/t/8/assets/retina.eot?86063878728061505 00");url("///s/files/1/1162/8602/t/8/assets/retina.eot?%23iefix&860638787 2806150500") format("embedded-opentype"),url("///s/files/1/1162/8602/t/8/assets/retina.woff?8606387872806150 500") format("woff"),url("///s/files/1/1162/8602/t/8/assets/retina.ttf?860638787280615050 0") format("truetype"),url("///s/files/1/1162/8602/t/8/assets/retina.svg?86063878728061505 00") format("svg");font-weight: normal;font-style: normal}/* Please use this file to customize the syles of the custom product builder */::selection {background: #FFF7B6;color: black;}#product-builder {width: 100%;min-height: 600px;position: relative;border: none;font-family: Futura, 'Century Gothic', AppleGothic, sans-serif !important;}.product-builder {background: transparent !important;}.product-builder .product-name{font-size: 24px;line-height: 1.5em;margin: 14px 10px;clear: both;font-weight: normal;padding-top: 4px;text-transform: uppercase;margin-bottom: 25px;}.product-builder .builder-wrapper {background: transparent !important;flex-direction: row-reverse !important;}.product-builder a, .product-builder p, .product-builder h1,.title>div,span.price {color: white !important;.builder-layout {margin: 0 !important;padding: 0px !important;}#loading{background:url("///s/files/1/1162/8602/files/website_background_2449dee7-1c79-405c-b490-c20a387477c7_2000x.jpg?v=1503496313") !important;z-index: 9999 !important;;color: #fff !important;;}#loading .content .ball{background-color: #fff !important;}/*Tabs*/.nav-tabs{border-bottom: none !important;}.product-builder .alpine-white .builder-layout .builder-wrapper .panels-container.nav-tabs li{padding: 10px !important;}.product-builder .alpine-white .builder-layout .builder-wrapper .panels-container.nav-tabs li a{padding: 0 !important;font-family: Futura, 'Century Gothic', AppleGothic, sans-serif !important;font-weight: bold !important;font-size: 15px !important;text-transform: uppercase !important;color: #ffffff !important;position: relative !important;display: block !important;letter-spacing: 1px !important;padding-bottom: 8px !important;opacity: 1 !important;}.product-builder .alpine-white .builder-layout .builder-wrapper .panels-container.nav-tabs li.active a:after{background: #416864 !important;}.tab-content{padding: 10px;/*Panels*/.product-builder .builder-layout .builder-wrapper .panels-container .panel .description{ display: none;}/*Categories*/.product-builder .builder-layout .builder-wrapper .panels-container .panel.categories-container .category .title{font-size: 19px !important;line-height: 1.5em !important;margin: 0 auto 15px !important;clear: both !important;font-weight: bold !important;padding-top: 4px !important;}/*Options*/.product-builder .option.option-type-select .option-value select{padding: 6px 16px !important !important;font-family: Futura, 'Century Gothic', AppleGothic, sans-serif !important; background: none !important;border: 1px solid #666 !important;border-radius: 0 !important;font-weight: bold !important;color: #ececec !important;outline: none !important;min-width: 215px;}.product-builder .option.option-type-img{width: 80px !important;height: 80px !important;padding: 5px !important;border: 1px solid transparent !important;display: inline-flex !important;margin: 0px 10px 15px 0 !important;}.product-builder .category-3gc4USis_GgvjR4AQ1s6AFr8 .option.option-type-img{ width: 70px !important;height: 50px !important;}.product-builder .option.option-type-img.active{border-color: #666 !important;}.product-builder .alpine-white .option.option-type-img img{height: 100% !important;width: 100% !important;border: #e2e2e2 1px solid !important;}/*Aside Submit Area*/.product-builder .builder-layout .builder-wrapper .panels-container .builder-actions{ margin: 10px !important;flex-direction: row;border-bottom: 1px solid #ccc;padding-bottom: 24px;}.product-builder .builder-layout .builder-wrapper .panels-container.builder-actions>div{padding: 0 !important;}.product-builder .builder-layout .builder-wrapper .panels-container .builder-actions .cart-container button{background: #416864 !important;border-radius: 5px !important;float: right !important;font-size: 0.9em !important;margin-right: 10px !important;text-transform: uppercase;padding: 6px 16px !important;}.product-builder .builder-layout .builder-wrapper .panels-container .builder-actions .cart-container button:first-child{font-weight: 600 !important;margin-right: 0 !importnant;}.product-builder .builder-layout .builder-wrapper .panels-container .builder-actions .price{font-family: Futura, 'Century Gothic', AppleGothic, sans-serif !important;font-weight: 400 !important;font-size: 18px !important;}.product-builder .builder-layout .builder-wrapper .social-buttons{color: #416864 !important;margin: 10px;}.product-builder .builder-layout .builder-wrapper .social-buttons a{font-size: 18px;padding-left: 10px;position: relative;top: 2px;cursor: pointer;color: #416864 !important;}.product-builder .builder-layout .builder-wrapper .social-buttons[class^="icon-"]:before,.product-builder .builder-layout .builder-wrapper .social-buttons [class*="icon-"]:before {font-family: "retina";font-style: normal;font-weight: normal;speak: none;display: inline-block;text-decoration: inherit;width: 1.01em;margin-right: .2em;text-align: center;font-variant: normal;text-transform: none;line-height: 1em;position: relative;top: 1px;}.product-builder .builder-layout .builder-wrapper .social-buttons .icon-facebook:before {content: "\ea90"}.product-builder .builder-layout .builder-wrapper .social-buttons .icon-twitter:before { content: "\ea96"}.product-builder .builder-layout .builder-wrapper .social-buttons .icon-gplus:before { content: "\e907"}.product-builder .builder-layout .builder-wrapper .social-buttons .icon-pinterest:before {content: "\e906"}.product-builder .builder-layout .builder-wrapper .social-buttons .icon-email:before { content: "\e905"}Custom JSIf you know JS, you can add custom JS that would load within the tool. You can manipulate DOM elements in a similar way that ‘’ does it. It’s a very powerful tool that allows almost any type of theme customizations.Examples of custom JS(function(){function converPriceToKr(){var price=$(shadowNode).find(".price");var value=price.html().split("DKK")[1];if(!value) return;price.html(value+" kr");}setTimeout(function(){var title=document.title;var url=document.location.href;var media=$("meta[property='og:image:secure_url']")[0].content;var html='<span class="social-buttons">Share:<ahref="https:///intent/tweet?text='+title+'&url='+url+'" target="_blank"class="icon-twitter" title="Share this on Twitter"></a><ahref="https:///sharer/sharer.php?u='+url+'" target="_blank"class="icon-facebook" title="Share this on Facebook"></a> <a target="_blank"data-pin-do="skipLink" class="icon-pinterest" title="Share this on Pinterest"href="https:///pin/create/button/?url='+url+'&description='+title+'&media='+media+'"></a> <a target="_blank" class="icon-gplus" title="Share this on Google+"href="'+url+'"></a> <a href="mailto:?subject=Thought you might like '+title+'&body=Hey, I was browsing Hornskov København and found '+title+'. I wanted to share it withyou.%0D%0A%0D%0A'+url+'" target="_blank" class="icon-email" title="Email this to afriend"></a></span>';$(shadowNode).find(".builder-actions").after(html);var title='<h1 class="product-name">Custom Hat</h1>';$(shadowNode).find(".panels-container").prepend(title);converPriceToKr();$(document.body).on("PRODUCT_BUILDER_LAYER_UPDATE", function () {setTimeout(function(){converPriceToKr();},40);});},500);})();。

RATING & REVIEWS Magento - Installation Instruction Document5.1.Steps to display Ratings & Reviews setting section in Magento 5.2.Steps to set the Ratings & Reviews settings at Magento admin section 5.3.Steps to display Ratings & Reviews Module on the Product Page 5.4. Steps to display Average Ratings on the Category Page Purpose of Configuration Instructions Who can use this document? Introduction to Ratings & Reviews Functionality of Ratings & Reviews Module Installation of Ratings & Reviews Module at Magento Conclusion 1.2.3.4.5.6.Contents 1112223566This integration guide is useful for all Magento versions.1. PURPOSE OF CONFIGURATION INSTRUCTIONThis document provides comprehensive guidelines and step-by-step instructions to client or site admin who will configure the Ratings and Reviews module on ane-commerce website.By using this document client or site admin can easily configure the Ratings and Reviews module at Magento Extension.2. WHO CAN USE THIS DOCUMENT?This document is most useful for client or site admin who will configure the Ratings and Reviews module at Magento Extension.3. INTRODUCTION TO RATINGS & REVIEWS• The Reviews and Rating module focuses on the social image of the e-commerce site.• As the social image of Brand or product affects the sales of the Brand/product, it must be maintained and should be good.• Ratings and Reviews is a way to maintain the social image of the product.• This tool provides the space and permission to the customers to rate Product/Brand and write a review about the Product/Brand that they experiences while using that Product/Brand.• While buying some product/brand customer always searches for the Reviews orRatings about that Product/Brand. And then decide whether to buy a product or not.• This tool provides the facility to write the review, share that review and anyone can read this review.• With the help of this module, the user will see the other reviews which are submitted by other customers.• This tool will provide the facility to user to submit their suggestion or feedback toadmin directly.4. FUNCTIONALITY OF RATINGS & REVIEWS MODULERatings and Reviews work as below:1. As soon as load the synchronous JavaScript on the page, it shows the write a reviewand read a review link in div, which has id as sa_s28_write_review_link or sa_s28_read-review_link.2. Click on the write a review link, it will open the popup in which it shows the multiplefields has to fill while submitting the reviews.3. After click on the next/preview button, the user will get Preview popup.4. If the user wants to edit the review then the user will click on the edit button, whichwill redirect to review edit section, where the user can edit the specific review fields.5. After previewing the review, the user will submit the review by clicking on the submitbutton.6. When the user submits the review then the review will come in the Moderationreport of Ratings and Reviews module for moderation.7. The site admin will read the review in moderation report & will approve or disapprovethe review submitted by the user.8. The approved review will be displayed on the particular product page.9. The user can see the review (submitted by the other users) in Read a Review section.10. The user will sort the previously submitted reviews using different sorting options. 5. INSTALLATION OF RATINGS & REVIEWS MODULE AT MAGENTOFor Magento site, we provide Ratings & Reviews Magento extension. There are simple steps to integrate Magento extension.5.1. Steps to display Ratings & Reviews setting section in Magento1. Copy Socialannex folder to /app/code/ on server. (Create code folder if it is notavailable)2. Open file “app/etc/config.php” and add 'Socialannex_ Reviewrating' => 1 at the endof the array.3. Now, open Command line user interface (CMD) and go to the magento2 root folder& run command “php bin/magento setup:upgrade” into CMD.4. After that, it will display the setting section for Ratings & Reviews in Magento. Adminsection.5.2. Steps to set the Ratings & Reviews settings at Magento Admin section1. First, log in to the Magento site admin section.2. Then, navigate to the Stores > Configuration as shown in the following image.3. Then, click on General link, under Annex Cloud tab as shown in the following image.4. In that, we have to set the different settings related to Reviews & Ratings module asshown in the following image.• Here, we have to set the following setting attributes:• Annex Cloud Client Name• Host Name• Annex Cloud Host Name• Annex Cloud Host Username• Annex Cloud Host Password• Enable Annex Cloud Inline Ratings• Ratings Feed Path• Ratings Feed Filename• Template Id• Load Css from CDNNote:All the above parameters/information will be provided by Annex Cloud.5. Now, follow the steps from the following section to configure the Ratings & Reviewsmodule.5.3. Steps to display Ratings & Reviews module on the Product page• To display the Ratings & Reviews module on the Product page, first, openreview.phtml file in edit mode. Following is the path of review.phtml file:Path: /vendor/magento/module-review/view/frontend/templates/review.phtml• After that, paste the following code in the div, where you wish to display the Ratings & Reviews module.Code:<?php$saRNRHelperObj = $this->helper('Socialannex\Reviewrating\Helper\Data');echo $saRNRHelperObj->getProductReview();>5.4. Steps to display Average ratings on the category page• To display Average Ratings on the Category page, first, open list.phtml file in edit mode. Following is the path of the list.phtml file:Path: /vendor/magento/module-catalog/view/frontend/templates/product/list.phtml • After that, paste the following code, where you wish to display the Average Ratings.Paste this code to load CSS of average ratings: Paste this Code in category page loop to display average ratings:<?php $saRNRHelperObj = $this->helper('Socialannex\Reviewrating\Helper\Data'); $categoryId = $this->getLayer()->getCurrentCategory()->getId(); echo $saRNRHelperObj->loadRnrCss($categoryId); ><?php echo $saRNRHelperObj->productInlineRating($_product->getSku()); >CONCLUSIONThis document contains the instructions to the site admin or client who wish to configure the Ratings and Reviews module at e-commerce website with Magento platform.。

Single Product Page Builder for Magento 2User GuideVersion 1.0Table of ContentsI) Introduction (3)II) Where to Find Extension (4)III) Product Page Builder Elements (9)1. Product Gallery (9)2. Product Name (13)3. Product Review Summary (16)4. Product Price (17)5. Product SKU (18)6. Stock Status (19)7. Product Add To Cart (20)8. Product Info (21)9. Product Categories (22)10. Magento Social Links (23)11. Product Sharing (24)12. Add to Wish List (26)13. Add to Compare (27)14. Mail to Friend (28)15. Product Short Description (29)16. Product Description (30)17. Product Info Tabs (31)18. Product Additional Information (32)19. Review (32)20. Upsell Products (36)21. Related Products (37)22. Product Attribute (38)23. Bundle Product Options (40)IV) Apply a Layout Profile to Product Pages (41)1. Apply to a single product page (41)2. Apply to multiple product pages (42)V) Support (44)I) IntroductionMagento 2 Single Product Page Builder i s a product page builder extension that allows you to customize layouts of any product page with simple drag and drop.●Create product pages in any layout●Applied to all Magento 2 product types●Visual drag & drop builder●30+ elements●Fully responsive design●Easy to customize Magento 2 product tabs●Product image gallery layouts●Cache support●Parallax background effect & skin builder●100% compatible with: Ultimo theme, Porto theme, L azy Load,S hop By Brand,Magezon Page Builder.This builder is developed on a c ore builder b ased on which we’ve built all builder extensions. The core builder includes elements and settings that all builder extensions have in common. For details, please visit:https:///pub/media/productfile/magezon-core-builder-user_guides.pdf.In this guide, we’ll focus on elements and settings that are specific to product page builder.II) Where to Find ExtensionAfter installing the extension, navigate to C atalog > Product Page Builder Profiles where you can add a new layout profile and view all profiles you created.- You can view all profiles that you created in a grid.- On the right-hand corner, you’ll see Add New Profile button. Click to add a new profile. You will be redirected to the profile builder page.●Enable Profile: turn on the button to activate the profile.●Profile Name: name of the profile.●From/To: decide the period of time during which the profile will be active withchosen product pages. Out of this time period, these product pages will be innormal layout.●Layout: choose a layout for the profile.If you choose D efault Product Setting, product pages to which you apply this profile will keep their default layouts that are customized in product edit page.For other options, product pages to which you apply this profile will be displayed in these layout options.●Magezon Product Page Builder: where you build a new product page layout byadding elements which a re built based on popular parts of a Magento 2 productpage. Simply add and arrange these elements the way you want in the backend.On frontend, they will be replaced with relevant data of a product.To add elements, click the plus icon in the top bar (see in the above image). Then a popup containing all elements will show up:III) Product Page Builder Elements1. Product GalleryProduct gallery is a set of product images including thumbnail images and base images.- Gallery Options tab:●Use Default Theme Settings: u se Magento 2 default gallery settings.●Nav Position: position of product thumbnail images including top, bottom (default),right and left.●Nav: product image gallery style including False, Thumbs (default) or Dot.●Loops: if yes, this will enable cycling of the base images, such that there will be aslide transition between the last and first image.●Arrows: turn on/off arrow on the side of the base image that appears when youhover over the image.●Caption: turn on/off product caption.●Allow Fullscreen: if yes, you can view product base image in full-screen afterclicking on it.●Nav Style: sliding type of product thumbnails.●Transition Effect: transition effect of product base images (Slide, Crossfade,Dissolve).●Transition Duration: transition duration/speed in milliseconds. Then higher, theslower.2. Product Name- General t ab:●Heading Type: type of heading.●Font size (px)●Text color●Line height: the height of text line (px).●Font Weight: the thickness of font (px).3. Product Review Summary4. Product Price5. Product SKU6. Stock Status7. Product Add To Cart8. Product Info9. Product Categories10. Magento Social Links11. Product Sharing- General tabs:12. Add to Wish List13. Add to Compare14. Mail to Friend15. Product Short Description16. Product Description17. Product Info TabsProduct Info Tabs element is the default Magento 2 product tabs.18. Product Additional Information19. Review- General tabs:●Display Counter: display review counter (only applied if R eview element is inproduct tabs.20. Upsell Products21. Related Products22. Product AttributeIn A ttribute f ields, you can choose a product attribute from a drop-down menu. Product attribute options in the drop-down will automatically change based on attributes of your own products.23. Bundle Product OptionsThis element is for bundle products only. Bundle product options are options that you need to choose for each items of a bundle product.IV) Apply a Layout Profile to Product Pages1. Apply to a single product pageOpen the edit page of a product, then find P roduct Page Builder Profiles field. Choose from the drop-down list the layout profile you want to apply to this product page.2. Apply to multiple product pages●First, navigate to C atalog > Products.●Tick the checkboxes of relevant products you want to apply the profile to.●Click the drop-down above the grid and choose U pdate attributes.- Find P roduct Page Builder Profile. Tick C hange c heckbox to edit. Then choose wanted profile from the dropdown.V) SupportIf you have any questions or need any support, feel free to contact us by following ways. We will get back to you within 24 hours since you submit your support request.●Submit c ontact form.●Email us at s******************.●Submit a t icket.●Contact us through S kype:*******************.●Contact us via live chat on our website.。

m a g e n t o教程第七章——自定义系统配置-CAL-FENGHAI.-(YICAI)-Company One1深入理解Magento作者：Alan Storm翻译：Hailong Zhang第七章–自定义Magento系统配置Magento拥有十分强大的后台管理系统。

作为一名开发人员，这套后台管理系统可以让你的用户简单直接的配置Magento系统或者你创建的模块。

和Magento的其他功能一样，你第一次使用这套管理系统的时候可能觉得很麻烦，但是一旦你上手了，你会发现它强大的功能是那么吸引人。

那么让我们开始吧。

我们这一章的例子依然是基于Helloworld模块。

添加系统配置文件首先我们要为模块添加一个系统配置文件。

这个文件和“”是不搭界的app/code/local/Zhlmmc/Helloworld/etc/和全局配置（global config）相似，系统配置也是单独存储的。

我们可以通过下面这段代码来获取系统配置文件Magento Helper简介正如许多其他的PHP MVC系统一样，Magento也有帮助类（Helper Classes）。

这些类用来提供一些不适合放在模型，视图或者控制器中的功能。

Magento的帮助类也是采用分组类名的机制。

也就是说我们可以覆盖默认的帮助类，同时我们需要在中指定帮助类的基类名。

Magento系统默认模块有一个默认的帮助类。

正如我们上面的异常显示，我们的Helloworld模块并没有指定一个默认的帮助类。

下面让我们来添加一个。

修改File: app/code/local/Zhlmmc/Helloworld/etc/<!–… –><global><!–… –><helpers><helloworld><class>Zhlmmc_Helloworld_Helper</class></helloworld></helpers><!–… –></global><!–… –>你现在应该对这类配置相当熟悉了。

Magento模块开发教程第一章Magento强大的配置系统Magento的配置系统就像是Magento的心脏，支撑着Magento的运行。

这套配置系统掌管着几乎所有“module/model/class/template/etc”。

它把整个Magento系统抽象出来，用一个配置文件来描述。

这里的“配置文件”并不是一个物理上存在的文件，而是Magento根据当前的系统状态动态生成的一段XML。

大多数的PHP开发者并不习惯于这样抽象层，因为它增加的编程的复杂性。

但是这样的抽象提供了无与伦比的灵活性，允许你覆盖几乎任何系统的默认行为。

首先，让我们写一个简单的插件来看看这个所谓的“配置文件”长什么样。

虽然我已经提供的现成的代码，但是还是建议你自己建立这个插件，把整个流程走一遍有助于你的理解。

设置插件的目录结构我们将要创建一个Magento的模块【注：Magento的插件不叫plug-in，叫module，翻译成模块】。

Magento的模块由php和xml文件组成，目的是扩展或者覆盖系统的行为，比如为订单增加数据模型，更改一个类的方法，或者增加一个全新的功能。

【注：Magento自带的那些功能也都是基于模块的，比如用户注册，商品展示，结账流程等等。

Magento给我的感觉就是一切皆模块，和Eclipse的插件体系结构有点像】大多数Magento的系统模块的结构和我们将要构建的插件的结构是一样的。

Magento的系统模块在以下目录app/code/core/Mage每一个子目录都是一个单独的模块。

这些模块是由Magento官方开发的。

我们安装完Magento以后，所使用的功能就是来自这些模块。

我们自己创建的模块应该放在如下目录app/code/local/Packagename“Packagename”应该是一个唯一的字符串，用来标识你的代码。

通常人们使用公司名字作为Packagename，比如app/code/local/Microsoft由于我在做我自己的Magento项目，我将使用我自己的域名“Alanstormdotcom”。

META TAGS TEMPLATE FOR MAGENTO 2USER GUIDEContents1.Meta Tags Template for Magento 2 Extension Overview (3)2.How does Meta Tags Template for Magento 2 Extension work? (3)2.1Extension Settings (3)2.2Product Meta Template (4)2.3Category Meta Template (8)3.Contact Us (12)1.Meta Tags Template for Magento 2 Extension OverviewMeta tags play a crucial part in SEO for any Magento store. These information will be read by the search engines to evaluate the content of the site to decide the search result ranking. Meta title and meta description also affect how the site appear in the search result page. Meta Tags Template for Magento 2 helps creating all of this powerful information automatically for all products in your store.2.How does Meta Tags Template for Magento 2 Extension work?2.1Extension SettingsPlease go to Store → Configuration → BSSCOMMERCE → Meta Tags Template and start configuration.In General → Enable: Choose Yes to enable the module or choose No to disable it. The module can be enable/disable on Store view level.In Product Setting:∙In Max Product Meta Title Length: Choose the maximum number of characters for product meta title (should be about 70-71 characters).∙In Max Product Meta Description Length: Choose the maximum number of characters for product meta description (should be about 160 characters).∙In Max Product Meta Keywords: Choose the maximum number of product meta keywords (should be about 30 words).In Category Setting:∙In Max Category Meta Title Length: Choose the maximum number of characters for category meta title (should be about 70-71 characters).∙In Max Category Meta Description Length: Choose the maximum number of characters for category meta description (should be about 160 characters).∙In Max Category Meta Keywords: Choose the maximum number of category meta keywords (should be about 30 words).2.2Product Meta TemplatePlease go to Marketing →SEO & Search→Product Meta Template and start configuration.Choose Add New to create new product meta template.In General:∙In Enable: Choose Yes to enable the template or No to disable it.∙In Name: Choose the name for the template.∙In Scope: Choose the scope (store view, website) to apply the template. You can choose multiple store view/website by hold Ctrl and click.∙In Category: Choose the category to apply the template for all products under it.∙In Replace Current Meta Data: Choose Yes to replace all existing meta data of products with the new meta data in the template, otherwise choose No.∙In Replace Current Description: Choose Yes to replace all existing description of products with the new description in the template, otherwise choose No.∙In Apply for Sub-categories: Choose Yes to apply the template for products under sub-categories, otherwise choose No.∙In Priority, choose priority for the template. In case the product is under multiple categories with different templates, the priority settings will be considered for the affected meta template to avoid conflict. The smaller number will be prior.In Template Settings:∙In Meta Title: Write the meta title for products. You can click on Insert Template Variables to choose the variables we provide.∙In Meta Description: Write the meta description for products. You can click on Insert Template Variables to choose the variables we provide.∙In Meta Keyword: Write the meta keywords for products. You can click on Insert Template Variables to choose the variables we provide.∙In Short Description: Write the short description for the products. In the WYSIWYG editor, the Insert Template Variables will not be shown. Click on Show/Hide Editor to show the regular text area with variables.∙In Description: Write the short description for the products. In the WYSIWYG editor, the Insert Template Variables will not be shown. Click on Show/Hide Editor to show the regular text area with variables.Lastly, click Save Template to finish the settings.2.3Category Meta TemplatePlease go to Marketing →SEO & Search→Product Meta Template and start configuration.Choose Add New to create new product meta template.In General:∙In Enable: Choose Yes to enable the template or No to disable it.∙In Name: Choose the name for the template.∙In Scope: Choose the scope (store view, website) to apply the template. You can choose multiple store view/website by hold Ctrl and click.∙In Category: Choose the category to apply the template. You can choose multiple categories by hold Ctrl and click.∙In Replace Current Meta Data: Choose Yes to replace all existing meta data of categories with the new meta data in the template, otherwise choose No.∙In Replace Current Description: Choose Yes to replace all existing description of categories with the new description in the template, otherwise choose No.∙In Apply for Sub-categories: Choose Yes to apply the template for sub-categories, otherwise choose No.∙In Priority choose priority for the template. In case the categories is under multiple categories with different templates, the priority settings will beconsidered for the affected meta template to avoid conflict. The smaller number will be prior.In Template Settings:∙In Meta Title: Write the meta title for categories. You can click on Insert Template Variables to choose the variables we provide.∙In Meta Description: Write the meta description for categories. You can click on Insert Template Variables to choose the variables we provide.∙In Meta Keyword: Write the meta keywords for categories. You can click on Insert Template Variables to choose the variables we provide.∙In Description: Write the short description for the categories. In the WYSIWYG editor, the Insert Template Variables will not be shown. Click on Show/Hide Editor to show the regular text area with variables.Lastly, click Save Template to finish the settings.3.Contact UsAny questions or concern about us, feel free contact:Website: Support:***********************BSS Support team is always ready to aid you with any issue related to our products. Additionally, we also give you Website development and Administration Support.We do offer:1.Free installation services for commercial products.2.Free updates within offered support period.Our duties:1.Responsibility for resolving product bugs.2.Help with technical queries.3.Technical support in installation and product usage.。

Blue F orm B uilderextension f or M agento 2User G uideVersion 2.0Table o f C ontentsI) I ntroduction (5)II) G eneral C onfigurations (6)1) G eneral S ettings (8)2) R eCaptcha (9)3) R eCaptcha3 (10)4) F orm S ummary (11)III) M anage F orms (12)1) L ist o f F orms (12)2) A dd N ew F orm (17)3) F orm E dit P age (23)3.1 M agezon B lue F orm B uilder (25)3.2 S ettings (28)3.2.1 G eneral (29)3.2.2 E mail N otifications (31)a. A dmin (32)b. C ustomer (34)3.2.3 S uccess M essage (36)3.2.4 F orm i n W ebsites (41)3.2.5 C ustomer G roups (42)3.2.6 S earch E ngine O ptimization (SEO) (43)3.2.7 C ustom C SS (44)3.2.8 C ustom J avascript (45)3.2.9 A dvanced (46)3.2.10 E mbed (50)3.3 F orm S ubmissions (51)4) F orm E lements (52)4.1 C ommon S etting T abs (52)4.1.1 A ppearance (52)4.1.2 I con (56)4.1.3 A dvanced (58)4.2 C ommon E lements (62)4.2.1 S ingle L ine T ext (62)4.2.2 P aragraph (66)4.2.3 E mail (68)4.2.4 A ddress (70)4.2.5 D ate P icker (71)4.2.6 T ime P icker (79)4.2.7 F ile U pload (83)4.2.8 N umber (86)4.2.9 S tar R atings (89)4.2.10 W ebsite (91)4.2.11 S ingle C heckbox (92)4.2.12 S ubmit (94)4.3 M ultiple C hoice E lements (97)4.3.1 S elect (97)4.3.2 M ultiple S elect (101)4.3.3 C heckbox L ist (105)4.3.4 R adio L ist (111)4.3.5 C hoice M atrix (116)4.3.6 S ingle S lider (121)4.4 L ayout E lements (124)4.4.1 F ield S et (124)4.4.2 P ages (126)4.5 S ecurity &O ther E lements (137)4.5.1 M agento 2C aptcha (137)4.5.2 R eCaptcha (138)4.5.3 S ingle I mage (140)4.5.4 S ubscribe (159)4.5.5 C urrency (161)4.5.6 G oogle M aps (162)4.5.7 T oggle (166)4.5.8 P hone (167)5) V ariables (168)IV) M anage S ubmissions (174)V) F ile U ploads (183)VI) F orm W idgets (184)VII) F rontend E xamples (195)1) C ontact F orm 1 (195)2) C ontact F orm 2 (196)3) C ontact F orm 3 (197)4) C ontact F orm 4 (198)5) B ook Y our T our (199)6) B ook a n A ppointment (200)7) O nline B ooking F orm (201)8) D elivery F eedback (202)9) C ustomer S atisfaction S urvey (203)10) B uild a P izza (204)11) I T S ervice R equest F orm (205)12) R equest F or Q uote (206)VIII) S upport (207)I) I ntroductionWe b elieve t hat y ou d on't n eed t o h ire a d eveloper t o b uild M agento 2f orms. T hat's w hy we d eveloped B lue F orm B uilder ,a d rag &d rop f orm b uilder e xtension f or M agento 2 with a ll n eeded f eatures f or c reating P OWERFUL f orms E ASILY.●Create a ny f orm t ype●Drag &d rop●File u ploads●Easy f orm e mbedding●10+ f orm t emplates●Auto e mail n otifications●Spam p revention●Multi-page f orms●35+ e lements●Plugin i ntegrations●Fully c ompatible w ith U ltimo T heme, P orto T heme, M agezon P age B uilderNOTE :B lue F orm B uilder w as d eveloped u sing a c ore b uilder l ibrary b ased o n w hich we’ve b uilt a ll o f o ur b uilder e xtensions. T he c ore b uilder l ibrary i ncludes e lements a nd settings t hat a ll b uilder e xtensions h ave i n c ommon. F or d etails, p lease r efer t o M agezon Core B uilder u ser g uide .In t his g uide, w e’ll f ocus o n e lements a nd s ettings t hat a re s pecific t o B lue F orm B uilder.II) G eneral C onfigurationsTo c onfigure g eneral s ettings f or B lue F orm B uilder, n avigate t o C ontent >B lue F orm Builder >S ettings:o r S tores >S ettings >C onfiguration:Expand M AGEZON E XTENSIONS o n t he l eft p anel a nd c lick B lue F orm B uilder .I n t he right s ection, y ou w ill s ee 4t abs:1) G eneral S ettings●Current V ersion l ets y ou k now t he c urrent v ersion o f B lue F orm B uilder.●Enabled :e nable/disable B lue F orm B uilder o n y our w ebsite.●Form R oute: U RL p refix a pplied t o a ll f orm p ages. F or e xample, i n t he a boveimage, w e e nter “form” i n t his field. S o t he U RL o f a f orm p age, f or e xample,contact f orm p age, w ill b e h ttps:/// f orm /contact-form .T he U RL o f adelivery f eedback f orm w ill b e h ttps:/// f orm /delivery-feedback .T hesame f or U RLs o f o ther f orm p ages.2) R eCaptchaThis s ection a llows y ou t o e nable r eCaptcha v2 b y e ntering b oth s ite k ey a nd s ecret k ey. (This k ey p air c an b e o btained b y s igning u p h ere ).Then y ou c an u se t he R eCaptcha e lement t o a dd r eCaptcha v2 t o y our f orm.3) R eCaptcha 3This s ection a llows y ou t o e nable r eCaptcha v3 b y e ntering b oth s ite k ey a nd s ecret k ey. (This k ey p air c an b e o btained b y s igning u p h ere ).Then y ou c an u se t he R eCaptcha e lement t o a dd r eCaptcha v3 t o y our f orm.4) F orm S ummary●Show I P A ddress :i f Y es, t he I P A ddress o f c ustomers w ho s ubmit f orms w ill b edisplayed i n f orm s ubmission g rid a nd i n s ubmission d etail p ages.III) M anage F orms1) L ist o f F ormsIn o rder t o v iew a ll o f y our f orms, n avigate t o C ontent >B lue F orm B uilder >M anage Forms a nd y ou w ill r each t he f orm l isting p age:- T here i s a g rid c ontaining a ll e xisting f orms:●ID :i dentifier o f t he f orm.●Name :n ame o f t he f orm.●URL K ey :p ath o f t he f orm p age i nside y our s tore v iew. T his i s w here y our f ormpage w ill b e o n t he s ite.●Views :n umber o f t he f orm v iews.●Submissions :n umber o f f orm s ubmissions.●Status :w hether t he f orm i s e nabled o r d isabled.●Modified t ime: w hen t he f orm i s l ast m odified.●Action :l ist t he a ctions a vailable f or t he f orm:+Edit t he f orm.+Delete t he f orm.+View t he f orm o n t he f rontend.- T o v iew a ll c olumns o f t he g rid, c lick C olumns d rop-down a bove t he g rid. T ick t he checkboxes o f c olumns t hat y ou w ant t o b e v isible i n t he g rid. U ntick t he c heckboxes o f columns t hat y ou w ant t o b e i nvisible i n t he g rid:- T ick t he c heckboxes o f c orresponding f orms i n t he first c olumn, t hen c lick A ctionsdrop-down a bove t he g rid t o D elete t hese f orms:- Y ou c an filter f orms b y I D, M odified t ime, N ame, U RL K ey, a nd S tatus:- C lick B lue F orm B uilder F orms d rop-down o n t he t op l eft c orner a nd y ou’ll s ee t he following o ptions:●Add N ew F orm :a dd a n ew f orm.●Manage F orms :g o t o t he f orm l isting p age .●Plugins :v iew a ll p lugins o f B lue F orm B uilder.●File U ploads :g o t o t he file u pload l isting p age .●Settings :a ccess t he e xtension’s c onfiguration .●Form S ubmissions :g o t o t he s ubmission l isting p age .Please n ote t hat y ou c an find t his d rop-down l ist i n t he f orm e dit p age ,file u pload l isting page a nd s ubmission l isting p age .2) A dd N ew F ormTo a dd a n ew f orm, y ou c an:- C lick t he A dd N ew F orm b utton o n t he t op-right c orner o f t he f orm l isting p age :- O r n avigate t o C ontent -> B lue F orm B uilder -> A dd N ew F orm :A p opup w ill b e d isplayed w ith 4o ptions:●Blank: c reate a n ew f orm f rom s cratch. A fter e ntering t he f orm n ame a nd c lickingthe S ave F orm b utton, y ou w ill b e r edirected t o t he f orm e dit p age .●Template: c ontain p re-built f orm t emplates.On t he l eft s ection, t here i s a l ist o f f orm t emplates. O n t he r ight s ection, y ou c an p review each t emplate. C lick o n t he p review i mage t o z oom i t o ut.In t he b ox n ext t o t he S ave F orm b utton, y ou c an c hange t he d efault n ame o f t he template. C lick t he S ave F orm b utton t o s ave t he t emplate a nd y ou w ill g o t o t he f orm edit p age w here y ou c an c ustomize t he t emplate.●Duplicate: d uplicate a ny f orm y ou h ave. C lick t he d rop-down i con i n t he c enter o fthe p opup a nd c hoose t he f orm y ou w ant t o d uplicate.Change t he n ame o f t he d uplicated f orm i n t he b ox n ext t o t he S ave F orm b utton.Click t he S ave F orm b utton t o g o t o t he f orm e dit p age .●Import: a llow y ou t o i mport t he f orm files (CSV). T his f unction i s u seful i n c ase y ouhave m ultiple w ebsites t hat a ll i nstall B lue F orm B uilder. S o y ou c an e xport f ormsfrom o ne w ebsite a nd i mport i t i nto a nother w ebsite. C lick U pload F orm F ile i n t he center o f t he p opup t o u pload t he c sv file o f t he f orm.You c an c hange t he n ame o f t he i mported f orm i n t he b ox a nd c lick t he S ave F orm button t o g o t o t he f orm e dit p age .3) F orm E dit P ageThe e dit p age w ill o pen w hen y ou c reate, e dit, o r d uplicate a f orm.On t he t op o f t he e dit p age, y ou’ll s ee t he f ollowing b uttons:●Back :g o b ack t o t he f orm l isting p age .●Delete :d elete t he f orm.●Export S ubmissions :e xport f orm s ubmissions t o C SV file.●View :v iew t he f orm o n f rontend.●Save :+ S ave :s ave t he f orm a nd s tay o n t he p age.+ S ave &N ew :s ave t he f orm a nd c reate a n ew o ne.+ S ave &D uplicate :s ave t he f orm a nd d uplicate i t.+ S ave &C lose :s ave t he f orm a nd r eturn t o t he f orm l isting p age .The f orm e dit p age c onsists o f 3s ections a s f ollows:3.1 M agezon B lue F orm B uilderThe s ection c ontains a b uilder i nterface t hat a llows y ou t o c reate y our f orm.- C lick p lus i con o n t he t op b ar t o a dd e lements f rom a p opup:- C lick t he i con n ext t o p lus i con t o c hoose a t emplate f rom a p opup.●Click t he d rop-down i con t o p review a t emplate.●Click p lus i con t o s elect t he t emplate. T he c hosen t emplate w ill b e d isplayed i n t heform b uilder s ection a nd y ou c an c ustomize i t.For o ther o ptions, p lease r efer t o t his g uide .3.2 S ettingsIn t his s ection, y ou w ill s ee a l ist o f s ettings f or t he f orm.3.2.1 G eneral●Form N ame: e nter f orm n ame.●Enable F orm: i f e nabled, c ustomers c an v iew t he f orm o n t he f rontend s tore.●Enable r eCaptcha3 :i f e nabled, r eCaptcha v3 w ill b e u sed f or t he r eCaptchaelement (please m ake s ure t hat y ou u se r eCaptcha e lement i n t he f orm a nd e nterthe k ey p air f or r eCaptcha v3 ). I f d isabled, r eCaptcha v2 w ill b e u sed f or t hereCaptcha e lement (with k ey p air e ntered ).●Disable F orm P age: I f t he f orm p age i s d isabled, c ustomers c an’t a ccess t he f ormpage.●Show i n T op L inks: d isplay t he f orm l ink o n t he t op l ink b ar o f y our w ebsite, l ikethis:●Position :s et p riority l evel f or t he f orm. T he s maller t he n umber i s, t he h igher t hepriority i s. T his c an b e u sed, f or e xample, i n c ase y ou d isplay m any f orms i n o neposition. S o t he f orm w ith h igher p riority w ill b e d isplayed o n t he t op.3.2.2 E mail N otificationsThis i s w here y ou c onfigure t he n otification e mails t hat a re s ent t o a dmins a nd c ustomers about a f orm s ubmission.a. A dmin- E nable A dmin N otification: e nable/disable s ending e mail n otifications t o a dmin.- S ender N ame: n ame o f t he s ender.- S ender E mail :e mail a ddress o f t he s ender.- R eply T o :e nter t he e mail a ddress t o w hich t he e mail r ecipients w ill r eply.- S end E mail(s) T o :e nter e mail a ddresses o f o ther m embers i n y our c ompany w ho y ou want t o g et n otified o f f orm s ubmissions. W hen a f orm i s s ubmitted, e mail n otifications w ill be s ent t o t hese a ddresses. Y ou c an a dd m ultiple e mails b y s eparating t hem w ith commas.- B BC :s end n otification e mails t o B CC r ecipients. Y ou c an a dd m ultiple e mails b y separating t hem w ith c ommas.- E mail S ubject a nd E mail B ody a llow y ou t o e dit t he c ontent o f e mail s ubject a nd b ody respectively.- C reate d ynamic c ontent f or S ender N ame ,S ender E mail ,R eply t o ,E mail S ubject and E mail B ody b y i nserting v ariables (click t he i cons h ighlighted b y o range c ircles i n t he above i mage a nd y ou w ill s ee a d rop-down l ist c ontaining v ariables). S ee d etails a bout variables h ere .- A ttach file u ploaded t o e mails :b y e nabling t his f unction, y ou c an a ttach u ploaded files to n otification e mails s ent t o a dmins (in c ase y our f orm h as t he file u pload field).b. C ustomerThis s ection a llows y ou t o c ustomize e mail n otifications s ent t o c ustomers.NOTE :I n o rder t o s end e mail n otifications t o c ustomers, first m ake s ure t hat y our f orm includes t he E mail e lement .O pen E mail e lement’s s ettings, t hen i n t he “Advanced” t ab, turn o n t he S end A utoresponder b utton.- Y ou c an c reate d ynamic c ontent f or E mail S ubject a nd E mail B ody b y i nserting variables (click t he i cons h ighlighted b y o range c ircles i n t he a bove i mage a nd y ou w ill s ee the d rop-down l ist c ontaining v ariables). S ee d etails h ere .- A ttach file u pload t o e mails :b y e nabling t his f unction, y ou c an a ttach u ploaded files t o the n otification e mails s ent t o c ustomers (in c ase y our f orm h as t he file u pload field).3.2.3 S uccess M essageWhere y ou c ustomize t he m essage t hat w ill b e d isplayed t o c ustomers a fter t hey s ubmit a form s uccessfully. Y ou c an c ustomize n ot o nly t he c ontent b ut a lso t he h eader a nd f ooterof t he s uccess m essage.- U se W YSIWYG e ditor t o e nter s uccess m essage c ontent. Y ou c an m ake t he s uccess message b ecome d ynamic b y i nserting v ariables. C lick I nsert F orm V ariables a bove t he editor a nd c hoose a ppropriate v ariables f rom t he d rop-down. L earn m ore h ere .In s uccess m essage c ontent, y ou c an i nsert [track_link] v ariable l ike t his:On f rontend, t he [track_link] v ariable w ill b e r eplaced w ith t he l ink b y c licking o n w hich, customers c an v iew t heir s ubmission o n f rontend:- Y ou c an a lso e nter H eader C ontent a nd F ooter C ontent .- T he F ooter C ontent i n s uccess m essage i s r elated t o t he f unction o f r edirecting customers a fter s ubmission.If y ou o pen S ettings >A dvanced ,t hen fill o ut R edirect o n S ubmit a nd R edirect X seconds a fter f orm s ubmit fields, t he f ooter c ontent o f t he s uccess m essage w ill s how up o n f rontend.If y ou e nter [redirect_time] v ariable i n t he F ooter C ontent field, i t w ill b e r eplaced w ith t he value filled i n R edirect X s econds a fter f orm s ubmit w ith r edirect c ountdown.If y ou e nter [redirect_link] v ariable, i t w ill b e r eplaced w ith t he l ink filled i n R edirect o n Submit .Let’s s ee h ow i t l ooks o n f rontend:- C hoose d isplay S tyle f or t he s uccess m essage w ith 2s tyles a vailable.- I f y ou c hoose S tyle1, y ou c an c ustomize C olor f or t he t ext i n h eader a nd B ackground Color f or t he h eader. I n B order &C ircle C olor ,y ou c an c hoose c olor f or t he l ine t hat separates t he h eader a nd t he c ontent b elow.>> S tyle1 o n f rontend:- I f y ou c hoose S tyle2, y ou c an c ustomize t he c olor f or t he i con i n B order &C ircle C olor .>> S tyle 2o n f rontend:3.2.4 F orm i n W ebsitesChoose s tore v iews t o d isplay t he f orm.3.2.5 C ustomer G roupsChoose w hich c ustomer g roups c an v iew t he f orm.3.2.6 S earch E ngine O ptimization (SEO)Where y ou c reate S EO-friendly U RL K ey, M eta T itle, M eta D escription a nd M eta K eywords for t he f orm p age.3.2.7 C ustom C SSThis s ection i s d esigned f or d evelopers t o a dd a ny C SS f or a dvanced c onfiguration.3.2.8 C ustom J avascriptThis s ection i s d esigned f or d evelopers t o a dd J avascript c ode f or a dvanced c onfiguration.3.2.9 A dvanced- W idth: s et w idth (px) f or t he f orm.- A uto S ave F orm P rocess: w ith t his f unction, u sers’ f orm d ata w ould b e a uto-saved a s they fill t he f orm. I t m eans t he d ata t hat u sers filled i n t he f orm w ould s till r emain a fter t hey refresh t he p age, a nd t hey j ust n eed t o c ontinue filling t he f orm i nstead o f filling f rom s cratch.- D isable m ultiple s ubmissions f rom s ame d evice: t his f unction h elps y ou p revent t he form f rom b eing s ubmitted m ultiple t imes b y t he s ame u ser. W hen t he b utton i s t urned o n, you w ill s ee t he f ollowing o ptions:●Disable C ondition :c hoose t he c ondition t o p revent m ultiple s ubmissions f rom t hesame u ser i ncluding: C ustomer I D, I P A ddress a nd F orm F ields. I f y ou c hoose F orm Fields, t hen F orm F ields d rop-down w ill a ppear w here y ou c an s elect y our w anted form fields. R emember t hat y ou c an s elect m ultiple f orm fields.●Message w hen d isabled :t he m essage t hat s hows u p t o n otify w hen a u sersubmits t he f orm m ore t han o nce.- D isable f orm w hen i t r eaches X s ubmissions :d isable t he f orm w hen i ts s ubmissions reach a c ertain n umber.- R edirect o n S ubmit: e nter U RL o f t he p age t o w hich y ou w ant t o r edirect y our customers a fter s ubmitting t he f orm.- R edirect X s econds a fter f orm s ubmit :r edirect c ustomers t o t he p age y ou e nter i n the a bove ‘R edirect o n S ubmit ’field a fter a c ertain n umber o f s econds a fter f orm submission.- S ubmission P refix :a dd p refix t o t he f orm s ubmission I D f or e asy m anagement.- L ayout :c hoose l ayout f or t he f orm p age i ncluding 6o ptions:●Empty● 1 c olumn● 2 c olumns w ith l eft b ar● 2 c olumns w ith r ight b ar● 3 c olumns● 1 c olumn F ull W idth (lets y ou d isplay t he f orm p age i n f ull w idth).- E xport F orm F ile :e xport f orm file t o C SV s o t hat y ou c an i mport i t i nto a ny o ther Magento 2s ites w ith t he e xtension i nstalled.3.2.10 E mbedCopy a nd p aste t he p rovided c ode i nto t he W YSIWYG e ditor o f a p age/block, i nto a template file o r a l ayout file s o t hat y ou c an i nsert t he f orm a nywhere o n y our w ebsite.。