You are here:  » Table design with css for searchresults


Table design with css for searchresults

Submitted by koen on Tue, 2013-09-17 20:50 in

Hi David,
I'm using CSS to design a search results table (this makes it responsive).
The structure I use is:

<ul>
<li class = first product>First product, price, image etc.</li>
<li class = product >Second product, price, image etc.</li>
<li class = product >Third product, price, image etc.</li>
<li class = last product>Last product, price, image etc.</li>
</ul>

I'm trying to implement this into the searchresults area using the %IF_EVERYn% statement, but I can't get it working. PT has been set to show 16 results at a time.

The code I've used is:
Before:

<ul class="products">
<li class="product first">

Each:

%IF_IMAGE%
<a href='%PRODUCT_URL%'><img width="150" height="150" src='%IMAGE_URL%' class="attachment-shop_catalog wp-post-image" alt='%PRODUCT_NAME%'/></a>
%ENDIF_IMAGE%
<h3>%PRODUCT_NAME%</h3>
<span class="price"><span class="amount"><ins>
<i> vanaf</i>
&euro; %PRICE%</ins></span></span>
<a href='%PRODUCT_URL%' rel="nofollow" class="add_to_cart_button button product_type_simple">Vergelijken</a>
</li>
%IF_EVERY2%
<li class="product ">
%IF_IMAGE%
<a href='%PRODUCT_URL%'><img width="150" height="150" src='%IMAGE_URL%' class="attachment-shop_catalog wp-post-image" alt='%PRODUCT_NAME%'/></a>
%ENDIF_IMAGE%
<h3>%PRODUCT_NAME%</h3>
<span class="price"><span class="amount"><ins>
<i> vanaf</i>
&euro; %PRICE%</ins></span></span>
<a href='%PRODUCT_URL%' rel="nofollow" class="add_to_cart_button button product_type_simple">Vergelijken</a>
</li>
%ENDIF_EVERY2%
%IF_EVERY3%
<li class="product ">
%IF_IMAGE%
<a href='%PRODUCT_URL%'><img width="150" height="150" src='%IMAGE_URL%' class="attachment-shop_catalog wp-post-image" alt='%PRODUCT_NAME%'/></a>
%ENDIF_IMAGE%
<h3>%PRODUCT_NAME%</h3>
<span class="price"><span class="amount"><ins>
<i> vanaf</i>
&euro; %PRICE%</ins></span></span>
<a href='%PRODUCT_URL%' rel="nofollow" class="add_to_cart_button button product_type_simple">Vergelijken</a>
</li>
%ENDIF_EVERY3%
%IF_EVERY4%
<li class="product last">
%IF_IMAGE%
<a href='%PRODUCT_URL%'><img width="150" height="150" src='%IMAGE_URL%' class="attachment-shop_catalog wp-post-image" alt='%PRODUCT_NAME%'/></a>
%ENDIF_IMAGE%
<h3>%PRODUCT_NAME%</h3>
<span class="price"><span class="amount"><ins>
<i> vanaf</i>
&euro; %PRICE%</ins></span></span>
<a href='%PRODUCT_URL%' rel="nofollow" class="add_to_cart_button button product_type_simple">Vergelijken</a>
</li>
%ENDIF_EVERY4%
<li class="product first">

{link saved}...
Can you please help me on this one?

Thanks a lot!
Koen

Submitted by support on Wed, 2013-09-18 07:42

Hello Koen,

Sure - I think this will be best done by adding support %IF_FISRT%...%ENDIF_FISRT%, %IF_LAST%...%ENDIF_LAST%.

To do this, edit pto_search.php and look for the following code at line 559:

  if (strpos($each,"%IF_EVERY"))

...and REPLACE with:

  if ($i==0)
  {
    $each = str_replace('%IF_FIRST%','',$each);
    $each = str_replace('%ENDIF_FIRST%','',$each);
  }
  else
  {
    $each = preg_replace('/%IF_FIRST%(.*)%ENDIF_FIRST%/U','',$each);
  }
  if ($i==(count($pto_searchResults)-1))
  {
    $each = str_replace('%IF_LAST%','',$each);
    $each = str_replace('%ENDIF_LAST%','',$each);
  }
  else
  {
    $each = preg_replace('/%IF_LAST%(.*)%ENDIF_LAST%/U','',$each);
  }
  if (strpos($each,"%IF_EVERY"))

With that in place, as

Search Results / Before:

<ul class="products">

Search Results / Each

<li class="product %IF_FIRST%first%ENDIF_FIRST% %IF_LAST%first%ENDIF_LAST%">
  ... rest of per product template here...
</li>

Search Results / After:

</ul>

Hope this helps!

Cheers,
David.
--
PriceTapestry.com

Submitted by koen on Thu, 2013-09-19 13:13

Hi David,

Thanks a lot! It's almost working....
I think there must be a counter somewhere which says that every fourth item is the last and the fifth (or nineth or thirteenth) is the first.
I already changed the code in Search Results Each to:

<li class="product %IF_FIRST%first%ENDIF_FIRST% %IF_LAST%last%ENDIF_LAST%">
  ... rest of per product template...
</li>

Is there a way to incorporate this in the code?
Please have a look at: {link saved}

Cheers,
Koen

Submitted by support on Thu, 2013-09-19 13:24

Hello Koen,

This line in the replacement:

  if ($i==count($pto_searchResults))

..should actually have been:

  if ($i==(count($pto_searchResults)-1))

(corrected above)

I spotted this when viewing the source of your example URL - the "product first" class is created as expected, all others are just "products".

If that doesn't resolve it, what might be required is making each item a fixed height div - unfortunately i'm no CSS expert but it looks like from the example URL that items are being floated left but if they're not always the same height the left float may not be fully left on the page... Let me know if you're still not sure after making the above change...

Cheers,
David.
--
PriceTapestry.com

Submitted by koen on Thu, 2013-09-26 14:37

Hi David,

It starts to work, but I'm still not able to get the "first" statement in every fifth, nineth, etc. The "last" works fine for every fourth, but I can't figure out how to get the "first" after this "last".
I think there must be a counter somewhere to determine that the item number is 5, 9 or 13... (or that the number before was divisible by four)...

The code I use now is:

<li class="product %IF_FIRST%first%ENDIF_FIRST% %IF_EVERY4%last%ENDIF_EVERY4%
%IF_LAST%last%ENDIF_LAST%">

Hope you can help me figure this out...

Thanks a lot,
Koen

Submitted by support on Thu, 2013-09-26 16:33

Hi Koen,

I've worked this out - what's required is an modulo operator that works on zero based rather than 1 based index.

With the above changes remaining in place so that you can keep support for (if required) %IF_FIRST% and %IF_LAST%, in your modified pto_search.php look for the following code at line 583:

        if (!(($i+1) % $n))

...and REPLACE with:

        if (!(($i) % $n))
        {
          $each = str_replace('%IF_0EVERY'.$n.'%','',$each);
          $each = str_replace('%ENDIF_0EVERY'.$n.'%','',$each);
        }
        else
        {
          $each = preg_replace('/%IF_0EVERY'.$n.'%(.*)%ENDIF_0EVERY'.$n.'%/U','',$each);
        }
        if (!(($i+1) % $n))

This adds support for a zero-based "EVERY" placeholder, using

%IF_0EVERY4%...%ENDIF_0EVERY4%

So with the above in place, in your template:

<li class="product %IF_0EVERY4%first%ENDIF_0EVERY4% %IF_EVERY4%last%ENDIF_0EVERY4%">

Hope this helps!

Cheers,
David.
--
PriceTapestry.com

Submitted by koen on Thu, 2013-09-26 19:19

Whee-haaa!! It works, thanks a lot!