Laid Back Dogs

Bloke · 2011-11-28 15:59:30

I’ve been working on a site for a local dog behaviour counsellor as she geared up to the launch of her first book. Although the site is still nowhere near how I envisaged and is still pretty amateurish, I’ve had to make it live because of the release of the book — Understanding the Silent Communication of Dogs — so I might as well share it, warts and all.

LaidBackDogs.com

The site is my first attempt at being fluid(ish) for handheld devices, but since I don’t own such a device it’s tricky to test so I’m flying blind! Any improvements in terms of layout / CSS or general help in making the site work/look better would be infinitely welcome. The designer in me is maxed out of creative juice and needs a kick start. I’m in the process of replacing any copyrighted placeholder images, as there are still a handful I robbed off Google Images from unknown sources. Any suitable royalty-free cutesie pictures of dogs greatly appreciated (as are any ideas on a suitable font stack which I haven’t got round to doing either).

As well as the site itself I’ve been involved in the marketing: Facebook, primarily. The site integrates with FB Likes and we’re considering a Facebook micro-site running as an app inside a FB iFrame but have yet to code it up (I’ve done that kind of thing before so I know how to get it singing). The site uses an HTML 5 doctype (though doesn’t use much in the way of HTML goodness) but doesn’t validate thanks to FB’s insistence on using XML namespaces for the Like buttons: would love to find a workaround.

Part of the marketing drive was also a dedicated one-page poster site for the book. We’re currently arguing with Amazon over their ludicrous discount policies, hence the book is showing out of stock despite us having plenty of copies in the office. It can be ordered directly from the laidbackdogs website thanks to the (heavily customised) yab_shop — more later.

And so to the plugins that make the magic work:

adi_gps, adi_variables for various form-based goodness and for holding site-wide constants
zem_contact_reborn, adi_contact for the contact form
mem_form , mem_self_register, rvm_privileged and smd_query for the login system and self-reg portions
rvm_css for zippy stylesheets
rss_auto_excerpt for shortening copy
yab_shop to power the entire e-commerce area
a barrage of smd:
- smd_access_keys for paid downloads and access control
- smd_each, smd_random_text for the pull quotes
- smd_featured for pulling out lead articles
- smd_fuzzy_find because typos are so last century
- smd_if to supercharge conditionals
- smd_image_selector (alpha) for assigning images to articles
- smd_ipn to close the loop on PayPal transactions
- smd_macro for a couple of custom gallery tags
- smd_tabber to offer inventory management panels and accounting information (still WIP)
- smd_thumbnail for the various image sizes
- smd_user_manager for the new user groups and account facilities
- smd_wrap for optional content in forms
- smd_where_used to find where the hell I put stuff :-)

The shop is fairly complex and has resulted in some big changes to the way yab_shop works. Namely:

Added MLP support (thanks net-carver) though it’s not used on this site
Added a slew of callbacks (thanks net-carver)
Added pluggable_ui callbacks for rendering extra content on the checkout page
Added multiple tax bands per product
Added shipping by weight (ongoing development)
Permitted checkout fields to be optional

I’m investigating Google Checkout and researching the behemoth API to see if I can get smd_ipn to handle those too.

There are a few functionality areas that I’m pleased with. Firstly, new accounts. You can either request an account using the usual mem_self_reg route or you can do it during the checkout process by selecting a user name there. Any details you fill in from either method are automatically added to your bio; at least they will once I figure out how to reliably parse an address to separate it into its component parts. Accounts are created locedk so you cannot login until you complete the sign-in process by verifying your e-mail address. That’s done using a custom thanks_form which contains a one-time-use smd_access_key which activates your account. Admin-side login is forbidden to customer accounts by a little plugin, smd_restrict.

Secondly, smd_ipn is really starting to come along nicely. I’m especially pleased with the digital PDF download that you can add to your cart and buy. When PayPal verify the payment smd_ipn automatically e-mails you an smd_access_key link to the standard Txp file_download.

Thirdly, the IPN plugin’s tags allow me to pull out invoice info. I can use smd_tabber to put together a dashboard for the accountants to log into where they can slice and dice the orders by date range. The results can be presented in whatever appropriate format — perhaps even with a “Print CSS” stylesheet if I put my mind to it — so the books can be balanced against orders.

There are a few shop niggles yet: for some reason the thanks url isn’t being followed so you just get “no items in cart” displayed which is pretty annoying. Also, the ship by weight feature needs to be more intelligent to prevent you from choosing an inappropriate shipping option based on the max/min weights a courier will carry.

But on the whole it works well and it’s reinvigorated my belief that you really can bend Txp to suit commerce with some clever tags. If anybody wants any more specifics on how certain things are done, just yell and I’ll see what I can do. In the meantime if anyone has any ideas on how I can get the site looking more professional, feel free to nudge me in the right direction. Thanks!

Last edited by Bloke (2011-11-28 16:48:11)

net-carver · 2011-11-28 18:09:43

Nice one Stef, sounds like a very nice assembly of functionality & weight based shipping rules are a good add to yab_shop. Can you share a little more about the addition of pluggable_ui in there?

Guess I’ll need to play with smd_tabber as it’s one I’ve not explored yet.

maruchan · 2011-11-28 18:14:43

Awesome writeup, Stef! Thank you for sharing it. Nice work and I really enj…

smd_image_selector (alpha) for assigning images to articles

what

els · 2011-11-28 21:37:16

Bloke wrote:

The site is my first attempt at being fluid(ish) for handheld devices

After a very quick test on my mobile: the ‘clickable’ items (navigation etc.) are a bit small, and the site title, tagline and the link in the header are overlapping, but it’s readable :) I think I would prefer the content in full width, and the navigation above it.

Any suitable royalty-free cutesie pictures of dogs greatly appreciated

Most of the time I can find what I need on istockphoto.com; small pictures are not expensive. For behaviour related photos you could also check Wikimedia Commons.

Added MLP support (thanks net-carver) though it’s not used on this site

Thirdly, the IPN plugin’s tags allow me to pull out invoice info

Whoa, both very nice. Now I know whom to talk to if/when I’m going to need this :)

the digital PDF download that you can add to your cart and buy.

Is the PDF here meant to to be a paid download? I can download it without it being added to the cart, and I did wonder why the full article wasn’t just published on the site. If the article is meant to be available for free, I’d say that the extra clicks before being able to read it might discourage visitors.

I was happy to see a shipping to Europe option, but either the instructions are not clear enough, or I just didn’t get it (the latter may very well be the case). At the checkout ‘Login name’ must be entered, so I understood that I had to register first, so that’s what I did. When I went back to the checkout and entered my login name, it said something like ‘Login name already taken’ (or not available, something like that)… I visited another page, then went back to the checkout and didn’t get this message again when I entered my login name. (Edit: OK, figured it out, had to activate the account first… doh!) But… no field for the country. Can I or can’t I order the book? (Suppose I could just proceed to find out, but I didn’t.)
Also, what I would expect, having provided my address and everything during registration, is that I shouldn’t have to enter this again in the checkout.

Oh, and I like the content of course :)

Last edited by els (2011-11-28 21:52:29)

jakob · 2011-11-28 22:31:17

looks like a real tour-de-force where you’ve thought of it seems practically everything… Intrigued about smd_image_selector too … and how you differentiate between admin users and customers with smd_restrict.

tye · 2011-11-28 23:06:40

SXU for free images… they are an iStockphoto feeder site – so put paid results above and below free – but in 37 pages of dogs, there should be something.

I’m glad to see that its not only me that uses quite a few plugins per site :)

You don’t really need a device as such to test your design at different screen sizes – just add custom sizes to the resize part of the Webdeveloper Toolbar for Firefox – then watch it resize to those sizes… yours works fine on an ipad – but wouldn’t go too well on a iphone

Last edited by tye (2011-11-28 23:07:26)

tye · 2011-11-29 06:36:18

PS – suitably impressed with the e-commerce setup – nice and easy…. something txp needs I reckon just to fill those little holes where a full blown solution isn’t warranted – top work again :)

Bloke · 2011-11-29 10:22:49

(I accidently edited this post instead of quoting it, so the following is a recreation of the original content with my guess on the formatting. So sorry – Destry.)

Thanks for the comments everyone. Let’s start at the beginning.

net-carver wrote:

Can you share a little more about the addition of pluggable_ui in there

So far I’ve just added two callbacks checkout_form_preamble and checkout_form_postamble which allow me to hook into the start and end of the checkout customer details form. That allows me to top and tail new fields — in this case I’m only adding the login box at the start if you are not already logged in — and have those items optionally passed along to PayPal as custom fields. There are other places I can think of where pluggable_ui might be handy — in the cart, for instance — but I haven’t explored them yet.

I’m intercepting the yab_shop_on_checkout / paypal event/step here to create the account as soon as you submit the cart. I wanted to do it after successful IPN but since the address details that were passed forward only match what you type in the checkout fields if you don’t use your PayPal account, I had to do it before payment. Small price to pay, and if there are any spam accounts created I can find them with smd_user_manager fairly easily.

maruchan wrote:

smd_image_selector (alpha) what

:-) It’s a port of jmd_img_selector but with, well, a bit more. A precursor to smd_macro, it allows you to define your own insertion mechanisms which are automatically added to the interface as a select list. So you could define a new entry called “full gallery” and set it up so that when you select the images and hit “do it” a <txp:images> tag (or some other gallery tag, or even an smd_macro) is inserted at the cursor caret, populated with the given images. You can insert stuff in any article field — custom field, article image, whatever — and there are other options like allowing people to assign the class that’s added to the gallery. Oh, it also integrates with smd_thumbnail so if that’s installed you get an automatic select list of available sizes to insert.

The other controls have been beefed up as well with more filtering options but unfortunately the plugin suffers from the same problems as the original at the moment: mainly that it’s slow when the image pool gets large. It really needs a proper rewrite using jQuery (I’m only halfway through that) and I’ve also been given the green light to take ownership of another plugin (currently almost orphaned) that I intend to integrate with this one to kick the crap out of Txp 4’s image handling workflow. Just need time to sit down and do it.

Els wrote:

the ‘clickable’ items (navigation etc.) are a bit small,

Thanks for checking it out. Probably a daft CSS rule overriding something. I wonder if Opera mobile developer is a good enough test environment to simulate handhelds. Hmmm.

I would prefer the content in full width, and the navigation above it.

Me too! Just couldn’t figure out how to make the layout work that way. If anyone has any ideas then I’d love to do it properly like that. I notice in some browsers on Linux the side menu options overlap the main content area for some reason I can’t fathom.

btw, thanks for the Wikimedia link. Lots to choose from. I’ve set Rosie off picking good ones that she agrees are suitable for the site. Will see what she comes back with.

Is the PDF here [Dog at a Supermarket] meant to to be a paid download?

No. That’s a freebie. Rosie wrote it as a separate article and I laid it out as a magazine-like thing then made a PDF out of it. She wanted it as a download instead of as a website article, and I was relieved because I was too lazy to figure out the pullquotes and CSS to make it look good on browsers and be able to shrink down to mobile size reliably. Perhaps I should learn so I can remove that usability hurdle!

I was happy to see a shipping to Europe option, but either the instructions are not clear enough, or I just didn’t get it

It’s not you. The instructions and plugin logic need improving. I’ll see if I can do some of that today. The whole shiping by weight thing is still being developed live so I’m tinkering with it and trying to make it smarter.

At the checkout ‘Login name’ must be entered

Yikes, it’s meant to be optional. I’ll check that. The idea is that you can either:

Option a

Buy direct without a laidbackdogs account. If you supply an e-mail address then that’s used in the PayPal form and your delivery address is pulled from your PayPal account (hence the only required field is e-mail).

If you don’t have a PayPal account you can either input the fields on the LaidBackDogs checkout form and choose ‘Credit/Debit card payment’ on the subsequenet PayPal screen or just put your e-mail address in (for the invoice to be sent to) and then fill in all your delivery address details in PayPal.

Option b

Sign in with your mem_self_registered account. Your address details (if you’ve supplied them) will — eventually when I finish the code — be imported into the form to save you having to type them again (sorry for the inconvenience at the moment). The cookie will remember them from then on if you choose.

Option c

Sign up for an account at checkout by entering a login name. If you do that you’re e-mailed further instructions on activating your account — exactly as if you had signed up using the self-reg form. Again, when the code is finished, I’ll extract any address fields from the checkout form and populate your profile with them automatically.

You can mix/match here depending on what you want to do. It’s my way of getting round various privacy laws because you can elect to have an account, have the site store your details in a cookie or defer everything to PayPal. Customers’ choice.

The problem I have right now is that the mem_self_reg Profile Edit form uses an ‘address’ textarea added to the txp_users table. yab_shop uses separate adress, city, postcode, etc fields. So if you enter them in one place they need to be split or combined to populate the other. And that’s proving tricky. I’m almost at the stage where I’m going to give up and simply ditch mem_self_reg’s profile edit tool and do my own version using smd_bio because I can than define separate address fields in the bio which makes a nice 1-to-1 mapping between checkout and profile.

Once I get my head screwed on again, the next step is a customer area for people who have signed up where you can get priority info, event notifications, vouchers, first copies of her next book, signed copies, etc. We’ll be using Facebook for getting the message across, then drawing people to the site and offering longer-term incentives for loyal followers (since FB users can be fickle and just Like something to get an offer then unLike it once they have their freebie). Taking baby steps towards that utopia!

no field for the country

An oversight, thanks. I’ll check the shop and see if there’s an option to switch that on. Would be wonderful if I could then restrict the courier options to those suitable for the chosen country, but I don’t know if that’s possible (at least without using a giant lookup table).

jakob wrote:

how you differentiate between admin users and customers with smd_restrict.

Very dirtily. Here’s the entire plugin:

// Autologout anyone with priv level 7: no admin side access.
// The only hole is if ?event=plugin on login page, but since level 7
// users have no tab privs it's not a security issue
if(@txpinterface == 'admin') {
  global $txp_user;

  $privs = safe_field('privs', 'txp_users', "name='".doSlash($txp_user)."'");
  if ($privs == '7') {
    $url = hu.'textpattern/index.php?logout=1';
    header('location:'.$url);
  }
}

Thus if you try and log in to Txp’s admin side and only have priv level 7 (which all Customers have thanks to smd_user_manager — it’s pretty much a clone of ‘None’) you are immediately logged out. But since this plugin only runs on the admin side you are free to log in from the public site.

tye wrote:

SXU for free images

Brilliant, thanks.

yours works fine on an ipad – but wouldn’t go too well on a iphone

In which case I need to find out how to make it scale down better. I’m really new at all this malarky so any hints greatly appreciated.

Thanks again to those of you who have tried this out and offered your thoughts. I’ll keep plugging away at this one to improve things so if anyone has anything to offer or spots any oddities or where things can be improved I’m always here to take it on board. It’s the only way I’ll learn!

Last edited by Bloke (2011-11-29 12:24:36)

Last edited by Destry (2012-11-29 11:02:13)

Destry · 2011-11-29 12:32:04

tye wrote:

You don’t really need a device as such to test your design at different screen sizes

I’d disagree. Mimicking the width is only part of it. There’s also pixel densities (besides resolutions), special webkit elements (or not), the general look and feel. There’s no way you can reliably dev/test/tweak for mobile devices without having the mobile devices. Less critical for tablets, perhaps (depending on interactive elements), but more so for phones.

To make matters worse, Stef is a Windows user. :)

Stef, how many clones of yourself are there now, anyway? Must be around 10, I’m guessing.

Bloke · 2011-11-29 12:46:29

Destry wrote:

There’s no way you can reliably dev/test/tweak for mobile devices without having the mobile devices

Undoubtedly, but for those of us without infinite funds, is Opera mobile emulator a reasonable substitute? Anyone any experience with it?

Stef, how many clones of yourself are there now, anyway?

10 is a conservative estimate. One per hour of the day is probably closer to the mark. Anyone seen Primer, one of my favourite films? :-D

jakob · 2011-11-29 13:15:03

Stef, thanks for filling in some of the blanks!

Mimicking the width is only part of it. There’s also pixel densities (besides resolutions), special webkit elements (or not), the general look and feel. There’s no way you can reliably dev/test/tweak for mobile devices without having the mobile devices

Destry, that’s what I’ve always thought too. Not owning a smartphone or a tablet I feel a bit ‘out of it’. My feeling is that there is a slightly different surfing paradigm (for want of a better word) that one should really consider. It starts with big click areas, phone UI widgets, touch gestures, alternative signalling methods to compensate for the lack of mouseover and probably other things. I’m not sure that an on-screen emulator can really provide that. Then again, as a result of my lack of own experience I might be overrating these.

mrdale · 2011-11-29 15:35:39

Nice work stef, and great write up.

Textpattern CMS

Textpattern CMS support forum

#1 2011-11-28 15:59:30

Laid Back Dogs

#2 2011-11-28 18:09:43

Re: Laid Back Dogs

#3 2011-11-28 18:14:43

Re: Laid Back Dogs

#4 2011-11-28 21:37:16

Re: Laid Back Dogs

#5 2011-11-28 22:31:17

Re: Laid Back Dogs

#6 2011-11-28 23:06:40

Re: Laid Back Dogs

#7 2011-11-29 06:36:18

Re: Laid Back Dogs

#8 2011-11-29 10:22:49

Re: Laid Back Dogs

#9 2011-11-29 12:32:04

Re: Laid Back Dogs

#10 2011-11-29 12:46:29

Re: Laid Back Dogs

#11 2011-11-29 13:15:03

Re: Laid Back Dogs

#12 2011-11-29 15:35:39

Re: Laid Back Dogs

Board footer