Products and cart

[MateThemes]

Hello everyone!

I need your help to get some things to understand.

I have a project, where I need to sell products like parquet. So the price that is displayed in the shop is per m2, but in a package are 2.6 m2. The shop customer can only buy full packages. So how can I achieve this with the standard mall solution? I have currently no clue.

Thanks in advance.

[tobias-kuendig]

That's a tricky one. A solution to this problem is to use mall to create your parquet product of 2.6 m2 with a fixed price that the customer can buy. Then use either a custom field to add the price for a single m2 and display this instead of the effective product price in the frontend.

Another, but a bit more complex solution, is to add a custom db column to the products table and extend the product form with a new "m2 cost" field. Then use this in the frontend.

https://octobercms.com/docs/plugin/extending#extending-backend-form

[damsfx]

And why not create variants?

It is also possible to create variants of the parquet product:

• 2m² variant
• 2.6m² variant

Each with their own price and the product with a price per m².

[MateThemes]

I also thought of variants, but if I have the product 1 with a price of 10 per m2 and in a package is 2.6 m2 how can I increase the price, if the customer is putting the item in the cart? For example the customer needs 8 m2. the customer is getting 2 packages. 2 * 2,6 = 5,2 m2. The price per m2 is 10. The price in the cart must be 52 dollar or euro or whatever.

Variants don't fit for this or? I think I need to extend the backend form...

[chocolata]

I made a website for a butcher a while back, maybe it might be of some use. I created variants based on the property "package". And so now the client can choose products based on price per kilo, per piece and per 10 pieces. Might be of some use:

https://georgesviandefumee.be/categorie/producten

The property looks like this:

The pipe character is used as a unit. I split the property label on this character and use the latter part to show next to the quantity selector on the product page. This way, you can see that you are buying 1 piece or 1 pack or 1 kilo or whatever you like.

My addtocart.html partial looks like this. Note "verpakking" => this is the unit in dutch (the property

{% if not item.allow_out_of_stock_purchases %}
    <div class="mall-product__property-stock text-{{ stock > 0 ? 'green' : 'red' }}">
        {% if stock > 10 %}
            {{ 'offline.mall::frontend.stock.many_available' | trans }}
        {% elseif stock > 0 %}
            {{ 'offline.mall::frontend.stock.available' | transchoice(stock, {stock: stock}) }}
        {% else %}
            {{ 'offline.mall::frontend.stock.unavailable' | trans }}
        {% endif %}
    </div>
{% endif %}
{% if stock > 0 or item.allow_out_of_stock_purchases %}
    <div class="mall-product__add-to-cart-form">
        <div class="mall-form-control">
            <label for="quantity">
                <span>{{ 'offline.mall::frontend.quantity' | trans }}</span>
                <span class="c-quantitypicker">
                    <input type="number" id="quantity" class="c-quantitypicker__input" data-default="{{ item.quantity_default | default(1) }}" min="{{ item.quantity_min }}" max="{{ item.quantity_max }}" name="quantity" value="{{ item.quantity_default | default(1) }}">
                    <span class="c-quantitypicker__unit">{{ item.getPropertyValueBySlug("verpakking").value | unit }}</span>
                </span>
            </label>
            <div data-validate-for="quantity"></div>
        </div>

        {% if item.custom_fields.count > 0 %}
        <div class="mall-product__custom-fields">
            {% partial __SELF__ ~ '::customfields' fields=item.custom_fields %}
        </div>
        {% endif %}

        <button type="submit" class="mall-add-to-cart-button" data-attach-loading>
            <i class="fas fa-plus"></i>
            {{ 'In winkelmand' | _ }}
        </button>
    </div>
{% endif %}
<script>
    $(function() {
        $(".c-quantitypicker__input").focus(function () {
            $(this).parent().addClass("c-quantitypicker--focus");
        }).blur(function () {
            $(this).parent().removeClass("c-quantitypicker--focus");
        });
    });
</script>
{% partial __SELF__ ~ '::belowcartbutton' %}

Also, here is my cart.htm partial. Below you can see a dropdown selector for the variants with a different packaging:

<nav class="c-breadcrumb">
    <a href="{{ 'category' | page({ slug : 'producten' }) }}">Alle producten</a><i class="fas fa-angle-right"></i>
    <h2 class="mall-product__name c-breadcrumb__title">{{ item.name }}</h2>
</nav>
<form data-request="onAddToCart"
      data-request-success="data.added && $.publish('mall.cart.productAdded', data)"
      data-request-validate
      data-request-flash
      id="mall-add-to-cart">


    {% if props.count > 0 and item.inventory_management_method == 'variant' %}
        <div class="mall-product__variant-properties">
            {% partial __SELF__ ~ '::properties' props=props %}
        </div>
    {% endif %}

    <div class="mall-product__price">

        {% partial __SELF__ ~ '::price' item=item %}
    </div>

    <div class="mall-product__tax-info">
        {% partial __SELF__ ~ '::tax-info' item=item %}
    </div>



    <div class="mall-product__add-to-cart">
        {% if item.allow_out_of_stock_purchases %}
            {% partial __SELF__ ~ '::addtocart.htm' item=item %}
        {% else %}
            <div class="mall-product__property-stock mall-product__property-stock--checking">
                {{ 'offline.mall::frontend.stock.checking' | trans }}
            </div>
        {% endif %}
    </div>

    {% if variants.count > 0 %}
    <h5 class="mall-product__variants-heading">{{ 'Ook beschikbaar' | _ }}</h5>
    <ul class="mall-product__variants">

        {% for value, variant in variants %}
        {% set variant = variant.first() %}

        <li class="mall-product__variant">
            <a href="{{ this.page.fileName|page({slug: this.param.slug, variant: variant.hashId}) }}" title="{{ variant.name }}" class="mall-product__variant-link">
                <span class="mall-product__variant-label">
                    {{ variant.name }} - {{ variant.getPropertyValueBySlug("verpakking").value | lower | quantity }}
                </span>
                <span class="mall-product__variant-price">
                    {{ price|default(variant.price()) }}
                </span>
            </a>
        </li>

        {% endfor %}
    </ul>
    {% endif %}
</form>

My advice would be to use this kind of approach. If the user selects for example 10 individual products, while a 10 pack would be more economical, I would say that this is the responsability of the customer. You could technically detect the unit and the quantity via JavaScript and then display a message if you'd like. You could hook into the onchange event of the quantity selector, and then display something like "We notice that you put 10 individual pieces in your basket. Have you checked out our more economical bulk packaging?".

Hopefully this might be of some use.

[MateThemes]

Hello!!!

Thank you very much. This helped me out!!!

Thanks one more again!