Snaf

[niccol]

Maybe Diva can clarify what that mod does.

On first look it pretty much does what this "Adding an inner div to the column cells to allow easier styling." does in the next version of SNAF. But maybe I am missing something.

Basically, the boxes are a table cell. It is handy to have a block element inside the table cell because then you can apply things like margins and borders to the inner cell. Which for example lets you put gutters between the boxes. Also, if you want to have a row divider you can still style the table cell or table row to create that effect.

[jagall]

Hi Niccol,

I am using 1.3.9h but have column grid already installed and thought by installing your module I could achieve this sort of styling in this site
I have been messing with CSS and Divs to achieve this and not getting very far and then seen this in your thread below:

[QUOTE=niccol;1113281]OK. Well that is really a styling issue rather than functionality. You can start by centering the images in the blocks with something like:

.centerBoxContentsProducts .listingProductImage {
display:block;
margin:0 auto;
}

So I think I am on the right track, site is here.

I have this in the CSS:
#specialswrapper, .specialsListBoxContents{
position:relative;
left: 0px;
}

.specialsListBoxContents {
border-left:1px solid #2c130f;
border-right:1px solid #2c130f;
border-bottom:1px solid #2c130f;
border-top:1px solid #2c130f;
padding:3px 0 0 0;
background-image : url(../images/offer.png);
background-repeat : no-repeat;
position:top;
float: left;
position: relative;
z-index:4;
margin-right: 5px
}

#ribbon {
background:url(../images/slider/ribbon.png) no-repeat;
width:140px;
height:135px;
position:absolute;
top:-12px;
left:-15px;
z-index:600;
}

a img {
margin-top:27px;
background-color:transparent;
}
and then this
<div id ="specialswrapper">
<div id ="ribbon"></div>

but do not know where to put them was messing with special_default and tpl_module_special_index but not working. Sorry this is very long winded but hopefully you can let me know if I am in right direction thanks. And just so I am not double posting this is the actual thread I started. Thank you.

[DivaVocals]

Do you have a live site using the CDP mod? I would like to see it in action and consider it for my site.

I'll be happy to show you the development version of the site I used this on: http://clientmybeautyaddiction(dot)overthehillweb(dot)com/

Maybe Diva can clarify what that mod does.

On first look it pretty much does what this "Adding an inner div to the column cells to allow easier styling." does in the next version of SNAF. But maybe I am missing something.

Basically, the boxes are a table cell. It is handy to have a block element inside the table cell because then you can apply things like margins and borders to the inner cell. Which for example lets you put gutters between the boxes. Also, if you want to have a row divider you can still style the table cell or table row to create that effect.

Here's what the description of CDP is:

The contrib will make a divider line between products for ALL pages that use the tpl_columnar_display.

and later..

This will give nice divider lines for the following modules/pages:

- New Products on the main page
- Special Products on the main page
- Featured Products on the main page
- Special Products on the Specials... link
- Additional images on the product page
- Customers Also Purchased on the product page
- Cross Sell on the product page (note that Cross Sell is a separate contrib that would need to be installed separately.)

If using the "Column Grid Layout" contrib from Dr Byte, you will also need to use the included product_listing.php file to override the text wrapping.

SNAF is a step up from the "Column Grid Layout" add-on in that it adds features found in the "Single Template" contribution. However, I discovered when using one of the Picaflor Azul templates (she bundles the "Column Grid Layout" and "Column Divider Pro" add-ons in to her templates) that when I replaced the bundled in "Column Grid Layout" add-on with SNAF, the files needed for CDP to work properly required some modifications for CDP and SNAF to work together.. That said, it sounds like the next version of SNAF is going to bring the same functionality that CDP provides?? Am I understanding this correctly??

[niccol]

@Diva,
Yeah, pretty much. The next version puts in features that I use all the time. basically in this case it is a box within a box on the column grid. Which means you can do what you want with css. In my case that is usually a border around the inner box and no styling on the outer so the boxes look spaced out on the page.


@jagall
I am not really sure what the question is.
If what you are talking about is getting the boxes to be a bit separated then you might wait a few days for the next version or you can edit product_listing.php yourself . You are looking for this:

    // Following code will be executed only if Column Layout (Grid Layout) option is chosen
    if (PRODUCT_LISTING_LAYOUT_STYLE == 'columns') {

      $lc_text = implode('<br />', $product_contents);

      $list_box_contents[$rows][$column] = array('params' => 'class="centerBoxContentsProducts centeredContent back"' . ' ' . 'style="width:' . $col_width . '%;"',
                                                 'text'  => $lc_text);
      $column ++;
      if ($column >= PRODUCT_LISTING_COLUMNS_PER_ROW) {
        $column = 0;
        $rows ++;
      }
    }
    // End of Code fragment for Column Layout (Grid Layout) option in add on module

And changing to this:

      // Following code will be executed only if Column Layout (Grid Layout) option is chosen
    if ($current_listing_style == 'columns') {

      $lc_text = implode('<br />', $product_contents);

      $list_box_contents[$rows][$column] = array('params' => 'class="centerBoxContentsProducts centeredContent back"' . ' ' . 'style="width:' . $col_width . '%;"',
                                                 'text'  => '<div class="innerColumn">'.$lc_text.'</div>');
      $column ++;
      if ($column >= PRODUCT_LISTING_COLUMNS_PER_ROW) {
        $column = 0;
        $rows ++;
      }
    }
    // End of Code fragment for Column Layout (Grid Layout) option in add on module

Depending on what version of column grid you are using then there may be some differences but if you have a look then you will see the changes easily and can reproduce them.

That means that you have a 'box within a box' kind of thing going on and can create space between the boxes by adding margins to the inner boxes.

(Which incidentally is pretty much what CDP does but in a slightly less elegant way - but I would think that, wouldn't I? )

[jagall]

Thanks Niccol, yes pretty much separated boxes but apply a similar style like background colour on the price part and a ribbon over the box e.g. Special Offer as in this example So I can edit product listing to achieve this or would it be easier for someone like me who is has trouble with the ole css/div placement to install the version for 1.3.9 in your module?

[laydback]

I'll be happy to show you the development version of the site I used this on: http://clientmybeautyaddiction(dot)overthehillweb(dot)com/

I like the look, especially the 4 columns. I noticed when you hover over a product image, it shows you a lightboxed larger image. Can you PM which mod that is please?

I'm looking forward to the next SNAF release, sounds like functionality will be increased.

[niccol]

@jagall,
well you can achieve it all with some styling and that bit of code I gave you. This really has got into the realms of styling rather than too much to do with this mod. What I would suggest is that you do that little code edit I suggested and then post a new thread about the other styling issues.
SNAF really is aimed at Zen 1.5.

[jagall]

Thanks Niccol, I have changed the code but will need to seek help on the styling I'd say, thanks thought for getting me started.

[DivaVocals]

I like the look, especially the 4 columns.

Thanks.. The four columns turned out pretty cool once we got the perfect image dimensions in place.. I found out when I was configuring SNAF that WHERE you tell Zen Cart to display the number of columns is in SEVERAL different spots within the admin configuration settings.. (some kinda not really obvious ) So I now have a spreadsheet to keep track of EVERY setting where you specify the number of columns..

I noticed when you hover over a product image, it shows you a lightboxed larger image. Can you PM which mod that is please?

I hope niccol doesn't mind me posting this here.. The image hover feature courtesy of Image Handler 4.. head on over to the IH4 support thread if ya wanna know more..

I'm looking forward to the next SNAF release, sounds like functionality will be increased.

Me too.. I'm especially interested in seeing how the CDP like features will work..

[niccol]

I found out when I was configuring SNAF that WHERE you tell Zen Cart to display the number of columns is in SEVERAL different spots within the admin configuration settings.. (some kinda not really obvious ) So I now have a spreadsheet to keep track of EVERY setting where you specify the number of columns..

Hmmm, yeah. I think there are some inconsistencies in there. Good catch.

I think it stems from the difference in the sql statement max numbers and the product listing max numbers. But if you send me the spreadsheet it will help me track it down. What i am thinking is that if you use product listing then all the settings for the standard product listing should be used. At the moment it still uses the max number of products for the specials but then displays them in the product listing style.