use common markup for app representation. We can eventually cache these rendered markup bits!

media/css/mkt/promo-grid.less

@@ -52,7 +52,7 @@
             display: none;
         }
     }
-    a {
+    .mkt-tile {
         .light-text-shadow;
         background: fadeOut(@light-gray, 50%);
         display: block;
@@ -73,37 +73,41 @@
                         inset 0 12px 24px 6px rgba(0,0,0,.2),
                         inset 0 0 2px 2px rgba(0,0,0,.2));
         }
-    }
-    .img {
-        background-position: 50% 50%;
-        background-repeat: no-repeat;
-        background-size: contain;
-        width: 64px;
-        height: 64px;
-        position: absolute;
-        top: 10px;
-        left: 10px;
-    }
-    h3, .author {
-        .ellipsis;
-        // Because `overflow: hidden` is required for `text-overflow: ellipsis`
-        // and the letter 'g' gets clipped, my g.
-        margin-bottom: -6px;
-        padding-bottom: 2px;
-    }
-    .author {
-        color: @medium-gray;
-        display: block;
-        margin: 5px 0;
-        font-style: normal;
-    }
-    .price {
-        position: absolute;
-        bottom: 7px;
-        font-size: 15px;
-        line-height: 17px;
-        font-weight: bold;
-        margin: 0;
+        .img.icon {
+            background-position: 50% 50%;
+            background-repeat: no-repeat;
+            background-size: contain;
+            width: 64px;
+            height: 64px;
+            position: absolute;
+            top: 10px;
+            left: 10px;
+        }
+        .img.preview {
+            background-image: none !important;
+            display: none;
+        }
+        h3, .author {
+            .ellipsis;
+            // Because `overflow: hidden` is required for `text-overflow: ellipsis`
+            // and the letter 'g' gets clipped, my g.
+            margin-bottom: -6px;
+            padding-bottom: 2px;
+        }
+        .author {
+            color: @medium-gray;
+            display: block;
+            margin: 5px 0;
+            font-style: normal;
+        }
+        .price {
+            position: absolute;
+            bottom: 7px;
+            font-size: 15px;
+            line-height: 17px;
+            font-weight: bold;
+            margin: 0;
+        }
     }
 }
 

media/css/mkt/slider.less

@@ -98,7 +98,7 @@
         margin: 15px 0 0;
         padding: 0;
         white-space: nowrap;
-        a {
+        .mkt-tile {
             display: block;
             opacity: .8;
             position: relative;
@@ -117,14 +117,7 @@
             &:hover:after {
                 opacity: 1;
             }
-        }
-        li {
-            clear: both;
-            margin-right: 24px;
-            display: inline-block;
-            vertical-align: top;
-            width: 264px;
-            .img {
+            .img.preview {
                 background-position: 50% 50%;
                 background-repeat: no-repeat;
                 background-size: cover;
@@ -134,6 +127,10 @@
                 .box-shadow(0 1px 2px rgba(0,0,0,.5));
                 margin-bottom: 10px;
             }
+            .img.icon {
+                background: none !important;
+                display: none;
+            }
             h3, p {
                 line-height: 22px;
                 margin: 0 10px;
@@ -147,6 +144,13 @@
                 float: right;
             }
         }
+        li {
+            clear: both;
+            margin-right: 24px;
+            display: inline-block;
+            vertical-align: top;
+            width: 264px;
+        }
     }
 }
 
@@ -284,24 +288,26 @@
                 bottom: 5px;
                 right: 5px;
             }
-            li,
-            li .img {
+            li {
                 width: 120px;
             }
             li {
                 margin-right: 11px;
-                .img {
-                    background-position: 25% 50%;
-                    height: 120px;
-                    margin-bottom: 2px;
-                }
-                h3 {
-                    color: lighten(@text, 60%);
-                    font-size: .9em;
-                    margin: 2px 0 -4px;
-                    max-width: 100%;
-                    padding-bottom: 4px;
-                    text-shadow: .5px .5px 0 @navy-gray;
+                .mkt-tile {
+                    .img.icon {
+                        background-position: 25% 50%;
+                        height: 120px;
+                        width: 120px;
+                        margin-bottom: 2px;
+                    }
+                    h3 {
+                        color: lighten(@text, 60%);
+                        font-size: .9em;
+                        margin: 2px 0 -4px;
+                        max-width: 100%;
+                        padding-bottom: 4px;
+                        text-shadow: .5px .5px 0 @navy-gray;
+                    }
                 }
             }
         }

media/css/mkt/tile.less

@@ -0,0 +1,5 @@
+.mkt-tile {
+    .author {
+        display: none;
+    }
+}

mkt/asset_bundles.py

@@ -80,6 +80,7 @@ CSS = {
         'css/mkt/header.less',
         'css/mkt/breadcrumbs.less',
         'css/mkt/buttons.less',
+        'css/mkt/tile.less',
         'css/mkt/detail.less',
         'css/mkt/ratings.less',
         'css/mkt/device.less',

mkt/browse/helpers.py

@@ -27,11 +27,13 @@ def _categories():
 @jinja2.contextfilter
 def promo_grid(context, products):
     t = env.get_template('browse/helpers/promo_grid.html')
-    return jinja2.Markup(t.render(products=products))
+    return jinja2.Markup(t.render(request=context['request'],
+                                  products=products))
 
 
 @register.filter
 @jinja2.contextfilter
 def promo_slider(context, products, feature=False):
     t = env.get_template('browse/helpers/promo_slider.html')
-    return jinja2.Markup(t.render(products=products, feature=feature))
+    return jinja2.Markup(t.render(request=context['request'],
+                                  products=products, feature=feature))

mkt/browse/templates/browse/helpers/promo_grid.html

@@ -3,14 +3,7 @@
     <ul class="content">
       {% for product in products %}
         <li>
-          <a href="{{ product.get_url_path() }}" data-prefetch="1">
-            <div class="img" style="background-image:url({{ product.get_icon_url(64) }})"></div>
-            <h3>{{ product.name }}</h3>
-            {% if product.listed_authors %}
-              <em class="author">{{ product.listed_authors[0].name }}</em>
-            {% endif %}
-            <p class="price">{{ product.get_price() }}</p>
-          </a>
+          {{ market_tile(product) }}
         </li>
       {% endfor %}
     </ul>

mkt/browse/templates/browse/helpers/promo_slider.html

@@ -6,20 +6,9 @@
     </div>
     <ul class="content">
       {% for product in products %}
-        {% set previews = [product.promo] if product.promo else product.all_previews %}
-        {% if previews %}
-          {% set preview = previews[0].image_url if feature else
-                           previews[0].thumbnail_url %}
-        {% endif %}
         {% if not preview or preview.filetype != 'video/webm' %}
           <li>
-            <a href="{{ product.get_url_path() }}">
-              <div class="img" style="background-image:url({{ preview }})"></div>
-              <h3>{{ product.name }}</h3>
-              <p>
-                {{ product.get_price() }}
-              </p>
-            </a>
+            {{ market_tile(product) }}
           </li>
         {% endif %}
       {% endfor %}

mkt/site/helpers.py

@@ -99,12 +99,32 @@ def product_as_dict(request, product, purchased=None, receipt_type=None):
                 for k, v in ret.items())
 
 
+@jinja2.contextfunction
+@register.function
+def market_tile(context, product):
+    request = context['request']
+    if product.is_webapp():
+        classes = ['product','mkt-tile']
+        product_dict = product_as_dict(request, product)
+        data_attrs = {
+            'product': json.dumps(product_dict, cls=JSONEncoder),
+            'manifestUrl': product.manifest_url
+        }
+        if product.is_premium() and product.premium:
+            classes.append('premium')
+        c = dict(product=product, data_attrs=data_attrs,
+                 classes=' '.join(classes))
+        t = env.get_template('site/tiles/app.html')
+    return jinja2.Markup(t.render(c))
+
+
 @register.filter
 @jinja2.contextfilter
 def promo_slider(context, products, feature=False):
     c = {
         'products': products,
         'feature': feature,
+        'request': request,
     }
     t = env.get_template('site/promo_slider.html')
     return jinja2.Markup(t.render(c))

mkt/site/templates/site/tiles/app.html

@@ -0,0 +1,16 @@
+{% set previews = [product.promo] if product.promo else product.all_previews %}
+{% if previews %}
+  {% set preview = previews[0].image_url if feature else
+                   previews[0].thumbnail_url %}
+{% endif %}
+<a class="{{ classes }}" href="{{ product.get_url_path() }}" data-prefetch="1"
+   {% for k, v in data_attrs.items() -%}
+      data-{{ k }}="{{ v }}" {% endfor %}>
+  <div class="img icon" style="background-image:url({{ product.get_icon_url(64) }})"></div>
+  <div class="img preview" style="background-image:url({{ preview }})"></div>
+  <h3>{{ product.name }}</h3>
+  {% if product.listed_authors %}
+    <em class="author">{{ product.listed_authors[0].name }}</em>
+  {% endif %}
+  <p class="price">{{ product.get_price() }}</p>
+</a>