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

Default blankstates #319

Merged
merged 5 commits into from
Jan 22, 2015
Merged

Default blankstates #319

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ca995a0
added empty states for collections/all, created snippets
stevebosworth Jan 12, 2015
5dcb29f
added snippets for empty states
stevebosworth Jan 12, 2015
de213b8
updated locales with tranlations
stevebosworth Jan 13, 2015
bb26c9c
added a comment to explain featured collections onboarding
stevebosworth Jan 13, 2015
043b1fd
removed broken link and unused translation
stevebosworth Jan 21, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions locales/de.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,11 @@
"price_descending": "Preis, hoch nach niedrig",
"date_descending": "Datum, neu nach alt",
"date_ascending": "Datum, alt nach neu"
},
"onboarding": {
"modal_title": "Auf dieser Seite werden alle Produkte Ihres Geschäfts angezeigt.",
"no_products_html": "Es sind noch keine Produkte vorhanden, doch sobald Sie welche hinzufügen, werden sie hier angezeigt, ganz gleich, ob sie zu einer Kollektion gehören oder nicht.",
"add_product": "Artikel hinzufügen"
}
},
"contact": {
Expand Down
5 changes: 5 additions & 0 deletions locales/en.default.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,11 @@
"price_descending": "Price, high to low",
"date_descending": "Date, new to old",
"date_ascending": "Date, old to new"
},
"onboarding": {
"modal_title": "This page will show all of your store's products",
"no_products_html": "There are no products yet, but once you begin adding them they will show up here regardless if they are in a collection.",
"add_product": "Add Product"
}
},
"contact": {
Expand Down
5 changes: 5 additions & 0 deletions locales/es.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,11 @@
"price_descending": "Precio, mayor a menor",
"date_descending": "Fecha, nuevo a antiguo",
"date_ascending": "Fecha, antiguo a nuevo"
},
"onboarding": {
"modal_title": "Esta página mostrará todos los productos de su tienda",
"no_products_html": "Todavía no hay productos pero, una vez que comience a añadirlos, se mostrarán aquí sin importar si están en una colección.",
"add_product": "Agregar producto"
}
},
"contact": {
Expand Down
5 changes: 5 additions & 0 deletions locales/fr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,11 @@
"price_descending": "Prix: élevé à faible",
"date_descending": "Date: récent à ancien",
"date_ascending": "Date: ancien à récent"
},
"onboarding": {
"modal_title": "Cette page affichera tous les produits de votre magasin",
"no_products_html": "Il n'y a aucun produit pour l'instant, mais dès que vous commencerez à les ajouter, ils s'afficheront ici, qu'ils soient dans une collection ou non.",
"add_product": "Ajouter un produit"
}
},
"contact": {
Expand Down
5 changes: 5 additions & 0 deletions locales/pt-BR.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,11 @@
"price_descending": "Preço, do maior ao menor",
"date_descending": "Data, mais recente primeiro",
"date_ascending": "Data, mais antiga primeiro"
},
"onboarding": {
"modal_title": "Esta página mostrará todos os produtos de sua loja",
"no_products_html": "Não há nenhum produto ainda, mas, quando você começar a adicioná-los, eles aparecerão aqui, independentemente se estiverem em uma coleção.",
"add_product": "Adicionar produto"
}
},
"contact": {
Expand Down
5 changes: 5 additions & 0 deletions locales/pt-PT.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,11 @@
"price_descending": "Preço, mais caros",
"date_descending": "Data, mais recentes",
"date_ascending": "Data, mais antigos"
},
"onboarding": {
"modal_title": "Esta página irá exibir todos os produtos da sua loja",
"no_products_html": "Ainda não há artigos, mas assim que começar a adicioná-los, eles vão surgir aqui, mesmo se não estiverem inseridos numa colecção.",
"add_product": "Adicionar Produto"
}
},
"contact": {
Expand Down
32 changes: 32 additions & 0 deletions snippets/onboarding-empty-collection.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!-- snippets/onboarding-empty-collection.liquid -->
<div class="grid__item">
<div class="helper-section">
<div class="helper-note">
<span class="helper-icon"></span>
<h3>{{ 'collections.onboarding.modal_title' | t }}</h3>
<p>{{ 'collections.onboarding.no_products_html' | t }}</p>
<p><a href="/admin/products/new" class="admin-btn-primary">{{ 'collections.onboarding.add_product' | t }}</a></p>
</div>

<div class="grid-uniform helper-content">
{% assign index = 1 %}
{% for i in (1..8) %}
{% case i %}
{% when 7 %}
{% assign index = 1 %}
{% when 8 %}
{% assign index = 2 %}
{% endcase %}
<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-{{ index }}.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>
{% assign index = index | plus: 1 %}
{% endfor %}
</div>
</div>
</div>
26 changes: 26 additions & 0 deletions snippets/onboarding-featured-collections.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!-- snippets/onboarding-featured-collections.liquid -->
<div class="grid__item">
<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-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>
24 changes: 24 additions & 0 deletions snippets/onboarding-featured-products.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<!-- snippets/onboarding-featured-products.liquid -->
<div class="grid__item">
<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-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>
26 changes: 23 additions & 3 deletions templates/collection.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,29 @@

{% else %}

<div class="grid__item">
<p>{{ 'collections.general.no_matches' | t }}</p>
</div>
{% if collection.handle == 'all' %}

{% comment %}
Add default products to help with onboarding for collections/all only
{% endcomment %}

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

{% include 'onboarding-empty-collection' %}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is only used once, so don't think it needs to be put in a snippet. That folder is getting pretty large as it is.

Same goes for the other new snippets. Thoughts?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm a sucker for separate files and includes. Much easier to read imho. Easier to remove or turn on and off too.


{% else %}

{% comment %}
If collection exists but is empty, display message
{% endcomment %}
<div class="grid-item">
<p>{{ 'collections.general.no_matches' | t }}</p>
</div>

{% endif %}

{% endfor %}

Expand Down
58 changes: 9 additions & 49 deletions templates/index.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,35 +32,15 @@
{% include 'product-grid-item' %}

{% else %}

{% comment %}
For onboarding new users to your theme, we add some default products and onboarding tutorials to help populate their store
{% endcomment %}
{% unless emptyState %}
{{ 'theme-onboarding.css' | global_asset_url | stylesheet_tag }}
{% assign emptyState = true %}
{% endunless %}

<div class="grid__item">
<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-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>
{% include 'onboarding-featured-products' %}

{% endfor %}

Expand Down Expand Up @@ -97,37 +77,17 @@
{% endunless %}
{% endfor %}

{% comment %}
For onboarding new users to your theme, we add some default collections and onboarding tutorials to help populate their store
{% endcomment %}

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

<div class="grid__item">
<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-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>
{% include 'onboarding-featured-collections' %}
{% endif %}

</div>
Expand Down