Make Your Own Products Catalogue with SilverStripe CMS – Part 2

This post will tell you how to make your own product catalog with addons. Read part 1 here! Now, some addons like Gallery and Product Manual

  1. For product manual and gallery open Product.php and change the code to:
    <?php
    class Product extends DataObject
    {
    	static $db = array (
    	"Status" => "Enum('Active, Inactive', 'Active')",
    	'ProductName' => 'Text',
    	'Description' => 'HTMLText',
    	'Price' => 'Text'
    	); 
    	static $has_one = array (
    	'ProductGroup' => 'ProductGroup',
    	'Photo' => 'Image',
    	'Manual' => 'File', // adding product manual
    	);
    	static $has_many = array (
    	'ProductGalleryImages' => 'ProductGalleryImage' // adding product gallery images
    	);
    	public function getCMSFields_forPopup()
    	{
    	return new FieldSet( 
    		new DropdownField('Status','Status',singleton('Tarvik')->dbObject('Status')->enumValues()),
    		new TextField('ProductName', 'Product Name'),
    		new SimpleWysiwygField('Description', 'Product Description'),
    		new TextField('Price', 'Product price'),
    		new FileIFrameField('Manual', 'Product manual'),
    		new ImageField('Photo', 'Product photo'),
    		new ImageDataObjectManager( 
    		$this, 
    		'ProductGalleryImages', // Source name
             	'ProductGalleryImage', // Source class
             	'ProductMyGalleryImage' // File name on DataObject
    		) 
    		);
    	}
    	function Link(){ 
    		return $this->ProductGroup()->Link() .'show/'.$this->ID;    
    	}
    }
    ?>
  2. Now we need to make the dataobject for gallery named ProductGalleryImage.php to  mysite/code/ folder:
    <?php
    class ProductGalleryImage extends DataObject {
       static $db = array (
       );
       static $has_one = array (
          'ProductMyGalleryImage' => 'Image', //relation needed for this DataObject
          'BelongToProduct' => 'Product' //relation needed to point back to your pagetype, my pagetype is EventPage.
       );
    
       public function getCMSFields_forPopup()
       {
          return new FieldSet(
             new FileIFrameField('ProductMyGalleryImage')
          );
       }
    }
    ?>
  3. Now the Product page change the code in ProductGroup_show.ss:
    <div class="typography">
    <% control Product %>
    <div id="Productinfo">
    <% if ProductName %>
    <h2 class="productname">$ProductName</h2>
    <% end_if %>
    <% control Photo %>
    $SetWidth(350)
    <% end_control %>
    <% if Description %><p>$Description</p><% end_if %>
    <% if Price %><p class="price"><strong>Price:</strong> $Price USD</p><% end_if %>
    <% if Manual %><a class="name" href="$Manual.URL">Product manual</a> </p><% end_if %>
    </div>
    <div id="Gallery">
    <% control ProductGalleryImages %>
    <% control ProductMyGalleryImage %><a href="$SetHeight(500).URL" title="$ProductName">$Setwidth(120)</a><% end_control %> 
    <% end_control %>
    </div>
    <% end_control %>
    </div>
  4. Add some lines to Layout.css:
    #Productinfo {
    	float:left;
    	width:69%;
    }
    #Gallery {
    	float:right;
    	width:30%;
    }
  5. Rebuild your database using www.yoursitename.com/dev/build?flush=1
  6. Start adding manual and gallery pictures for your products.

Looking for quality SilverStripe Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , , , , , | Posted under SilverStripe CMS | RSS 2.0

Author Spotlight

Teet Bergmann

Teet Bergmann

I'm a freelance web designer from Estonia. Mostly doing sites using Silverstripe, magento, prestashop, wordpress.

Leave a Reply

Your email address will not be published. Required fields are marked *


− 2 = 5

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>