Datafeedr Support Forums  

Go Back   Datafeedr Support Forums > Current Version (V3) Forum > Questions
Home Register FAQ Members List Calendar Search Today's Posts Mark Forums Read

Important - The support forums are now in "read-only" mode as we transition to an alternative help desk solution. Feel free to contact us here with any of your questions or search the forums for an existing solution.
 
 
Thread Tools Search this Thread Display Modes
  #1  
Old January 16th, 2015, 05:19 AM
brentwilliamz brentwilliamz is offline
 
Join Date: Dec 2014
Posts: 38
Default What code to show thumbnail, price, descriptor in sidebar?

Store ID: 46971
Website URL: Androids.net.au

Instead of default Product Widget, I want a custom widget displaying 5 products in RH sidebar.

Okay, the first part's easy... Product List Options > Products per page = 5.

But product display code for Custom Widget in website's 200px wide sidebar is where I need help >>
2-column setout

LH Col: Product image 70px square, with 8pt product price underneath

RH Column: Product description (20 words)

And 1px #008000 solid line full width UNDER product listing.

This is my code but it doesn't work properly >>

Code:
<div class="pl">
  [product.each]
  <div class="t3 col1">
    <div class="bdr">
      <div class="lc">
        <div class="thmb"><a href="[product.link]" title="[product.name]">[product.thumbnail tag='1']</a></div>
        <div class="prc">[product.currency mode='sign'][product.price]</div>
      </div>
      <div class="rc">
        <p class="desc">[product.description cut='20 words']</p>
       </div>
      <div class="clearingdiv"> </div>
    </div>
  </div>
  [/product.each]
  <div class="clearingdiv"> </div>
</div>
Help, please!
  #2  
Old January 16th, 2015, 09:32 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi

Try this code:

HTML Code:
<div class="pl">
  [product.each]
  <div class="t3 col1">
    <div class="bdr">
      <div class="lc">
        <div class="thmb"><a href="[product.link]" title="[product.name]"><img src="[product.thumbnail tag='0']" style="width:70px;height:70px" /></a></div>
        <div class="prc">[product.currency mode='sign'][product.price]</div>
      </div>
      <div class="rc">
        <p class="desc">[product.description cut='20 words']</p>
       </div>
      <div class="clearingdiv"> </div>
    </div>
    <hr />
  </div>
  [/product.each]
  <div class="clearingdiv"> </div>
</div>
Eric
  #3  
Old January 17th, 2015, 04:21 AM
brentwilliamz brentwilliamz is offline
 
Join Date: Dec 2014
Posts: 38
Default

Almost worked! But I think it's clashing with other bits of code in Custom CSS.

• I have borders that I don't want – in LH & RH sidebars.

• CSS added earlier to make prices larger/bolder across site are affecting code suggested above.

Lost track of what code works where in the hierarchy of things.

PLEASE SEE SCREENSHOT >>

Marked it up to show what I'd like for LH & RH custom sidebars. Hope that helps.

Also, here's my current Custom CSS to compare with:

HTML Code:
/**
 * Fix conflict with TwentyTen WP theme
 */
#view .sp h2 {clear:none;}
#view .pl h2 {clear:none;}
#view .col1 .pl h2, 
#view .col1 .pl h2 a {font-size:22px}


/**
 * Remove border around products sitewide (excl. sidebars)
 */
#view .pl .t1 .bdr {
   border-top: none;
   border-right: none;
   border-bottom: dotted 1px #32CD01;
   border-left: none;
}


/**
 * Increase image size in Product Detail page by 85px
 */
#view .sp .rc
{
  margin-left: 295px;
  padding-left: 10px;
}
#view .sp .lc .thmb { width: 285px; }
#view .sp .lc .thmb img
{
  max-width: 285px;
  width: expression(this.height < this.width && this.width > 285px ? '285px' :true);
}


/**
 * Increase image size in Related Products by 50px
 */
#view .pl .col3 .thmb {
  height:160px;
  width:150px;
}
#view .pl .col3 .thmb img {
  max-height:160px;
  max-width:150px;
}


/**
 * Increase image size in 4-column layout
 */
#view .pl .col4 .thmb {
  height:160px;
  width:150px;
}
#view .pl .col4 .thmb img {
  max-height:160px;
  max-width:150px;
}


/**
 * Reformat product prices throughout site
 */
#view .pl .t1 .bdr .prc
{
  font-size: 14pt;
  font-weight: bold;
  color: #000080;
}


/**
 * Reformat product prices in sidebar
 */
#wdgt_pl .pl .bdr .prc {
  text-align: center;
  margin: 5px 0;
  font-size: 14pt;
  font-weight: bold;
  color: #000080;
}


/**
 * Reformat product prices in Product Detail pages
 */
#view .sp .prc {
text-align: left;
margin: 5px 0 0 0;
font-size: 14pt;
font-weight: bold;
color: #000080;
}


/**
 * CODE COMMENT HERE
 */
Attached Thumbnails
Click image for larger version

Name:	Tweaking webpage format for DFR items.jpg
Views:	280
Size:	337.7 KB
ID:	875  
  #4  
Old January 17th, 2015, 11:44 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi

To remove the borders and reduce price size, try adding the following to the bottom of your Custom CSS code:

Code:
#sidebar1 .bdr
{
	border: 0 !important;
	border-bottom: 1px green dotted !important;
}

#sidebar1 .prc { 
	font-size: 8pt !important; 
}

#sidebar2 .bdr { 
	border: 0 !important; 
}
Beyond that, you are getting into some extensive CSS styling which is beyond the scope of support we're able to provide.

Eric
  #5  
Old January 18th, 2015, 04:19 AM
brentwilliamz brentwilliamz is offline
 
Join Date: Dec 2014
Posts: 38
Default

Those 3 bits of code work very nicely in the sidebars. Many thanks for that, Eric.

And as far as the other bit goes, I appreciate where you're coming from.

SEE CHINAVASION'S SIDEBAR SCREENSHOT >>

We'd like to achieve that above, but I don't know how to tell Datafeedr to convert its styling code into that result.

From Firebug in Chrome, there seems to be a max-width: 150px; problem connected with <div class="thmb">. Why? We have a 220px wide sidebar for Datafeedr to put a 70px wide image beside a bit of 8pt text. Hmm...

Please have another squizz at it, because I'm sure it'll be obvious to a skilled coder like yourself where I've gone astray.

PS I don't need anything else after this gets sorted. We can deploy these mods across all the Datafeedr sites we've planned for 2015.
Attached Thumbnails
Click image for larger version

Name:	Chinavasion's sidebar setout.jpg
Views:	271
Size:	98.2 KB
ID:	877  
  #6  
Old January 18th, 2015, 04:34 AM
brentwilliamz brentwilliamz is offline
 
Join Date: Dec 2014
Posts: 38
Default

I've had another look with Firebug. It seems like Datafeedr's <div class="lc"> and <div class="rc"> are 192px wide — which means there’s no room for both in the 220px wide sidebar.

Can’t you just set the width of each column so both containers fit side by side?

See how you go, thanks.
  #7  
Old January 18th, 2015, 10:14 AM
Eric's Avatar
Eric Eric is offline
Datafeedr Team
 
Join Date: Feb 2008
Posts: 16,902
Default

Hi
Quote:
Originally Posted by brentwilliamz View Post
Can’t you just set the width of each column so both containers fit side by side?
Adjusting the width of your theme's column can be really, really tricky. I would ask the theme developer if/how it's possible.

Eric
  #8  
Old January 19th, 2015, 11:30 PM
brentwilliamz brentwilliamz is offline
 
Join Date: Dec 2014
Posts: 38
Default

Yeah, thanks, Eric. I've given up for now too.

Have put default Products widget back in RH sidebar instead. Shall revisit code problem with Syahir over at Graphene-Themes.com — at a later date.

At present, imperative I get remainder of Androids.net.au categories populated with merchandise for visiting shoppers!

Then we can go through DFR Factory Store & fill in IMPORTANT SEO stuff to push up SERP results, customer click-throughs, product sales, $$$ commissions.

Ta, anyway.
 


Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

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

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

Similar Threads
Thread Thread Starter Forum Replies Last Post
Slide Show, Brand Dropdown Menu Code marckes1 Questions 7 January 8th, 2015 09:51 AM
Move 'Buy' button and price under the thumbnail Mads19 Questions 13 January 16th, 2014 11:59 AM
How to show reg price and sale price on search results? brightsway Questions 2 June 28th, 2012 12:58 PM
Create a 2 Product Sidebar on the fly in code? firstprod Questions 8 March 7th, 2012 10:37 AM


All times are GMT -5. The time now is 09:47 AM.


Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.