What this covers

Eleven pieces of work, all built and running on the development server.

1. Full product information on every cart line.
2. A See more details button on every product.
3. Extended store search, with our own catalog always tried first.
4. Everything a store search returns kept in our database, so we do not pay to ask twice.
5. The product's own page from the store selling it, in a popup with Add to cart.
6. A column on the items table for the vendor's product page address.
7. Sorting by relevance or by lowest price.
8. Colour on the chat window's top bar.
9. Cash on delivery alongside paying now.
10. Products scrolling sideways on a phone.

Every screenshot is the real development site.

1. Cart product information

Requirement: name, description, price and picture on every cart line, read from our own products table, with no search-provider call to display them.

*A cart line: picture, name, description, price and quantity. All four come from our own products table.*

Where a product has no picture, a food icon takes its place rather than a broken image. Nothing on this screen costs a search.

2. See more details

Requirement: a button on each product that opens the full details.

It is now on every product card, and on every cart line.

*The details for one product: picture, category, name, price, stock and the description from our products table.*

For a product from another store, this panel also names the seller and links to their own page.

Details on hover

Pointing at a product in the results list now shows its details straight away, without clicking.

*Pointing at a product reveals its description, price and stock.*

This appears only where there is a mouse. On a phone there is no hover, so the details stay on the See more details button instead.

3. Extended store search

Requirement: search our database first. If it returns products, show them and do not call the search provider. If it returns nothing, search the extended stores. Plus a button so a shopper can search wider whenever they want.

Both are in place. The button is always available, and the automatic search runs only when our own catalog comes back empty.

The extended stores return real products from real retailers, with their own photographs, sellers and prices.

*A search for "harissa paste": real products from Walmart, Whole Foods, World Market and Instacart. Our own store stays the first tab, so your products are never behind someone else's.*

Two rows and a separator: why the layout changed

Requirement: two rows of our products, a separator, then two rows of other-store products. This was built exactly as described, then changed, because in use it read badly:

• Sideways scrolling is slow to read. A grid can be scanned in one glance; a row has to be dragged through, a few products at a time.
• It is awkward with a mouse. Most mice have no sideways wheel, so browsing meant dragging a scrollbar.
• Two scrolling strips meant two separate drags, one for each section, with a line between them that split the screen without helping.
• It wasted the screen. A desktop has plenty of height, and two short rows left most of it empty while hiding most of the results.

The real problem being solved was that other-store results were arriving at the bottom of a long page, so pressing the button looked like nothing had happened.

What we did instead: one control at the top with two tabs, Our store and Other stores, each showing a normal grid.

*Our store, with the true count. Pressing "Other stores" switches straight to them, so the results appear at once instead of below a page of products.*

This keeps what the two-row idea was for, both sets of results one click apart, and drops what made it awkward.

4. The product page, and adding it to our cart

Requirement: open the product's own page at the store selling it, in a popup, with an Add to Cart button at the bottom that adds it to our cart. Show the specific product, not a list of search results.

*One product: its photographs, brand, rating, every store selling it with that store's price, and Add to cart at the bottom.*

The popup shows every store that sells that exact product, cheapest first, each with a link to its own product page. Choosing a store and pressing Add to cart puts it in our cart at that store's price, and records that store's page against the product.

*Chosen at Target for $6.39; the cart shows $6.39 and the store it came from.*

Why the store's own page is not inside the popup

The page is drawn by us rather than loaded from the retailer. Every retailer involved refuses to let their pages be displayed inside another website:

Fetching the page on the server and passing it through does not work either: Walmart and Whole Foods answer a server with a "Robot or human?" check.

Drawing the page ourselves turns out to show more than theirs would: all three stores' prices side by side, which no single retailer's page does.

5. The vendor product page column

Requirement: a column on the items table holding the address of the product's page at the store selling it.

vendor_prod_prod_page_url has been added. For products sourced from other stores it is filled with the page of whichever store the shopper chose, for example target.com/p/mina-harissa-mild-red-pepper-sauce-10oz/-/A-17295423. For products already in the catalog it is filled by the existing data process.

6. Keeping what the search provider returns

Requirement: store the search-provider information in our database and reuse it, so we do not keep paying to ask the same question.

Every result is now saved: product name, price, store name, store link, picture, rating, reviews, the product identifier and the untouched response. A later search for the same words is answered from our own database and costs nothing.

Near-identical wording is treated as one search, so "Harissa Paste" and "harissa paste" do not cost two.

Stored results are kept for seven days, then refreshed, so a price is never quoted from last month.

7. Sorting

Requirement: sort by relevance, and sort by lowest price, for our products and for other-store products.

Both are in place and apply to whichever list is on screen. Lowest price sorts the whole result set, not just the products currently visible, so the cheapest match is genuinely the cheapest.

8. Colour on the top bar

The chat window's top bar carries the brand colour again.

*The coloured bar, back as it was.*

9. Cash on delivery, or pay now

Three ways to pay: cash to the driver, card (including Apple Pay and Google Pay), or PayPal.

*A cash order is confirmed straight away, and the shop is told how much to collect. PayPal is now reachable for the first time.*

10. On a phone: products scroll sideways

*Products scroll sideways above the conversation, like Amazon, with the details button on every card and the typing box always in reach.*

11. Product images

The image service only serves pictures. It never writes a filename back to the products table, so the separate process that populates product data stays the only thing that touches it.

What we found and fixed along the way

Testing this milestone turned up faults worth naming, because each was live.

Tests

Still outstanding

The search allowance is the free plan: 250 lookups a month.

The charge is per question asked, not per product returned. One search costs one lookup whether it comes back with 6 products or 40. Opening a product costs one more, the first time anybody opens that product; every later view of it is free, because the answer is kept in our database. A repeated search is free for the same reason.

All of this milestone's building and testing has used 4 of the 250, with 246 left. If the shop gets busy, the next plan up is 1,000 lookups for $25 a month.

A real card payment has not been driven end to end. Everything up to the payment page is verified, as is the screen a shopper returns to. Entering a real test card needs a person at a browser.

In short

Everything above is live at marketz.smartzees.com.