snipcart · Locux56 · Jul 5, 2019 · Jul 7, 2019 · Jul 8, 2019 · Jul 8, 2019
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,6 @@
+*.html text eol=lf
+*.md text eol=lf
+*.scss text eol=lf
+*.njk text eol=lf
+*.json text eol=lf
+*.yml text eol=lf
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+public
+*.orig
+node_modules
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "files.eol": "\n"
+}
diff --git a/README.md b/README.md
@@ -0,0 +1,88 @@
+![logo](https://snipcart.com/media/204485/logo.svg)
+
+# Planty Stackbit theme
+
+Planty a e-commerce ready custom theme for Stackbit created by [Snipcart](https://snipcart.com) team.
+
+This theme can be used to create an e-commerce ready website through Stackbit platform. You'll get
+everything you need from products listing, categorization, FAQ, etc.
+
+You can see it in action right [here](https://planty-faa9e.netlify.com).
+
+## How to get started
+
+In Stackbit's custom themes importer, just use this repository URL. For the moment, this theme works only with Jekyll but will soon work with other static site generators supported by Stackbit.
+
+## Theme configuration
+
+> Please note that the screenshots below have been taken in Forestry, you can use Forestry as headless CMS for your project if you want, but this also work with other CMSs.
+
+### Configuring Snipcart
+
+First thing is to enter your Snipcart API key. Open your CMS and go to `Global site config`.
+
+![api-key](https://snipcart.com/media/204516/config_api_key.png)
+
+Use your **public** API key in there.
+
+### Logos
+
+Logos can be updated via the CMS as well. You'll be asked to provide a dark and a light logo.
+
+![logo](https://snipcart.com/media/204518/config_logos.png)
+
+### Styles configuration
+
+Colors can be managed via the CMS as well. Under `Global site config` section, open `Styles config`. You'll see all colors used throughout the theme listed here. Adjust them for your own branding.
+
+![styles-config](https://snipcart.com/media/204508/config_styles.png)
+
+You can also configure background images in there.
+
+![background-images](https://snipcart.com/media/204517/config_backgroundimages.png)
+
+### Categories
+
+Each product can be associated to a category. Open the Categories section and manage them there.
+
+![categories](https://snipcart.com/media/204510/list_categories.png)
+
+### Products
+
+Products can be managed directly through the CMS via the Products section.
+
+![products](https://snipcart.com/media/204511/list_products.png)
+
+Products have several properties available, both for Snipcart and for the theme. You can define its price, description, name, ID, etc.
+
+You can also define if this is a **featured** product, meaning that it will show in the Best sellers section on the site. A feature product will use the Feature images set.
+
+![product-details](https://snipcart.com/media/204514/product_details.png)
+
+### Promotion
+
+The promotion is a component displayed just above the footer on some pages. You can configure what to show in that box via the CMS.
+
+![promotion](https://snipcart.com/media/204504/components_promotion.png)
+
+You can define a Call to action for the promotion, it's usually a link to a section of your site.
+
+![promotion-cta](https://snipcart.com/media/204505/components_promotion_cta.png)
+
+### Testimonials
+
+You can manage testimonials to show on the site via this section.
+
+![testimonials](https://snipcart.com/media/204506/components_testimonials.png)
+
+### About
+
+Manage the content of the About section here.
+
+![about](https://snipcart.com/media/204512/pages_about.png)
+
+### FAQ
+
+Manage your FAQ entries in this section.
+
+![faq](https://snipcart.com/media/204513/pages_faq.png)
diff --git a/components/buy_button.html b/components/buy_button.html
@@ -0,0 +1,22 @@
+{% set product = include_dict.product %}
+
+<button class="button button--std snipcart-add-item"
+    data-item-name="{{ product.title }}"
+    data-item-url="{{ product.url }}"
+    data-item-price="{{ product.price }}"
+    data-item-image="{{ product.images.default.thumbnail }}"
+    data-item-description="{{ product.description }}"
+    date-item-categories="{{ product.category }}"
+    data-item-id="{{ product.id}}">
+    <span class="button__icon">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M23.2896 4.94327C22.7844 4.81588 22.2535 5.1214 22.1272 5.63093L20.0304 13.9616H7.8562L4.97602 2.16559C4.87538 1.73269 4.49648 1.42717 4.0416 1.42717H0.960093C0.429223 1.42717 0 1.86007 0 2.39549C0 2.93091 0.429223 3.36381 0.960093 3.36381H3.3095L7.19908 19.3624C7.29973 19.7953 7.67862 20.1009 8.13351 20.1009H19.2223C19.7531 20.1009 20.1824 19.668 20.1824 19.1325C20.1824 18.5971 19.7531 18.1642 19.2223 18.1642H8.86555L8.31003 15.8972H20.7378C21.1671 15.8972 21.546 15.5917 21.6723 15.1836L23.9714 6.11341C24.0977 5.60487 23.7947 5.07044 23.2895 4.94306L23.2896 4.94327Z" fill="#88DD9B"/>
+            <path d="M11.4678 22.4455C11.4678 23.3034 10.7781 24 9.92751 24C9.07596 24 8.38623 23.3034 8.38623 22.4455C8.38623 21.5877 9.07596 20.891 9.92751 20.891C10.7781 20.891 11.4678 21.5877 11.4678 22.4455Z" fill="#88DD9B"/>
+            <path d="M19.4244 22.4455C19.4244 23.3034 18.7346 24 17.8841 24C17.0325 24 16.3428 23.3034 16.3428 22.4455C16.3428 21.5877 17.0325 20.891 17.8841 20.891C18.7346 20.891 19.4244 21.5877 19.4244 22.4455Z" fill="#88DD9B"/>
+            <path d="M16.6972 6.11442L14.9793 7.84704V0.96832C14.9793 0.432901 14.5501 0 14.0192 0C13.4884 0 13.0592 0.432901 13.0592 0.96832V7.84704L11.3413 6.11442C11.1646 5.93628 10.912 5.83376 10.6594 5.83376C10.4068 5.83376 10.1799 5.93527 9.9776 6.11442C9.59869 6.49657 9.59869 7.1076 9.9776 7.46489L13.3375 10.8535C13.6907 11.2098 14.3222 11.2098 14.6765 10.8535L18.0363 7.46489C18.4152 7.08274 18.4152 6.4717 18.0363 6.11442C17.6821 5.73227 17.0762 5.73227 16.6973 6.11442H16.6972Z" fill="#88DD9B"/>
+        </svg>
+    </span>
+    <span class="button__text">
+        Add to cart
+    </span>
+</button>
diff --git a/components/featured_products.html b/components/featured_products.html
@@ -0,0 +1,19 @@
+<ul class="product-grid product-grid--draggable">
+    {% set products = include_dict.products %}
+
+    {% for product in products %}
+        <li class="product-grid__item">
+            <figure data-href="{{ product.url | relative_url }}" style="background-image:url({{product.images.featured.thumbnail}})" class="product-grid__item-figure product-grid__item-figure--featured js-figure-link">
+                <figcaption>
+                    {% set include_dict= {'product': product, 'component': 'product-grid'} %}
+                    {% include "small_buy_button.html" %}
+                </figcaption>
+            </figure>
+            <div class="product-grid__definition">
+                <h3 class="product-grid__title"> <a href="{{ product.url | relative_url }}"> {{ product.title }} </a> </h3>
+                <span class="product-grid__category"> {{ product.category }} </span>
+                <span class="product-grid__price"> ${{ product.price }} </span>
+            </div>
+        </li>
+    {% endfor %}
+</ul>
diff --git a/components/footer.html b/components/footer.html
@@ -0,0 +1,18 @@
+{% set menu = include_dict.menu %}
+<footer class="footer">
+    <div class="footer__container">
+        <a href="/">
+            <img src="{{ site.params.logos.light | relative_url }}" alt="Planty logo" class="footer__logo">
+        </a>
+        <ul class="footer__nav">
+            {% for item in menu%}
+            <li class="footer__nav-item">
+                <a href="{{ item.url | relative_url }}" {% if item.title == page.title %}class="footer__nav-link footer__nav-link--active" {% else %}class="footer__nav-link"{% endif %}>
+                {{ item.title }}
+                </a>
+            </li>
+            {% endfor %}
+        </ul>
+        <div class="footer__legal-notice"> Copyright 2019 Planty Inc. All rights reserved. </div>
+    </div>
+</footer>
diff --git a/components/header.html b/components/header.html
@@ -0,0 +1,76 @@
+{% set data = include_dict.page %}
+{% set isHome = true if data.basename == 'index.md' else false %}
+{% set isProduct = true if data.template == "product" else false %}
+
+<header class="header">
+    <nav {{ classNames('nav', {'nav--light': isHome, 'nav--dark': isHome != true}) }}>
+        <div class="nav__logo">
+            <a href="/">
+                {% if isHome %}
+                  <img class="nav__logo-image" src="{{ site.params.logos.light | relative_url }}" /> 
+                {% elseif isProduct %}
+                  <img class="nav__logo-image" src="{{ site.params.logos.light | relative_url }}" /> 
+                {% else %}
+                  <img class="nav__logo-image" src="{{ site.params.logos.dark | relative_url }}" /> 
+                {% endif %}
+            </a>
+        </div>
+        <ul class="nav__menu">
+            {% for item in site.menus.main %}
+                {% set section = data.section if data.section else data.title %}
+                {% set isActive = true if item.title == section else false %}
+                <li class="nav__menu-item">
+                    <a href="{{ item.url | relative_url }}" {{ classNames('nav__menu-item-link', {'nav__menu-item-link--active': isActive}) }}>
+                        {{ item.title }}
+                    </a>
+                </li>
+            {% endfor %}
+        </ul>
+
+        <div class="nav__right">
+            <button class="snipcart-checkout nav__button button button--transparent">
+                <span class="button__icon nav__button-icon">
+                    <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="M22.907 4.22024C23.0315 4.1993 23.1614 4.20403 23.2896 4.2384L23.2895 4.23818C23.7947 4.37362 24.0977 4.94184 23.9714 5.48253L21.6723 15.1262C21.546 15.5601 21.1671 15.8849 20.7378 15.8849H8.31003L8.86555 18.2952H19.2223C19.7531 18.2952 20.1824 18.7555 20.1824 19.3248C20.1824 19.8941 19.7531 20.3543 19.2223 20.3543H8.13351C7.67862 20.3543 7.29973 20.0295 7.19908 19.5692L3.3095 2.55908H0.960093C0.429223 2.55908 0 2.09881 0 1.52954C0 0.960271 0.429223 0.5 0.960093 0.5H4.0416C4.49648 0.5 4.87538 0.824833 4.97602 1.2851L7.8562 13.8269H20.0304L21.7767 6.45023H13.8998C13.2827 6.45023 12.7823 5.94993 12.7823 5.33277C12.7823 4.71561 13.2827 4.2153 13.8998 4.2153L22.8012 4.21533C22.8369 4.21533 22.8722 4.21699 22.907 4.22024ZM9.92751 24.4999C10.7781 24.4999 11.4678 23.7593 11.4678 22.8472C11.4678 21.9351 10.7781 21.1944 9.92751 21.1944C9.07596 21.1944 8.38623 21.9351 8.38623 22.8472C8.38623 23.7593 9.07596 24.4999 9.92751 24.4999ZM19.4244 22.8472C19.4244 23.7593 18.7346 24.4999 17.8841 24.4999C17.0325 24.4999 16.3428 23.7593 16.3428 22.8472C16.3428 21.9351 17.0325 21.1944 17.8841 21.1944C18.7346 21.1944 19.4244 21.9351 19.4244 22.8472Z" fill="white"/>
+                    </svg>                      
+                </span>
+                <span class="snipcart-items-count nav__total-items button__text">0</span>
+            </button>
+            <button class="hamburger button button--transparent">
+                <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path class="hamburger__icon-path" fill-rule="evenodd" clip-rule="evenodd" d="M0 1.00049C0 0.448204 0.447715 0.000488281 1 0.000488281H23C23.5523 0.000488281 24 0.448204 24 1.00049C24 1.55277 23.5523 2.00049 23 2.00049H1C0.447716 2.00049 0 1.55277 0 1.00049ZM0 8.00049C0 7.4482 0.447715 7.00049 1 7.00049H13C13.5523 7.00049 14 7.4482 14 8.00049C14 8.55277 13.5523 9.00049 13 9.00049H1C0.447716 9.00049 0 8.55277 0 8.00049ZM1 14.0005C0.447715 14.0005 0 14.4482 0 15.0005C0 15.5528 0.447715 16.0005 1 16.0005H16C16.5523 16.0005 17 15.5528 17 15.0005C17 14.4482 16.5523 14.0005 16 14.0005H1Z" fill="white"/>
+                </svg>                            
+            </button>
+            <div class="hamburger__content hamburger__content--closed">
+                <div class="hamburger__options">
+                    <button class="snipcart-checkout button button--transparent">
+                    <span class="button__icon nav__button-icon">
+                        <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path fill-rule="evenodd" clip-rule="evenodd" d="M22.907 4.22024C23.0315 4.1993 23.1614 4.20403 23.2896 4.2384L23.2895 4.23818C23.7947 4.37362 24.0977 4.94184 23.9714 5.48253L21.6723 15.1262C21.546 15.5601 21.1671 15.8849 20.7378 15.8849H8.31003L8.86555 18.2952H19.2223C19.7531 18.2952 20.1824 18.7555 20.1824 19.3248C20.1824 19.8941 19.7531 20.3543 19.2223 20.3543H8.13351C7.67862 20.3543 7.29973 20.0295 7.19908 19.5692L3.3095 2.55908H0.960093C0.429223 2.55908 0 2.09881 0 1.52954C0 0.960271 0.429223 0.5 0.960093 0.5H4.0416C4.49648 0.5 4.87538 0.824833 4.97602 1.2851L7.8562 13.8269H20.0304L21.7767 6.45023H13.8998C13.2827 6.45023 12.7823 5.94993 12.7823 5.33277C12.7823 4.71561 13.2827 4.2153 13.8998 4.2153L22.8012 4.21533C22.8369 4.21533 22.8722 4.21699 22.907 4.22024ZM9.92751 24.4999C10.7781 24.4999 11.4678 23.7593 11.4678 22.8472C11.4678 21.9351 10.7781 21.1944 9.92751 21.1944C9.07596 21.1944 8.38623 21.9351 8.38623 22.8472C8.38623 23.7593 9.07596 24.4999 9.92751 24.4999ZM19.4244 22.8472C19.4244 23.7593 18.7346 24.4999 17.8841 24.4999C17.0325 24.4999 16.3428 23.7593 16.3428 22.8472C16.3428 21.9351 17.0325 21.1944 17.8841 21.1944C18.7346 21.1944 19.4244 21.9351 19.4244 22.8472Z" fill="white"/>
+                        </svg>                      
+                    </span>
+                    </button>
+                    <div class="">
+                        <span class="snipcart-items-count"></span> products | <span class="snipcart-total-price"></span>                        </div>
+                    </div>
+                <button class="link snipcart-checkout hamburger__checkout">
+                    Checkout
+                    <svg width="26" height="14" viewBox="0 0 26 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M22.6819 6.07886H0V7.79048H22.8139L18.2402 12.3182L19.434 13.5L26 7L19.434 0.5L18.2402 1.68182L22.6819 6.07886Z" fill="#88DD9B"/>
+                    </svg>                            
+                </button>
+                <ul class="hamburger__nav">
+                    {% for item in site.menus.main %}
+                        {% set section = data.section if data.section else data.title %}
+                        {% set isActive = true if item.title == section else false %}
+                        <li class="hamburger__nav-item">
+                            <a href="{{ item.url | relative_url }}" {{ classNames('hamburger__nav-link', {'hamburger__nav-link--active': isActive})}}>
+                                {{ item.title }}
+                            </a>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </div>                
+        </div>
+    </nav>
+</header>
diff --git a/components/hero.html b/components/hero.html
@@ -0,0 +1,7 @@
+<section class="hero">
+    <div class="hero__title">{{ include_dict.page.content | markdownify }}</div>
+    <a href="/store" class="link hero__link">
+      See all plants
+      <svg width="26" height="14" viewBox="0 0 26 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.6819 6.07886H0V7.79048H22.8139L18.2402 12.3182L19.434 13.5L26 7L19.434 0.5L18.2402 1.68182L22.6819 6.07886Z" fill="#88DD9B"/></svg>            
+    </a>
+</section>
diff --git a/components/html_head.html b/components/html_head.html
@@ -0,0 +1,9 @@
+<title>
+    {{ page.title }}
+</title>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta http-equiv="X-UA-Compatible" content="ie=edge">
+<link rel="stylesheet" href="https://cdn.snipcart.com/themes/v3.0.0-beta.2/default/snipcart.css" />
+<link rel="stylesheet" href="{{ 'assets/css/main.css' | relative_url }}">
+<link rel="icon" type="image/png" href="{{ 'images/favicon.png' | relative_url }}">
diff --git a/components/nav_categories.html b/components/nav_categories.html
@@ -0,0 +1,11 @@
+<ul class="store__nav-items">
+    {% for item in site.menus.categories %}
+        {% set category = include_dict.page %}
+        {% set isActive = true if category and category.title == item.title else false %}
+        <li class="store__nav-item">
+            <a href="{{ item.url | relative_url }}" {{ classNames('store__nav-item-link', {'store__nav-item-link--active': isActive}) }}>
+                {{ item.title }}
+            </a>
+        </li>
+    {% endfor %}
+</ul>
diff --git a/components/post_body.html b/components/post_body.html
@@ -0,0 +1,3 @@
+<script src="{{ 'js/main.js' | relative_url }}"></script>
+<script src="https://cdn.snipcart.com/themes/v3.0.0-beta.2/default/snipcart.js"></script>
+<div hidden id="snipcart" data-api-key="{{ site.params.snipcart_api_key }}"></div>
diff --git a/components/product_card.html b/components/product_card.html
@@ -0,0 +1,10 @@
+{% set product = include_dict.product %}
+
+<li class="product__card">
+    <figure class="product__card__image">
+        <img src="{{ product.images.default.thumbnail }}" alt="{{ product.title }}" />
+    </figure>
+    <h2 class="product__card__title">
+        {{ product.title }}
+    </h2>
+</li>
diff --git a/components/product_grid.html b/components/product_grid.html
@@ -0,0 +1,20 @@
+{% set listCssClass = include_dict.cssClass %}
+
+<ul class="product-grid {% if listCssClass %}{{ listCssClass }}{%endif%}">
+    {% set products = include_dict.products %}
+    {% for product in products %}
+        <li class="product-grid__item">
+            <figure data-href="{{ product.url | relative_url }}" style="background-image:url({{ product.images.default.thumbnail }})" class="product-grid__item-figure js-figure-link">
+                <figcaption>
+                    {% set include_dict= {'product': product, 'component': 'product-grid'} %}
+                    {% include "small_buy_button.html" %}
+                </figcaption>
+            </figure>
+            <div class="product-grid__definition">
+                <a href="{{ product.url | relative_url }}"><h3 class="product-grid__title">{{ product.title }}</h3></a>
+                <span class="product-grid__category"> {{ product.category }} </span>
+                <span class="product-grid__price"> ${{ product.price }} </span>
+            </div>
+        </li>
+    {% endfor %}
+</ul>
diff --git a/components/promo_section.html b/components/promo_section.html
@@ -0,0 +1,15 @@
+{% set promotion = site.data.promotion %}
+
+<section class="content__row content__row--bleed">
+    <div class="promo">
+        <img src="{{ promotion.image | relative_url }}" alt="{{ promotion.title }}" class="promo__image">
+        <div class="promo__message-container">
+            <h2 class="promo__title">{{ promotion.title }}</h2>
+            <p class="promo__subtitle">{{ promotion.subtitle }}</p>
+            <a class="link link--light promo__link" href="{{ promotion.cta.link }}">
+                {{ promotion.cta.text }}
+                <svg width="26" height="14" viewBox="0 0 26 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.6819 6.07886H0V7.79048H22.8139L18.2402 12.3182L19.434 13.5L26 7L19.434 0.5L18.2402 1.68182L22.6819 6.07886Z" fill="#ffffff"/></svg>
+            </a>
+        </div>
+    </div>
+</section>