User Experience, request for deeper access.

[Kapitol]

Sorry to sound so vague in the title.

I created a custom template for my client. I have recently updated the site to be fully responsive so it works in multiple resolutions to better serve the user experience. My last hurdle in this redesign is the cart pages.

I know that in its current state, it is breaking the user experience. We see customers abandoning their purchases by the dozens when they reach the secure cart. This is happening because the old template is still being used. As important, the forms of these templates were never really great. This is due to the fact that I cannot change the code for them as Shopsite doesn't make it available to modify.

I could simply be ignorant of what is really available. However I do not see any code listed here, http://www.shopsite.com/help/current/en-US/sc/pro/index.htm, to help me change the forms HTML from tables to divs for greater control.

Has anyone found a way to solve the user interface/user experience issues regarding signup, log in, and register, and checkout forms?

[Jim]

What version of ShopSite are you using?

ShopSite 12 has 9 new themes all of which are using responsive design so they will look good at different screen resolutions.
Even in older versions of ShopSite it is possible to use responsive design by using the ShopSite templates or by creating your own custom templates using the ShopSite template tags and adding css to control the layout.

What type of problems are you having that are "breaking the user experience"

[Kapitol]

We are still on 11.

If you are viewing the entire site on a smart photo at 400 pixels wide, you are then shown a cart at a normal resolution, making you zoom in/out. An update to the template will fix that.

More importantly I need help figuring out what to do with the various forms for shopsite. https://tan.secure-host.com/cgi-artandsoulbeads/sb/registration.cgi?sbid=SSMSB1388310699.12527&func=2&storeid=*28b796a9bc686e49514b69c746a2781b1348def88787&html_reg=html - Not sure if that will work for you. If it doesn't you can access it by going to http://www.artandsoulbeads.com/store/ and click on signup.

If you shrink your browser window to 400 pixels wide we see the form breaking because it's stuck in its table. The register form not only looks bad, but it seems impossible to change, unless I am missing something.

[Jim]

The two code sections below are from a version 12 store (first) and your store. The version 12 store has the text "I forgot my password" and "I'm a new customer..." underneath the input boxes. Note to make things clearer I just replaced all of the url in the hrefs with just URL or URL1. I tried to line up each line of the files so if you put them in two text editor windows you can see them side by side. I added <== to the lines that appear different

Code: Select all

12 version
<table class="email_pw">

<tr><td align=left class="email_pw">

<span id="E_email1">   <==  has span around
Enter E-mail Address: 
</span>        <==

</td>
<td  class="email_pw_select" align=left>
<input tabindex="1" class="email_pw" type="text" name=email1 value=""></td>

<td align=left class="email_pw_note">&#149; <a href="URL"> 

I forgot my password</a></td></tr>

<tr><td align=left class="email_pw">

<span id="E_text1">Enter Password:</span>    <=== has span around

</td><td align=left class="email_pw_select">

<input tabindex="2" class="email_pw" type=password name=text1 value=""></td>

<td class="email_pw_note">&#149; <a href="URL1">I'm a new customer, I need to register</a></td></tr>


</table>

Code: Select all

old  version
<table class="email_pw">
<tbody>    <==  not in 12
<tr><td class="email_pw" align="left">   <== has align left


Enter E-mail Address:


</td>
<td class="email_pw_select" align="left">
<input tabindex="1" class="email_pw" name="email1" value="" type="text"></td>

<td class="email_pw_note" align="left">• <a href="URL">

I forgot my password</a></td></tr>

<tr><td class="email_pw" align="left">

Enter Password:

</td><td class="email_pw_select" align="left">    <== has align left

<input tabindex="2" class="email_pw" name="text1" value="" type="password"></td>

<td class="email_pw_note">• <a href="URL1">I'm a new customer, I need to register</a></td></tr>
</tbody>   <== not in 12

</table>

There doesn't seem to be much difference in the code with the only obvious part being the addition of "<span id="E_email1"> ... </span> around the Enter E-mail Address and the similar <span id="E_text1">Enter Password:</span> and the deletion of a couple of align="left" statements.

I am not a css expert so I don't know what the id="E_email1" and id="E_text1" do. I couldn't find them defined in the css on the page or referenced from the page, so it may be something internal to the registration code or may not be used at all.

You might try adding the span tags to the text that you have configured for the "Enter E-mail Address: " and "Enter Password:" on the Preferences > Store text > Registration screen and see if that helps The text would look like

Code: Select all

<span id="E_email1">Enter E-mail Address: </span>

instead of just

Code: Select all

Enter E-mail Address:

Also compare the two blocks of code and see if there is anything else that I didn't notice that might affect the layout.

I recommend that you update to version 12 as soon as you can so that you can take advantage of new features such as the responsive design templates.

EDIT: If you want to see how ShopSite 12 works you can get a demo store at http://shopsite.com/demo.html .

[BFChris]

One thing I am curious about......

Does the choice of cart template do anything to change the coding/layout output by specific Shopsite tags, like [-- SC_Tax_Shipping --] or do those tags output the same regardless of the template selection.

It is the output of these tags I'm having most trouble getting formatted as I like, as the <form> tags especially are not consistent with proper coding practice (ie using <labels> on form fields and the HTML5 "required" attribute.

[Jim]

The template tags output the same code no matter which template is being used. The layout/display is all handled by css or html coding in the template.

[BFChris]

That's what I thought. The HTML output could really use some "refreshing" though. I can do some things using the CSS styles, but only so much.

Among my wishes:

1) Remove tables

2) Use proper, up-to-date code (<label> tags on <input> items) and remove legacy items (like the hard-coded

Code: Select all

bgcolor="#FFFFCC"

on some of the cart error tables which I can't override with CSS) and bad formatting (like lack of "" around some attribute values).

3) HTML5 support on form fields (at least use of the "required" attribute).

4) More granular access to form field elements to position individually instead of in one block.

~Chris

[loren_d_c]

Why can't you override the bgcolor="#FFFFCC" with CSS? As long as that color setting is not inline CSS itself, CSS should be able to override it if you are styling the correct classes. I am pretty certain I have seen it done with the error messages in the cart. Note that some of the error messages may have different class names assigned depending on what kind of error they are.

-Loren

[Kapitol]

I never got to respond properly, sorry for bumping an older post but I need to show my code to see if I can find a solution.

Below is the code as it appears in the DOM.

Code: Select all

<table border="0" cellpadding="0" cellspacing="0" style="line-height:150%" class="cart">
   <tbody><tr>
    <td align="left" valign="top"><br><table class="zipncountry">
<tbody><tr><td class="zipncountry_txt">
Ship to Zip/Postal Code</td><td class="zipncountry"><input type="text" name="zip_code" value="" size="10" maxlength="20" onchange="zip_changed();">
<input type="hidden" name="function" value="">
<input type="hidden" name="zip_code_old" value="">
</td></tr><tr><td class="zipncountry_txt">Ship to Country</td><td class="zipncountry"><select class="addr" name="country">

</select>
<input type="hidden" name="country_old" value="US">
</td></tr>
</tbody></table>
<table class="taxnship">
<tbody><tr><td class="taxnship_hdr" colspan="2">Choose a Shipping option</td></tr>
<tr><td class="taxnship"><input checked="" type="radio" name="shipping" value="m3"> USPS First Class Mail USA Residents ONLY</td>
<td class="taxnship">($3.15)</td>
</tr>
<tr><td class="taxnship"><input type="radio" name="shipping" value="m4"> USPS Priority Mail USA Residents ONLY</td>
<td class="taxnship">($5.80)</td>
</tr>
<tr><td class="taxnship"><input type="radio" name="shipping" value="m5"> USPS First Class Mail International</td>
<td class="taxnship">($12.95)</td>
</tr>
<tr><td class="taxnship"><input type="radio" name="shipping" value="m6"> USPS Priority Mail International</td>
<td class="taxnship">($16.00)</td>
</tr>
</tbody></table>
</td>
    <td width="20px">&nbsp;</td>
    <td valign="top" align="right"><table class="totals">
<tbody><tr><td class="totals_txt">Subtotal</td>
<td class="totals">$5.00</td>
</tr>
<tr>
<td class="totals_txt">Select Shipping Method</td>
<td class="totals">$3.15</td>
</tr>
<tr>
<td class="totals_txt">Tax</td>
<td class="totals">$0.00</td>
</tr>
<tr>
<td class="totals_all_txt">Total</td>
<td class="totals_all">$8.15</td>
</tr></tbody></table>
<input type="hidden" name="tax" value="1">          <br><table border="0" cellpadding="3" cellspacing="0" align="right">
        <tbody><tr>
          <td><nobr>Bead Customer </nobr></td>
          <td><input type="text" name="coupon_code" size="20"></td>
          <td align="left">
<input class="button152" type="submit" name="function" value="Apply Coupon" tabindex="2" onclick="return(CheckIt(152,0));">
</td>
        </tr>
      </tbody></table>
    </td>
  </tr>
</tbody></table>

* i removed some scripts and the select drop down options.

In a responsive layout this breaks. We are using Bootstrap 3.1.1 - What happens is the checkout button and the price totals never wrap. I am trying to figure out a solution and will go as far as using some jquery to remove items from the table and placing them into divs so they wrap properly. Before I travel down that road I am hoping that you guys will supply me with some code so I can just add a couple classes and be off.