We want to have a customer facing screen that shows the products currently added to the order and the pricing, similar to how places such as home depot do it.

Would be a page you could bring up on a different monitor or computer and select a register, it would then show the current active order for that register (we might have to track active order better)

Page needs to updated in close to real-time, this might require websockets or something beyond just simple ajax

Comments

smccabe created an issue. See original summary.

jjpoole’s picture

StatusFileSize
new251.16 KB

Here's a mockup. Keep it simple, pull site logo and 1 matching accent colour:

cust

smccabe’s picture

Status: Active » Needs work
StatusFileSize
new17.69 KB

WIP Patch, has a working websocket server to connect the 2 interfaces, but doesn't have any output or theming yet.

smccabe’s picture

Updated patch

  • register id no longer hardcoded
  • order items now pass as well
  • crude dumping of json strings to show updating
smccabe’s picture

StatusFileSize
new19.52 KB
new3.06 KB

docker-compose to test this out with, will run the whole stack including the websocket server. Just copy the files into your root (one below /web) and run docker-compose up. You'll need to make your db info match in your settings, it's drupal/drupal/drupal all the way down.

Also, updated patch with some code cleanup.

hubbs’s picture

StatusFileSize
new61.15 KB

Updated patch. Adds the following.

  • Adds structure to the twig template - commented and with TODOs.
  • Adds sass dir with the outline of a SCSS file. Commented but no actual styling yet.
  • Adds css dir and compiled CSS file (compiled with root gulpfile that is also updated to watch the new scss)
smccabe’s picture

Hey Hubbs, it doesn't look like your patch came out quite right, you've only got the edited existing files, none of the new files.

smccabe’s picture

StatusFileSize
new23.62 KB

Updated patch with configuration settings for the websocket settings, websocket server will now also bootstrap drupal to pull Drupal settings when it starts up.

Hubbs, I'll re-roll with your changes once you get your patch corrected.

hubbs’s picture

This patch contains what I had in patch #6 and rerolls it with updates in patch #8. This patch also includes a couple SVGs to use with the customer and discounts.

Still no styling here, but the outline for styling is ready.

I've included markup in the template for the individual line items (products and totals). This will need to be transferred into the JS file.

smccabe’s picture

StatusFileSize
new61.88 KB

Updated with most of the required info being passed now and filled into the appropriate spots

Still Outstanding:

  • Add Payment should be switched to ajax to update properly
  • Some register, store and cashier info missing
  • More testing once layout is more finished
smccabe’s picture

StatusFileSize
new62.4 KB

A little code cleanup and update the javascript endpoint calls to use settings as well.

hubbs’s picture

StatusFileSize
new75.57 KB

Starts styling.

A notes for commerce_pos_customer_display.js. It may be clear from how I laid out the template, but just to be sure, I'm envisioning that each element spit out by the "display items" and "display total" js sections will include 2 classes, a base class and a unique class. The unique class would be dynamically generated and could be used for styling specific products or totals. For example, the discount total has an icon. The unique class would allow us to target that specific total to do this.

You can see what I mean on line 52 of that file.

  • Base class would be commerce-pos-customer-display__total
  • Unique class would be commerce-pos-customer-display__total--subtotal or --discount or --gst, etc.
smccabe’s picture

Status: Needs work » Needs review
StatusFileSize
new79.09 KB
  • Cashier now updates
  • Register name now shows
  • Items now add to the top, not the bottom, this applies to both cashier and customer views
  • Add payments now works via ajax, which is faster and plays nicer with sockets
  • Now updates properly on quantity and price changes
  • Properly blanks out when all items are removed.
  • Some additional class and layout changes under the hood.

Still needs theming finished, but all functionality should actually be done.

Status: Needs review » Needs work

The last submitted patch, 13: commerce_pos-customer_display-2950980-13.patch, failed testing. View results
- codesniffer_fixes.patch Interdiff of automated coding standards fixes only.

hubbs’s picture

StatusFileSize
new83.46 KB

Updated patch includes:

  • Styling pretty much complete
  • Product line items now formatted better in commerce_pos_customer_display.js
  • Placeholder SVG icon included for when no image is available.

Remaining items:

  • I can't get the cashier to display... not sure why. Will connect with smccabe.
  • Need to calculate the total price for each product line item when quantity is greater than 1. I have just set $100 as a placeholder.

Extras that would be nice:

  • Setting field for uploading logo
  • Setting field for configuring primary color (for sidebar background)
  • Get the discounts working

All in all, I think we're pretty much ready to use right now. The discounts bit is probably the biggest thing holding us up from a wider release.

smccabe’s picture

Status: Needs work » Needs review
StatusFileSize
new118.42 KB
  • Cashier working correctly for me, and as far as I know no issues.
  • Total Price supplied now

Also updated the settings to have external and internal port numbers, as they could quite possibly be different.

Status: Needs review » Needs work

The last submitted patch, 16: commerce_pos-customer_display-2950980-16.patch, failed testing. View results
- codesniffer_fixes.patch Interdiff of automated coding standards fixes only.

smccabe’s picture

Status: Needs work » Needs review
StatusFileSize
new118.42 KB

Some test fixes

Status: Needs review » Needs work

The last submitted patch, 18: commerce_pos-customer_display-2950980-18.patch, failed testing. View results
- codesniffer_fixes.patch Interdiff of automated coding standards fixes only.

smccabe’s picture

Status: Needs work » Needs review
StatusFileSize
new121.34 KB

Supervisor config for server
Fixed some test failures

Status: Needs review » Needs work

The last submitted patch, 20: commerce_pos-customer_display-2950980-20.patch, failed testing. View results
- codesniffer_fixes.patch Interdiff of automated coding standards fixes only.

smccabe’s picture

StatusFileSize
new121.42 KB
smccabe’s picture

StatusFileSize
new91.85 KB

Reroll, will probably need another one soon as lots of stuff merging in.

smccabe’s picture

StatusFileSize
new78.43 KB

reroll

smccabe’s picture

StatusFileSize
new78.43 KB

Small issue with re-roll

smccabe’s picture

Title: Customer Facing Screen » Customer Display
Status: Needs work » Needs review
StatusFileSize
new82.8 KB

All tests should be passing

Status: Needs review » Needs work

The last submitted patch, 26: commerce_pos-customer_display-2950980-26.patch, failed testing. View results

smccabe’s picture

Status: Needs work » Needs review
StatusFileSize
new85.65 KB

Reroll against newest head

Status: Needs review » Needs work

The last submitted patch, 28: commerce_pos-customer_display-2950980-28.patch, failed testing. View results

smccabe’s picture

Status: Needs work » Needs review
StatusFileSize
new85.65 KB

  • smccabe committed c00f545 on 8.x-2.x
    Issue #2950980 by smccabe, Hubbs, jjpoole: Customer Display
    

Status: Needs review » Needs work

The last submitted patch, 30: commerce_pos-customer_display-2950980-30.patch, failed testing. View results

smccabe’s picture

Status: Needs work » Fixed

Additional features can be added, but this is a massive patch and working well to be added as an experimental module.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.