Skip to content
This repository has been archived by the owner on Aug 30, 2018. It is now read-only.

Commit

Permalink
Merge pull request #272 from Shopify/empty-states
Browse files Browse the repository at this point in the history 
New empty states
  • Loading branch information
@cshold
cshold committed Dec 18, 2014
2 parents bf80394 + 73deba8 commit 9946d37
Show file tree
Hide file tree
Showing 10 changed files with 73 additions and 96 deletions.
2 changes: 1 addition & 1 deletion assets/shop.js.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -214,4 +214,4 @@ timber.collectionViews = function () {
};

// Initialize Timber's JS on docready
$(timber.init)
$(timber.init);
14 changes: 0 additions & 14 deletions assets/timber.scss.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@
#Blogs and Comments
#Notes and Form Feedback
#Cart Page
#Demo Styles - for empty store state
==============================================================================*/

/*============================================================================
Expand Down Expand Up @@ -2123,16 +2122,3 @@ label.error {
.cart__remove {
display: block;
}

/*============================================================================
#Demo Styles - for empty store state
==============================================================================*/
.demo-image {
background: url('//cdn.shopify.com/s/files/1/0383/9765/t/1/assets/blankslate-producticon.png?4') no-repeat center center #eee;
display: block;
text-align: center;
padding: 100px 0;
color: #aaa;
font-size: em(12px);
text-decoration: none;
}
7 changes: 4 additions & 3 deletions locales/de.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,11 +221,12 @@
"news_title": "Neueste Nachrichten"
},
"onboarding": {
"no_products_html": "Sie haben keine Artikel in Ihrer Startseiten-Zusammenstellung. Dieser Platzhalter verschwindet, wenn Sie <a href=\"/admin/custom_collections\">dieser Zusammenstellung einen Artikel hinzufügen</a>.",
"add_product": "Artikel hinzufügen",
"modal_title": "Fast fertig...",
"no_products_html": "Sie haben keine Artikel in Ihrer Startseiten-Zusammenstellung. Dieser Platzhalter verschwindet, wenn Sie <a href=\"/admin/collections?tutorial=Frontpage\">dieser Zusammenstellung einen Artikel hinzufügen</a>.",
"add_product": "Fügen Sie ein Produkt",
"product_title": "Beispielhafter Produkttitel",
"no_collections_html": "Sie haben hier keine Zusammenstellungen zum Anzeigen. <a href=\"/admin/custom_collections\">Fügen Sie ein paar Zusammenstellungen</a> zur Standard-Startseite hinzu.",
"collection_image": "Bild der Zusammenstellung",
"add_collection": "Fügen Sie eine Sammlung",
"collection_title": "Beispielhafter Zusammenstellungstitel"
}
},
Expand Down
7 changes: 4 additions & 3 deletions locales/en.default.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,11 +221,12 @@
"news_title": "Latest News"
},
"onboarding": {
"no_products_html": "You have no products in your Frontpage collection. This placeholder will appear until you <a href=\"/admin/custom_collections\">add a product to this collection</a>.",
"add_product": "Add Product",
"modal_title": "Almost there...",
"no_products_html": "You have no products in your Frontpage collection. This placeholder will appear until you <a href=\"/admin/collections?tutorial=Frontpage\">add a product to this collection</a>.",
"add_product": "Add a Product",
"product_title": "Example Product Title",
"no_collections_html": "You don't have any collections to show here. <a href=\"/admin/custom_collections\">Add some collections</a> to go along with the default Frontpage.",
"collection_image": "Collection Image",
"add_collection": "Add a Collection",
"collection_title": "Example Collection Title"
}
},
Expand Down
11 changes: 5 additions & 6 deletions locales/es.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,9 +78,7 @@
"grid_view": "Tabla",
"list_view": "Lista",
"items_count": {
"one": "artículo"
},
"items": {
"one": "artículo",
"other": "artículos"
},
"items_with_count": {
Expand Down Expand Up @@ -223,11 +221,12 @@
"news_title": "Últimas noticias"
},
"onboarding": {
"no_products_html": "No tiene productos en su colección de portada. Este indicador aparecerá hasta que <a href=\"/admin/custom_collections\">agregue un producto a esta colección</a>.",
"add_product": "Agregar producto",
"modal_title": "Casi allí...",
"no_products_html": "No tiene productos en su colección de portada. Este indicador aparecerá hasta que <a href=\"/admin/collections?tutorial=Frontpage\">agregue un producto a esta colección</a>.",
"add_product": "Añadir un producto",
"product_title": "Ejemplo título de producto",
"no_collections_html": "No tiene colecciones para mostrar aquí. <a href=\"/admin/custom_collections\">Agregue algunas colecciones</a> que acompañen a la Portada por defecto.",
"collection_image": "Imagen de la colección",
"add_collection": "Añadir una colección",
"collection_title": "Ejemplo título de colección"
}
},
Expand Down
5 changes: 3 additions & 2 deletions locales/fr.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,11 +221,12 @@
"news_title": "Nouvelles récentes"
},
"onboarding": {
"no_products_html": "Vous n'avez pas de produit dans votre collection Frontpage. Ce message apparaitra jusqu'à ce qu'un produit soit <a href=\"/admin/custom_collections\">ajouté à cette collection</a>.",
"modal_title": "Nous y sommes presque...",
"no_products_html": "Vous n'avez pas de produit dans votre collection Frontpage. Ce message apparaitra jusqu'à ce qu'un produit soit <a href=\"/admin/collections?tutorial=Frontpage\">ajouté à cette collection</a>.",
"add_product": "Ajouter un produit",
"product_title": "Titre du produit",
"no_collections_html": "Vous n'avez pas de collection à afficher ici. <a href=\"/admin/custom_collections\">Ajoutez une ou plusieurs collections</a> pour compléter la page d'accueil par défaut.",
"collection_image": "Image de la collection",
"add_collection": "Ajouter une collection",
"collection_title": "Titre de la collection"
}
},
Expand Down
7 changes: 4 additions & 3 deletions locales/pt-BR.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,11 +222,12 @@
"news_title": "Últimas notícias"
},
"onboarding": {
"no_products_html": "Não há produtos na sua coleção \"Primeira Página\". Este espaço reservado aparecerá até que você <a href=\"/admin/custom_collections\">adicione um produto a esta coleção</a>.",
"add_product": "Adicionar produto",
"modal_title": "Quase lá...",
"no_products_html": "Não há produtos na sua coleção \"Primeira Página\". Este espaço reservado aparecerá até que você <a href=\"/admin/collections?tutorial=Frontpage\">adicione um produto a esta coleção</a>.",
"add_product": "Adicionar um produto",
"product_title": "Exemplo de título de produto",
"no_collections_html": "Você não tem coleções para exibir aqui. <a href=\"/admin/custom_collections\">Adicione algumas coleções</a> para acompanhar a \"Primeira Página\" padrão.",
"collection_image": "Imagem da coleção",
"add_collection": "Adicionar uma coleção",
"collection_title": "Exemplo de título de coleção"
}
},
Expand Down
7 changes: 4 additions & 3 deletions locales/pt-PT.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,11 +221,12 @@
"news_title": "Notícias mais recentes"
},
"onboarding": {
"no_products_html": "Não tem produtos na sua Coleção Frontpage. Esta imagem de preenchimento será exibida até <a href=\"/admin/custom_collections\">adicionar um produto a esta coleção</a>.",
"add_product": "Adicionar Produto",
"modal_title": "Quase lá...",
"no_products_html": "Não tem produtos na sua Coleção Frontpage. Esta imagem de preenchimento será exibida até <a href=\"/admin/collections?tutorial=Frontpage\">adicionar um produto a esta coleção</a>.",
"add_product": "Adicionar um produto",
"product_title": "Título do Produto Exemplo",
"no_collections_html": "Ainda não tem coleções para exibir aqui. <a href=\"/admin/custom_collections\">Adicione algumas coleções</a> para continuar com a Frontpage predefinida.",
"collection_image": "Imagem de Coleção",
"add_collection": "Adicionar uma coleção",
"collection_title": "Título da Coleção Exemplo"
}
},
Expand Down
2 changes: 1 addition & 1 deletion snippets/collection-grid-item.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@
{% endif %}
</a>

<a href="{{ collection.url }}" title="{{ 'collections.general.link_title' | t: title: collection_title }}">{{ collection.title }}</a>
<p>
<a href="{{ collection.url }}" title="{{ 'collections.general.link_title' | t: title: collection_title }}">{{ collection.title }}</a><br>
{{ 'collections.general.items_with_count' | t: count: collection.all_products_count }}
</p>

Expand Down
107 changes: 47 additions & 60 deletions templates/index.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,35 +32,31 @@

{% else %}

<div class="grid__item">
<p>{{ 'home_page.onboarding.no_products_html' | t }}</p>
</div>
{% unless emptyState %}
{{ 'theme-onboarding.css' | global_asset_url | stylesheet_tag }}
{% assign emptyState = true %}
{% endunless %}

<div class="grid__item">
<div class="grid-uniform">
<div class="grid__item large--one-quarter medium--one-half text-center">
<a href="/admin/products" class="demo-image">
{{ 'home_page.onboarding.add_product' | t }}
</a>
<p><a href="/admin/products">{{ 'home_page.onboarding.product_title' | t }}</a> $19.99</p>
</div>
<div class="grid__item large--one-quarter medium--one-half text-center">
<a href="/admin/products" class="demo-image">
{{ 'home_page.onboarding.add_product' | t }}
</a>
<p><a href="/admin/products">{{ 'home_page.onboarding.product_title' | t }}</a> $19.99</p>
</div>
<div class="grid__item large--one-quarter medium--one-half text-center">
<a href="/admin/products" class="demo-image">
{{ 'home_page.onboarding.add_product' | t }}
</a>
<p><a href="/admin/products">{{ 'home_page.onboarding.product_title' | t }}</a> $19.99</p>
<div class="helper-section">
<div class="helper-note">
<span class="helper-icon"></span>
<h3>{{ 'home_page.onboarding.modal_title' | t }}</h3>
<p>{{ 'home_page.onboarding.no_products_html' | t }}</p>
<p><a class="admin-btn-primary" href="/admin/collections?tutorial=Frontpage">{{ 'home_page.onboarding.add_product' | t }}</a></p>
</div>
<div class="grid__item large--one-quarter medium--one-half text-center">
<a href="/admin/products" class="demo-image">
{{ 'home_page.onboarding.add_product' | t }}
</a>
<p><a href="/admin/products">{{ 'home_page.onboarding.product_title' | t }}</a> $19.99</p>

<div class="grid-uniform helper-content">
{% for i in (1..4) %}
<div class="grid__item one-half large--one-quarter">
<a href="/admin/products" class="grid__image">
{% capture imageUrl %}http://cdn.shopify.com/s/images/themes/product-{{ i }}.png{% endcapture %}
{{ imageUrl | img_tag }}
</a>
<p class="h6"><a href="/admin/products">{{ 'home_page.onboarding.product_title' | t }}</a></p>
<p>$19.99</p>
</div>
{% endfor %}
</div>
</div>
</div>
Expand Down Expand Up @@ -94,49 +90,40 @@
{% assign isEmpty = false %}
{% assign collection_item_width = 'large--one-fifth medium--one-third' %}
{% include 'collection-grid-item' %}
{% comment %}Add 1 to the current index{% endcomment %}
{% assign index = index | plus: 1 %}
{% endunless %}

{% endunless %}

{% endfor %}

{% if isEmpty %}
{% unless emptyState %}
{{ 'theme-onboarding.css' | global_asset_url | stylesheet_tag }}
{% assign emptyState = true %}
{% endunless %}

<div class="grid__item">
<p>{{ 'home_page.onboarding.no_collections_html' | t }}</p>
</div>
<div class="grid__item">
<div class="grid-uniform">
<div class="grid__item large--one-fifth medium--one-half text-center">
<div class="demo-image">
{{ 'home_page.onboarding.collection_image' | t }}
</div>
<p><a href="/admin/custom_collections">{{ 'home_page.onboarding.collection_title' | t }}</a> <small>(3 {{ 'collections.general.items_count' | t: count: 3 }})</small></p>
<div class="helper-section">
<div class="helper-note">
<span class="helper-icon"></span>
<h3>{{ 'home_page.onboarding.modal_title' | t }}</h3>
<p>{{ 'home_page.onboarding.no_collections_html' | t }}</p>
<p><a class="admin-btn-primary" href="/admin/custom_collections">{{ 'home_page.onboarding.add_collection' | t }}</a></p>
</div>
<div class="grid__item large--one-fifth medium--one-half text-center">
<div class="demo-image">
{{ 'home_page.onboarding.collection_image' | t }}
</div>
<p><a href="/admin/custom_collections">{{ 'home_page.onboarding.collection_title' | t }}</a> <small>(13 {{ 'collections.general.items_count' | t: count: 13 }})</small></p>
</div>
<div class="grid__item large--one-fifth medium--one-half text-center">
<div class="demo-image">
{{ 'home_page.onboarding.collection_image' | t }}
</div>
<p><a href="/admin/custom_collections">{{ 'home_page.onboarding.collection_title' | t }}</a> <small>(25 {{ 'collections.general.items_count' | t: count: 25 }})</small></p>
</div>
<div class="grid__item large--one-fifth medium--one-half text-center">
<div class="demo-image">
{{ 'home_page.onboarding.collection_image' | t }}
</div>
<p><a href="/admin/custom_collections">{{ 'home_page.onboarding.collection_title' | t }}</a> <small>(1 {{ 'collections.general.items_count' | t: count: 1 }})</small></p>
</div>
<div class="grid__item large--one-fifth medium--one-half text-center">
<div class="demo-image">
{{ 'home_page.onboarding.collection_image' | t }}
</div>
<p><a href="/admin/custom_collections">{{ 'home_page.onboarding.collection_title' | t }}</a> <small>(10 {{ 'collections.general.items_count' | t: count: 10 }})</small></p>

<div class="grid-uniform text-center helper-content">
{% for i in (1..5) %}
<div class="grid__item large--one-fifth medium--one-half">
<a href="#" class="grid__image">
{% capture imageUrl %}http://cdn.shopify.com/s/images/themes/product-{{ i }}.png{% endcapture %}
{{ imageUrl | img_tag }}
</a>
<p>
<a href="#">{{ 'home_page.onboarding.collection_title' | t }}</a><br>
{{ 'collections.general.items_with_count' | t: count: i }}
</p>
</div>
{% endfor %}
</div>
</div>
</div>
Expand Down

0 comments on commit 9946d37

Please sign in to comment.