Jump to content
Typografics

Fundraiser webshop

Recommended Posts

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.

  • Like 17

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites
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.

  • Like 1

Share this post


Link to post
Share on other sites
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.

  • Like 2

Share this post


Link to post
Share on other sites

I'm also interested in your padloper/mollie.

I would like to know if you plan to release the code to the public...

 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Jonathan Sachse Mikkelsen
      I'm developing a site where the client wants a one time donation form with Mollie payment integration.
      I've been using PW for about 3 years now (and of course loving it 😉), but have absolutely no experience with any form of webshop functionality and after a full day of googling around I find myself utterly stuck in how to make this happen...
      Is there anyone out there that could point me in a direction of the simplest solution possible? I really don't want to, nor am i capable right now, to be developing a fully fledged webshop for this small feature on this particularly site 😬, so any help is greatly appreciated! 
       
    • By Jeannette
      Hello, I have a wonderful webshop with lovely skills here : cheval-ami.fr
      I need some support sometimes to make sure that everything is nice and up to date.
      We want to improve the integration of Paypal, Stripe, DHL ... create personal accounts for our clients, keep our visual configurateur smooth, include a search enigne and be the nicest shop in the equine industry. We are a start up and very much interested in a long time, kind and friendly relationship without any stress, but good support in case of urgency. 
      We speak english, german and french. We a have our own designer aware of ProcessWire. We could meet in hamburg or Paris.
      Contact: mail@cheval-ami.fr or +33 626 22 1000 or +49 170 20 28 215
      Thank you !
    • By Typografics
      Hi, 
      We build our first PW module, so don't hesitate to share your feedback!
      https://github.com/Typografics/PaymentMollie-PW3
      We developed this payment module for our fundraiser webshop: https://shop.typografics.be/.
      Here you can read the whole story.
      Enjoy the weekend!
    • By kuba2
      Hello
      I need to make a small, easy Webshop for a friend. He is selling 4 music albums.
      What would be the best way to go?
      Is there a sensible solution for a webshop within processwire? 
      Thanks
      Jakob
    • By anttila
      I developed my own web store platform on ProcessWire. Work like a charm. However, I would like to know what is the best way to cache web store? There is a shopping cart, many languages and previously watched products which need to run without cache but everything else could be cached. Is there a way to use PW's own cache or ProCache for everything else except for certain HTML ID? I have used MarkupCache for categories in some cases.
      I'm addicted to speed. Everything has to be loaded as fast as possible or even faster. My next step is developing AMP HTML as part of the platform, but that is not helping normal version.
×
×
  • Create New...