Has anyone created an Amazon-style wish list with Editor?

stevevance

I want to create an Amazon-style wish list, where people can have multiple lists and add items to one or more lists.

My thought is to create a "lists" table where users can add and edit their wish lists. The wish list table would appear on every item page. One of the columns in the wish list table would be an "item status" column. This "item status" column would have a checkbox to indicate if the rows of wish lists contained the item.

If the row (wish list) didn't contain the item, the user could click the checkbox and the item would be added to that list. This is the part I don't know how to design yet. I could create a link table but I don't know how to create a new row in that table (a row would represent the link between the item and a particular wish list), or to delete the row in that table when a user unchecks the checkbox.

Got any ideas?

stevevance

okay, I've got something working.

Here are two screenshots of it:

stevevance

This is the code I used.
It requires jQuery and Defiant.js.

PHP:

// DataTables PHP library and database connection
include( "lib/DataTables.php" );

// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate;

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'wishlists', 'id' )
    ->field(
        Field::inst( 'wishlists.name' ),
        Field::inst( 'wishlists.id' ),
        Field::inst( 'wishlists.private' ),
        
        Field::inst( 'wishlists.updated_at' )
            ->setValue( date("Y-m-d H:i:s") ),
        Field::inst( 'wishlists.created_at' )
            ->set( Field::SET_CREATE )
            ->setValue( date("Y-m-d H:i:s") ),
            
        Field::inst( 'wishlists.user_id' )
            ->setValue($_SESSION['id'])
    )
    ->join(
        Mjoin::inst( 'wishlists_items' )
            ->link( 'wishlists_items.wishlist_id', 'wishlists.id' )
            ->fields(
                Field::inst( 'id' ),
                Field::inst( 'object_type' ),
                Field::inst( 'object_id' )
            )
    )
    ->where("wishlists.user_id", $_SESSION['id'])
    ->debug(true)
    ->process($_POST)
    ->json();

JavaScript:

function loadListsEditor() {

    editor = new $.fn.dataTable.Editor( {
        ajax: '/php/editor.lists.php',
        table: '#table_lists',
        fields: [
            {
                label: "Name:",
                name: "wishlists.name",
            },
            {
                label: "Private?:",
                name: "wishlists.private",
                type: "radio",
                options: [
                    {
                        label: "Keep it private",
                        value: 1
                    },
                    {
                        label: "Make it public",
                        value: 0
                    }
                ]
            },
        ]
    } );

    var buttons = [
        {
            extend: 'create',
            editor: editor,
            className: "btn-sm"
        },
        {
            extend: 'edit',
            editor: editor,
            className: "btn-sm"
        },
        { 
            text: "Reload",
            className: "btn-sm",
            action: function ( e, dt, node, config ) {
                table.ajax.reload();
            }
        }
    ];

    table = $('#table_lists').DataTable( {
        dom: 'Bf<"#tag_filter">rtp',
        serverSide: true,
        processing: true,
        ajax: {
            url: '/php/editor.lists.php',
            type: "POST"
        },
        select: {
            style: 'os'
        },
        stateSave: false,
        pageLength: 3,
        columns: [
            {
                data: "wishlists.name",
                title: "Name",
            },
            {
                data: "wishlists.private",
                title: "Private?",
                render: function( data, type, row, meta) {
                    return data == 1 ? "Private" : "Public";
                }
            },
            {
                title: "On this list?",
                defaultContent: "",
                searchable: false,
                orderable: false,
                data: "wishlists_items[]", 
                render: function( data, type, row, meta) {
                    var checkbox = "";
                    // See if this wishlist item matches both the object_id and the object_id
                    if(window['object_id']) {
                        var search = JSON.search(data, '//*[object_id="' + object_id + '"][object_type="' + object_type + '"]');
                        if(search.length > 0) {
                            checked = "checked='checked'";
                        } else {
                            checked = "";
                        }
                        
                        checkbox = "<input type='checkbox' id='status_" + row.wishlists.id + "' data-object-id='" + object_id + "' data-object-type='" + object_type + "' data-list-id='" + row.wishlists.id + "' " + checked + " />";
                        return checkbox;
                    }
                },
                visible: page == "account" ? false : true
            },
            {
                title: "Contains these objects",
                data: "wishlists_items", 
                render: "[, ].object_id",
                searchable: false,
                visible: false
            },
            {
                title: "Items count",
                data: "wishlists_items", 
                render: function( data, type, row, meta) {
                    return data.length;
                },
                searchable: false,
                visible: page == "account" ? true : false
            },
        ],
        select: true,
        buttons: buttons,
        drawCallback: function( settings ) {
            var table = this.api();
            var draw = table.settings()[0].iDraw;
            
            // Register this event (for some reason this has to be registered after every time a checkbox is clicked)
            $("input[type=checkbox]").on("click", function() {
                checkbox = $(this);
                object_id = $(checkbox).data("objectId");
                object_type = $(checkbox).data("objectType");
                list_id = $(checkbox).data("listId");
                action = $(checkbox).attr("checked") === "checked" ? "remove" : "add";
                
                changeItemStatus(action, list_id, object_id, object_type);
            });
        },
        initComplete: function(settings) {
        }
    } );
}

function changeItemStatus(action, list_id, object_id, object_type) {
    var url = "/php/api.lists.php";
    $.ajax({
        type: "POST",
        url: url,
        data: {
            method: "datatables",
            action: action,
            list_id: list_id,
            object_id: object_id,
            object_type: object_type
        },
        success: function(response) {
            console.log(response);
            $("#action_message").html(response.message);
            
            // Redraw the table to ensure it's always rendering the latest data
            table.ajax.reload();
        }
    });
}

The function changeItemStatus() is a custom function that goes to a custom API that I wrote that simply adds or deletes a row to the "wishlists_items" table, based on clicking the checkbox.

allan

That looks good to me. How are you finding the interaction?

One possible enhancement, which is based on what you mentioned about Amazon, would be to have another column called "wish_list" (or whatever) which would allow the user to group their items into multiple lists via a where condition.

Allan

stevevance

You can see it in action!

https://www.chicagocityscape.com/permits.php?pid=100717579 - look for "My Lists"

You'll have to sign up for a free account to be able to use it.

allan

So just to confirm - at you happy with how it is working just now, or are there any outstanding issues?

Allan

stevevance

@allan I'm happy with the way it works now!