• Disclaimer
• How to add Product Page content in Magento
• Pre-Requisites
• Modify the Product View Template
  • View.phtml
  • tabs.phtml
  • How to place logos under Image gallery
• Adding Manually via Catalog Manager
  • Pros
  • Cons
• How to add Showcase as Static Block in Magento

Disclaimer

Due to the large number of third party applications and Content Management Systems (CMS), 1WorldSync does not provide support for third party applications or CMS. This guide is provided as an aide for guidance and suggestions for integration. 1WorldSync is not liable for any actions, damage or loss. If you require support for your third party application or CMS, please contact the owner or company that produced the application for assistance.

How to add Product Page content in Magento

Pre-Requisites

1. The ‘manufacturer’ or ‘brand” attribute must be enabled and each product should have the manufacturer defined in Magento
2. If you have access to edit the Magento templates, see “Modify the Product View Template” below.
3. If you do NOT have access to the files but do have catalog permissions, you can manually add them to the CMS. See “Adding Manually via Catalog Manager” below.

The default Magento installation does not enable the Manufacturer Name for products. Use the following steps to enable the Manufacturer name in Magento 1.9.x.

1. Login to Magento Admin
2. Click Catalog -> Manage Attribute Sets
3. Select “Default” or your primary Attribute set that you use for products.
4. You will see Manufacturer as unassigned. Click and drag it under the General group.
5. Click Save Attribute Set
6. Click Catalog -> Manage Attributes
7. Click on “Manufacturer”
8. Set “Values Required” to Yes
9. Set “Apply to” -> All Product Types
10. Set “Visible on Product View Page on Front-end” to Yes
11. Click Save and Continue

Works for Magento 1.7.x-1.9.x

Example Page: http://joshglasser.com/demos/mage/index.php/acme-widget-seo-test.html

Modify the Product View Template

Must have permissions to modify the product page template in order to proceed with the steps below. If you do not have template modification permissions, see “Adding Manually via Catalog Manager” below.

View.phtml

1. Open /app/design/frontend/default/TEMPLATENAME/template/catalog/product/view.phtml
2. First, we must extract the product attributes Manufacturer name and Manufacturer Part Number. Find the following code around line 86:

3.   <?php if ($_product->getShortDescription()):?>
       <h4><?php echo $this->__('Quick Overview') ?></h4>
       <div><?php echo $_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description') ?></div>
     <?php endif; ?>

4. Add the following after the above code but ONLY if it does not yet exist:

     <?php
       $manufacturerpn = urlencode(Mage::getModel('catalog/product')->load($_product->getId())->getSku());
       $brand = urlencode($_product->getAttributeText('manufacturer'));
     ?>

5. In the CCS Client Portal, while modifying or viewing your Product Page script, click Get Code. Replace the placeholders for mf, pn, lang, _SKey and _ZoneID with the examples below. It should look like this except the _SKey and _ZoneId should be your unique code provided in the portal:

   <script type='text/javascript'>
       var ccs_cc_args = ccs_cc_args || [];
       ccs_cc_args.push(['mf', '<?php echo $brand;?>']);
       ccs_cc_args.push(['pn', '<?php echo $manufacturerpn;?>']);
       ccs_cc_args.push(['lang', '<?php echo Mage::getStoreConfig('general/locale/code');?>']);
       ccs_cc_args.push(['market', 'US']);
       (function () {
        var o = ccs_cc_args; o.push(['_SKey', 'ABC1234']); o.push(['_ZoneId', '213345345']);
        var sc = document.createElement('script'); sc.type = 'text/javascript'; sc.async = true;
        sc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.cs.1worldsync.com/jsc/h1ws.js'; var n = document.getElementsByTagName('script')[0]; n.parentNode.insertBefore(sc, n); })(); </script>

6. Copy and Paste the script under the code described in Step 3.
7. Search for “<?php echo $_description ?>”
   1. If you are not able to locate the above text, then likely your template has a separate file under catalog/product/view/tabs.phtml. If so, skip to the tabs.phtml section.
   2. For Magento 1.9.x, the description tag is located in catalog/product/view/description.phtml

   3. If you properly located the description tag, add the div containers you received in your copied code from the portal such as:

        <div id="ccs-product-details"></div>
        <div id="ccs-inline-content"></div>
        <?php echo $_description ?>

      The id’s should match the defined Container IDs specified in the portal.

8. Save and upload the view.phtml file to your stage environment to test.

tabs.phtml

Proceed only if the Magento’s view.phtml template did not have the code and you were NOT able to successfully complete steps 1-6.

1. Open the catalog/product/view/tabs.phtml file.

2. Find the following code:

     <?php foreach ($this->getTabs() as $_index => $_tab): ?>
       <?php if($this->getChildHtml($_tab['alias'])): ?>
       <div id="product_tabs_<?php echo $_tab['alias'] ?>_contents"><?php echo $this->getChildHtml($_tab['alias']) ?></div>
       <?php endif; ?>
     <?php endforeach; ?>

3. Change to the following:

     <?php foreach ($this->getTabs() as $_index => $_tab): ?>
     <?php if($this->getChildHtml($_tab['alias'])): ?>
       <div id="product_tabs_<?php echo $_tab['alias'] ?>_contents"><?php
       if ($_tab['alias'] == "description"){ ?><div id="ccs-inline-content"></div><div id="ccs-product-details"></div><?php }
       echo $this->getChildHtml($_tab['alias']) ?></div>
       <?php endif; ?>
     <?php endforeach; ?>

4. Save and upload the tabs.phtml file

How to place logos under Image gallery

1. Open /app/design/frontend/default/TEMPLATENAME/template/catalog/product/view/media.phtml

2. Place at the end of the file or after the following code:

     <?php if (count($this->getGalleryImages()) > 0): ?>
     <div>
       <h2><?php echo $this->__('More Views') ?></h2>
       <ul>
       <?php foreach ($this->getGalleryImages() as $_image): ?>
       <li>
        <a rel="group" href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(600, 600); ?><?php // echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile()); ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" >
    <img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(70, 70); ?>" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>"/>
    </a>
       </li>
       <?php endforeach; ?>
       </ul>
     </div>
     <?php endif; ?>

Adding Manually via Catalog Manager

NOT RECOMMENDED

If you do not have permissions to modify the product page templates in the Magento file system, you have the option to manually add the scripts to each product via the Magento Admin Catalog Manager.

Pros

• Can instantly add the content via Magento’s Admin interface without code changes.
• You can selectively choose which products you want the content to appear.

Cons

• You must add the product specific code to each product you carry. Keep in mind that the number of eligible products with content is more than 400,000 products and can be a very time-consuming task.
• Products are constantly being updated with new manufacturer content. For new products and products that become included in content syndication, you would need to constantly update and add scripts to new skus.

How to add Showcase as Static Block in Magento

1. In Magento Admin, go to CMS -> Static Blocks
2. Click Add New Block
3. Block Title, use “Lenovo Showcase”
4. Identifier, use “lenovo_showcase”
5. Store View, choose all stores
6. Status should be “Enabled”
7. In Content field, hide the editor to enter raw HTML

8. Add the Showcase code available in the portal such as:

   <div id="ccs-brand-showcase"></div>
     <script type='text/javascript'>
      var ccs_cc_args = ccs_cc_args || [];
      // My Brand Showcase
      ccs_cc_args.push(['mf', 'Lenovo']);
      ccs_cc_args.push(['lang', 'en']);
      ccs_cc_args.push(['market', 'US']);
      (function () {
      var o = ccs_cc_args; o.push(['_SKey', '93e59bc8']); o.push(['_ZoneId', '69af9bfeb1']);
      var sc = document.createElement('script'); sc.type = 'text/javascript'; sc.async = true;
      sc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.cs.1worldsync.com/jsc/h1ws.js'; var n = document.getElementsByTagName('script')[0]; n.parentNode.insertBefore(sc, n); })(); </script>

9. Click Save.

Now you can add the static block to your dedicated Lenovo page using the following methods:

• Edit Template File

  <?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('lenovo_showcase')->toHtml() ?>

• As HTML/CMS Field

  {{block type="cms/block" block_id="lenovo_showcase" template="cms/content.phtml"}}

• Layout XML

  <block type="cms/block" name="cms_static_block"><action method="setBlockId"><block_id>lenovo_showcase</block_id></action></block>