shopify / buy-button-js

BuyButton.js is a highly customizable UI library for adding ecommerce functionality to any website.

BuyButton.js

BuyButton.js on NPM

BuyButton.js is a highly customizable UI library for adding ecommerce functionality to any website. It allows you to create interactive UI components such as product listings and shopping carts with minimal configuration, while allowing you to easily customize the appearance and behaviour of the components. It uses the JS Buy SDK to connect to your Shopify store, giving you access to your products and collections.

To get started, take a look at the documentation. For questions, suggestions and feeback, please create an issue.

Development

yarn
cp index.example.html index.html

• Add your API key and shop domain to index.html
• Set a product ID in index.html

yarn run start

Will watch for changes, compile src/ to tmp/ using babel & browserify, and run a server on port 8080.

Testing

yarn run test

will run full test suite locally

yarn run test-dev

Will watch for changes and run test suite.

Documentation

To run docs locally, install jekyll:

gem install jekyll

yarn run docs

Doc server will run at http://localhost:4000/buy-button-js/ Docs source files are located in /docs. Docs are automatically deployed to gh-pages from master.

buy-button-js's Issues

Column sizes

Left column size should be aligned with secondary column 266-340px
Right column size should be aligned with primary column 498-690px

IE9 styles

• button styles when disabled
• adapter footer

Empty cart text

Performance Audit

Money formatting

depends on https://github.com/Shopify/shopify/pull/84478

Product Modal

• Move X to the top right corner of the screen
• Add rounded corner to the modal (2 px) (addressed in #88)
• Add 1px stroke around the modal that 20% darker than dark overlay (addressed in #88)
• Remove variant label (displayed below the header) (addressed in #88)
• Move price and compared price on the same line (addressed in #88)
• Links in product description should use text colours (addressed in #88)
• Images in product description shouldn't try to take the whole width https://www.dropbox.com/s/4pyg9u5on5qfj4u/Screenshot%202016-08-25%2015.50.38.png?dl=0 (addressed in #88)
• Change heading line height to 1.4 (addressed in #88)
• Change body line height to 1.65 (addressed in #88)
• Let's try to find the right size for the image box size. (image: 60%, description: 40%); (addressed in #88)
• Make HTML styles in product descriptions work (e.g. H1) https://www.dropbox.com/s/bc4htsa52a1dr7q/Screenshot%202016-08-25%2015.49.15.png?dl=0
• On small screens let's downsize the heading by 30%

Quantity field change event causes image re-render

expanded CSS support

• keyframes
• nested selectors

product embed sprint

• stylesheets
• update selected variant in dropdown
• images
• nonexistent variant
• events
• no variants
• focus/hover states
• event handlers
• disabled selections

API Stuff

• media queries?

Analytics

The ui library should use the new version of trekkie and as per @drdee recommendations we should be doing this early.

This could probably use more discussion but I believe trekkie should still be in the UI lib because it serves the same flow as previous versions when the buy buttons are built using the builder. However I think it might be good to have a conversation about adding it to the js-buy-sdk but disabled by default and give the developer an option to use Shopify statistics.

cc @richgilbank

Tricorder Brief

HTML styling in descriptions

post-graph backlog

• pagination
• money formatting
• collection sorting

Single variant products show "Default Title"

The current Buy Button removes the title if there's only one variant:

feedback

• revisit getters
• naming things (node, wrapper, props, etc)

quantityIncrement/Decrement options do not apply

I am trying to apply styles to the increment buttons on line items in the cart. I pass the options to the line item options. I have also tried passing the options to the cart but both do not work.

Styling requirements

• Centre single vertical product embed
• Increase outer body margin for additional space

cart & collections sprint

Cart

• initialize cart on product initialization
• initialize cart by by itself
• customize cart settings and styles
• add variant to cart
• increase/decrease quantity of line item
• remove line item from cart
• check out
• show/hide cart
• product button defaults to cart, can be customized to go straight to checkout
• ensure cart appended at end of dom
• host styles
• empty state

Collections

• createComponent('collection')
• create multiple products not in collection

Style

• collection styles
• cart/line item styles
• animate cart things
• clean up css
• support media queries
• scroll list items
• conditional classes

misc other

• initialization interface (wrt shopifybuy etc)
• confirm entry node initialization works as expected
• clean up appendStyleTag
• render product faster (don't wait for cart)
• prevent multiple instances of ui
• show total line items in cart toggle
• separate stylesheets by modules
• variant with no image
• mobile testing
• quantity field on product
• make sure scroll bars don't happen
• watch browser resize
• close cart on background click
• normalize class name keys (ex productTitle, cartTitle)

Template options

String templates

 templates: {
        title: '<h4>{{data.title}}</h4>',
        button: '<button data-event="click.addVariantToCart">Special Add To Cart</button>'
      },

Pros

• familiar to most developers
• just strings, so don't need to be wrapped in functions

Cons

• just strings, so tricky to build DOM with:
  • binding events via manual DOM querying
  • or basically re-implement ember or backbone's views
  • re-rendering the DOM after updates are made is manual
  • need to compile templates at runtime, handlebars is kinda big

Hyperscript "templates"

templates: {
    'title': (data) => {
      return h('h2', data.name)
    },
    'button': (data, events) => {
      return h('button', {
        onclick: (e) => {
          events.addVariantToCart()
        }
      }, 'Special add to cart')
    }
  },

Pros

• efficient and predictable re-rendering after updates via virtual dom or morphdom (8kb)
• simple event binding via attributes (since hyperscript creates actual DOM, not strings)
• prevent DOM querying, more easily expose nodes through API
• no compilation

Cons

• much less intuitive than string templates
• emerging standard, vs handlebars which has been around for years

QA plan / tests

• chrome
• firefox
• IE 9
• IE 10
• IE 11
• Edge
• iOS > 9
• iOS >= 7
• Android 4.3+
• Android <= 4.3 >= 4.0

ShopifyBuy.UI

• create a component
• customize a component

Product embed

• open modal
• add to Cart
• open checkout
• open product page
• change quantity
• change variant
• click product instead of button
• customize cart
• customize toggle
• customize modal

Collection embed

• named collection
• set of random products
• customize product
• all product functionality

Cart

• remove item from cart
• increment quantity of item
• set quantity of item
• calculate price
• scroll long list
• close cart clicking bg or x
• display 'empty cart' message
• open checkout

Cart toggle

• open cart
• only show when cart has items
• reflect count of items in cart * quantity

Modal

• close modal clicking bg or x
• scroll overflow content
• all product functionality

Cart and toggle button styles not being applied.

I apply the following config

{  
   toggle:{  
      styles:{  
         toggle:{  
            "background-color":"#abc123",
             color: '#abc123'
         }
      }
   },
   cart:{  
      styles:{  
         button:{  
            "background-color":"#abc123",
             color: '#abc123'
         }
      }
   }
}

and none of these styles are applied.

Pagination request in IE9

v4.1 ideas

• alternative variant selection templates
• image slider/carousel
• complex "builder" selectors

weird/cool ecommerce:
http://codepen.io/virgilpana/full/ZYqJXN

IE11 toggle size

Next page button doesn't disappear in IE9

Button Click Broken

evt is undefined in this method:

https://github.com/Shopify/shopify-buy-ui/blob/master/src/components/product.js#L171

disabled attribute not respected in all browsers

Cart should be cleared on checkout

On the completion of a checkout, the cart should be cleared. Checkout postmessages data with the key current_checkout_page to its window.opener on each page load. If that page is /checkout/thank_you, the checkout has been completed.
Ref: https://github.com/Shopify/buy-button/blob/master/app/assets/javascripts/widgets/embed_cart/content_app.js.coffee#L43

Incorrect price formatting

The embed previews are not showing price with any of the comma separations.

why are modals broken

test iframeless components

resize product with no image

replace absolute URL for fallback image

staging bucket & deploy scripts

get this thing working IRL so we can start throwing it at webpages.
Hopefully I can use the same staging s3 bucket we used for js-buy-sdk.

@richgilbank

documentation

use smaller images for cart

potential performance/filesize optimizations

• share common styles in style object
• replace lodash.merge with smaller deep merge util (that supports copying getters)
• ship un-polyfilled version?

bundles by file size, post uglification

bundle	size
babel-runtime	60kb
shopifyBuy	43kb
polyfills (other than babel)	42kb
lodash	36kb
styles	23kb
hogan	14kb
morphdom	9kb

Actual application code: 36kb

svg styles

browser issues

• vertical scrollbars on horizontal product in IE9
• horizontal scrollbar on cart toggle in IE9
• not taking up full width in IE
• [Firefox]: quantity button misaligned
• [Firefox] quantity input not working

Iframe should remove `width: 950px` when switching back to product block from featured product template

backlog

• bugsnag?
• build buy-button-storefront
• fix adapter styles
• tricorder
• collection pagination
• collection sorting
• font support
• invalid id handling
• manage default styles
• move adapter
• integration testing
• only re-render image if url is different? (excluding params?)
• pass legacy cart config to product
• better error handling for wrong IDs
• rethink modal template: move gross stuff to adapter
• customize svg colour
• replace lodash.merge
• label in option value
• support multiple layouts for product
• collection rendering performance
• adapt styles to new design
• move modal dom re-arrangement to adapter
• quantity contents
• link to product page
• IE Testing
• prevent jank when changing images
• how to deal with passing styles from product to productModal
• overflow:hidden before height set
• product scroll bar
• handle unavailable products
• animate things
• clicking image action
• update ALL configs
• really really high z-indices
• modals without images
• host click closes cart
• handle unexpected inputs
• modal desktop styles
• styles cleanup
• responsive collections
• lifecycle hooks vs. subclassing (don't wrap methods)
• object assign vs deep merge
• child element abstraction?
• getters leaky state
• images: event handlers need to be attached before src
• specific variant
• sizing of items in collection grid
• cart height
• resize on updateConfig
• multiple script tags
• location of embeds vs script tags
• async script tags
• actual cart icon
• file sizes
• quantity update?
• second modal click
• incognito carts#undefined not found

Something is wrong with modalProductConfig

As you can see there is no layout key in the modalProductConfig. Also I cannot seem to set any of items like button color.

Adapter todo transforms

• apiKey for legacy buy buttons to use the js-buy-sdk
• product component
• collection component
• cart component
• data-display_size
• data-has_image
• data-redirect_to
• data-product_modal
• data-buy_button_text
• data-button_background_color
• data-button_text_color
• data-background_color
• data-show_product_price
• data-show_product_title
• data-buy_button_out_of_stock_text
• data-buy_button_product_unavailable_text
• data-product_title_color
• data-checkout_button_text
• data-text_color
• data-accent_color
• data-cart_title
• data-cart_total_text
• data-discount_notice_text
• data-sticky
• data-empty_cart_text
• data-next_page_button_text

Imageless products show nothing in the cart for an image

Current Buy Button placeholder image:

currency formatting in templates

Cart line item images are squished when not square

Send quantity to checkout from button

fix installation

should be resolved once we can run build in prepublish when the module is on NPM

Featured template styles

• 10px top margin for titles
• 30px bottom margin on button

Height calculation is off without image, title, price.

The embed is showing too small with scroll bars when the image, title and price are all hidden.

Here is the code I was using exactly incase the large options object is causing side effects

    ui.createComponent('product', {
      handle: 'product-handle',
      node: elem,
      options: {
   "product":{
      "text":{
         "button":"Buy It Now!"
      },
      "contents":{
         "img":false,
         "price":false,
         "title":false
      },
      "styles":{
         "button":{
            "background-color":"#8db461",
            "color":"#ffffff"
         },
         "variantTitle":{},
         "title":{
            "color":"#000000"
         },
         "price":{},
         "wrapper":{
            "width":"230px"
         }
      }
   },
   "productSet":{
      "styles":{
         "product":{},
         "wrapper":{}
      },
      "products":{}
   },
   "modalProduct":{
      "styles":{
         "button":{},
         "wrapper":{}
      }
   }
}
    });

Vertical scroll bars in IE and admin