elementary / store

The elementary OS merch store website

Store

The elementary OS merch store website

---

This repository is an elixir website for https://store.elementary.io. It connects to Printful for products, and Stripe for payment processing.

Developing on elementary OS (or Ubuntu)

This guide assumes elementary OS 6 or Ubuntu 20.04; the steps should be similar for any Ubuntu-based OS, but may differ bassed on the exact distribution or version.

1. Install Docker

   You can install Docker however you'd like, but we recommend following this DigitalOcean guide, including adding your user to the docker group.

2. Install docker-compose

   Similarly, you can install docker-compose however you see fit, but the fastest way is probably via Python's pip:

   1. sudo apt install python3-pip
   2. pip3 install docker-compose

3. Configure secrets for development

   Add your Printful API key to config/dev.secret.exs like so:

   import Config
   
   config :store, Printful.Api,
     api_key: "aaaaaaaa-bbbb-cccc:dddd-eeeeeeeeeeee"

   To test Stripe integration as well, add your Stripe test keys to config/dev.secret.exs:

   config :stripity_stripe,
     api_key: "sk_test_aBcDeFgHiJkLmNoPqRsTuVwX",
     public_key: "pk_test_zYxWvUtSrQpOnMlKjIhGfEdC"

That's it, you're all set to start contributing.

Running

This repository contains a docker-compose.yml file for easier development. Make sure you have docker-compose installed, then run these commands:

1. docker-compose build to build the containers. If you make changes to any dependencies, or are getting issues where code does not seem to update, re-run this step.

2. docker-compose up to start the server and dependencies. This is your main command and after you run steps 1 and 2, you should only need to run this command to get back up and running.

If you change any configuration/secrets, you need to restart docker-compose up for it to take effect.

Translations

All translations are extracted to the template files when new commits are pushed to master. If you would like to help translate this site, please see the elementary weblate instance.

Deploying

This repository is setup with continuous integration and deployment. If you want to deploy your changes, all you need to do is open a PR to the master branch. Once your PR is accepted and merged in, it will automatically be deployed.

License

This repository is made available under the terms of the GNU Affero General Public License version 3 or any later version. See LICENSE for details.

store's Issues

Better default sorting

It's unclear what the ordering is for products right now; maybe the order they were added? We should sort them alphabetically, and/or by price, or something.

Add oatmeal tees

We should add oatmeal variants for the men's and women's logotype, plus the Terminal.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Show selected states on product listings

e.g. the selected color and size should be bolded or highlighted somehow so you can be confident in what's selected.

Fonts feel too big on larger displays

I haven't looked into where this is being set, but for a store, the fonts feel like they get real big on bigger viewports.

Use Stripe Checkout in store

We should replace all of the custom code we have for collecting address etc with Stripe Checkout.

https://stripe.com/payments/checkout

This also fixes elementary/website#1265 and elementary/website#2160

Drop qty from product listing

This could help clean up the product listings and allow a better call-to-action for adding to the cart.

I don't know how realistic it is that people will want to buy multiple identical products, and even so, they can add a product to their cart again or modify the quantity from the cart page.

Add user accounts for store

Expected behavior

I should be able to login to my account and retrieve a copy of the invoice.
Business procedure 101 guys.

Actual behavior

Nothing. No contact info, poor commercial transparence.

Steps to reproduce the behavior

1. go to elementary.io
2. buy
3. nothing

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Mug size variants not showing up

There should be both 11oz and 15oz sizes

Fit more products across smaller display widths

Right now we only show one product photo across phones up to pretty wide viewports, then it snaps to 3 across. I think we could show more across to require less scrolling around here.

Tweak store flow for "keep shopping"

Right now every time you add something to your cart, you're taken straight to the cart. We should figure out a way to support a "keep shopping" flow where it's added to the cart but the user can still easily add more things.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Add Stickers to the store

Problem

I personally don't have a use for any of the products that the elementary store offers.
Still, I would like to support the project by buying something I can actually use in my daily life.

Proposal

Offer Stickers. I can slap those on my laptop and support the project with my purchase.
I would recommend stickers for the back of a laptop as well as the SUPER-Key on the keyboard. My personal preference would be very high quality stickers for a higher price than what is offered on redbubble, etc.

Prior Art

https://system76.com/swag/stickers
https://www.redbubble.com/shop/elementary+os+stickers
https://www.4keyboard.com/gifts-keyboard-stickers/658-elementary-os-sticker.html

Name and email fields repeatedly lose focus

What Happened

I typed my name into the "name" field and email into the "email" field. On each keystroke, the field would become un-focused. Pressing tab would bring me back into the field, but with all the text selected. Pressing tab again would not bring me to the next form field.

Other form fields were unaffected / normal. I was still able to complete the form by laboriously entering one character at a time.

Expected Behavior

The field should remain focused as long as I am typing in it, and pressing "tab" should take me to the next field.

Steps to Reproduce

1. Add item to cart
2. Go to checkout
3. Type into name and email fields

Platform Information

Firefox 87 on Elementary OS 5.1

Shipping address input is unstyled

Probably obvious, but adding here to track the task

Handle Printful API errors better

Right now any printful error gets sent back as a 500. We should handle this better. Off the top of my head, there are two cases we should be handling.

1. Printful timeout occures
2. Printful can't find a product or variant

Unable to purchase laptop sleeve

What Happened

I got your email today about the soft launch, and I tried to purchase a T-shirt, a mug, and a laptop sleeve from the store. On the checkout page, I was able to get shipping rates, but the checkout button ended up putting me back on the same page. I've tried in Firefox, Firefox Focus, Brave, and the default Lineage OS browser.

Expected Behavior

Selecting checkout takes me to a payment page

Steps to Reproduce

1. Add a Large elementary T shirt to the cart
2. Add an elementary mug to the cart
3. Add a laptop sleeve to the cart
4. On the checkout page, fill in Name, Address Line 1, City, Country, State, Postal Code, and Email
5. Select Get Shipping Rates
6. Select Flat Rate
7. Select Checkout

I'd rather not share my address or email publicly, but I do have a hunch this is a validation error that's not getting surfaced properly if this hasn't been encountered before.

Logs

Platform Information

I'm running Lineage OS 17.1 based on Android 10. I've tried Firefox, Firefox Focus, Brave, and the default Lineage OS browser

Internal Server Error when we do “too much” on the Printful side

What Happened

If we create a few new products or change a few mockup images, it seems to crash the store for some amount of time.

Expected Behavior

We can create away on the Printful backend without crashing things.

Steps to Reproduce

1. Make sure the store is up
2. Change a bunch of stuff on Printful (e.g. mockups or add products)
3. See the site crash

Text in the shipping address entry is invisible in dark style

What Happened

2021-02-25.11.16.43.mov

Text in the shipping address entry is invisible if your system is using dark style.

Expected Behavior

Text in the shipping address entry should be visible—set the font color in the entry black or set the entry fill color black.

Steps to Reproduce

1. Add some product to the cart
2. Check your cart
3. See the error

Platform Information

• macOS 11.2.1
• Google Chrome 88.0.4324.192
• MacBook Air M1, 2020

A more cleaner and simple laptop sleeve

Hey, I really like the new laptop sleeves but I want something more cleaner and less attention grabbing.

A subtle elementary logo at the bottom right on a black sleeve would be nice.

% off coupon codes shouldn't apply to shipping costs and tax

Currently orders are totaling the merchandise, shipping, and tax and then taking the coupon code % off. The coupon code should only apply to merchandise and tax should be calculated after coupon code is applied to merchandise.

Add a "tip" field to the store on checkout

One way to possibly increase check averages is to offer a tip field. Not sure how many people will use it, but given the option some might choose to increase their check by a couple bucks

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Site seems to repeatedly refresh

What Happened

While browsing the goods for sale, the page seems to slowly and repeatedly refresh. I can't tell if it is after so much time or loading slow but the blue loading bar was filling fairly slowly so I could watch the refresh coming. After closing and loading the site again it stopped and I was able to go through with purchasing. Running in a private window seems to have the issue.

Expected Behavior

The site should finish loading and not interrupt the shopping!

Steps to Reproduce

In order for me to reproduce after the first time, I needed to open the site from a private window.

1. Go to any page on the store
2. After waiting some time, the page should reload. In most cases the blue loading bar was active and filling before the refresh

Platform Information

I was using the latest stable Firefox on Windows 10 at the time I saw the issue. I can confirm later if I see the same from eOS.

Automate post-purchase engagement emails

We should have an automated email sent out to customers once their orders have been delivered. The email can ask the customer to follow us on our Twitter / Instagram and share a photo of their new elementary merchandise.

Quantity and line-item total cut off in checkout at some widths

Not sure what's going on here, but it looks like the "Remove" link is too wide, or there's some sort of negative margins somewhere that are pulling the quantity and line-item total off the right side of the list.

Product title appears above the sticky bar

What Happened

On the product page, the product title appears above the sticky bar.

I've noticed that both .product>h1 and .nav-sticky have a z-index of 2. Changing the sticky's z-index to a higher number (like 3) fixes the issue, and didn't seem t impact any other behavior.

Expected Behavior

Sticky bar should appear above all content

Steps to Reproduce

1. Open the Store
2. Select a product
3. Scroll down

Platform Information

I'm on elementary OS 5.1.7 Hera, using Chromium 89.0.4389.114, but noticed the same happens on Firefox.

Show Package Weight in Shipment Email

Got an email from a customer that they have to declare the package weight since they're outside the US. It would be helpful for our international customers if this information was available on the receipt.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Payment Option: Bank Transfer

Expected behavior

I expect that when downloading elementary OS I will have a chance to support the project financially, even if I don't want to support/trust the big proprietary vendors like PayPal or Stripe.

Anonymous payment methods would also be desirable for people for whom this is important for certain reasons.

Actual behavior

I have to provide my bank type information for a transfer with Stripe and thus agree to trust such services.

See https://github.com/elementary/appcenter/issues/956 for reference

Indicate when a shipment has been split in two

It looks like printful is making a habit of splitting some orders in two. Specifically between shirts and mugs. We should have some kind of indicator on the shipping confirmation that the other part of the order is still being process and will ship soon.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

VAT for EU sales

Store isn't charging 21% VAT (Value Added Tax) for EU sales. Printful has an FAQ on VAT if that helps.

Add info about sustainability and responsibility

Printful has a bunch of great info here: https://www.printful.com/sustainability-responsibility

We could echo some of that along as it relates to the products we sell.

Poster variants not showing up

There should be size variations and frame color variations

Implement custom receipts for Store orders listing individual items.

If possible, we should provide order line items on the Stripe receipt for merch (i.e. 1× L Logotype Tee Men's: $25) instead of just a single "elementary store" line item.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Add starting price to main page

We should set expectations by adding the starting price for products on the main page. If there are multiple prices, we should probably just format it with the cheapest price and append +, e.g. $29+ or something.

Drop `.00` on whole-dollar prices

I think we're going to lean towards whole-dollar product prices, so ideally we won't be showing .00 all over the place.

Weblate translation

Store translation has been blocked in weblate for some time...

Devices section needs room to breathe

Just some CSS love

Disable Out of Stock Variants

What Happened

Noticed in Printful that Navy XL hoodies are out of stock. Checked beta site and was still able to "order" from our site.

Expected Behavior

It should say it is out of stock and not be able to add to cart.

Change stripe charge name

Change the stripe charge name to "elementary store" ~ Liz

Add StarBook Mk V to store as a partner device

Needs to be a draft for now until we explicitly approve it

Overlay circles with available colors on apparel

If an apparel product (or maybe any product with color options?) has multiple colors available, it'd be nice to overlay little circles w/the available colors on the product listing on the main page. And I guess set the title text for those circles to the color name?

HTTP doesn't redirect to HTTPS

This might be more on the domain configuration/DNS side of things, but typing store.elementary.io into a browser takes me to the HTTP version of the site and shows a scary red insecure icon. We should just always redirect to the HTTPS version.

Ask for a phone number during checkout

Apparently some orders in printful will be blocked from shipping without a phone number (not sure the reason for that yet), but we should prompt for a phone number to ensure nothing gets held up.

Twitter card not valid

From https://cards-dev.twitter.com/validator:

INFO:  Page fetched successfully
INFO:  17 metatags were found
INFO:  twitter:card = summary_large_image tag found
ERROR: Possibly invalid value (if specified) (twitter:title)
ERROR: Possibly invalid value (if specified) (og:title)
ERROR: Possibly invalid value (if specified) (twitter:text:title)

Add category anchors to subnav

@btkostner had mentioned this. It allows us to get the cart link at the far-right, too.

Product photos shouldn't be dimmed until hovered

Looks like it's just some default link styling, but it makes all the products look washed out. We could invert the logic and have them dim when hovered if we want a hover effect.

Add Plausible

We have it set up in the dashboard but need to add the tag to the site, I guess. stats.elementary.io.

Set social media image to product image

Ideally sharing a link on social media will provide the thumbnail

Use an autocompleting entry for Country

Using a dropdown for country is kind of painful. If would be nicer if it were an entry with autocompletion. We could use this: https://github.com/JamieAppleseed/selectToAutocomplete

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Change default title/tagline

Right now it's still "elementary OS" and "A fast and open…".

Instead, it should be "elementary Store", and maybe "Support Development. Get Gear. Win/Win."

Better document how to build and contribute

Especially on elementary OS. Right now it assumes everyone knows how to properly install and configure docker-compose, but there's no more information. It's really hard to contribute if we don't even know how to get it running locally.

Show order summary on success page

This is not very helpful lmao

Maybe something like:

Order #1234567890 Placed

Your order has been received and our fulfillment partner is working hard to get it to you as soon as possible. An email confirmation and receipt has been sent to [email protected].

	“Learn Vala, Do Future” Zip Hoodie - L	$65.00
	“Learn Vala, Do Future” Unisex Tee - L	$29.00
	Shipping	$7.75
	Total	$101.75

Shipping to:

123 Sesame St
New York City, New York 01234
United States