Make Your Own Products Catalogue with SilverStripe CMS – Part 1

In next two blog posts, I will tell you how to make your own product catalog with addons.

In the first post, we will make the ‘Product Page’ and the ‘Product Group’ with some fields that any product catalog needs to have. In the second post, we will add some addons to ‘Product Page’ like Product Gallery and other good stuff.

Modules needed:

  1. Make the file named ProductGroup.php into mysite/code/ folder:
    <?php
    class ProductGroup extends Page
    {
    	static $has_many = array (
    		'Products' => 'Product'
    	);
    	public function getCMSFields()
    	{
    		$f = parent::getCMSFields();
    		$manager = new DataObjectManager(
    			$this, // Controller
    			'Products', 
    			'Product',
    			array(
    			'ProductName' => 'Product Name'
    			), 
             'getCMSFields_forPopup' 
          ); 
          $f->addFieldToTab('Root.Content.Main', $manager); 
          return $f; 
    	}
    }
    class ProductGroup_Controller extends Page_Controller
    {
    function show(){ 
          return array(); 
       } 
    function Product(){ 
          if(isset($this->request) && $this->request->param('ID')){ 
             return DataObject::get_by_id('Product', (int)$this->request->param('ID')); 
          }    
       }
    }
    ?>
  2. Next add  the Product.php (Dataobject as Page) also to mysite/code/ folder:
    <?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'
    	); 
    
    	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 ImageField('Photo', 'Product photo')
    		);
    	}
    	function Link(){ 
    		return $this->ProductGroup()->Link() .'show/'.$this->ID;    
    	}
    }
    ?>
  3. Let’s Make a Theme for ProductGroup file named ProductGroup.ss in folder themes/yourthemename/templates/Layout/:
    <div class="typography">
    <h2>$Title</h2>
    $Content
    <% control Products %>
    <% if Status=Active %>
    <div id="product">
    <p class="productname"><a class="name" href="$link">$ProductName</a></p>
    <a class="photo" href="$link" title="$ProductName" alt="$ProductName">$Photo.Setwidth(150)</a>
    <br>
    <span class="price">$Price €</span>
    </div>
    <% end_if %>
    <% end_control %>
    </div>
  4. Now let’s make theme for Product Page add file named ProductGroup_show.ss in folder themes/yourthemename/templates/Layout/:
    <div class="typography">
    <% control Product %>
    <% 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 %>
    <% end_control %>
    </div>
  5. Css for themes/yourthemename/css/Layout.css:
    #product {
    	width:175px;
    	height: expression( this.scrollHeight < 191 ? "190px" : "auto" );
    	min-height:190px;
    	padding:5px 5px 5px 5px;
    	margin:3px 6px 3px 0;
    	float:left;
    	-moz-border-radius: 10px; /* Firefox */
      -webkit-border-radius: 10px; /* Safari, Chrome */
      border-radius: 10px; /* CSS3 */
    	behavior: url(border-radius.htc);
    	-webkit-box-shadow:  1px 1px 1px 0px rgba(102, 102, 102, 0.5);
      box-shadow:  1px 1px 1px 0px rgba(102, 102, 102, 0.5);
    	border:1px #EEEEEE solid;
    	background:#FFF;
    	padding:5px 10px;
    	text-align:center;
    }
    #product a img{
    	text-align:center;
    }
    #product a.photo{
    	width:175px;
    	text-align:center;
    }
    p.price {
    	font-size:14px;
    	text-align:left;
    	margin:auto;
    	padding:3px 0;
    	line-height:normal;
    	color:#343434;
    	font-weight:700;
    }
    #product a.photo img {
    	padding-bottom:10px;
    }
    span.price {
    	font-size:14px;
    	width:175px;
    	text-align:center;
    	margin:auto;
    	padding:3px 0;
    	line-height:normal;
    	color:#343434;
    	font-weight:700;
    }
    a.name, a.name:hover {
    	color: #DA2031;
      font-family: Arial,Helvetica;
    	text-decoration:none;
      font-size: 15px;
    	line-height:16px;
    	font-weight:bold;
    }
    p.productname {
    	height:34px;
    	text-align:center;
    }
  6. Rebuild your database using www.yoursitename.com/dev/build?flush=1
  7. Add a productgroup and start adding products under it.

See part 2 here!

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 *


7 + = 9

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>