Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

Changing product ItemsList

 
Reply
   X-Cart forums > X-Cart 5 > Dev Questions (X-Cart 5)
 
Thread Tools Search this Thread
  #1  
Old 03-04-2015, 08:02 AM
 
xgarb xgarb is offline
 

eXpert
  
Join Date: Jul 2004
Location: UK
Posts: 263
 

Default Re: XCart 5 design change

I'm not sure about this as well.

I've read the guide and understand the basics about lists but, for example, this code:

<list name="itemsList.product.cart" />
and later...
<list name="info" type="inherited" product="{product}" />

What are these 'list names' ? This is always a problem with MVC.. there always loads of files and I'm never sure where to start looking..

EDIT:

To go into more detail I can't find how the code <list name="info" type="inherited" product="{product}" /> generates the product in the list from these files...

http://i.imgur.com/B29lVLo.jpg
__________________
Core version: 5.5.xx
Reply With Quote
  #2  
Old 03-05-2015, 01:38 AM
 
xgarb xgarb is offline
 

eXpert
  
Join Date: Jul 2004
Location: UK
Posts: 263
 

Default Re: XCart 5 design change

OK.. to explain what I'm trying to do in more detail...

Currently in x5 when you are looking at the product listing there's three options for displaying the products. Grid, List and Table.

So I found in
skins > default > en > items_list > product > center
the three directories for grid, list and table.

I want to change the layout for list, so in...
skins > default > en > items_list > product > center > list > body.tpl
I can see this code...
Code:
<table class="{getProductCellClass(product)}"> <tr> <td class="product-photo"> <div class="product-photo" style="width: {getIconWidth()}px;"> <list name="photo" type="inherited" product="{product}" /> <div IF="product.hasImage()"> <list name="quicklook" type="inherited" product="{product}" /> </div> </div> </td> <td class="product-info"> <div class="product-info"> <list name="info" type="inherited" product="{product}" /> <div IF="!product.hasImage()"> <list name="quicklook" type="inherited" product="{product}" /> </div> </div> </td> </tr> </table>

which I can edit to make the list view of products change. However... I want to change the layout to three columns. I can do this...

Code:
<div class="product-item product-item-holder"> <div class="row"> <div class="no-margin col-xs-12 col-sm-4 image-holder"> <div class="image"> <list name="photo" type="inherited" product="{product}" /> <div IF="product.hasImage()"> <list name="quicklook" type="inherited" product="{product}" /> </div> </div> </div> <div class="no-margin col-xs-12 col-sm-5 body-holder"> <div class="body"> <div class="title"> <a href="single-product.html"><a class="fn url" href="{buildURL(#product#,##,_ARRAY_(#product_id#^product.product_id,#category_id#^categoryId))}">{product.name:h}</a> </div> <div class="sku">{if:product.sku}{product.sku}{else:}&nbsp;{end:}</div> <div class="desc"><span IF="product.getBriefDescription()">{product.getBriefDescription():h}</span> </div> </div> </div> <div class="no-margin col-xs-12 col-sm-3 price-area"> <div class="right-clmn"> <div class="price-current"> <widget class="\XLite\View\Price" product="{product}" displayOnlyPrice="true" /> </div> <div IF="isDisplayAdd2CartButton()" class="add-to-cart-button"> {if:!product.inventory.isOutOfStock()} {if:isGotoProduct(product)} <widget class="\XLite\View\Button\Link" label="Add to cart" style="le-button" location="{product.url}" /> {else:} <widget class="\XLite\View\Button\Submit" label="Add to cart" style="le-button" /> {end:} {end:} </div> </div> </div> </div>
but this is taking the code from the parts directory (skins > default > en > items_list > product > parts) and placing it in my template which isn't really how it's supposed to be done.

So.. I need to find the code that <list name="info" type="inherited" product="{product}" /> invokes so I can have a three column product item template for the product list.
__________________
Core version: 5.5.xx
Reply With Quote
  #3  
Old 03-10-2015, 03:55 AM
  tony_sologubov's Avatar 
tony_sologubov tony_sologubov is offline
 

X-Cart team
  
Join Date: Jan 2009
Posts: 2,431
 

Default Re: XCart 5 design change

@xgarb if you simply need to change default product view to List instead of Grid, then you can achieve it quite easily as explained here:
http://forum.x-cart.com/showthread.php?t=69469&page=9

Please, let me know if it helps.
__________________
Found a bug in X-Cart? Post it to our bug tracker!
Know how to make X-Cart better? Suggest an idea!
Reply With Quote
  #4  
Old 03-10-2015, 06:36 AM
 
xgarb xgarb is offline
 

eXpert
  
Join Date: Jul 2004
Location: UK
Posts: 263
 

Default Re: XCart 5 design change

@tony

Stage two is to remove the other options and only display the list view for the products page. However first I want to change the appearance of the list view to something like this...

http://i.imgur.com/CA4C67v.png

eg, in three columns instead of two.
__________________
Core version: 5.5.xx
Reply With Quote
  #5  
Old 03-10-2015, 11:51 AM
  tony_sologubov's Avatar 
tony_sologubov tony_sologubov is offline
 

X-Cart team
  
Join Date: Jan 2009
Posts: 2,431
 

Default Re: XCart 5 design change

Quote:
Originally Posted by xgarb
Stage two is to remove the other options and only display the list view for the products page. However first I want to change the appearance of the list view to something like this...

http://i.imgur.com/CA4C67v.png

eg, in three columns instead of two.

If you need to remove other display options, then you should follow the explanation here:
http://forum.x-cart.com/showpost.php?p=383032&postcount=71

Also, I am not quite sure about what you mean by two/three columns in List mode as List mode assumes only one column of products.
__________________
Found a bug in X-Cart? Post it to our bug tracker!
Know how to make X-Cart better? Suggest an idea!
Reply With Quote
  #6  
Old 03-11-2015, 12:08 AM
 
xgarb xgarb is offline
 

eXpert
  
Join Date: Jul 2004
Location: UK
Posts: 263
 

Default Re: XCart 5 design change

Quote:
Originally Posted by tony_sologubov
Also, I am not quite sure about what you mean by two/three columns in List mode as List mode assumes only one column of products.

Each list item to be using three columns. At the moment (simplified)

Code:
<table> <tr> <td> [IMAGE] </td> <td> [TEXT, BUTTONS etc] </td> </tr> </table>

I want...


Code:
<div class="row"> <div class="no-margin col-xs-12 col-sm-4 image-holder"> [IMAGE] </div> <div class="no-margin col-xs-12 col-sm-5 body-holder"> [TEXT] </div> <div class="no-margin col-xs-12 col-sm-3 price-area"> [PRICE BUTTONS ETC] </div> </div>

like in the screen shot.
__________________
Core version: 5.5.xx
Reply With Quote
  #7  
Old 03-17-2015, 12:10 PM
  tony_sologubov's Avatar 
tony_sologubov tony_sologubov is offline
 

X-Cart team
  
Join Date: Jan 2009
Posts: 2,431
 

Default Re: Changing product ItemsList

@xgarb, I have created a separate thread here.

In case you need to add the third column to List view, you should edit the
Code:
<X-Cart>/skins/default/en/items_list/product/center/list/body.tpl
template and add one more <td></td> section there. You can do that according to the article here:
http://kb.x-cart.com/display/XDD/Step+2+-+applying+design+changes
__________________
Found a bug in X-Cart? Post it to our bug tracker!
Know how to make X-Cart better? Suggest an idea!
Reply With Quote
Reply
   X-Cart forums > X-Cart 5 > Dev Questions (X-Cart 5)


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 12:33 PM.

   

 
X-Cart forums © 2001-2020