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 16

Share this post


Link to post
Share on other sites

Nice!

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

  • Like 3

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • 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.
    • By dzervas
      Hello, I want to develop an eshop with processwire + padloper + any needed module (ex. ProCache n stuff).
      Right now, the eshop is in CS-Cart and I hate it. Will pw be able to support "proper" eshop features such as some simple sales graphs, 1k+ products, shipping methods & costs, user registration, search history, order status, payment status (for bank transfers for example) etc.
      For example I'm thinking that products and orders as sub-pages will be problematic (10k+ sub-pages)
      I also want to know if it's actually worth it or if it would be better to move to a bigger platform which has some of these features out of the box.
      Currently, the problem with CS-Cart is major lack of documentation which limits me in writing custom features (connection with shipping providers, export of data via CardDAV and more). Also CS-Cart is too complex to handle without documentation. I can manage and understand the code of PW but CS-Cart is just too big.

      Of course the server is beefy enough to handle things even heavier than CS-Cart. My focus is on development process and workflow (I've already set up CD from github to a docker container for a small website)
       
      EDIT: Sylius and Thelia2 really caught my eye. Comments on them will be appreciated
    • By kongondo
      Variations
      Released 29 May 2017
      Variations is a simple yet powerful commercial ProcessWire module that allows website editors to create attributes and their values and from those generate variations of any entity, most notably products.
      The module consists of  FieldtypeVariations and InputfieldVariations as well as a ProcessVariations for managing variations configurations and attributes.   Setting up the field is quite easy.   First, create a field of type Variations. Define some custom inputs that will need to be directly edited on the page containing the field, for instance a product price, SKU, etc.   Secondly, via the Inputfield, create a couple of attributes.   Thirdly, create a variations configuration and add the attributes and values you want in the configuration. Link that variations configuration to your page and the module will automatically generate all possible combinations (variations) of the attribute values in that configuration. These, together with the custom inputs you created when setting up the field will be displayed on the page (e.g. a product page), ready for editing. This makes this module quite unique; variations are defined at the page-level rather than at the field level. This presents lots of possibilities such as infinitely reusable attributes and variations configurations.    For those using Padloper, integration with the e-commerce platform is quite simple as demonstrated in this tutorial.  The module consists of 4 modules
      ProcessVariations FieldtypeVariations InputfieldVariations VariationsCustomTableManager (autoload module, working behind the scenes) Video Demo: https://youtu.be/T93nn96UL8o
      Documentation: https://variations.kongondo.com/
      Shop: https://processwireshop.pw/plugins/variations/
      Requires: ProcessWire 2.5 or newer
      Features
      Easily create variations of anything, including products for e-commerce websites, etc Create an attribute once, use it everywhere, multiple times, picking and choosing all or only the attribute values you want Bulk editing of variations configurations and attributes Reusable variations configurations Works with Padloper out-of-the-box with minimal coding User-friendly, intuitive and easy to set up