Join PrintXpand at Drupa 2024. Book your slot now. Book a Meeting

How Do I Install the Product Designer Tool Into My Website?

PrintXpand’ intuitive web-to-print Product Designer tool is built on Magento2 Platform. Therefore to install the Product Designer extension, you must have a Magento2 user login. Your user login must have the permissions to write to the Magento file system. 

Note: If you are linux users visit this link to find out the installation steps to install the product designer tool to your linux server. 

Stick to the following steps to ensure a safe and successful installation.

1) Enable the Extension: 

Step 1: Log in to the Magento server. 

Step 2: Go to your Magento install dir:

cd <your Magento install dir>

Step 3: 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

 2) Installation:

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: Install the html2Pdf and php-sass libraries using following commands:

composer require spipu/html2Pdf

composer require panique/php-sass

For Composer File, add the following code:

{

    “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\\”: “”

        }

    }

}

For Composer File Theme colors addon, add the following code:

{

    “name”: “biztech/themecolors”,

    “description”: “Web to print solution”,

    “require”: {

        “php”: “~7.0.0|~7.1.0|~7.2.0”,

        “panique/php-sass”:”*”

     },

    “type”: “magento2-module”,

    “version”: “2.0.0”,

    “license”: [

        “OSL-3.0”,

        “AFL-3.0”

    ],

    “autoload”: {

        “files”: [ “registration.php” ],

        “psr-4”: {

            “Biztech\\ThemeColors\\”: “”

        }

    }

}

Step 3: After the successful installation run the following command on Magento2 root directory

php bin/magentosetup:upgrade

If you see a blank page or permission error, go to the 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. To clear the cache:

Go to SYSTEM ->TOOLS(section) -> CACHE MANAGEMENT.

Step 5: After the successful installation. To check whether you have successfully installed the extension or not, go to STORES -> Configuration. If you can see the ‘Product Designer Settings’ under PrintXpand tab then the tool is successfully installed.

3) Extension Activation: 

Activating the installed extension is a must to start on with the product designer tool. 

Step1: Get an activation key

With the purchase of PrintXpand’s Product Designer tool you must have received a unique product activation key, which is important to integrate the tool to your website. 

FYI:  This activation key only serves the purpose of integrating our product with your website. It is unique and differs from customer to customer. Please make sure to safely save this key and not to share it with anybody else. 

You can find the activation key in two locations:

  1. In the Order Confirmation Mail that you must have received at the time of checkout.
  2. Login into your account at the website using the email and password that you provided at the checkout process. Go to Downloadable Options, here you will find your unique activation key.

Copy this activation key.

Step2: Activate your extensions

  • Log into the Magento Admin Panel.
  • Go to STORES -> Configurations -> PrintXpand -> Product Designer Settings.
  • Here, enter the activation key that you have copied in the ‘Activation Key’ field.
  • Click the ‘Save Config’ button. 

Once you will install our extension on your store then you will need to take care of below files on the front-end and back-end.

Overridden Default Magento Front-end Files/Blocks:

  1. For Category Page (Listing page, search page):
  • vendor/magento/module-catalog/view/frontend/templates/product/list.phtml -> app/code/Biztech/Productdesigner/view/frontend/templates/product/list.phtml
  1. For Product Page:
  • vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml -> app/code/Biztech/Productdesigner/view/frontend/layout/catalog_product_view.xml
  • vendor/magento/module-catalog/view/frontend/templates/product/view/addtocart.phtml ->app/code/Biztech/Productdesigner/view/frontend/templates/product/view/addtocart.phtml
  1. For Cart Page:
  • vendor/magento/module-catalog/view/frontend/layout/checkout_cart_item_renderers.xml->app/code/Biztech/Productdesigner/view/frontend/layout/checkout_cart_item_renderers.xml
  • vendor/magento/module-checkout/view/frontend/templates/cart/item/default.phtml -> app/code/Biztech/Productdesigner/view/frontend/templates/cart/item/default.phtml
  1. Call below observer For Quote Total (To add custom design price and additional options in product price):
  • catalog_product_load_after
  • sales_order_place_before
  • checkout_cart_product_add_after
  1. Call below observer for multiple currency support
  • controller_action_postdispatch

Overridden Default Magento Back-end Files/Blocks:

  1. For Catalog Product Grid (To add “Make Design” column in grid):
  • vendor/magento/module-catalog/view/adminhtml/layout/catalog_product_index.xml ->

app/code/Biztech/Productdesigner/view/adminhtml/layout/catalog_product_index.xml

  1. For Product Info Page Images Tab (To add “Image Sides” and “Edit Design Area” columns in media grid):
  • MagentoProductVideoObserverChangeTemplateObserver->BiztechProductdesignerObserverChangeTemplateObserver
  • MagentoCatalogModelProductGalleryCreateHandler->BiztechProductdesignerModelPluginCatalogProductGalleryCreateHandler
  • vendor/magento/module-catalog/Model/ResourceModel/Product/Gallery.php ->app/code/Biztech/Productdesigner/Model/ResourceModel/Product/Gallery.php
  1. For Order Page (To add “View Designs” link for the designed product):
  • vendor/magento/module-sales/view/adminhtml/layout/sales_order_view.xml ->Biztech/Productdesigner/view/adminhtml/layout/sales_order_view.xml
  • 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):
  • app/code/Biztech/Productdesigner/view/frontend/layout/customer_account.xml
  • app/code/Biztech/Productdesigner/view/frontend/templates/productdesigner/customer/account/mydesign.phtml
Related Articles