WebAsyst and Shop-Script forums / Home page layout issues?

alpinevp · 2012-04-02 11:09

Hopefully I'll have better luck here in the forum. I have a couple of immediate issues. I just upgraded to the latest version (from Pro 2.12) and having some problems figuring this thing out. https://minersgallery.com/upgrade/shop/

On the home page, I need the two columns of product to be equal width in the center of the page. I would also like to put the image at the top of the category and not to the left of it.

Also on the home page, at the bottom, I have a new product list that I would like to only be 3 columns wide equal and fixed and not the 5 or six that is currently shown. I just don't quite get that when I go into html mode in the design editor, there is no html whatsoever, just these smarty codes that make absolutely no sense to.

Thoughts or suggestions.

rat · 2012-04-03 02:13

1. Add the following code to your CSS editor:

Code:

td.cat_name {
    width: 49%;
}

2. In file published/SC/html/scripts/templates/frontend/root_categories.html change

Code:

<td width="1%" align="center" class="cat_image">
<a href='{$_cat_url}'>
  <img border="0" src="{$smarty.const.URL_PRODUCTS_PICTURES}/{$_cat.picture|escape:'url'}" alt="{$_cat.name|escape:'html'}">
</a>
</td>
{else}
<td width="1%" align="center" class="cat_image">
<a href='{$_cat_url}' class="home_page_category_logo">

</a>
</td>
{/if}

<td class="cat_name">

to

Code:

<td width="1%" align="center" class="cat_image">
<p>
<a href='{$_cat_url}'>
    <img border="0" src="{$smarty.const.URL_PRODUCTS_PICTURES}/{$_cat.picture|escape:'url'}" alt="{$_cat.name|escape:'html'}">
</a>
<!--</td>-->
{else}
<td width="1%" align="center" class="cat_image">
<p>
<a href='{$_cat_url}' class="home_page_category_logo">

</a>
<!--     </td> -->
{/if}
</p>
<!--     <td class="cat_name"> -->

3. In file published/SC/html/scripts/templates/frontend/product_list.html change

Code:

<table align="center" cellpadding="0" cellspacing="0">
<tr>
<td>z
<ul class="product_list">
{foreach from=$__products item=_product}
{if $_product.slug}
{assign var=_product_url value="?productID=`$_product.productID`&product_slug=`$_product.slug`"|set_query_html}
{else}
{assign var=_product_url value="?productID=`$_product.productID`"|set_query_html}
{/if}
<li style="width: {$smarty.const.CONF_PRDPICT_THUMBNAIL_SIZE+20}; height: {if $__block_height}{$__block_height}{elseif $_product.thumbnail}{$smarty.const.CONF_PRDPICT_THUMBNAIL_SIZE+45}{else}55{/if};">
{if $_product.thumbnail}
<table cellpadding="0" cellspacing="0" style="width: {$smarty.const.CONF_PRDPICT_THUMBNAIL_SIZE}; height: {$smarty.const.CONF_PRDPICT_THUMBNAIL_SIZE};"><tr><td valign="bottom" align="center">
<a href="{$_product_url}"><img src="{$smarty.const.URL_PRODUCTS_PICTURES}/{$_product.thumbnail|escape:'url'}" alt="{$_product.name|escape:'html'}"></a>
</td></tr></table>
{/if}
<a href="{$_product_url}">{$_product.name}</a>
{if $_product.Price}<div class="totalPrice">{$_product.price_str}</div>{/if}
</li>
{/foreach}
</ul>

to

Code:

<table align="center" cellpadding="0" cellspacing="0" style="width: 100%;">
<tr>
<td>

<table  style="width: 100%;">
  {assign var=columns value=3}
  {foreach from=$__products item=_product key=key}
  {if $key is div by $columns}<tr>{/if}
    <td>
      {if $_product.slug}
      {assign var=_product_url value="?productID=`$_product.productID`&product_slug=`$_product.slug`"|set_query_html}
      {else}
      {assign var=_product_url value="?productID=`$_product.productID`"|set_query_html}
      {/if}
      {if $_product.thumbnail}
        <table cellpadding="0" cellspacing="0" style="width: {$smarty.const.CONF_PRDPICT_THUMBNAIL_SIZE}; height: {$smarty.const.CONF_PRDPICT_THUMBNAIL_SIZE};">
          <tr>
            <td valign="bottom" align="center">
              <a href="{$_product_url}">
                <img src="{$smarty.const.URL_PRODUCTS_PICTURES}/{$_product.thumbnail|escape:'url'}" alt="{$_product.name|escape:'html'}">
              </a>
            </td>
          </tr>
        </table>
      {/if}
      <a href="{$_product_url}">{$_product.name}</a>
      {if $_product.Price}
        <div class="totalPrice">{$_product.price_str}</div>
      {/if}
    </td>
  {if $key+1 is div by $columns}<tr>{/if}
  {/foreach}
</table>

Note that this change in the template file for product list will be applied to all other product lists you may want to add later. If you need individual templates for different product lists, let me know

alpinevp · 2012-04-08 13:17

this did not work. For item 1, what CSS file and where is it located that I was to add the td.cat_name {width: 49%;} ?

rat · 2012-04-09 02:00

Click once on "Save template" in your design editor and look for file published/publicdata/***/attachments/SC/themes/*/main.css.

#1 2012-04-02 11:09

Home page layout issues?

#2 2012-04-03 02:13

Re: Home page layout issues?

Code:

Code:

Code:

Code:

Code:

#3 2012-04-08 13:17

Re: Home page layout issues?

#4 2012-04-09 02:00

Re: Home page layout issues?

Board footer