CMS Made Simple Forums

Hi there,

i have just installed all the modules to run a online shop and was wanting to ask some questions about rearranging the layout of the modules..

i've installed products/orders/cart and have it all running nicely....

i see that all the modules have templates within the admin section...  and have coding which results in displaying the products details but i was wanting this layout to be different...

i  understand that i need to change the templates but after looking at them all ...  i see it may take some time to get through them all one at a time...  Is there any copies of these templates which are layed out in different ways available to download..

or

Is there an easy way or prefered way to change these templates which would speed up the process..


At the moment i'm thinking about making div templates in dreamweaver then dropping the code i require into the template and then adding css to the products page ....  1. will this work  2.is this the long way.


i hope you get the idea i'm getting across... really i'm looking for the best way to change my shop layout

First read the help for each module a few times. Really read it and make sure you understand it. Then make some copies of the default templates. Then take these copies and start playing with them and view the results of those changes each time you do something. This will help you learn what is going on.

If you need help designing the layout (divs) then certainly use Dreamweaver to help do the design and drop the code in as needed. Be sure to keep constant backups of the templates (I usually do it in text files) and keep checking the output on the front end as you make changes to be sure you are getting the results you want. It is easy to monitor what went wrong if you only make 1 or 2 changes at a time, it is time consuming and a pain to try and figure out what you did wrong in the last 100 changes (I tell you this from experience ) Most of the time I would end up having to start over.

As far as available templates, there have been some people that have changed them to fit their site... but no one has really shared them. In time there may be an area for you to share those templates and there may be more default templates that ship with the modules. For now the ones that ship with it are designed to show you what can be done and how to do it. The formatting is up to you.

Good luck!

i've started to mess around with the code ..

in dreamweaver i have made a basic structure of the layout  eg i have a space for the image and have the name and description to one side and the add it now button layed out....  i have then cut out  the code from cms template and added it into the divs....  i then made a new stylesheet and added the css from dreamweaver to it and attached it to the products page....

It all needs a little teaking but i think i will get there....

i'm going to post my code here so that everyone can take a copy ....


any more useful tips would be greatful for me to finish it...

jamie

The below code is the html coding for the layout of a detailed template for Products module..

So what i did was made this code in dreamweaver then copy and paste it into my detail template in products module..  remember to make another template and keep the original one safe....

i then copied the css which goes with the below code and made a new stylesheet and attached it to my products page...


{* this is a example of jkwebmaker product detail template *}
{assign var='products' value=$mod}





{if count($entry->fields)}

  {foreach from=$entry->fields key='name' item='field'}
   
   
      {if $field->type == 'image' && isset($field->thumbnail)}
        file_location}/{$field->thumbnail}" rel="lightbox" title="my caption">file_location}/{$field->thumbnail}" alt="{$field->value}"/>
      {/if}{/foreach}
{/if}
Name: {$entry->product_name}
{if $entry->details ne ''} Details: {$entry->details}
{/if}

{if $entry->price ne ''} Price {$currency_symbol} {$entry->price}
{/if}
{* include the cart *} {if isset($cart_module_tag)} {eval var=$cart_module_tag}

{/if} {* create a link back to the top of the page *} {anchor anchor='product_name' text=$products->Lang('return_to_top') title=$products->Lang('return_to_top')}





{* print out attributes *}
{if isset($entry->attributes)}
  Attributes
  {foreach from=$entry->attributes key='name' item='attribset'}
    {$name}
   
      {foreach from=$attribset key='label' item='adjustment'}
        {$label}: {$adjustment}
      {/foreach}
   
  {/foreach}
{/if}








Below is the CSS which goes with the above code...


.ProductDirectoryItem{
width: 500px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.details_wrap{
float: left;
height: 200px;
width: 500px;
}

.product_img{
float: left;
height: 200px;
width: 200px;
}
.product_name{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FF0000;
float: left;
width: 285px;
padding-left: 15px;
font-weight: bold;
}
.product_desc{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
float: left;
width: 285px;
padding-left: 15px;
padding-top: 20px;
}
.product_price{
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #FF0000;
float: left;
width: 200px;
font-weight: bold;
padding-top: 20px;
padding-left: 20px;
}
.addtocart{
float: left;
width: 260px;
padding-left: 20px;
}

.style1 {color: #000000}

If you can look over the code and see what you think that would be great ....

Any tips or improvments are very welcome....


I'm off to do the Summary Template and see what i can come up with....

Sounds like you are getting the hang of it. The only suggestion I might have is changing the wrapping of a couple of your if statements. Here is an example:

Instead of:
Try:

This will eliminate a blank being displayed in your page if it does not have a description, price, etc. I say this assuming you're layout doesn't rely on those div's being displayed. Doing it this way would clean up the source code of the page quite a bit and you don't have to worry about your output being messed up because the div has no content.

Great thank you ... 

i'm not really confident with the {if} coding and still working out what it all means...

but i will change this and see what happens ...

i have made the same kind of structure for the hierarchy template but i came up with error saying i can't use stdclass.....

have you any ideas on this ...

This is essentially what the if statement above is saying:

If the value of the Details field of the $entry array does not equal (ne) nothing ('') then display Details: {$entry->details}



I'd have to see the whole error. Do you have a link?

I have just set it back to normal and i am now changing the summary template.....

so after the summery has been done i will move onto the past problem again...

ic how the {if} statement works..  and how it could mess around with display..

the link to the site i'm fooling around with is www.bucklesonline.co.uk ..  this is my own site but i'm not using it for anything and just trying to get to grips with this shop layout...

This seems a lot harder than i had first thought ...  i've only really done one page (details layout)....  i think i'm so slow because i don't have a clear idea of what i want it to look like...

Here are some links that will likely be very helpful for you:

http://smarty.net/&nbsp; <-- Read the manual... you will be glad you did
http://calguy1000.com/Blogs/12/60/basic ... .html&nbsp; <-- Good tutorial on getting the most out of your module templates
http://calguy1000.com/Blogs/8/60/cmsms- ... .html&nbsp; <-- Quick e-commerce suite how-to... you might get a little information out of there.

Thank you for the links i will have a look through them...

i have had a look at the Hierarchy template and made a very simple div template with image at the top and the name of area below....  When it is displayed in the page I get them all in a row going down the way .....  Can you point me in the direction to beable to have them going across the screen in a row....

the main wrap div is only 300px so i should be able to get 2-3 in a row in the content area....

Would i need to make the template a list to get this effect....

Below is the code i have made for the summary page of my online shop....

{if isset($catformstart)}
{$catformstart}
{$catdropdown}{$catbutton}
{$catformend}
{/if}

{if isset($pagecount) && $pagecount gt 1}
{$firstlink} {$prevlink}  {$pagetext} {$curpage} {$oftext} {$pagecount}  {$nextlink} {$lastlink}
{/if}


  {*
    the summary template has access to custom fields via the $entry->fields hash
    and to categories via the $entry->categories array of objects.  Also
    attribute information is available via $entry->attributes.
    you should use the get_template_vars and the print_r modifier to see
    what is available
    *}
 
{foreach from=$items item=entry}


{if count($entry->fields)}

  {foreach from=$entry->fields key='name' item='field'}
   
   
      {if $field->type == 'image' && isset($field->thumbnail)}
        file_location}/{$field->thumbnail}" rel="lightbox" title="my caption">file_location}/{$field->thumbnail}" alt="{$field->value}"/>
      {/if}{/foreach}
{/if}

detail_url}">{$entry->product_name}

{$currency_symbol}{$entry->price}





{/foreach}




As you can see i have a summary of the product with the products name and price...  This is a good starting point i think and i can now use the css to make changes to the look of the page...

below is the layout CSS

.wrap{
width: 600px;
clear: both;
}

.sum_wrap{
width:200px;
float:left;
padding-right: 30px;
}
.sum_img{
float: left;
width:200px;
}
.sum_name{
float: left;
width:200px;
text-align: left;
padding-top: 15px;
}
.sum_price{
float: left;
width:200px;
text-align: left;

}
#sum_list li{
            display: block;
list-style-type: none;
padding-right: 20px;

}


This code will produce the products in a running list across the page until content area is full then start a new line....

Any advice or corrections to be made to the above could would be very useful

One correction i would like to find out more on would be the image of the product.. I noticed in the other templates you could get the lightbox to show up the original image eg the bigger image when clicked where as this code only throws up the thumbnail of the image so its not really worth clicking on the image...


For the Hierarchy template i have used the exact same process as above which produces the same effect..  It on this template that you get full image in lightbox...

link to example pages ( i'm still working on them so they might change from time to time.)

The lightbox is something you have to load separately. In the past you would use the Lightbox Module, but now with JQueryTools module you have a few more options. The author is working on some templates that will support Lightbox and Fancybox (you can use the Ajax function of fancybox to dynamically display the details page of the products in the summary page without having to reload your original page)

You are getting a handle on it. Good for you. Keep playing and looking at other "e-commerce sites" even if they aren't CMS Made Simple sites. If you find something you like on there try to figure out how to do it for yourself

Forgot to add my link:

www.bucklesonline.co.uk

ignore the rest of the website as its just an example but the shop side should be ok ....

Just a quick qestion to see if you should really have the orders page as the checkout page..

Looks like you are getting your desired effects. As far as orders/cart goes... I don't have any experience with that. I've mainly used Products just for an inventory listing/management system.