You must be logged in to post


Register? | Lost Your Password?

Search Forums:


 






Wildcard Usage:
*    matches any number of characters
%    matches exactly one character

Help Forums How To Dynamic Size and Color Options

Dynamic Size and Color Options
Page:   1  
UserPost

8:06 pm
April 2, 2008


Market Admin

Admin

posts 4756
1

If you wish to have dynamic size and color options, change your default single.php file contents to the following:

<?php get_header(); ?>
<?php get_sidebar(); ?>

<div id="content">
<div class="breadcrumbs">
<p><strong><a href="<?php bloginfo('url'); ?>">
<?php bloginfo('name'); ?>
</a></strong> &#8250;
<?php the_category(' '); ?>
&#8250;
<?php the_title(); ?>
</p>
</div>
<?php if (have_posts()) : while (have_posts()) : the_post(); // check for product thumbs
$thumb = get_post_meta($post->ID, 'pi1', $single = true); // check for product thumbs
$thumb2 = get_post_meta($post->ID, 'pi2', $single = true); // check for product thumbs
$thumb3 = get_post_meta($post->ID, 'pi3', $single = true); // check for product large image
$pli = get_post_meta($post->ID, 'pli', $single = true); // check for item price
$price = get_post_meta($post->ID, 'price', $single = true); // check items specs
$specs = get_post_meta($post->ID, 'specs', $single = true); $size = get_post_meta($post->ID, 'size', $single = true);

$sizelist = explode(" ", $size);

$color = get_post_meta($post->ID, 'color', $single = true);

$colorlist = explode(" ", $color);
?>
<div class="post" id="post-<?php the_ID(); ?>">
<div class="ls">
<div class="mi">
<?php // if there's a thumbnail
if($pli !== '') { ?>
<img src="<?php bloginfo('template_directory'); ?>/phpthumb/phpThumb.php?src=<?php echo $pli; ?>&w=250&h=250&far=C" alt="<?php the_title(); ?>" />
<?php } // end if statement

// if there's not a thumbnail
else { echo ''; } ?>
</div>
<div class="tr">
<?php // if there's a thumbnail
if($thumb !== '') { ?>
<?php echo $thumb; ?>
<?php } // end if statement

// if there's not a thumbnail
else { echo ''; } ?>
<?php // if there's a thumbnail
if($thumb2 !== '') { ?>
<?php echo $thumb2; ?>
<?php } // end if statement

// if there's not a thumbnail
else { echo ''; } ?>
<?php // if there's a thumbnail
if($thumb3 !== '') { ?>
<?php echo $thumb3; ?>
<?php } // end if statement

// if there's not a thumbnail
else { echo ''; } ?>
</div>
</div>
<div class="desc">
<h2>
<?php the_title(); ?>
<span class="price"><strong>$</strong><?php echo $price; ?></span> </h2>
<?php the_content(); ?>
<div class="specs">
<p><strong>Additional Details:</strong> <?php echo $specs; ?></p>
</div>
<div class="buy">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="<?php bloginfo('admin_email'); ?>">
<input type="hidden" name="item_name" value="<?php the_title(); ?>">
<input type="hidden" name="amount" value="<?php echo $price; ?>">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="return" value="<?php bloginfo('url'); ?>">
<input type="hidden" name="cancel_return" value="<?php bloginfo('url'); ?>">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="bn" value="PP-BuyNowBF">
<table>
<tr>
<?php if (!empty($size)){

echo "

<td><input type=\\"hidden\\" name=\\"on0\\" value=\\"Size\\"/>

Size:</td>

<td><select name=\\"os0\\" class=\\"field\\" >

<option value=\\"$sizelist[0]\\">$sizelist[0]</option>";

if (isset($sizelist[1])) { echo "<option value=\\"$sizelist[1]\\">$sizelist[1]</option>"; }

if (isset($sizelist[2])) { echo "<option value=\\"$sizelist[2]\\">$sizelist[2]</option>"; }

if (isset($sizelist[3])) { echo "<option value=\\"$sizelist[3]\\">$sizelist[3]</option>"; }

if (isset($sizelist[4])) { echo "<option value=\\"$sizelist[4]\\">$sizelist[4]</option>"; }

if (isset($sizelist[5])) { echo "<option value=\\"$sizelist[5]\\">$sizelist[5]</option>"; }

if (isset($sizelist[6])) { echo "<option value=\\"$sizelist[6]\\">$sizelist[6]</option>"; }

if (isset($sizelist[7])) { echo "<option value=\\"$sizelist[7]\\">$sizelist[7]</option>"; }

if (isset($sizelist[8])) { echo "<option value=\\"$sizelist[8]\\">$sizelist[8]</option>"; }

if (isset($sizelist[9])) { echo "<option value=\\"$sizelist[9]\\">$sizelist[9]</option>"; }

if (isset($sizelist[10])) { echo "<option value=\\"$sizelist[10]\\">$sizelist[10]</option>"; }

echo " </select>

</td>"; } ?>
</tr>
<tr>
<td><?php if (!empty($color)){

echo "<input type=\\"hidden\\" name=\\"on1\\" value=\\"Color\\"/>

Color:</td>

<td><select name=\\"os1\\" class=\\"field\\">

<option value=\\"$colorlist[0]\\">$colorlist[0]</option>";

if (isset($colorlist[1])) { echo "<option value=\\"$colorlist[1]\\">$colorlist[1]</option>"; }

if (isset($colorlist[2])) { echo "<option value=\\"$colorlist[2]\\">$colorlist[2]</option>"; }

if (isset($colorlist[3])) { echo "<option value=\\"$colorlist[3]\\">$colorlist[3]</option>"; }

if (isset($colorlist[4])) { echo "<option value=\\"$colorlist[4]\\">$colorlist[4]</option>"; }

if (isset($colorlist[5])) { echo "<option value=\\"$colorlist[5]\\">$colorlist[5]</option>"; }

if (isset($colorlist[6])) { echo "<option value=\\"$colorlist[6]\\">$colorlist[6]</option>"; }

if (isset($colorlist[7])) { echo "<option value=\\"$colorlist[7]\\">$colorlist[7]</option>"; }

if (isset($colorlist[8])) { echo "<option value=\\"$colorlist[8]\\">$colorlist[8]</option>"; }

if (isset($colorlist[9])) { echo "<option value=\\"$colorlist[9]\\">$colorlist[9]</option>"; }

if (isset($colorlist[10])) { echo "<option value=\\"$colorlist[10]\\">$colorlist[10]</option>"; }

echo "

</select>

</td>"; } ?>
</tr>
</table>
<input type="image" src="<?php bloginfo('template_directory'); ?>/imgs/bn.gif" class="pp" border="0" name="submit" alt="Make payments with PayPal – it's fast, free and secure!">
</form>
</div>
</div>
<div style="clear: both"></div>
</div>
<?php endwhile; else: ?>
<p>Sorry, no posts matched your criteria.</p>
<?php endif; ?>
<div style="clear: both"></div>
</div>
<div id="grid">
<div class="rtp"></div>
<div class="features">
<div class="left">
<p>select product category:</p>
<form style="margin-bottom:0;margin:0;" action="<?php bloginfo('url'); ?>" method="get">
<?php wp_dropdown_categories('show_count=1&hierarchical=1'); ?>
<input type="image" src="<?php bloginfo('template_directory'); ?>/imgs/go.gif" value="submit" name="submit" alt="submit" title="switch category" />
</form>
</div>
<div class="right">
<p>Search for a item:</p>
<form style="margin-bottom:0;margin:0;" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input class="postform" type="text" name="s" value="Search for something" onFocus="this.value='',this.style.backgroundColor='#fff'" onBlur="this.style.backgroundColor='#EEEEEE'" size="42" id="search_input" />
<input type="image" src="<?php bloginfo('template_directory'); ?>/imgs/search.gif" value="Search" alt="Search" title="Search" />
</form>
</div>
<div class="farright">
<?php the_author_posts(); ?>
products in database.</div>
<div style="clear: both"></div>
</div>
<?php $my_query = new WP_Query('showposts=5'); while ($my_query->have_posts()) : $my_query->the_post(); // check for product large image
$pli = get_post_meta($post->ID, 'pli', $single = true); $do_not_duplicate = $post->ID; ?>
<?php if (in_category('13')) continue; ?>
<div class="post" id="post-<?php the_ID(); ?>">
<div class="inside">
<div class="item">
<?php // if there's a thumbnail
if($pli !== '') { ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/phpthumb/phpThumb.php?src=<?php echo $pli; ?>&w=100&h=70&q=100&zc=1" alt="<?php the_title(); ?>" /></a>
<?php } // end if statement

// if there's not a thumbnail
else { echo ''; } ?>
</div>
<div class="top">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<?php the_title(); ?>
</a></h2>
</div>
</div>
</div>
<?php endwhile; ?>
<div style="clear: both"></div>
</div>
<?php get_footer(); ?>

Then, use the custom fields "size" and "color" to specify the options for each individual item. Leave a space between each option.

IE: If you wish to have sizes of small, medium, and large, do the following:

Custom field key – "size"

Value – "small medium large"

(without quotes obviously)

Same idea for colors as well…

Custom field key – "color"

Value – "red blue green white back tan"

The limitation is that the max of each you can have is 10. You can see how there are 10 colorlist and sizelist lines in the code, each numbered one to ten. Simply copy and paste this over increasing the values up as much as you want if you will have a lot of color and / or size options for each product.

This will be worked into the next full Market and Market 2 release in the coming weeks.

(Special thanks to John of Simply-Basic for supplying this code and saving me some time!)

3:47 pm
April 21, 2009


Sashi

Member

posts 20
2

MT, did you ever include this in your new versions? like you had said int he posting above. The reason i ask is, i bought your product after this posting was done and i had to copy and paste this file to get the dynamic image and color, without this modification this feature was not included in the newer (assuming, its the newer version) , please clarify.

10:05 pm
April 21, 2009


Market Admin

Admin

posts 4756
3

Hi Sashi,

The forum admin who wrote the above (AJ) actually isn't around anymore.  (I took over in mid-September of 2008)

Are you working with Market 3 or higher, or something earlier?

What sort of dynamic functionality are you trying to acheive?

From what I gather from the code above (specifically the description at the end) — The current version of Market has has that for awhile now.  It's slightly different, by using commas to separate the words rather than spaces.  (a conflict arose when using data like "light blue" and "extra large", etc.)

Have you played around recently with the online demo?

That might give you an idea of where things are at currently.

1:56 pm
April 22, 2009


Sashi

Member

posts 20
4

hi,

 the reason its confusing is because i still have to resize the pictures to 350x350 to get it to appear right , if not they get stretched and pulled. i thought the code above was written to fix that exact issue but it still remains , can you tell me if we still have to rezise the pictures to 350x350 pix . Also, i am trying to resize the text size of the product description, the text size i have showing up on my site is much bigger then the one you have it on your demo version? if yes, what are the specs?

3:54 pm
April 22, 2009


Market Admin

Admin

posts 4756
5

I believe all you have to do, is to make the image height and width equal.  (square)

Resizing will happen automatically, but if the images are not square to start with — that's when you'll get the distortions.

In order to keep the product info page from getting tweaked because of different image sizes, it needs to hardcode a set of values to restrict a large image from taking over the entire page.

You should be good as long as you prepare the images before uploading. 

They can be any starting size (400x400, 557x557, 205x205, etc.) just as long as they are squared.

If the image itself doesn't lend itself to being square (for example a rectangle print), then just add white space on the edges to make up for the shape.  When it displays on your website, the whitespace will blend into the page background and become invisible.

Hope this helps clarify.
Page:   1  


 

Market takes e-commerce to the next level with an easy to use, quick setup platform. Learn more or take the tour.