For many of the most popular shopping carts, we have written plugins that will allow you to use launch the Designer from within your shopping cart. Plugins are currently available for:
- Magento v1
- Magento v2
- Prestashop
- WordPress-WooCommerce
¶ Magento v1
Magento is an open source based ecommerce web application that was launched on March 31, 2008. It was developed by Varien, now a wholly-owned subsidiary of Adobe.
Our extension for Magento is compatible only with Magento Community edition. It can be installed through the standard Magento Connect 2.0 interface.
The Magento Connect 2.0 key is:
http://connect20.magentocommerce.com/community/Print_Science_Designer_Web_to_Print
¶ Installation
Installation
To install the Designer extension for Magento, follow these instructions:
Step 1: Backup your database and files Before uploading any files or making any changes, please make a backup copy of both your database and your files.
Step 2: Navigate to the Magento Connect Manager In the Magento admin panel, select menu item: System > Magento Connect > Magento Connect Manager
Step 3: Login to Magento Connect Manager
Step 4: Paste extension key In the area labeled Install New Extensions, paste the extension key below then hit "Install" button: http://connect20.magentocommerce.com/community/Print_Science_Designer_Web_to_Print
Step 5: Clear the Magento cache Delete all the content in the folder: [magento store]/var/cache
¶ Manual edits for custom theme
If you are not using the default Magento theme please follow these instructions to adapt your Magento theme for use with the Print Science Designer extension:
1\. Copy the folder: /skin/frontend/base/default/printscience\_personalization
to folder: /skin/frontend/default/YOUR\_THEME/
2. Edit /app/design/frontend/base/YOUR\_THEME/layout/printscience\_personalization.xml
a. Remove all tags like:
<action method="setTemplate">...</action>
<action method="addItemRender">...</action>
<action method="setCartTemplate">...</action>
<action method="setEmptyTemplate">...</action>
3. Edit /app/design/frontend/base/YOUR\_THEME/template/printscience\_personalization/catalog/product/view.phtml
a. Place the following lines at the top of file:
$\_personalizationHelper = $this->helper('printscience\_personalization/output');
$window\_type = Mage::getStoreConfig('catalog/personalization/window\_type');
b. Find: this.form.submit();
and replace it with
<?php if ($window\_type=='2' && $\_personalizationHelper->isPersonalizationEnabled($\_product)): ?>
jQuery("#header").css("z-index","1");
jQuery("#product\_addtocart\_form").attr("target","popup\_frame");
this.form.submit();
jQuery('#openpoup').trigger('click');
<?php else: ?>
this.form.submit();
<?php endif; ?>
4. Edit /app/design/frontend/base/YOUR\_THEME/template/printscience\_personalization/catalog/product/list.phtml
a. In the LIST MODE BLOCK:
i. Add the following lines to the top of the block:
$\_personalizationHelper = $this->helper('printscience\_personalization/output');
$window\_type = Mage::getStoreConfig('catalog/personalization/window\_type');
$background\_color = Mage::getStoreConfig('catalog/personalization/background\_color');
$margin\_width = Mage::getStoreConfig('catalog/personalization/margin\_width');
$window\_opacity = Mage::getStoreConfig('catalog/personalization/window\_opacity');
ii. Find:
<?php $buttonTitle = $this->\_\_('Add to Cart'); ?>
replace with:
<?php if ($\_personalizationHelper->isPersonalizationEnabled($\_product)): ?>
<?php $buttonTitle = $this->\_\_('Personalize'); ?>
<?php else: ?>
<?php $buttonTitle = $this->\_\_('Add to Cart'); ?>
<?php endif; ?>
iii. Find:
<p><button type="button" title="<?php echo $buttonTitle ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($\_product) ?>'"><span><span><?php echo $buttonTitle ?></span></span></button></p>
replace with:
<?php if ($\_personalizationHelper->isPersonalizationEnabled($\_product)): ?>
<?php if ($window\_type=='2'):?>
<?php if(strpos($this->getAddToCartUrl($\_product), "uenc")!==false): ?>
<p><button type="button" title="<?php echo $buttonTitle ?>" class="button btn-cart" onclick="setPersonalizeLocation('<?php echo $this->getAddToCartUrl($\_product) ?>', jQuery(this.form))"><span><span><?php echo $buttonTitle ?></span></span></button></p>
<?php else: ?>
<p><button type="button" title="<?php echo $buttonTitle ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($\_product) ?>')"><span><span><?php echo $buttonTitle ?></span></span></button></p>
<?php endif; ?>
<?php else: ?>
<p><button type="button" title="<?php echo $buttonTitle ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($\_product) ?>'"><span><span><?php echo $buttonTitle ?></span></span></button></p>
<?php endif; ?>
<?php else: ?>
<p><button type="button" title="<?php echo $buttonTitle ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($\_product) ?>'"><span><span><?php echo $buttonTitle ?></span></span></button></p>
<?php endif; ?>
b. In the GRID MODE BLOCK:
i. Find:
<?php $buttonTitle = $this->\_\_('Add to Cart'); ?>
replace with:
<?php if ($\_personalizationHelper->isPersonalizationEnabled($\_product)): ?>
<?php $buttonTitle = $this->\_\_('Personalize'); ?>
<?php else: ?>
<?php $buttonTitle = $this->\_\_('Add to Cart'); ?>
<?php endif; ?>
ii. Find:
<button type="button" title="<?php echo $buttonTitle ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($\_product) ?>')"><span><span><?php echo $buttonTitle ?></span></span></button>
replace with:
<?php if ($\_personalizationHelper->isPersonalizationEnabled($\_product)): ?>
<?php if ($window\_type=='2'):?>
<?php if(strpos($this->getAddToCartUrl($\_product), "uenc")!==false): ?>
<button type="button" title="<?php echo $buttonTitle ?>" class="button btn-cart" onclick="setPersonalizeLocation('<?php echo $this->getAddToCartUrl($\_product) ?>', jQuery(this.form))"><span><span><?php echo $buttonTitle ?></span></span></button>
<?php else: ?>
<button type="button" title="<?php echo $buttonTitle ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($\_product) ?>')"><span><span><?php echo $buttonTitle ?></span></span></button>
<?php endif; ?>
<?php else: ?>
<button type="button" title="<?php echo $buttonTitle ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($\_product) ?>')"><span><span><?php echo $buttonTitle ?></span></span></button>
<?php endif; ?>
<?php else: ?>
<button type="button" title="<?php echo $buttonTitle ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($\_product) ?>')"><span><span><?php echo $buttonTitle ?></span></span></button>
<?php endif; ?>
c. At the bottom of the file, place the following code:
<?php
if($window\_type=='2'):
?>
<a id="openpoup"></a>
<a id="close-btn"></a>
<style>
.modalPopLite-mask {
background-color:#<?php echo (isset($background\_color)?$background\_color:"#000000") ?> !important;
}
#popup-wrapper
{
width:1150px;
height:600px;
left:0!important;top:0!important;
background-color: #<?php echo $background\_color; ?> !important;
}
.modalPopLite-wrapper
{
border:none!important;
}
.modalPopLite-mask {
opacity:<?php echo ($window\_opacity!=''?$window\_opacity:"0.6") ?> !important;
}
#popup\_frame{
border:0px;
}
</style>
<script type="text/javascript">
jQuery(function (){
var maskWidth = document.body.clientWidth;
var maskHeight = jQuery(window).height();
var margin = '<?php if(isset($margin\_width) && $margin\_width > 0) { echo $margin\_width; } else { echo "0"; } ?>';
jQuery("#popup-wrapper").css("width",(maskWidth - (2\*margin)));
jQuery("#popup-wrapper").css("height",(maskHeight - 2\*margin));
jQuery("#popup\_frame").css("width",(maskWidth - 2\*margin));
jQuery("#popup\_frame").css("height",(maskHeight - 2\*margin));
jQuery("#header").css("z-index","10");
jQuery(".personalize\_btn\_link").attr("target","popup\_frame");
jQuery('#popup-wrapper').modalPopLite({ openButton: '#openpoup', closeButton: '#close-btn', isModal: true });
//jQuery('#modalPopLite-mask1').attr("style","opacity: 0.9");
});
function closethepopup(){
jQuery('#popup\_frame').attr("src", "");
jQuery('#close-btn').trigger('click');
}
function setPersonalizeLocation(url, formObj) {
jQuery("#header").css("z-index","1");
if (jQuery(formObj).length > 0)
{
jQuery(formObj).attr("action",url);
jQuery(formObj).attr("target","popup\_frame");
jQuery(formObj).submit();
}
jQuery('#openpoup').trigger('click');
return false;
}
</script>
<div id="popup-wrapper"><iframe name="popup\_frame" id="popup\_frame"></iframe>
</div>
<?php
endif;
?>
5. Edit app/design/frontend/base/YOUR\_THEME/template/printscience\_personalization/catalog/product/view/addtocart.phtml
a. Place the following at the top of the file:
<?php
$\_personalizationHelper = $this->helper('printscience\_personalization/output');
$\_product = $this->getProduct();
$window\_type = Mage::getStoreConfig('catalog/personalization/window\_type');
$background\_color = Mage::getStoreConfig('catalog/personalization/background\_color');
$margin\_width = Mage::getStoreConfig('catalog/personalization/margin\_width');
$window\_opacity = Mage::getStoreConfig('catalog/personalization/window\_opacity');
?>
b. Find:
<?php $buttonTitle = $this->\_\_('Add to Cart'); ?>
replace with:
<?php if ($\_personalizationHelper->isPersonalizationEnabled($\_product)): ?>
<?php $buttonTitle = $this->\_\_('Personalize'); ?>
<?php else: ?>
<?php $buttonTitle = $this->\_\_('Add to Cart'); ?>
<?php endif; ?>
c. Find:
<button type="button" title="<?php echo $buttonTitle ?>" class="button btn-cart" onclick="productAddToCartForm.submit(this)"><span><span><?php echo $buttonTitle ?></span></span></button>
replace with:
<?php if($window\_type=='0'): ?>
<button type="button" title="<?php echo $buttonTitle ?>" class="button btn-cart exclusive personalize\_btn"><span><span><?php echo $buttonTitle ?></span></span></button>
<?php else: ?>
<button type="button" title="<?php echo $buttonTitle ?>" class="button btn-cart exclusive personalize\_btn" onclick="productAddToCartForm.submit(this)"><span><span><?php echo $buttonTitle ?></span></span></button>
<?php endif; ?>
d. Place the following at the bottom of the file:
<?php
if($window\_type=='2'):
?>
<a id="openpoup"></a>
<a id="close-btn"></a>
<style>
.modalPopLite-mask {
background-color:#<?php echo (isset($background\_color)?$background\_color:"#000000") ?> !important;
}
#popup-wrapper
{
width:1150px;
height:600px;
left:0!important;top:0!important;
background-color: #<?php echo $background\_color; ?> !important;
}
.modalPopLite-wrapper
{
border:none!important;
}
.modalPopLite-mask {
opacity:<?php echo ($window\_opacity!=''?$window\_opacity:"0.6") ?> !important;
}
#popup\_frame{
border:0px;
}
</style>
<script type="text/javascript">
jQuery(function (){
var maskWidth = document.body.clientWidth;
var maskHeight = jQuery(window).height();
var margin = '<?php if(isset($margin\_width) && $margin\_width > 0) { echo $margin\_width; } else { echo "0"; } ?>';
jQuery("#popup-wrapper").css("width",(maskWidth - (2\*margin)));
jQuery("#popup-wrapper").css("height",(maskHeight - 2\*margin));
jQuery("#popup\_frame").css("width",(maskWidth - 2\*margin));
jQuery("#popup\_frame").css("height",(maskHeight - 2\*margin));
jQuery("#header").css("z-index","10");
jQuery(".anchoreditlink").attr("target","popup\_frame");
jQuery(".personalize\_btn\_link").attr("target","popup\_frame");
jQuery('#popup-wrapper').modalPopLite({ openButton: '#openpoup', closeButton: '#close-btn', isModal: true });
});
function closethepopup(){
jQuery('#popup\_frame').attr("src", "");
jQuery('#close-btn').trigger('click');
}
</script>
<div id="popup-wrapper"><iframe name="popup\_frame" id="popup\_frame"></iframe>
</div>
<?php
endif;
?>
6. Edit app/design/frontend/base/YOUR\_THEME/template/printscience\_personalization/catalog/product/view/media.phtml
a. Place the following at the top of the file:
<?php
$quoteId = $this->getRequest()->getParam('id');
$previews = $this->helper('printscience\_personalization/quote')->getPersonalizationPreviews($quoteId);
?>
<?php if(!empty($previews)):?>
<div class="product-image personalizationGallery">
<?php foreach($previews as $preview):?>
<img style="width:265px;" src="<?php echo $preview; ?>"/>
<?php endforeach;?>
</div>
<?php else:?>
b. add following to the end of file
<?php endif;?>
7. Edit app/design/frontend/base/YOUR\_THEME/template/printscience\_personalization/catalog/checkout/checkout/cart.phtml
a. Place the following at the top of file inside the <?php ?> tag:
$\_personalizationHelper = $this->helper('printscience\_personalization/output');
b. Place the following at the bottom of the file:
<?php
$window\_type = Mage::getStoreConfig('catalog/personalization/window\_type');
$background\_color = Mage::getStoreConfig('catalog/personalization/background\_color');
$margin\_width = Mage::getStoreConfig('catalog/personalization/margin\_width');
$window\_opacity = Mage::getStoreConfig('catalog/personalization/window\_opacity');
if($window\_type=='2'):
?>
<a id="openpoup"></a>
<a id="close-btn"></a>
<style>
.modalPopLite-mask {
background-color:#<?php echo (isset($background\_color)?$background\_color:"#000000") ?> !important;
}
#popup-wrapper
{
width:1150px;
height:600px;
left:0!important;top:0!important;
background-color: #<?php echo $background\_color; ?> !important;
}
.modalPopLite-wrapper
{
border:none!important;
}
.modalPopLite-mask {
opacity:<?php echo ($window\_opacity!=''?$window\_opacity:"0.6") ?> !important;
}
#popup\_frame{
border:0px;
}
</style>
<script type="text/javascript">
jQuery(function (){
var maskWidth = document.body.clientWidth;
var maskHeight = jQuery(window).height();
var margin = '<?php if(isset($margin\_width) && $margin\_width > 0) { echo $margin\_width; } else { echo "0"; } ?>';
jQuery("#popup-wrapper").css("width",(maskWidth - (2\*margin)));
jQuery("#popup-wrapper").css("height",(maskHeight - 2\*margin));
jQuery("#popup\_frame").css("width",(maskWidth - 2\*margin));
jQuery("#popup\_frame").css("height",(maskHeight - 2\*margin));
jQuery("#header").css("z-index","10");
jQuery(".personalize\_btn\_link").attr("target","popup\_frame");
jQuery('#popup-wrapper').modalPopLite({ openButton: '#openpoup', closeButton: '#close-btn', isModal: true });
});
function closethepopup(){
jQuery('#popup\_frame').attr("src", "");
jQuery('#close-btn').trigger('click');
}
function setPersonalizeLocation(url, formObj) {
jQuery("#header").css("z-index","1");
if (jQuery(formObj).length > 0)
{
jQuery(formObj).attr("action",url);
jQuery(formObj).attr("target","popup\_frame");
jQuery(formObj).submit();
}
jQuery('#openpoup').trigger('click');
return false;
}
<?php
$checkValid = $\_personalizationHelper->getFrontendParams();
if($checkValid=='1') : ?>
jQuery('.error-msg').css('display',"none");
<?php endif; ?>
</script>
<div id="popup-wrapper"><iframe name="popup\_frame" id="popup\_frame"></iframe>
</div>
<?php
endif;
?>
8. Edit app/design/frontend/base/YOUR\_THEME/template/printscience\_personalization/catalog/checkout/checkout/cart/item/default.phtml
a. Place the following at the top of file inside the <?php ?> tag:
$\_personalizationHelper = $this->helper('printscience\_personalization/output');
$window\_type = Mage::getStoreConfig('catalog/personalization/window\_type');
b. Find the first set of <td></td> tags i.e <td><?php if ($this->hasProductUrl()):?><a href="<?php echo $this->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getProductName()) ?>" class="product-image"><?php endif;?><img src="<?php echo $this->getProductThumbnail()->resize(75); ?>" width="75" height="75" alt="<?php echo $this->htmlEscape($this->getProductName()) ?>" /><?php if ($this->hasProductUrl()):?></a><?php endif;?></td>
and replace all the contents between these <td></td> tags with:
<td>
<?php $apiSessionKey = $this->getPersonalizationApiSessionKey() ?>
<?php if ($apiSessionKey):?>
<?php $personalizationPreviews = $this->getPersonalizationPreviews() ?>
<div class="personalizationGallery" style="height:50px">
<?php $class = '' ?>
<?php foreach ($personalizationPreviews as $previewImage):
if (!$class) { $class = 'class="first"'; }
?>
<a href="<?php echo $previewImage ?>" rel="fancybox\[<?php echo $apiSessionKey ?>\]" class="pgImg" target="\_blank"><img src="<?php echo $previewImage ?>" hight="100" alt="<?php echo $this->htmlEscape($this->getProductName()) ?>" <?php echo $class ?> /></a>
<?php endforeach; ?>
</div>
<div>
<?php if ($apiSessionKey):?>
<?php if ($window\_type=='2'):?>
<button type="button" title="<?php echo $this->\_\_('Re-edit') ?>" class="button btn-cart personalize\_btn\_link" onclick="setPersonalizeLocation('<?php echo $this->getResumePersonalizationUrl($\_item->getProduct()->getId()) ?>', this.form)"><span><span><?php echo $this->\_\_('Re-edit') ?></span></span></button>
<?php else: ?>
<button type="button" title="<?php echo $this->\_\_('Re-edit') ?>" class="button btn-cart personalize\_btn\_link" onclick="setLocation('<?php echo $this->getResumePersonalizationUrl($\_item->getProduct()->getId()) ?>')"><span><span><?php echo $this->\_\_('Re-edit') ?></span></span></button>
<?php endif; ?>
<?php endif; ?>
</div>
<?php else: ?>
<?php $personalizationPreviews = $this->getPersonalizationPreviews() ?>
<?php if(!empty($personalizationPreviews)):?>
<div class="personalizationGallery">
<?php $class = '' ?>
<?php foreach ($personalizationPreviews as $previewImage):
$imgArray = $previewImage\[1\]->me;
if (!$class) { $class = 'class="first"'; }
if($imgArray\['string'\]!='') : ?>
<a href="<?php echo $imgArray\['string'\]; ?>" rel="fancybox\[<?php echo 'product\_image\_'.$this->getItem()->getId() ?>\]" class="pgImg" target="\_blank"><img src="<?php echo $imgArray\['string'\]; ?>" width="75" alt="<?php echo $this->htmlEscape($this->getProductName()) ?>" <?php echo $class ?> /></a>
<?php endif; ?>
<?php endforeach; ?>
</div>
<?php else:?>
<?php if ($this->hasProductUrl()):?><a href="<?php echo $this->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getProductName()) ?>" class="product-image"><?php endif;?><img src="<?php echo $this->getProductThumbnail()->resize(75); ?>" width="75" height="75" alt="<?php echo $this->htmlEscape($this->getProductName()) ?>" /><?php if ($this->hasProductUrl()):?></a><?php endif;?>
<?php endif; ?>
<?php endif; ?>
</td>
9. Clear caches
¶ Configuration
Log in to your account on the Designer server then click on the "Accounts" link in the left menu bar. The Designer server will display the API data that you need to copy and paste into the Magento system:
In the Magento admin page, navigate to System/Configuration. In the left menu bar, select Catalog/Catalog. Find "Product Personalization" and configure:
- API Username
- API Key
- API Version. Use: 4.0.0
- URL for the Designer server. The URL should terminate in "/".
- API Image URL. Leave blank
- Window type. Select "Modal pop-up" to open Designer inside modal pop-up durectly in the Magento site.
- Background color of modal pop-up. Do not prefix color with "#".
- Modal window opacity. Set opacity in range 0%-100%. Opacity should terminate with "%"
- Margin around modal pop-up. Size of margin between full size of window and modal pop-up. Do not terminate with "px".
- Designer extension loads jquery: If your Magento theme loads jquery, set to "No".
The Key and the URL are available from your control panel on the Designer server. Please login to retrieve these.
¶ Product configuration
All aspects for the products such as price, weight etc. are configured in the normal way. When the Designer plugin is installed, you will see an extra item in the left menu bar: Personalization.
Before you configure in Magento, you must first complete the configuration for the product on the Designer server. Once the configuration in the Designer server is complete, note down product ID from the Designer server.
To complete the configuration in Magento:
- Set dropdown Enable Personalization to "Yes"
- Paste the Product ID from the Designer server into the field: Product ID
¶ Testing the installation
After you have installed the plug-in in your Magento store, you may want to confirm that the integration between your Magento store and the Designer server functions correctly:
Here is the procedure to follow:
- Configure the following API account information in your Magento store:
- Create a category in the Magento store
- Create a Simple product in the Magento store
- Configure the product you have created to:
- Test the product in the Magento store
API username: test
API Key: b2278139092af1d5f554fa2217bb9c86c814c2c7
API version: 4.0.0
API URL: http://he11.printscience.net/pdf_admin/rpc_api_v_4_0_0/
Use personalization: Yes
Product ID: 10
¶ Download PDF
After a customer has placed an order in your Magento site, you will download the PDF produced by the Print Science Designer. Log-in to the Magento administrative pages and navigate to the order. For each item in the order that uses the Designer, you will see a link with label "PDF file". Click this link to download the PDF produced by the Print Science Designer server as shown below:
¶ Magento v2
¶ Installation
Installation
Here are the steps required to install the Print Science Designer extension for Magento v2:
1. Download the extension package
2. Upload the extension package to the following directory: /app/code/
If the sub-directory /code/ does not yet exist, you should create it. Unzip the extension package. After the extension is unzipped, you should see the following directory structure:
3. Open a command line interface, navigate to the root of the Magento installation and issue the following 3 commands:
php bin/magento setup:upgrade php bin/magento setup:static-content:deploy -f php bin/magento setup:di:compile
¶ Configuration
Log in to your account on the Designer server then click on the "Accounts" link in the left menu bar. The Designer server will display the API data that you need to copy and paste into the Magento system:
In the Magento admin pages, navigate to Stores >> Configuration. In the left menu bar, select Catalog/Catalog. Find "Product Personalization" and configure:
¶ Product-configuration
All aspects for the products such as price, weight etc. are configured in the normal way. When the Designer plugin is installed, you will see an extra item in the left menu bar: Personalization.
Before you configure in Magento, you must first complete the configuration for the product on the Designer server. Once the configuration in the Designer server is complete, note down product ID from the Designer server.
¶ Download PDF
After a customer has placed an order in your Magento site, you will download the PDF produced by the Print Science Designer. Log-in to the Magento administrative pages and navigate to the order. For each item in the order that uses the Designer, you will see a link with label "PDF file". Click this link to download the PDF produced by the Print Science Designer server as shown below:
¶ Prestashop
PrestaShop is a free, open source e-commerce solution. It is written in PHP, uses the Smarty template engine as uses MySQL as the default database engine.
Prestashop is currently used by 150,000 shops worldwide. PrestaShop was the winner of the 2010 and 2011 Best Open-source Business Application awards.
¶ Installation for Prestashop v1.5
- Upload the directory "modules/printsciencedesigner" to the /modules/ directory.
- Login to the Prestashop administrative site.
- Browse to the Modules tab.
- Search for text "designer" in search field.
- You should see the "Print Science Designer" module in the search results. Click the "Install" button to install the module.
- Click the "Configure" link next to the module and configure the API information for your account on the Designer server.
- Upload the these files to the /override/classes/ directory:
- Upload the this file to the /override/controllers/admin/ directory:
- Upload the this directory to the /override/controllers/admin/templates/ directory:
- Delete the file class_index.php in /cache/ directory.
- Theme customizations
override/classes/Link.php
override/classes/product.php
override/controllers/admin/AdminOrdersController.php
override/controllers/admin/templates/orders
For each of the 3 files below, if the file on your site does NOT contain customizations, then upload the following files to the /themes/default/ directory:
themes/default/product.tpl
themes/default/product-list.tpl
themes/default/shopping-cart-product-line.tpl
If any of these 3 files DOES contain customizations, then please make the Manual Edit .
¶ Manual edits to templates
Manual edits for product.tpl
Find the lines:
<form id="buy\_block" {if $PS\_CATALOG\_MODE AND !isset($groups) AND $product->quantity > 0}class="hidden"{/if} action="{$link->getPageLink('cart')}" method="post">
and replace with:
<form id="buy\_block" {if $PS\_CATALOG\_MODE AND !isset($groups) AND $product->quantity > 0}class="hidden"{/if} action="{if Configuration::get('PRINTSCIENCE\_DESIGNER') == 1 && $product->is\_personalized\_product}{$base\_dir}/modules/printsciencedesigner/process.php{else}{$link->getPageLink('cart')}{/if}" method="post" >
Find the lines:
<p id="add\_to\_cart" class="buttons\_bottom\_block">
<span></span>
<input type="submit" name="Submit" value="{l s='Add to cart'}" class="exclusive" />
</p>
and replace with:
{if Configuration::get('PRINTSCIENCE\_DESIGNER') == 1 && $product->is\_personalized\_product}
<input type="hidden" name="cancel" value="{$link->getProductLink($product)}" />
<input type="submit" name="Submit" value="{l s='Personalize'}" class="exclusive personalize\_btn" />
{else}
<p id="add\_to\_cart" class="buttons\_bottom\_block">
<span></span>
<input type="submit" name="Submit" value="{l s='Add to cart'}" class="exclusive" />
</p>
{/if}
Manual edits for product-list.tpl
Find the lines:
{if isset($static\_token)}
<a class="button ajax\_add\_to\_cart\_button exclusive" rel="ajax\_id\_product\_{$product.id\_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id\_product={$product.id\_product|intval}&token={$static\_token}", false)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
{else}
<a class="button ajax\_add\_to\_cart\_button exclusive" rel="ajax\_id\_product\_{$product.id\_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add&id\_product={$product.id\_product|intval}", false)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
{/if}
and replace with:
{if Configuration::get('PRINTSCIENCE\_DESIGNER') == 1 && $product.is\_personalized\_product}
<a class="button exclusive personalize\_btn personalize\_btn\_link" href="{$base\_dir}/modules/printsciencedesigner/process.php?add=1&id\_product={$product.id\_product|intval}&id\_product\_attribute={$product.id\_product\_attribute}&token={$static\_token}&cancel={$link->getCategoryLink($category)|base64\_encode}" title="{l s='Personalize'}"><span></span>{l s='Personalize'}</a>
{else}
{if isset($static\_token)}
<a class="button ajax\_add\_to\_cart\_button exclusive" rel="ajax\_id\_product\_{$product.id\_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add=1&id\_product={$product.id\_product|intval}&token={$static\_token}", false)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
{else}
<a class="button ajax\_add\_to\_cart\_button exclusive" rel="ajax\_id\_product\_{$product.id\_product|intval}" href="{$link->getPageLink('cart',false, NULL, "add=1&id\_product={$product.id\_product|intval}", false)}" title="{l s='Add to cart'}"><span></span>{l s='Add to cart'}</a>
{/if}
{/if}
Manual edits for shopping-cart-product-line.tpl
Find the lines:
<td class="cart\_product">
<a href="{$link->getProductLink($product.id\_product, $product.link\_rewrite, $product.category, null, null, $product.id\_shop, $product.id\_product\_attribute)|escape:'htmlall':'UTF-8'}"><img src="{$link->getImageLink($product.link\_rewrite, $product.id\_image, 'small\_default')}" alt="{$product.name|escape:'htmlall':'UTF-8'}" {if isset($smallSize)}width="{$smallSize.width}" height="{$smallSize.height}" {/if} /></a>
</td>
and replace with:
<td class="cart\_product">
{if $link->getReEdit({$product.id\_product},{$product.id\_product\_attribute}) != ''}
<a class="thickbox" href="{$link->getImageLinkCart($product.link\_rewrite, $product.id\_image, 'small\_default',$product.id\_product\_attribute)}" rel="gal{$product.id\_product\_attribute}" ><img class="personalize\_img" src="{$link->getImageLinkCart($product.link\_rewrite, $product.id\_image, 'small\_default',$product.id\_product\_attribute)}" alt="{$product.name|escape:'htmlall':'UTF-8'}" /></a>
<a class="thickbox" rel="gal{$product.id\_product\_attribute}" href="{$link->getPdfImage($product.id\_product, $product.id\_product\_attribute)}" style="display:none"><img src="{$link->getPdfImage($product.id\_product, $product.id\_product\_attribute)}" /></a>
<br/>
<span class="editlink"><a class="anchoreditlink" href="{$link->getReEdit({$product.id\_product},{$product.id\_product\_attribute})}" >{l s='Re-Edit'}</a></span>
{else}
<a href="{$link->getProductLink($product.id\_product, $product.link\_rewrite, $product.category, null, null, $product.id\_shop, $product.id\_product\_attribute)|escape:'htmlall':'UTF-8'}"><img src="{$link->getImageLink($product.link\_rewrite, $product.id\_image, 'small\_default')}" alt="{$product.name|escape:'htmlall':'UTF-8'}" {if isset($smallSize)}width="{$smallSize.width}" height="{$smallSize.height}" {/if} /></a>
{/if}
</td>
¶ Installation for prestashop v1.6
- Backup your files and database
- Download the Print Science Designer plugin from the Print Science website
- Uncompress the Designer plugin archive file
- Upload the directory "modules/printsciencedesigner" to the /modules/ directory.
- Login to the Prestashop administrative site.
- Browse to the Modules tab.
- Search for text "designer" in search field.
- You should see the "Print Science Designer" module in the search results. Click the "Install" button to install the module.
- Click the "Configure" link next to the module and configure the API information for your account on the Designer server.
- Upload these files to the /override/classes/ directory:
- Upload this file to the /override/controllers/admin/ directory:
- Upload this directory to the /override/controllers/admin/templates/ directory:
- Delete the file class_index.php in /cache/ directory.
- Theme customizations
- Upload the following file to folder /themes/default-bootstrap/js/modules/blockcart/:
- Upload the following file to folder /themes/default-bootstrap/modules/blockcart/:
- Advanced paramter adjustments
- API Username
- API Key
- API Version. Use: 4.0.0
- URL for the Designer server. The URL should terminate in "/".
- API Image URL. Leave blank
- Window type. Select "Modal pop-up" to open Designer inside modal pop-up durectly in the Prestashop site.
- Background color of modal pop-up.
- Margin around modal pop-up. Size of margin between full size of window and modal pop-up.
- Set Enable Personalization to "Yes"
- Paste the Product ID from the Designer server into the field Product ID
- API Username
- API Key
- API Version. Use: 4.0.0
- URL for the Designer server. The URL should terminate in "/".
- API Image URL. Leave blank
- Window type. Select "New window" to have the Designer open in a new window, select "Modal pop-up" to open Designer inside modal pop-up directly in the Wordpress site.
- Background color of modal pop-up. Do not prefix color with "#".
- Modal window opacity. Set opacity in range 0%-100%. Do not terminate with "%"
- Margin around modal pop-up. Size of margin between full size of window and modal pop-up. Do not terminate with "px".
- Set dropdown Enable Personalization to "Yes"
- Paste the Product ID from the Designer server into the field: Product ID
- If desired, specify the Template ID of the template inside the product that will be display when the Designer opens
- Configure the following API account information in your WooCommerce store:
- Create a product in the WooCommerce store
- Configure the product you have created to:
- Test the product in the WooCommerce store
- Create a new WordPress Page that will be used for customer returning from completed Designer sessions
- Note the PostID of the newly created page
- Embed the shortcode into this newly created page
- Create a new WordPress Page that will be used for launching new Designer sessions
- Embed the shortcode into this newly created page including the PageID noted at step 2
- Create a new WordPress Page
- Note the postID assigned to the new page
- Embed the shortcode below into this new page
[print-science-designer-download]
- Create new WordPress page
- Embed the shortcode below in the new page. The short code includes the productID of the product on the Designer server, the templateID of the template file on the Designer server, and the ID of the "return WordPress page":
[print-science-designer product_id=xxx template_id=yyy return_page_id=zzz]
- Navigate to the Extension Installer page and then select the ZIP archive containing the Print Science Designer extension.
- Navigate to Extensions > Modules and install the Print Science Designer module
- Navigate to Extensions > Modifications. Check box for Print Science Designer. Hit blue "Refresh" button at top right of page
- API Username
- API Key
- API Version. Use: 4.0.0
- URL for the Designer server. The URL should terminate in "/".
- API Image URL. Leave blank
- Window type. Select "Modal pop-up" to open Designer inside modal pop-up directly in the OpenCart site.
- Margin around modal pop-up. Size of margin between full size of window and modal pop-up. Do not terminate with "px".
- Background color of modal pop-up. You should prefix then color with "#".
- Set dropdown Enable Personalization to "Enabled"
- Paste the Product ID from the Designer server into the field: Product ID
- The templateID on the Designer server of the template that will be displayed when the Designer UI first opens (optional)
- Configure the following API account information in your OpenCart store:
- Create a category in the OpenCart store
- Create a Simple product in the OpenCart store
- Configure the product you have created to:
- Test the product in the OpenCart store
- API Username
- API Key
- API Version. Use: 4.0.0
- URL for the Designer server. The URL should terminate in "/".
- API Image URL. Leave blank
- Window type. Select "Modal pop-up" to open Designer inside modal pop-up directly in the OpenCart site.
- Margin around modal pop-up. Size of margin between full size of window and modal pop-up. Do not terminate with "px".
- Background color of modal pop-up. You should prefix then color with "#".
- Set radio button Enable Personalization to "Yes"
- Paste the Product ID from the Designer server into the field: Product ID
- The templateID on the Designer server of the template that will be displayed when the Designer UI first opens (optional)
override/classes/Link.php
override/classes/product.php
override/controllers/admin/AdminOrdersController.php
override/controllers/admin/templates/orders
If you are using the standard default-bootstrap theme, then upload the following files to the /themes/default-bootstrap/ directory:
themes/default-bootstrap/product.tpl
themes/default-bootstrap/product-list.tpl
themes/default-bootstrap/shopping-cart-product-line.tpl
themes/default-bootstrap/js/modules/blockcart/ajax-cart.js
themes/default-bootstrap/modules/blockcart/blockcart.tpl
Navigate to menu item "Advanced Parameters/Performance. Set the radio button control for "Template compilation" to:
Recompile templates if the files have been updated
¶ Configuration
Log in to your account on the Designer server then click on the "Accounts" link in the left menu bar. The Designer server will display the API data that you need to copy and paste into the Prestashop system:
In the Prestashop admin page, navigate to configuration page for the Print Science Designer module. Configure the following parameters:
¶ Product configuration
All aspects for the products such as price, weight etc. are configured in the normal way. When the Designer plugin is installed, you will see an extra item in the left menu bar: Personalization.
Before you configure in Prestashop, you must first complete the configuration for the product on the Designer server. Once the configuration in the Designer server is complete, note down product ID from the Designer server.
To complete the configuration in Prestashop:
¶ Testing the installation
After you have installed the plug-in in your Prestashop store, you may want to confirm that the integration between your Prestashop store and the Designer server functions correctly:
Here is the procedure to follow:
Configure the following API account information in your Prestashop store:
API username: test
API key: b2278139092af1d5f554fa2217bb9c86c814c2c7
API version: 4.0.0
API URL: http://he11.printscience.net/pdf_admin/rpc_api_v_4_0_0/
Create a category in the Prestashop store Create a product in the Prestashop store Configure the product you have created to:
Use personalization: Yes Product ID: 10
Test the product in the Prestashop store¶ Download PDF
After a customer has placed an order in your Prestashop site, you will download the PDF produced by the Print Science Designer. Log-in to the Prestashop administrative pages and navigate to the order. For each item in the order that uses the Designer, you will see a link with label "Download PDF". Click this link to download the PDF produced by the Print Science Designer server as shown below:
¶ Wordpress-WooCommerce
WordPress is a free and open source blogging tool and a content-management system based on PHP and MySQL, which runs on a web hosting service. Features include a plug-in architecture and a template system. WordPress is used by more than 18.9% of the top 10 million websites as of August 2013.
WooCommerce is an open source e-commerce plugin for WordPress that was launched on September 27, 2011. WooCommerce is designed for the small to medium-sized online merchants using WordPress.
¶ Installation
The Print Science Designer plugin for WooCommerce is installed using the standard procedure for installing Wordpress plugins:
Before uploading any files or making any changes, please make a backup copy of both your database and your files.
¶ Configuration
Log in to your account on the Designer server then click on the "Accounts" link in the left menu bar. The Designer server will display the API data that you need to copy and paste into the WooCommerce system:
In the Wordpress admin pages, in the left menu bar navigate to Settings/Personalization API and configure:
¶ Product configuration
All aspects for the products such as price, weight etc. are configured in the normal way. When the Designer plugin is installed, you will see an extra item in the left menu bar: Personalization.
Before you configure the product in WooCommerce, you must first complete the configuration for the product on the Designer server. Once the configuration in the Designer server is complete, note down product ID from the Designer server.
To complete the configuration in WooCommerce for a certain product:
¶ Testing
After you have installed the plug-in in your WooCommerce store, you may want to confirm that the integration between your WooCommerce store and the Designer server functions correctly:
Here is the procedure to follow:
API username: test
API key: b2278139092af1d5f554fa2217bb9c86c814c2c7
API version: 4.0.0
API URL: http://he11.printscience.net/pdf_admin/rpc_api_v_4_0_0/
Use personalization: Yes
Product ID: 10
¶ Download PDF
After a customer has placed an order in your WooCommerce site, you will download the PDF produced by the Print Science Designer. Log-in to the WooCommerce administrative pages and navigate to the order. For each item in the order that uses the Designer, you will see a small icon. Click this icon to download the PDF produced by the Print Science Designer server as shown below:
¶ Launching new Designer sessions via shortcode
There may be certain products for which you would like to allow your customers to use the Designer to personalize the product but you do not want to charge your customer money for the product or force the customer to pass through the standard purchase process.
The WooCommerce plugin allows you to create an ordinary WordPress Page which will display a button that allows your user to launch a Designer session. When the user completes the Designer session, he will be directed to a different WordPress Page which will display a button that allows your user to download the PDF created in the Designer. The process for implementation is as follows:
¶ Page for returning from Designer session
Here is the process to follow to implement the Page that will be used for returning from Designer session. In this page, customers will see button that will allow them to download the PDF created in the Designer session:
In the example below, we have highlight the PostID of the page which is displayed in the URL bar:
When the customer returns from the Designer, he will see a page that displays a button that allows him to download the freshly-made PDF file as shown below:
¶ Page for launching Designer session
Here is the process to follow to implement the Page that will be used for launching a new Designer session. In this page, customers will see button that will allow them to launch a new Designer session:
In the example below, we are configuring the page to display a button that will launch the Designer for productID = 40. When the Designer session is complete, the user will be redirected to the WordPress Page with postID = 14356:
The customer will see a WordPress page that contains a button that launches a new Designer session as shown below:
¶ OpenCart
OpenCart is an online store management system. It is PHP-based, using a MySQL database and HTML components. Support is provided for numerous languages and currencies, and it is freely available under the GNU General Public License.
¶ Installation
The Print Science Designer extension is installed into OpenCart in the same way as any other extension is loaded:
¶ Configuration
Log in to your account on the Designer server then click on the "Accounts" link in the left menu bar. The Designer server will display the API data that you need to copy and paste into the OpenCart system:
In the OpenCart admin page, in the left menu bar navigate to Modules >> Print Science Designer and configure:
The API username, API Key and the API URL are available from your control panel on the Designer server. Please login to retrieve these.
¶ Product configuration
All aspects for the products such as price, weight etc. are configured in the normal way. When the Designer plugin is installed, you will see an extra item in the left menu bar: Personalization.
Before you configure in OpenCart, you must first complete the configuration for the product on the Designer server. Once the configuration in the Designer server is complete, note down product ID from the Designer server.
To complete the configuration in OpenCart:
¶ Testing the installation
After you have installed the plug-in in your OpenCart store, you may want to confirm that the integration between your OpenCart store and the Designer server functions correctly:
Here is the procedure to follow:
API username: test
API Key: b2278139092af1d5f554fa2217bb9c86c814c2c7
API version: 4.0.0
API URL: http://he11.printscience.net/pdf_admin/rpc_api_v_4_0_0/
Use personalization: Yes
Product ID: 10
¶ Download PDF
After a customer has placed an order in your OpenCart site, you will download the PDF produced by the Print Science Designer. Log-in to the OpenCart administrative pages and navigate to the order. For each item in the order that uses the Designer, you will see a link with label "Download PDF". Click this link to download the PDF produced by the Print Science Designer server as shown below:
¶ Joomla Hikashop
HikaShop is a native E-Commerce extension for all versios of Joomla. It is built for simplicity and flexibility. HikaShop also has a wide range of marketing tools, but also powerful statistics displayable on your HikaShop dashboard to help you manage your store.
¶ Configuration
In the Joomla admin pages, navigate to Components/Hikashop/Configuration in the horizontal menu bar. Then navigate to Display/Product Personalization and configure:
The API username, API Key and the API URL are available from your control panel on the Designer server. Please login to retrieve these.
¶ Product configuration
All aspects for the products such as price, weight etc. are configured in the normal way. When the Designer plugin is installed, you will see an extra section at the bottom of the product configuration page:
Before you configure the product in Hikashop, you must first complete the configuration for the product on the Designer server. Once the configuration in the Designer server is complete, note down product ID from the Designer server.
To complete the configuration in Hikashop:
¶ Download PDF
After a customer has placed an order in your Hikashop site, you will download the PDF produced by the Print Science Designer. Log-in to the Joomla administrative pages and navigate to the order. For each item in the order that uses the Designer, you will see a link with label "PDF Download". Click this link to download the PDF produced by the Print Science Designer server as shown below:
