Template Changes in 1.1

This guide highlights each of the template changes made in the Shopp 1.1 built-in template files compared to how they existed up to Shopp 1.0.18 to help make the transition to Shopp 1.1 easier.

Guide Conventions

In order to clearly and completely detail what has changed this article will use the following conventions:

  • Each changeset is shown in reverse order working from the bottom of the template file back up to the top to help preserve line number references as accurately as possible.
  • The original default template lines are shown under the heading Original followed by the relative line numbers.
  • Line numbers are relative to the original default templates shipped with the Shopp 1.0.18 release. Custom markup or other code may shift the actual lines, in which case the original tag will need to be located to determine the proper location of the change.
  • Templates are listed in the order of functional importance so that you begin making the absolute minimum changes necessary to prevent functionality issues.
  • Change sets that are labelled with localization are only needed if translation to other languages is needed in the templates, otherwise they may be completely skipped (if English is the only language needed for the storefront).

checkout.php

See the [checkout.php content template] reference page for more information about this template.

Marketing opt-in

A new marketing opt-in input has been added to authorize the addition of customers to email marketing lists. This is new markup that does not exist anywhere in the original templates and can be added to the template wherever it is desirable to appear. Using the default template layout of Shopp 1.1, the recommended placement is below the payment fields just before the end of the list of fields </ul>.

1.1 Updates (add ~line 80)

<li></li>
<li>


<div class="inline"><label for="marketing"><?php shopp('checkout','marketing'); ?> <?php _e('Yes, I would like to receive e-mail updates and special offers!','Shopp'); ?></label></div>


</li>

billing-xco removed

The shopp('checkout','billing-xco') tag has been deprecated and no longer has any functional use whatsoever.

Original (remove ~line 79)

- <?php shopp('checkout','billing-xco'); ?>

Remove old security fields

Step 1: This change is part one of a multi-step changeset that involved a radically new layout of these inputs alongside additional new input tags. This step requires removing the markup describe below as it will be replaced by subsequent changes in the next step. Warning: Be sure to leave the <?php endif; ?> code following the markup to avoid syntax errors in your template. A syntax error in your template will cause the entire checkout page to fail to display completely (or at all).

Original (remove ~lines 74-77)

<li>
    <span><?php shopp('checkout','billing-cardholder','required=true&size=30&title=Card Holder\'s Name'); ?><label for="billing-cardholder">Name on Card</label></span>
    <span><?php shopp('checkout','billing-cvv','size=7&minlength=3&maxlength=4&title=Card\'s security code (3-4 digits on the back of the card)'); ?><label for="billing-cvv">Security ID</label></span>
</li>   

Add new paycard fields

Step 2: Replace the remaining original credit card and payment fields with the new payment card markup. Remove the lines cited in the Original code reference block and replace them with the new 1.1 Updates lines. The updates include the following changes:

  • Adds the payment-options tag to offer support for selecting from multiple payment method options.
  • Adds the gateway-inputs tag to support payment gateway-specific payment inputs
  • Replaced the billing-required tag in favor of the more accurately named card-required tag
  • Added billing-xcsc-* tags and markup to support extra card security check inputs for payment cards that require them (such as Maestro/Solo cards)

Original (remove ~lines 66-72)

<?php if (shopp('checkout','billing-required')): ?>
<li>
    <label for="billing-card">Payment Information</label>
    <span><?php shopp('checkout','billing-card','required=true&size=30&title=Credit/Debit Card Number'); ?><label for="billing-card">Credit/Debit Card Number</label></span>
    <span><?php shopp('checkout','billing-cardexpires-mm','size=4&required=true&minlength=2&maxlength=2&title=Card\'s 2-digit expiration month'); ?> /<label for="billing-cardexpires-mm">MM</label></span>
    <span><?php shopp('checkout','billing-cardexpires-yy','size=4&required=true&minlength=2&maxlength=2&title=Card\'s 2-digit expiration year'); ?><label for="billing-cardexpires-yy">YY</label></span>
    <span><?php shopp('checkout','billing-cardtype','required=true&title=Card Type'); ?><label for="billing-cardtype">Card Type</label></span>

1.1 Updates

<li>
    <?php shopp('checkout','payment-options'); ?>
    <?php shopp('checkout','gateway-inputs'); ?>
</li>
<?php if (shopp('checkout','card-required')): ?>
<li class="payment">
    <label for="billing-card"><?php _e('Payment Information','Shopp'); ?></label>
    <span><?php shopp('checkout','billing-card','required=true&size=30&title='.__('Credit/Debit Card Number','Shopp')); ?><label for="billing-card"><?php _e('Credit/Debit Card Number','Shopp'); ?></label></span>
    <span><?php shopp('checkout','billing-cardexpires-mm','size=4&required=true&minlength=2&maxlength=2&title='.__('Card\'s 2-digit expiration month','Shopp')); ?> /<label for="billing-cardexpires-mm"><?php _e('MM','Shopp'); ?></label></span>
    <span><?php shopp('checkout','billing-cardexpires-yy','size=4&required=true&minlength=2&maxlength=2&title='.__('Card\'s 2-digit expiration year','Shopp')); ?><label for="billing-cardexpires-yy">YY</label></span>
    <span><?php shopp('checkout','billing-cardtype','required=true&title='.__('Card Type','Shopp')); ?><label for="billing-cardtype"><?php _e('Card Type','Shopp'); ?></label></span>
</li>
<li class="payment">
    <span><?php shopp('checkout','billing-cardholder','required=true&size=30&title='.__('Card Holder\'s Name','Shopp')); ?><label for="billing-cardholder"><?php _e('Name on Card','Shopp'); ?></label></span>
    <span><?php shopp('checkout','billing-cvv','size=7&minlength=3&maxlength=4&title='.__('Card\'s security code (3-4 digits on the back of the card)','Shopp')); ?><label for="billing-cvv"><?php _e('Security ID','Shopp'); ?></label></span>
</li>
<?php if (shopp('checkout','billing-xcsc-required')): // Extra billing security fields ?>
<li class="payment">
<span><?php shopp('checkout','billing-xcsc','input=start&size=7&minlength=5&maxlength=5&title='.__('Card\'s start date (MM/YY)','Shopp')); ?><label for="billing-xcsc-start"><?php _e('Start Date','Shopp'); ?></label></span>
    <span><?php shopp('checkout','billing-xcsc','input=issue&size=7&minlength=3&maxlength=4&title='.__('Card\'s issue number','Shopp')); ?><label for="billing-xcsc-issue"><?php _e('Issue #','Shopp'); ?></label></span>
</li>

Added Locality menu

A new drop-down menu has been added to support the selection of regional locales that are have additional tax rates specified in the ShoppSettingsTaxes screen. This markup does not exist in the original 1.0.x templates and may be added where ever deemed appropriate. The following is a recommendation based on the location of the markup in the default Shopp 1.1 template after the shipping fields, but before the payment card fields.

1.1 Updates (+ ~line 65)

    <?php if (shopp('checkout','billing-localities')): ?>
        <li class="half locale hidden">
            <div>
            <?php shopp('checkout','billing-locale'); ?>
            <label for="billing-locale"><?php _e('Local Jurisdiction','Shopp'); ?></label>
            </div>
        </li>
    <?php endif; ?>

needs-shipped tag

The shopp('checkout','shipping') tag has been replaced with the more relevant shopp('cart','needs-shipped') tag to determine when to show the shipping fields and when they can be omitted from the markup altogether.

Original (~line 38)

<?php if (shopp('checkout','shipping')): ?>

1.1 Updates

<?php if (shopp('cart','needs-shipped')): ?>

Form validation

The checkout <form> tag has been updated to use the new element class for triggering browser-side form validation.

Original (~line 1)



<

form action="<?php shopp('checkout','url'); ?>" method="post" class="shopp" id="checkout">

1.1 Updates

<form action="<?php shopp('checkout','url'); ?>" method="post" class="shopp validate" id="checkout">

errors.php

See the errors.php template file reference page for more information about this template.

Errors list markup

The template has changed to show multiple errors in an unordered list element.

Original (~line 2-6)



<h3>Error</h3>


        <p>
            <!-- ERROR CODE: <?php shopp('checkout','error','show=code'); ?> -->
            <?php shopp('checkout','error'); ?>
        </p>

1.1 Updates

    <h3><?php _e('Errors','Shopp'); ?></h3>
    <ul>
        <?php shopp('checkout','errors'); ?>
    </ul>

category.php

See the errors.php template file reference page for more information about this template.

Removed line breaks

Several float clearing line breaks near the bottom of the template have been removed as Shopp 1.1 relies on a more modern, less obtrusive CSS-based float clearing technique using overflow: auto. Simply remove the lines shown below with a - symbol at the beginning of the line. Other code surrounding the removed lines is shown to help identify the correct lines to remove:

Original (-line 43, reference lines start ~line 42)



<div class="alignright"><?php shopp('category','pagination'); ?></div>


-   <br class="clear" />

Original (-line 41, reference lines start ~line 36)

                </div>
            </li>
        <?php endwhile; ?>
        </ul></li>
    </ul>
-   <br class="clear" />

Original (-line 34, reference lines start ~line 31)

                        </form>
                        </div>
                    </div>
-                   <br class="clear" />

thumbnail deprecated

The shopp('product','thumbnail') tag has been deprecated and is being replaces with the new shopp('product','coverimage') tag.

Original (~line 19)

<a href="<?php shopp('product','url'); ?>"><?php shopp('product','thumbnail'); ?></a>

1.1 Updates

<a href="<?php shopp('product','url'); ?>"><?php shopp('product','coverimage'); ?></a>

Pagination markup

The shopp('category','pagination') uses a new default tempalte option and the trailing line break has been removed.

Original (~line 10)



<div class="alignright"><?php shopp('category','pagination'); ?></div>


<br class="clear" />

1.1 Updates

<div class="alignright"><?php shopp('category','pagination','show=10'); ?></div>
 

subcategory-list markup

The shopp('category','subcategory-list') has different default template options and is wrapped in a <p></p> markup.

Original (~line 8)

<?php shopp('category','subcategory-list','hierarchy=true&showall=true&class=subcategories'); ?>

1.1 Updates



<p><?php shopp('category','subcategory-list','hierarchy=true&showall=true&class=subcategories&dropdown=1'); ?></p>


Removed line break

The line break following the shopp('catalog','views') tag has been removed as a result of using new CSS-based float clearing techniques (namely overflow: auto)

Original (~lines 6-7)

<?php shopp('catalog','views','label=Views: '); ?>
<br class="clear" />

1.1 Updates

<?php shopp('catalog','views','label='.__('Views: ','Shopp')); ?>
 

product.php

See the errors.php template file reference page for more information about this template.

Add to Cart Button Label

The label option for the add to cart button was changed because of a consolidation of HTML input options to make a more consistent option set across all input-related tags in Shopp. Use the value option instead.

The following example is not default template code, but is used to illustrate how the old option was used to change the text of the button:

Original (~line 42)



<p><?php shopp('product','quantity','class=selectall&input=menu'); ?>
<?php shopp('product','addtocart','label=Buy Now!'); ?></p>


1.1 Updates



<p><?php shopp('product','quantity','class=selectall&input=menu'); ?>
<?php shopp('product','addtocart','value=Buy Now!'); ?></p>


Product Add-ons

Markup has been added to support the selection of product add-ons (if they are setup for the product). The markup is completely new and does not exist anywhere in the original templates. The following may be added anywhere the add-on selection menus are desirable to appear in the page layout. The relative location is after the shopp('product','variations') markup starting around line 40 before the shopp('product','quantity') input.

1.1 Updates (+ ~line 29)

<?php if(shopp('product','has-addons')): ?>
    <ul class="addons">
        <?php shopp('product','addons','mode=menu&label=true&defaults='.__('Select an add-on','Shopp').'&before_menu=<li>&after_menu=</li>'); ?>            
    </ul>
<?php endif; ?>

Form validation

In 1.1 the add to cart form can include custom inputs which may have validation options included. A new validate CSS class has been added to ensure the form is automatically validated in the browser and prevents the item from being added to the cart until the validation requirements are met.

Original (~line 23)



<

form action="<?php shopp('cart','url'); ?>" method="post" class="shopp product">

1.1 Updates

<form action="<?php shopp('cart','url'); ?>" method="post" class="shopp product validate">

cart.php

See the errors.php template file reference page for more information about this template.

Additional Continue Shopping

An additional “Continue Shopping” link has been added when no items are in the cart.

1.1 Updates (add ~line 88)



<p><a href="<?php shopp('catalog','url'); ?>">&laquo; Continue Shopping</a></p>


Removed xco-buttons

The shopp('checkout','xco-buttons') tag has been deprecated and no longer has any functionality associated with it.

Original (remove ~lines 82-84)



<div class="xcheckout">
<?php shopp('checkout','xco-buttons'); ?>
</div>


Bottom Call to Action

The markup for the call to action links at the bottom (and top) of the cart template has changed slightly.

Original (~lines 73-78)

<big>
    <a href="<?php shopp('catalog','url'); ?>">&laquo; Continue Shopping</a>
    <?php if (shopp('checkout','local-payment')): ?>
    <a href="<?php shopp('checkout','url'); ?>" class="right">Proceed to Checkout &raquo;</a>
    <?php endif; ?>
</big>

1.1 Updates

    <big>
        <a href="<?php shopp('cart','referrer'); ?>">&laquo; Continue Shopping</a>
        <a href="<?php shopp('checkout','url'); ?>" class="right">Proceed to Checkout &raquo;</a>
    </big>

Shipping cost detection

The tag used to detect if shipping costs are present on the order has changed.

Original (~line 54)

<?php if (shopp('cart','needs-shipped')): ?>

1.1 Updates

<?php if (shopp('cart','hasshipcosts')): ?>

Promotion listings

The tag options for the list of applied promotions has been updated.

Original (~line 34)

<tr><td colspan="4" class="money"><?php shopp('cart','promo-name'); ?><strong><?php shopp('cart','promo-discount','before=&mdash;'); ?></strong></td></tr>

1.1 Updates

<tr><td colspan="4" class="money"><?php shopp('cart','promo-name'); ?> &mdash; <strong><?php shopp('cart','promo-discount'); ?></strong></td></tr>

Cart line item addons

A tag has been added to list the selected product add-ons that have been included on the cart line item.

1.1 Updates (add ~line 23)

<?php shopp('cartitem','addons-list'); ?>

Top Call to Action

The markup for the call to action links at the the top of the cart template has changed slightly.

Original (~lines 3-8)

<big>
    <a href="<?php shopp('catalog','url'); ?>">&laquo; Continue Shopping</a>
    <?php if (shopp('checkout','local-payment')): ?>
    <a href="<?php shopp('checkout','url'); ?>" class="right">Proceed to Checkout &raquo;</a>
    <?php endif; ?>
</big>

1.1 Updates

    <big>
        <a href="<?php shopp('cart','referrer'); ?>">&laquo; Continue Shopping</a>
        <a href="<?php shopp('checkout','url'); ?>" class="right">Proceed to Checkout &raquo;</a>
    </big>

summary.php

See the errors.php template file reference page for more information about this template.

Shipping cost detection

Tags have been added to detect when to show or hide the shipping costs in the order summary layout.

Original (~line 50-53)

    <tr class="totals">
        <th scope="row"><?php shopp('cart','shipping','label=Shipping'); ?></th>
        <td class="money"><?php shopp('cart','shipping'); ?></td>
    </tr>

1.1 Updates

    <?php if (shopp('cart','hasshipcosts')): ?>
    <tr class="totals">
        <th scope="row"><?php shopp('cart','shipping','label=Shipping'); ?></th>
        <td class="money"><?php shopp('cart','shipping'); ?></td>
    </tr>
    <?php endif; ?>

Shipping method selection

The shipping method selector in the order summary layout has some minor markup changes and a major new wrapping <form> element. The new <form> element is required for the shipping selection to function properly in the confirm-order process.

Original (~line 29-37)

    <ul id="shipping-methods">
    <?php while(shopp('shipping','methods')): ?>
        <li><label><?php shopp('shipping','method-selector'); ?>
        <?php shopp('shipping','method-name'); ?> &mdash;
        <strong><?php shopp('shipping','method-cost'); ?></strong><br />
        <small><?php shopp('shipping','method-delivery'); ?></small></label>
        </li>
    <?php endwhile; ?>
    </ul>

1.1 Updates



<form action="<?php shopp('shipping','url') ?>" method="post">
    <ul id="shipping-methods">
    <?php while(shopp('shipping','methods')): ?>
        <li><span><label><?php shopp('shipping','method-selector'); ?>
        <?php shopp('shipping','method-name'); ?> &mdash;
        <strong><?php shopp('shipping','method-cost'); ?></strong><br />
        <small><?php shopp('shipping','method-delivery'); ?></small></label></span>
        </li>
    <?php endwhile; ?>
    </ul>
    </form>


Applied Promotions

Tags have been included to display the promotions applied to the order in the order summary shown during the checkout process.

1.1 Updates (add ~line 23)

    <?php while(shopp('cart','promos')): ?>
        <tr><td colspan="4" class="money"><?php shopp('cart','promo-name'); ?> &mdash; <strong><?php shopp('cart','promo-discount'); ?></strong></td></tr>
    <?php endwhile; ?>

Cart Item addons

The addon list tag has been added to display the product addons included on the cart line item.

1.1 Updates (add ~line 17)

<?php shopp('cartitem','addons-list'); ?>

receipt.php

See the errors.php template file reference page for more information about this template.

Custom Order Data

A tag was added to the order data list layout to skip empty order data fields.

1.1 Updates (add ~line 89)

<?php if (shopp('purchase','data','echo=0') == "") continue; ?>

Ordered Add-ons

A tag has been added to show purchased item addons.

1.1 Updates (add ~line 51)

<?php shopp('purchase','item-addons-list'); ?>

Payment Status

A tag has been added to display the payment status in the order receipt.

Original (~line 6)

<tr><th>Transaction:</th><td><?php shopp('purchase','transactionid'); ?></td></tr>  

1.1 Updates

<tr><th>Transaction:</th><td><?php shopp('purchase','transactionid'); ?> (<strong><?php shopp('purchase','payment'); ?></strong>)</td></tr> 

catalog.php

See the errors.php template file reference page for more information about this template.

Catalog Products only

The entire template has been replaced with a single-line to show all of the products in the entire store catalog:

<?php shopp('catalog','catalog-products'); ?>

accounts.php

See the errors.php template file reference page for more information about this template.

Account Menu Receipt Display

Order receipt display code has been moved out of the core and into the errors.php template file. Replace the line appearing in the Shopp 1.0 errors.php template file with the following updates to enable order receipt viewing in Shopp 1.1:

Original (~line 153)

<br class="clear" />

1.1 Updates

<?php if ("order" == shopp('customer','process','return=true')): ?>
    <p><a href="<?php shopp('customer','url'); ?>">&laquo; <?php _e('Return to Account Management','Shopp'); ?></a></p>

    <?php shopp('purchase','receipt'); ?>

    <p><a href="<?php shopp('customer','url'); ?>">&laquo; <?php _e('Return to Account Management','Shopp'); ?></a></p>
<?php endif; ?>

You must be logged in to post a comment.

© Ingenesis Limited. Shopp™ is a registered trademark of Ingenesis Limited.

Skip to toolbar