Template Changes in 1.3

This guide highlights each of the template changes made in the Shopp 1.3 built-in template files compared to how they existed up to Shopp 1.2.9 to help make the transition to Shopp 1.3 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.2.9 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).

cart.php

With the rebranding of Promotions to Discounts the promo… related Theme API calls have been deprecated and replaced with discount tag variants.

Remove the following from the original cart.php (- lines 32-34) and replace with the 1.3 updates below it:
<?php while(shopp('cart','promos')): ?>
    <tr><td colspan="4" class="money"><?php shopp('cart','promo-name'); ?><strong><?php shopp('cart','promo-discount',array('before' => '&nbsp;&mdash;&nbsp;')); ?></strong></td></tr>
<?php endwhile; ?>
1.3 Updates
<?php while ( shopp( 'cart.discounts' ) ) : ?>
    <tr>
        <td colspan="4" class="money">
            <?php shopp( 'cart.discount-name' ); ?>
            <strong><?php shopp( 'cart.discount-applied', array( 'before' => '&nbsp;&mdash;&nbsp;' ) ); ?></strong>
        </td>
    </tr>
<?php endwhile; ?>

catalog.php

The catalog Theme API reference object has been replaced by storefront.

Replace the following from the original catalog.php (- lines 1) and replace with the 1.3 updates below it:
<?php shopp('catalog','catalog-products'); ?>
1.3 Updates
<?php shopp( 'storefront.catalog-products' ); ?>

category.php

The category template changes largely feature layout improvements for modern themes including HTML 5 support, schema.org support and removal of the explict category name call as most WordPress theme templates will already have their own page titles that feature the category name.

The changes start from the bottom of the file.

Remove line 49 (the next to the last endif statement, do not remove the last endif)
<?php endif; ?>
Remove line 47 (the theme templates will already show the category name)


<h3><?php shopp('category','name'); ?></h3>


Replace lines 45 & 46:
<?php if (!shopp('catalog','is-landing')): ?>
<?php shopp('catalog','breadcrumb'); ?>
With 1.3 Updates:
<?php if ( ! shopp('storefront.is-landing') ) shopp( 'storefront.breadcrumb' ); ?>
Add itemprop to summary
Replace line 28:


<p><?php shopp('product','summary'); ?></p>


With the 1.3 Update:


<p><span itemprop="description"><?php shopp( 'product.summary' ); ?></span></p>


Add schema.org Offer type itemscope
Replace line 22:


<p class="price"><?php shopp('product','saleprice','starting='.__('from','Shopp')); ?> </p>


With the 1.3 Update:


<p class="price" itemscope itemtype="http://schema.org/Offer"><span itemprop="price"><?php shopp( 'product.saleprice', 'starting=' . __( 'from', 'Shopp' ) ); ?></span></p>


Add itemprop to product name
Replace line 21


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


With the 1.3 Update:


<h4 class="name">
    <a href="<?php shopp( 'product.url' ); ?>"><span itemprop="name"><?php shopp( 'product.name' ); ?></span></a>
</h4>


Add schema.org itemprop attributes to product URL and image
Replace line 19
<a href="<?php shopp('product','url'); ?>"><?php shopp('product','coverimage','setting=thumbnails'); ?></a>
With the 1.3 Update:
<a href="<?php shopp( 'product.url' ); ?>" itemprop="url"><?php shopp( 'product.coverimage', 'setting=thumbnails&itemprop=image' ); ?></a>
Add schema.org Product type itemscope
Replace line 17
<li class="product">
With the 1.3 Update:
<li class="product<?php if ( shopp('collection.row') ) echo ' first'; ?>" itemscope itemtype="http://schema.org/Product">
Remove old product row markup
Remove line 16
<?php if(shopp('category','row')): ?></ul></li><li class="row">

<

ul><?php endif; ?>
Replace navigation and control layouts
Replace lines 6-11
<?php shopp('catalog','views','label='.__('Views: ','Shopp')); ?>



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



<?php shopp('catalog','orderby-list','dropdown=on'); ?>


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


With the 1.3 Updates:
<section class="navigation controls">
    <?php shopp( 'storefront.breadcrumb', array( 'separator' => '&nbsp;/ ' ) ); ?>
    <?php shopp( 'collection.subcategory-list',
            array(  'dropdown' => true,
                    'hierarchy' => true,
                    'showall' => true,
                    'class' => 'subcategories',
                    'before' => '&nbsp;/ '  )
    ); ?>

    <div class="alignright">
        <?php shopp( 'storefront.orderby-list', 'dropdown=on' ); ?>
    </div>
</section>

<section class="view controls">
    <?php shopp( 'storefront.views', 'label=' . __( 'Views: ', 'Shopp' ) ); ?>
    <?php shopp( 'collection.pagination', 'show=10&before=<div class="alignright">' ); ?>
</section>
Remove old breadcrumb location and category name
Remove lines 3-5
<?php shopp('catalog','breadcrumb'); ?>



<h3><?php shopp('category','name'); ?></h3>


Add category description tag
Add the following ABOVE line 1 (line 1 is included as a reference):
<?php shopp('collection.description') ?>

<?php if(shopp('category','hasproducts','load=coverimages')): ?>

checkout.php

The new checkout.php template file swaps the position of the <label> elements to occur above (or before) the shopp() inputs. The changes are so numerous it would be difficult to outline each individual step and location. In essence, the <label>…</label> tags should move to before (or above) the <?php shopp(…) ?> input tags. Beyond this, no functional or other layout changes exist.

product.php

The only major change to the product.php content template is the inclusion of schema.org markup which is called using the shopp('product.schema') Theme API tag.

# Add the schema.org tag under the product summary around line 7-8 (Line 7 is included for reference):


<p class="headline"><big><?php shopp('product','summary'); ?></big></p>



<?php shopp('product.schema'); ?>
# Replace the shopp('catalog') reference on line 1:
<?php shopp('catalog','breadcrumb')?>
With the 1.3 Update:
<?php shopp( 'storefront.breadcrumb' ); ?>

summary.php

# Replace the shopp('catalog') reference on line 86:


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


With the 1.3 Update:


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


shopp.css

Add #shipping-methods li label rule below line 163:
#shopp #shipping-methods li label { padding: 0 0 10px; }
Add .sideproduct .original.price rule below line 131:
.sideproduct .original.price { text-decoration: line-through; }
Add .breadcrumb li span rule and .category-list-menu rule below line 72:
#shopp ul.breadcrumb li span { font-weight: bold; }
#shopp .category-list-menu { display: inline; }
Remove #shopp ul.products img rule on line 51:
#shopp ul.products img { display: block; }
# Add .category-list-menu .subcategories rule below line 33:
#shopp form.category-list-menu .subcategories { padding: auto; }
Replace .views rules on lines 25-28:
#shopp .views { display: inline; position: absolute; right: 0; top: 0; }
#shopp .views button { border: 1px solid transparent; background: none; cursor: pointer; padding: 2px; margin-bottom: -3px; }
#shopp .views button.hover { background-color: #ebebeb; border: 1px solid #777; }
#shopp .views li { display: inline; }
With Shopp 1.3 .views rules:
#shopp .views,
#shopp .views li { display: inline; }
# Add .category-description rule below line 24:
#shopp .category-description { padding-bottom: 14px; }
Replace font metrics for form div label elements on line 17:
#shopp form div label { font-size: 11px; font-weight: normal; padding-bottom: 8px; }
With Shopp 1.3 styles:
#shopp form div label { font-size: 0.8125em; font-weight: normal; padding-top: 0.6em; }
Replace form label rule with more specific form li > label rule on line 15:
#shopp form label { font-size: 14px; font-weight: bold; padding-bottom: 3px; }
With Shopp 1.3 update:
#shopp form li > label { font-weight: bold; padding: 20px 0 10px; }
  1. Avatar of Crystal Chao

    So, in summary.php we don’t have to replace calls to ‘promo’???

    January 29th   #

  2. Avatar of Jonathan Davis

    It’s not strictly required, though encouraged. The promo calls have been deprecated, but still functional in Shopp 1.3. They will require renaming in the next major point release.

    February 25th   #

You must be logged in to post a comment.

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

Skip to toolbar