M2 Product Designer Tool V2.0 安装指南说明书

Introduction
This is the installation guide of M2 Product Designer Tool V2.0 for the quick installation of the tool. For
the complete understanding of the tool, please refer to our comprehensive online user manual here. Installation & Activation
Enable the Extension
Step 1:
•Log in to the Magento server as, or switch to, a user who has permissions to write to the Magento file system.
Step 2:
•Go to your Magento install dir:cd <your Magento install dir>
Step3:
•Enable the extension:php bin/magentomodule:enableBiztech_Productdesigner
Step 4:
•Finally, update the database:
php bin/magentosetup:upgrade
php bin/magentocache:flush
php bin/magentosetup:static-content:deploy
Installation Steps
We recommend Installing the Extension via Composer. For manual installation, please find the mentioned steps below:
Step 1:
•Upload all folders from the extension package to the installation directory of your Magento software using an FTP client.
Step 2:
•Now you need to install the html2Pdf and php-sass libraries using following commands: composer require spipu/html2Pdf
composer require panique/php-sass
COMPOSER FILE:
{
"name": "biztech/productdesigner",
"description": "Web to print solution",
"require": {
"php": "~7.0.0|~7.1.0|~7.2.0",
"spipu/html2Pdf":"*",
},
"type": "magento2-module",
"version": "2.0.0",
"license": [
"OSL-3.0",
"AFL-3.0"
],
"autoload": {
"files": [ "registration.php" ],
"psr-4": {
"Biztech\\Productdesigner\\": ""
}
}
}
Step 3:
•After the successful installation you have to run the command on Magento2 root directory- “php bin/magentosetup:upgrade”
•If you see blank page or permission error, go to Terminal (Linux)/ Command Prompt (Windows).
▪cd [magento root directory] [var]
•Run the following command
▪$ chmod –R 777 *
Step 4:
•After running the command, log into the admin panel and clear the Cache.
•Go to SYSTEM ->Tools (section) -> CACHE MANAGEMENT to clear the cache.
Step 5:
•After the successful installation, you can see the ‘Product Designer Settings’ under BRUSHYOURIDEAS tab inside STORES->Configuration.
Extension Activation
Step1: Get an activation key
•Copy the activation key from the Order Confirmation Mail. OR Login into your account at website using the e-mail and password that you provided at checkout process.
•Go to Downloadable Options and copy the activation key for the Product Designer Tool V2.0. Step2: Activate your extensions
•Log into Magento Admin Panel and go to STORES -> Configurations ->BRUSHYOURIDEAS/ Product Designer Settings and enter the activation key in the ‘Activation Key’ field for the Product Designer extension then click the ‘Save Config’.
•Once you will install our extension on your store then you will need to take care of below files on front-end and back-end.
Overridden Default Magento Front-end Files/Blocks:
1.For Category Page (Listing page, search page):
a)vendor/magento/module-catalog/view/frontend/templates/product/list.phtml ->
app/code/Biztech/Productdesigner/view/frontend/templates/product/list.phtml
2.For Product Page:
a)vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml ->
app/code/Biztech/Productdesigner/view/frontend/layout/catalog_product_view.xml
b)vendor/magento/module-catalog/view/frontend/templates/product/view/addtocart.phtml ->
app/code/Biztech/Productdesigner/view/frontend/templates/product/view/addtocart.phtml
3.For Cart Page:
a)vendor/magento/module-catalog/view/frontend/layout/checkout_cart_item_renderers.xml ->
app/code/Biztech/Productdesigner/view/frontend/layout/checkout_cart_item_renderers.xml
b)vendor/magento/module-checkout/view/frontend/templates/cart/item/default.phtml ->
app/code/Biztech/Productdesigner/view/frontend/templates/cart/item/default.phtml
4.Call below observer For Quote Total (To add custom design price and additional options in product
price):
a)catalog_product_load_after
b)sales_order_place_before
c)checkout_cart_product_add_after
5.Call below observer for multiple currency support
a)controller_action_postdispatch
Overridden Default Magento Back-end Files/Blocks:
1.For Catalog Product Grid (To add "Make Design" column in grid):
a)vendor/magento/module-catalog/view/adminhtml/layout/catalog_product_index.xml ->
app/code/Biztech/Productdesigner/view/adminhtml/layout/catalog_product_index.xml
2.For Product Info Page Images Tab (To add "Image Sides" and "Edit Design Area" columns in media grid):
a)Magento\ProductVideo\Observer\ChangeTemplateObserver-
>Biztech\Productdesigner\Observer\ChangeTemplateObserver
b)Magento\Catalog\Model\Product\Gallery\CreateHandler->
Biztech\Productdesigner\Model\Plugin\Catalog\Product\Gallery\CreateHandler
c)vendor/magento/module-catalog/Model/ResourceModel/Product/Gallery.php ->
app/code/Biztech/Productdesigner/Model/ResourceModel/Product/Gallery.php
3.For Order Page (To add "View Designs" link for designed product):
a)vendor/magento/module-sales/view/adminhtml/layout/sales_order_view.xml ->
Biztech/Productdesigner/view/adminhtml/layout/sales_order_view.xml
b)vendor/magento/module-sales/view/adminhtml/templates/items/column/name.phtml ->
app/code/Biztech/Productdesigner/view/adminhtml/templates/items/column/name.phtml
New file added in Default customer account section:
1.For My Designs page (Customer account section):
a)app/code/Biztech/Productdesigner/view/frontend/layout/customer_account.xml
b)app/code/Biztech/Productdesigner/view/frontend/templates/productdesigner/customer/account/
mydesign.phtml
Angular Installation Steps:
•Please fire below commands on terminal to install npm, nodejs and angular cli for specifically Linux servers.
▪sudo apt-get install -y nodejs
▪sudo apt-get purge nodejsnpm
▪curl -sL https:///setup_7.x | sudo -E bash –
▪sudonpm install -g @angular/cli
•Install angular - https://cli.angular.io/
•Please keep below version to make compatible angular with our tool
Angular CLI: 7.3.8
Node: 8.16.0
Angular: 7.2.12
npm: 6.4.1
"@ngu/carousel": "^1.5.5",
"angular-bootstrap-colorpicker": "^3.0.32",
"angular7-pubsub": "^2.1.1",
"bootstrap": "^4.3.1",
"cropperjs": "^1.5.1",
"fabric": "^3.2.0",
"fabric-customise-controls": "^2.0.2-beta",
"file-saver": "^2.0.2",
"intro.js": "^2.9.3",
"ng2-cache": "^0.2.1",
"ngx-bootstrap": "^4.0.1",
"ngx-filesaver": "^2.2.1",
"ngx-infinite-scroll": "^7.2.0"
•After installing angular and following above steps, extract angular.zip on desired directory and merge it with your angular setup. We need to connect angular setup with magento setup. For this we need to change store id, currency code and baseURL in index.html placed under 'src' directory.
Please refer screen-shot.
•After installing angular, extract angular.zip on desired directory. We need to connect angular setup with magento setup. For this we need to change store id, currency code and baseURL in index.html placed under 'src' directory. Please refer screen-shot.
•After above changes, open terminal and go to angular root directory. Then fire "ng serve"
command and run localhost:4200/id/{productid} in browser. (Please note that this url will work only if ng serve compilation complete successfully)。