Archive for the ‘job’ Category
03
Feb
This product page inspired me to write this post. It was launched around February last year (uh oh time flies!) and the first successful order was made around that time too. By then, there were only about 20 products or less, and really short attributes i.e. volumes in 8, 12 or 16 oz. strength like mild, regular, etc. Last monday, new products came in for addition to the site and they have quite longer attributes. It could have had a liquid width on the attribute and cart buttons but they had a really good design advisers and wanted to follow the design to the pixel.
Initially, this html code composes the product attribute and cart button, notice that <span class="c">Cherry</span> is a one word attribute for scent
<div class="cartbutton" style="background-image: url(images/button-long-add-to-bag.gif);"> <span class="c">Cherry</span> <span class="c">8 oz.</span> <span class="c">$5.99</span> <span class="d"> <a class="e" href="cart.php?product=5|33404&as=5">Add to bag</a> </span> <span class="e">» ITEM: 33404</span> </div>
And the new ones came with the colors “Casino Red”, “Golden Chestnut” and “Orchid Black” – long attributes, and two others “Copper” and “Spice” – short and manageable, as the column width will fit the entire word.
I was really planning to rewrite the whole attribute and cart button section, but I didn’t had much time. I figured I can make the font smaller and paddings or margins can go smaller than the regular so that two lines would fit in the box if the attribute value is a word longer. But I cannot be in PHP, its not really the way to go. So, if I can add another class that would override existing font-size and parent margin/padding, that would work. Here, I thought, word count doesn’t really need be in the PHP side and since I’m using Smarty, I found in it a variable modifier that can print the number of words in a variable, and that’s it. I can add another class in the column span like words-10 or countwords-3 in my template by the number of words that is present in the variable. Below is the generated code
<div class="cartbutton" style="background-image: url('images/button-long-add-to-bag.gif');"> <span class="c col-color words-2">Casino Red</span> <span class="c col-volume">8 oz.</span> <span class="c">$11.39</span> <span class="d"> <a href="cart.php?product=28|33825&as=14" class="e">Add to bag</a> </span> <span class="e">» ITEM: 33825</span> </div>
CSS rules
/* default rules */ .cartbutton { height: 23px; background: url('/images/button-add-to-bag.gif') no-repeat left center; color: #333; } .cartbutton span { display: block; text-align: center; float: left; font-weight: bold; font-size: 10px; padding-top: 5px; } .cartbutton span.c { width: 45px; } .cartbutton span.d { width: 80px;} .cartbutton span.d a { color: #fff; text-decoration: none; } .cartbutton span.e { margin-left: 10px; width: 100px; } /* special rule for two word attribute */ span.words-2 { padding-top: 3px; line-height: 98%; font-size: 9px; }
And this is how it is setup in the template.
<div class="cartbutton" style="background-image: url('images/button-long-add-to-bag.gif');"> {if $attr[at].color} <span class="c col-color words-{$attr[at].color|count_words}">{$attr[at].color}</span> {/if} {if $attr[at].strength} <span class="c col-strength words-{$attr[at].strength|count_words}">{$attr[at].strength}</span> {/if} {if $attr[at].scent} <span class="c col-scent">{$attr[at].scent}</span> {/if} {if $attr[at].volume} <span class="c col-volume">{$attr[at].volume}</span> {/if} <span class="c"> $ {if !$attr[at].amount} {$results[r].amount} {else} {math equation="x" x=$attr[at].amount format="%.2f"} {/if} </span> <span class="d"> <a href="cart.php?product={$results[r].id}|{if $results[r].sku && !$attr[at].sku}{$results[r].sku}{elseif $attr[at].sku}{$attr[at].sku}{/if}&as={$attr[at].pas_id}" class="e">Add to bag</a> </span> <span class="e">» ITEM: {if $results[r].sku && !$attr[at].sku}{$results[r].sku}{elseif $attr[at].sku}{$attr[at].sku}{/if}</span> </div>
Those extra class names like col-volume, col-scent and col-strength are only for future use, who knows what other formatting and adjustments on the data and theme will happen. Its really fun working with MVC model. Hope it helps 
Happy coding!
27
Oct
This plugin is dependent on WP/GeoTrack by Johannes Lietz, this is NOT a stand-alone plugin, it won’t work if WP/GeoTrack is not installed anyway, so it’s safe.
And don’t look for it in WP Plugins repo, you won’t find it there 
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | /* Plugin Name: Top Visitors Flag Plugin URI: http://www.marvinmarcelo.com/ Description: This plugin displays visitors on sidebar as widget dependent on <a href="http://dadabase.de/weblog/archives/2006/05/23/wordpress-geotrack-plugin">WP/GEO-Track plugin</a>. Author: Marvin Marcelo Author URI: http://www.marvinmarcelo.com/ Version: 1.0.0 */ function tvf_get_topvisits() { global $wpdb, $table_prefix; $sql = "select count(*) as `rows` , `country` , `flagname` from `".$table_prefix."geotrack` group by `country` order by `rows` desc limit 0 , 12"; $flagstats = $wpdb->get_results($sql); $html = "<li id='top-country-flags'><h2>Top Visiting Countries</h2><div>\n"; /* id string */ foreach ($flagstats as $cf) { $cf->rows = number_format($cf->rows, 0, "", ","); $html .= "<img src=\"". GEOTRACK_URL . "flags/" . $cf-/>flagname . ".png\" alt=\"Flag of $cf->country with $cf->rows visits\" title=\"$cf->country with $cf->rows visits\" />\n"; } $html .= "</div></li>"; echo $html; } function init_tvf_init(){ register_sidebar_widget("Top Visitors Flags", "tvf_get_topvisits"); } if (defined('GT_NOT_INSTALLED')) { echo "<!-- You need \"http://dadabase.de/weblog/archives/2006/05/23/wordpress-geotrack-plugin\" installed first-->"; } else { add_action("plugins_loaded", "init_tvf_init"); } |
Also, you have to forgive the function, constants, and variables names, we all struggle for a better and sensible one Happy coding!
03
Sep
Found this post from Smash!ng Apps
PHPanywhere is a new online service that’s changing the way people develop on the web. They enable users to develop and maintain their php/html projects online using any standard web browser.
This is a web based free Integrated Development Environment or IDE for the PHP language, in other words it is an application that gives developers all the code editing capabilities they need to develop PHP applications online. It includes a real-time syntax code editor with support for all web formats and a powerful FTP editor.
Because it works in a browser you can start coding right away, no need for installing anything and best of all you can work from anywhere, all you need is an internet connection and a web browser and you’re ready to go.
You can develop and maintain multiple projects with ease using PHPanywhere, because as soon as you log in all your projects (FTP servers) are immediately accessible. PHPanywhere even remembers what files you were working on and reopens them as well.
Real-time syntax code editor
The real-time syntax code editor is really what PHPanywhere is all about, so here is a list of just some of the things it does:
- Syntax highlighting
- Smart indentation for each language
- Code folding
- Full internationalization
- Unlimited undo/redo (now handled on client (browser) side, no more waiting for server response)
- Unlimited tabs
- Find and replace feature (New Feature)
- Displays line numbers (New Feature)
- Code auto completion, snippets (New Feature)
- Displays line numbers (New Feature)
- Code indention (TAB key) (New Feature)
20
Apr
If you have a repeating region in your template and it doesn’t need a wrapper around it, simply use section
1 2 3 | {section name=s loop=$images} <div id="image_{$images[s].id}"><img src="{$images[s].src}" alt="" /></div> {/section} |
Cases where you need html wrap tags is like this
1 2 3 4 5 6 7 8 9 | {if $navlinks} <ul> {section name=s loop=$navlinks} <li id="navitem_{$navlinks[s].id}"> <a href="{$navlinks[s].href}">{$navlinks[s].text}</a> </li> {/section} </ul> {/if} |
This avoids the <ul> being rendered if $navlinks don’t have a return record. Another way is to access Smarty properties
1 2 3 4 5 6 7 | {section name=s loop=$navlinks} {if $smarty.section.s.first}<ul>{/if} <li id="navitem_{$navlinks[s].id}"> <a href="{$navlinks[s].href}">{$navlinks[s].text}</a> </li> {if $smarty.section.s.last}</ul>{/if} {/section} |
But still, this adds an if in the template. As this post title goes, you should avoid them, that’s the basics of OOP system and MVC frameworks, separate logic from code
What made me write this post? Template Designers sometimes hate seeing if statements. In my case, my boss transforms into savvy Designer as well, at times! Bummer
