Backend

Before creating product

  • Before creating product, you have to create Category, Tax class, setting currency, paypal seller email, order email, config email, attribute and filter option (you can go to 'Setting' section to create)
  • Default currency is USD, you can create more currency then change default currency as you wish
  • Product and Category have unique pretty url. Pretty url is gerenated automatically when creating
  • If you use Stripe, your url should be 'https'

Notice

  • You have to config email to send email, if email not send, order will not be created

Tax

  • Before you create Tax Class, you have to create Tax Rate
  • One Tax Class can have many Tax Rates

Ship

  • Shipping rule has 4 options: price, area, method, per item
  • Option 'method' is calculated by kg. so when you create product, you have to use kg in weight (if you use option 'method')

Attribute

  • Before you create Attribute, you have to create Attribute Group
  • Attribute uses slug is snake case . For example: attribute_1

Filter

  • Filter can have three types: color, text, image

Product

  • When creating gallery for product, you can choose many images. Just hold Shift key and choose all images of gallery
  • Then, you can drag and drop image to arrange order of images

Component

You should download this theme to see details : HareShop Simple

Code sample

Load category or detail product

../pages/product.php

title = "Product"
url = "/:slug"
layout = "default"

[HareShop\Catalog\Components\Products Products]
[HareShop\Catalog\Components\Configurable Configurable]
[HareShop\Catalog\Components\Filter Filter]
==
use \HareShop\Catalog\Components\Products;
use \HareShop\Catalog\Models\Router;
function onEnd() {
    $slug = $this->param('slug');
    $product = new \HareShop\Catalog\Components\Products();
    $entity = \HareShop\Catalog\Models\Router::getRouterByUrl($slug);
    $id = $entity['entity_id'];
    $type = $entity['route_type'];

    //use this code if you has configurable product
    if ($type == \HareShop\Catalog\Models\Router::ROUTER_PRODUCT) {
        $productType = \HareShop\Catalog\Models\Product::getProductTypeById($id);
        $this['product_type'] = \HareShop\Catalog\Models\Product::getProductTypeById($id);
        $this['product_type_simple'] = \HareShop\Catalog\Models\Product::TYPE_SIMPLE;
        $this['product_type_config'] = \HareShop\Catalog\Models\Configurable::TYPE_CONFIG;
        if ($productType == \HareShop\Catalog\Models\Product::TYPE_SIMPLE) {
            $this['detail'] = $product->onProductDetail($id);
        }
        if ($productType == \HareShop\Catalog\Models\Configurable::TYPE_CONFIG) {
            $product = new \HareShop\Catalog\Components\Configurable();
            $this['detail'] = $product->onProductConfigDetail($id);
        }
    }

    //end configurable product
    $seo = \HareShop\Catalog\Components\Products::getSeoInfo($id, $type);
    $this->page->seo_title = $seo['seo_title'];
    $this->page->seo_keyword = $seo['seo_keyword'];
    $this->page->seo_description = $seo['seo_description'];
}
==

<div class="container">
    <div class="row" id="product-detail">
        <div class="col-md-3" id="filter-navigation">
        </div>
        <div class="col-md-9" id="result">
        </div>
    </div>
</div>

{% set entity_id = Products.onRouterLoad.entity_id %}

{% if entity_id == null %}
    {% partial '404' %}
{% else %}
    <input type="hidden" id="entity_id" value="{{entity_id}}" />
    {% if Products.onRouterLoad.route_type == 1 %}
        <script type="text/javascript" src="/plugins/hareshop/catalog/assets/js/filter/productFilter.js"></script>
    {% else %}
    <!-- product -->
         {% if (product_type == product_type_simple) %}
            <!-- product type simple -->
            {% partial 'Products::detail' product=detail %}
         {% else %}
            <!-- product type config -->
            {% partial 'Configurable::detail' product=detail %}
        {% endif %}
    {% endif %}
{% endif %}


Cart

../pages/cart.htm

title = "Cart"
url = "/cart"
layout = "default"

==
<div class="container">
    <div id="cart">
    </div>
    <button type="button" class="btn btn-default" onclick="goToCheckout()">Checkout</button>
</div>

<script>
    $.request('onGetCart', {
        update: { 'Cart::cart' : '#cart'}
    });
</script>

 

Checkout

../pages/checkout.htm

title = "Checkout"
url = "/checkout"
layout = "default"
[HareShop\Catalog\Components\Account Account]
[HareShop\Catalog\Components\Checkout Checkout]
[HareShop\Catalog\Components\Paypal Paypal]
[HareShop\Catalog\Components\Stripe Stripe]
==

<div class="container">
    <div id="result"></div>
</div>

<script>
    //first initial
    $.request('onGetCartCheckout', {
        update: { 'Checkout::checkout': '#result' },
        loading:"#loading"
    });
</script>


 

  • This page needs to have components 'Account' and 'Checkout'
  • Use handle 'onGetCartCheckout' to display checkout page

Login

../pages/login.htm

title = "Login"
url = "/login"
layout = "default"
[HareShop\Catalog\Components\Account Account]
==

<div class="container">
    <div id="result"></div>
</div>

<script>
    //first initial
    $.request('onInit', {
        update: { 'Account::login': '#result' },
        loading:"#loading"
    });
</script>

 

Register

../pages/register.htm

title = "Register"
url = "/register"
layout = "default"
[HareShop\Catalog\Components\Account Account]
[HareShop\Catalog\Components\UserExtend UserExtend]
==

<div class="container">
    <div id="result"></div>
</div>

<script>
    //first initial
    $.request('onInit', {
        update: { 'Account::register': '#result' },
        loading:"#loading"
    });
</script>