#83

Product support

Get help in the plugin support forum.

Categories

  • Marketing

Introduction

Configurable product is plugin for Hareshop plugin. It manages configurable product. For example : product A with color white and size S is 12 $ and quantity is 22

Installation

Live Demo

These plugin(s) are required for the plugin:

Display configurable product

Notice

  • You have to install plugin user and hareshop first
  • When install this plugin, in your database, table 'hare_product_type' has NOT rows that 'field_id' has value '2' and '3'. Because 'field_id' is unique. So if there is row with 'field_id' to be '2' or '3', it will be error.

Create configurable product

  • Each product will be parent config product and has many variant (child config product)
  • When creating variant, If you left field price to be empty, this variant will get price of parent config product

Components

use component 'Configurable', handle 'onProductConfigDetail' and partial 'detail' for example: you load product with id : 84, ../pages/configurable.htm:

title = "Configurable product"
url = "/configurable"
layout = "default"

[HareShop\Configurable\Components\Configurable Configurable]
==
<div class="container">
    <div id="product">
    </div>
</div>

<script>
    $.request('onProductConfigDetail', {
        update: { 'Configurable::detail' : '#product'},
        data: { id: 84 },
        loading:"#loading"
    });
</script>

If you use sample theme, you can change code of file ../pages/product.htm to:

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

[HareShop\Catalog\Components\Products Products]
[HareShop\Configurable\Components\Configurable Configurable]
==
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) {
        $this['product_type'] = \HareShop\Catalog\Models\Product::getProductTypeById($id);
        $this['product_type_simple'] = \HareShop\Catalog\Models\Product::TYPE_SIMPLE;
        $this['product_type_config'] = \HareShop\Configurable\Models\Configurable::TYPE_CONFIG;
    }
    //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 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 %}
        <!-- category -->
        <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 %}
        <!-- product -->
        {% if (product_type == product_type_simple) %}
            <!-- product type simple -->
            <script>
                $(document).ready(function(){
                    var entityId = $('#entity_id').val();
                    $.request('onProductDetail', {
                        update: { 'Products::detail': '#result' },
                        data: { id: entityId },
                        loading:"#loading"
                    });
                });
            </script>
        {% else %}
            <!-- product type config -->
            <script>
                $(document).ready(function(){
                    var entityId = $('#entity_id').val();
                    $.request('onProductConfigDetail', {
                        update: { 'Configurable::detail' : '#result'},
                        data: { id: entityId },
                        loading:"#loading"
                    });
                });
            </script>
        {% endif %}
    {% endif %}
{% endif %}

Add some styles:

.filter-option {
    cursor: pointer;
    list-style: none;
    float: left;
    margin-right: 5px;
}
.option-active {
    border: 2px yellow solid;
}
.option-ul, .product-name-price {
    clear: both;
}
.option-color, .option-text, .option-image {
    height: 40px;
    width: 48px;
}
.option-text span {
    font-size: 20px;
    position: relative;
    top: 20%;
    left: 35%;
}
1.0.3

Fix tax class when update child config product

Jul 10, 2017

1.0.2

change checkbox filter style

Jul 04, 2017

1.0.1

Initialize plugin.

Jun 27, 2017