#64

Product support

Get help in the plugin support forum.

Categories

  • Marketing

Introduction

Hareshop is shopping cart based on octobercms/laravel

Some Features

  • Two product types: SIMPLE and CONFIGURABLE
  • Tax, Shipping
  • Filter option, Attribute for product
  • pretty url for category and product
  • Integrate Paypal, Stripe payment method
  • Ajax cart, onepage check out (in theme sample)
  • Filter and sort product in category page (in theme sample)
  • Theme config
  • Many other features

Configurable product

  • Each product has many variants. Each variants has filer option (for example: size, color,...), quality, price, image and gallery
  • Create variant in backend
    Configurable product
  • Display configurable product in frontend
    Configurable product frontend

Installation

Hareshop use Rainlab user plugin for registering users

Live Demo

Theme Sample

These plugin(s) are required for the plugin:

Settings

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 : settings -> settings -> 'Send mail to this email when order success'
  • Mail template : Settings -> mail template -> hareshop.catalog::mail.orderSuccess
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

../layouts/default.htm

description = "Default layout"
[HareShop\Catalog\Components\Cart Cart]
[HareShop\Catalog\Components\Settings Settings]
[RainLab\User\Components\Account Account]
[RainLab\User\Components\Session Session]
==
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>{{ this.page.seo_title }}</title>
        <meta name="description" content="{{ this.page.seo_description }}">
        <meta name="keywords" content="{{ this.page.seo_keyword }}">
        <meta name="author" content="Hareshop">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="generator" content="Hareshop">
        <link rel="icon" type="image/png" href="{{ 'assets/images/hareshop.png'|theme }}">
        <link href="{{ 'assets/vendor/bootstrap/css/bootstrap.min.css'|theme }}" rel="stylesheet">
        <link href="{{ 'assets/vendor/font_awesome_4/css/font-awesome.min.css'|theme }}" rel="stylesheet">
        <link href="{{ 'assets/css/theme.css'|theme }}" rel="stylesheet">
        <script src="{{ 'assets/vendor/jquery.js'|theme }}"></script>
        <link href="{{ 'assets/vendor/select2/select2.css'|theme }}" rel="stylesheet">
        <script src="{{ 'assets/vendor/select2/select2.full.js'|theme }}"></script>
        {% framework extras %}
        {% styles %}
    </head>
    <body>
        <img src="{{ 'assets/images/loading.gif'|theme }}" id="loading"/>
        <!-- Header -->
        <header id="layout-header">
            {% partial 'site/header' %}
        </header>

        <div id="flash_message"></div>

        <!-- Content -->
        <section id="layout-content" class="container">
            {% page %}
        </section>

        <!-- Footer -->
        <footer id="layout-footer">
            {% partial 'site/footer' %}
        </footer>

        <!-- modal cart -->
        {% partial 'Cart::modal' %}

        <!-- Scripts -->
        <script src="{{ 'assets/vendor/bootstrap/js/bootstrap.min.js'|theme }}"></script>
        {% scripts %}

    </body>
</html>
  • Load 4 component: Cart, Setting, Account, Session
  • This layout needs to have jquery and select2
  • Include partial modal in component 'Cart'

../partials/site/flashMessage.php

<script>
    function displayErrorCart(msg) {
        $.oc.flashMsg({
            'text': msg,
            'class': 'warning',
            'interval': 5
        });
    }
    displayErrorCart('{{msg}}');
</script>
  • This file displays flash message when add or update product to cart
Load product in home

../pages/home.php

title = "Home"
url = "/"
layout = "default"

[HareShop\Catalog\Components\Products Products]
[RainLab\User\Components\Account Account]
==

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

<script>
    //first initial
    $.request('onProductHome', {
        update: { 'Products::home': '#result' },
        data: { page: 1 },
        loading:"#loading"
    });
</script>
  • This file load product in home, use handle 'onProductHome' to get product, and partial 'home' in component Products
Load category or detail product

../pages/product.php

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

[HareShop\Catalog\Components\Products Products]
==
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'];
    $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 id="result"></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>
            function loadProductForCat(page, catId) {
                $.request('onProductByCat', {
                    update: { 'Products::category': '#result' },
                    data: { page: page, id: catId },
                    loading:"#loading"
                });
            }
            //first initial
            $(document).ready(function(){
                var entityId = $('#entity_id').val();
                loadProductForCat(1, entityId);
            });
        </script>
    {% else %}
        <script>
            $(document).ready(function(){
                var entityId = $('#entity_id').val();
                $.request('onProductDetail', {
                    update: { 'Products::detail': '#result' },
                    data: { id: entityId },
                    loading:"#loading"
                });
            });
        </script>
    {% endif %}
{% endif %}
  • This page loads category or detail product, use handle 'onProductByCat' or 'onProductDetail'
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>
  • Use handle 'onGetCart' to display cart
Checkout

../pages/checkout.htm

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

<!-- set some variable -->
{% set city = Settings.onGetCity %}

<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>
  • Use partial 'login' in component 'Account'
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>
  • Use partial 'register' in component 'Account'
  • Found the plugin useful on 12 Aug, 2017

    I have following error when I try to install the plugin:

    Aktualisierungsvorgang fehlgeschlagen

    {"#layout-flash-messages":" <p data-control=\"flash-message\" class=\"flash-message fade error\" data-interval=\"5\">slug muss eindeutig sein.<\/p>\n","X_OCTOBER_ERROR_FIELDS":{"slug":["slug muss eindeutig sein."]}}

    Can someone help me?

  • author

    Replied on 12 Aug, 2017

    Please add my skype: hareshop247
    i will support you when install
    Thank you for using my plugin

  • Found the plugin not useful on 4 Jul, 2017

    No orders are created

  • author

    Replied on 4 Jul, 2017

    Maybe, in your environment (localhost, host), mail can NOT be sent. So the order will not be created.
    In patch 1.1.4 , i changed code to fix it
    Thank you for using my plugin

1.3.0

change text variant

Sep 04, 2017

1.2.9

change some product tabs

Sep 03, 2017

1.2.8

Add component theme option

Aug 27, 2017

1.2.7

Change quality, category

Aug 25, 2017

1.2.6

Add theme config and some components

Aug 19, 2017

1.2.5

Change component for product detail

Aug 13, 2017

1.2.4

Add configurable product

Aug 13, 2017

1.2.3

Cache all data in category page

Jul 25, 2017

1.2.2

Add function clear cache

Jul 24, 2017

1.2.1

Fix bug in category page

Jul 23, 2017

1.2.0

Display more data in product detail page

Jul 21, 2017

1.1.9

Add shipping Geo Method

Jul 12, 2017

1.1.8

Handle price after tax

Jul 09, 2017

1.1.7

Fix seeder

Jul 09, 2017

1.1.6

Add filter and sort component

Jul 09, 2017

1.1.5

change filter

Jul 08, 2017

1.1.4

Still saving order even not sending mail, fix paypal return url success

Jul 04, 2017

1.1.3

Change to switch type of is_homepage and is_featured_product, change category, add order email

Jul 03, 2017

1.1.2

extends component product

Jun 27, 2017

1.1.1

fix display product status

Jun 26, 2017

1.0.10

fix currency when checkout

Jun 26, 2017

1.0.9

change type of filter option, add payment method Stripe

Jun 26, 2017

1.0.8

fix bug is_homepage, is_featured_product

Jun 24, 2017

1.0.7

fix bug when remove plugin, check status in component product, set status default enable

Jun 22, 2017

1.0.6

Add loading gif when creating related product

Jun 21, 2017

1.0.5

change type_id in table 'hare_product_type' to unique

Jun 21, 2017

1.0.4

Fix bug creating related product

Jun 19, 2017

1.0.3

Add event before delete product, create related product, change status

Jun 18, 2017

1.0.2

Add Paypal payment method

Jun 12, 2017

1.0.1

Initialize plugin.

Jun 05, 2017