Fundraiser webshop

[Typografics 11]

Each year we cycle 1000km with our company to fight against cancer. To participate with 4 teams we have to collect 20.000 euros.

Our graphic designers made some goodies en we also organise a spaghetti fundraiser. To help the sales we decided to make a webshop with our webteam. And of course we used our favourite CMS for the job! 🙂
https://shop.typografics.be/

At this moment we raised more than 20.000 euros, so all our teams can participate. This is a very special project for us, unfortunately one of our colleagues has been diagnosed with cancer and currently is fighting against this terrible disease. 

Premium PW modules used in this project:
PadLoper
FormBuilder
ProFields
Variations

With a few hooks here and there we managed to make it work. To handle the payments we made use of Mollie, we created our own payment module and will opensource this soon.

You can read more about this project in our blog (in dutch) 

Unfortunately we're currently only shipping to Belgium

We’re already brainstorming to make a 2.0 version of this webshop, so all your feedback is more than welcome.

[OllieMackJames 106]

Nice!

Very interested in your padloper/mollie combination looking forward to your open sourcing of the payment module you built.

[MarcoPLY 15]

Very nice!

Me too I like your payment way. I didn't know it maybe I will you too.

How you have setup the product page for ask the double variation of product? I mean you ask for the 1° variation the Size on the T-short and the 2° if men or woman. How did you do it?

The only things that I not like a lot is that: if i'm on one category page, like Tate Bag, and change language the page start again from the homepage. and I have to click twice for change language. In the single product page this not happen. Also in the cart happen something to similar to change language.

Anyway I like it! good job!

[DonPachi 17]

21 hours ago, MarcoPLY said:

How you have setup the product page for ask the double variation of product? I mean you ask for the 1° variation the Size on the T-short and the 2° if men or woman. How did you do it?

I don't know if this is the exact method used by the developer, but there is a tutorial for using the variations module with padloper here: https://variations.kongondo.com/demo/

It's a great looking site, and an awesome demonstration of some premium modules I'm looking to use in a new project. I'm glad you mentioned ProFields as that looks like a big time saver I was aware of but hadn't really looked into before. 

Best of luck to your colleague, I also have a colleague recently diagnosed and it's a horrible disease.

[Typografics 11]

On 4/13/2018 at 4:36 PM, MarcoPLY said:

How you have setup the product page for ask the double variation of product? I mean you ask for the 1° variation the Size on the T-short and the 2° if men or woman. How did you do it?

We check the stock trough an Ajax call each time the user selects an option. If it's not in stock anymore, the button "add to cart" stays not clickable. If it's in stock the user can add it to the cart. We also set an max in the quantity field, that's the same value as the stock is.

Javascript

clothing = {

    size: "",
    sex: "",
    product_id: "",

    init: function() {

        $('input[name="Size"], input[name="Sex"]').on('change', function (e) {

            clothing.size = $('input[name="Size"]:checked').val();
            clothing.sex = $('input[name="Sex"]:checked').val();
            clothing.product_id = $('#product_id').val();

            if(clothing.sex && clothing.size && clothing.product_id) {
                clothing.getVariationId();
            }
        });
    },

    getVariationId: function() {

        var url = '/api/?id=' + clothing.product_id + '&variation=clothing&size=' + clothing.size + '&sex=' + clothing.sex;

        $.ajax({
            type: 'GET',
            url: url,

            success: function(result) {

                if(result){

                    var res = JSON.parse(result);

                    if(res.success){

                        if(res.qty > 0){

                            $('#qty').prop('disabled', false);
                            $('#qty').parent().removeClass('c-form-group-disabled');
                            $('#qty').attr("max", res.qty);

                            $('#variation_id').val(res.id);

                            $('#clothing .c-button').prop('disabled', false);
                            $('#clothing .c-button').removeClass('c-button-disabled');

                        } else {

                            $('#qty').prop('disabled', true);
                            $('#qty').parent().addClass('c-form-group-disabled');
                            $('#qty').attr("max", 0);
                            $('#qty').val(0);

                            $('#variation_id').val("");

                            $('#clothing .c-button').prop('disabled', true);
                            $('#clothing .c-button').addClass('c-button-disabled');
                        }
                    }
                }
            },

            error: function(jqXHR, textStatus, errorThrown){

            }
        })
    },
};

 

api.php

<?php namespace ProcessWire;

if(config()->ajax()) {

    $data = array(
        'success' => input()->get('id')
    );

    if(!input()->get('variation')){
        return json_encode($data);

    } else {

        switch (input()->get('variation')){

            case "clothing":

                if(!input()->get('id') || !input()->get('size') || !input()->get('sex')){
                    return json_encode($data);
                } else {

                    $product_id = input()->get('id');
                    $size = input()->get('size');
                    $sex = input()->get('sex');

                    foreach (pages()->get($product_id)->product_variations as $v) {
                        if (($v->size == $size) && ($v->sex == $sex)) {
                            $data = array(
                                'success' => true,
                                'id' => $v->id,
                                'qty' => $v->product_quantity
                            );
                            return json_encode($data);
                        }
                    }
                }
            break;

            case "default":
                return json_encode($data);

                break;
        }
    }

 

On 4/14/2018 at 2:25 PM, DonPachi said:

I don't know if this is the exact method used by the developer, but there is a tutorial for using the variations module with padloper here: https://variations.kongondo.com/demo/

Indeed we used the demo of @kongondo as a starting point.