Magento Cart2Quote Theme Integration Manual

This document explains how to integrate the Cart2Quote buttons into your Magento theme. To follow this tutorial, you need to have basic theme development skills. If you’re not sure about this or looking for an easy way out, you could always consider purchasing our Theme Integration service

Preparation

Preparation

Clear and disable all cache before you start. You won’t be altering any base files, but it could be convenient to make a backup. After this, you’re good to go.

Back To Top

Theme Integration

Step 1: Go to your Magento root

1. Connect with (s)FTP to your Magento (dev) store

2. Go to your Magento root directory

Back To Top

Step 2: Copy the theme files to your computer.

1. Go to: app/design/frontend/ (your interface) / (your theme) /template/catalog/product

2. Copy list.phtml and view.phtml temporarily to your computer.

1

Back To Top

Step 3: Create a Cart2Quote directory and copy your theme files in that directory.

1. Go to: app/design/frontend/ (your interface) / (your theme) /template

2. Press right mouse button and press Create Directory

3. Replace /New directory with /qquoteadv/catalog/product

1

4. From current folder go to: qquoteadv/catalog/product/

5. Copy the list.phtml and view.phtml

1

Back To Top

Step 4: Add the Add to Quote button to the list and grid view

1. Open list.phtml: right mouse button and press View/Edit.

2. Look up this part of code:

<?php // List Mode ?>

3. After that scroll down and search for the following code:

<?php if ($_product->isSaleable()): ?>
    <p>
        <button type="button"
            title="<?php echo Mage::helper('core')->quoteEscape($this->__('Add to Cart')) ?>"
            class="button btn-cart"
            onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')">
            <?php echo $this->__('Add to Cart') ?></button>
    </p>
<?php else: ?>
    <p class="availability out-of-stock"><?php echo $this->__('Out of stock') ?></p>
<?php endif; ?>

4. Replace the previous code with the following code:

<?php echo Mage::app()->getLayout()
    ->createBlock('qquoteadv/qquotebtn')
    ->setData('product', $_product)
    ->setTemplate('qquoteadv/catalog/product/c2qBtnList.phtml')
    ->toHtml();
?>

5. Look up this part of code:

<?php // Grid Mode ?>

6. After that scroll down and search for the following code:

<?php if ($_product->isSaleable()): ?>
    <button type="button"
            title="<?php echo Mage::helper('core')->quoteEscape($this->__('Add to Cart')) ?>"
            class="button btn-cart"
            onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')">
        <?php echo $this->__('Add to Cart') ?></button>
<?php else: ?>
    <p class="availability out-of-stock"><?php echo $this->__('Out of stock') ?></p>
<?php endif; ?>

7. Replace the previous code with the following code:

<?php echo Mage::app()->getLayout()
    ->createBlock('qquoteadv/qquotebtn')
    ->setData('product', $_product)
    ->setTemplate('qquoteadv/catalog/product/c2qBtnGrid.phtml')
    ->toHtml();
?>

8. After that, save your document and upload/update this on your FTP.

Back To Top

Step 5: Add the Add to Quote button to the product detail page

1.Open view.phtml: right mouse button and press View/Edit.

2.Look up this part of code:

<?php if($_product->isSaleable()): ?>                   
    <div class="add-to-box">                       
        <?php echo $this->getChildHtml('addtocart') ?>                   
    </div>               
<?php endif; ?>

3.Paste direct after the ?> the following code:

<?php //Cart2Quote button
if(!$_product->isSaleable()): ?> 
    <?php echo Mage::app()->getLayout()->createBlock('qquoteadv/qquotebtn')
        ->setData('product', $_product)
        ->setTemplate('qquoteadv/catalog/product/view/addtoquoteadv.phtml')
        ->toHtml(); ?>
<?php endif; ?>

Back To Top

Step 6: Testing and configuring

You are done editing the code. Now it is time to test your quote button.

You need to check the following settings:

Go to: Magento back-end > System > Configuration > CART2QUOTE

General:

  • Enable Cart2Quote set to Yes
  • Licence key is added (You can buy one at: http://www.cart2quote.com/magento-quotation-module-pricing.html)
  • Use Built-In Template Files set to Yes

Frontend visibility:

  • Product Page Activation set to Yes
  • Category Page Activation set to Yes

Go to: Magento back-end > Catalog > Manage Products > (Desired product for Quotation)

General:

  • Allowed to Quote Mode set to Yes

Now test your front-end to check if the button is available in the list/grid and product view.

Back To Top

Step 7: Design

You just confirmed the buttons are visible in the front-end. Nice! However, depending on your theme, the buttons could look a bit out of order now. You may need to tweak your design a bit to make everything look good.

Because there are so many themes and preferences, it is not possible to write a manual for designing the buttons. The general design practices apply. Just copy the relevant css file from the base folder to your theme folder and start designing until you are satisfied with the result.

Back To Top

Tips & Tricks

More Tips & Tricks

This section aims to provide you with some extra tips and tricks. If we come across something that is worth sharing in this section, we’ll add this to the list. Have you come across something that might be useful for other implementers? Feel free to share that with us, we can then add that as well. Thanks!

Note: The items in this section might require more advanced developing skills than the previous section.

Back To Top

Responsive Quote Page

You can choose between two templates for the quote overview page (yoururl.com/qquoteadv/index/), those are:

1. app/design/frontend/base/default/template/qquoteadv/quote.phtml (non-responsive)
2. app/design/frontend/rwd/default/template/qquoteadv/quote.phtml (responsive)

You can choose one of the above options and copy the content to your theme. If you have a responsive website, it might be more convenient to use the rwd template file as a starting point.

Back To Top