dnordby

Set Up Background Workers with Resque/Redis on Heroku

LOCAL SETUP

Ensure Redis is installed on local machine

To install, run (assumes HomeBrew is already set up):
$ brew install redis

Start Redis server
$ redis-server

dnordby

Use Shopify pagination to trigger loadmore event

Markup

{% paginate collection.products by 16 %}
<div class="products__collection">
  <ul class="product collection__grid"">
    {% for product in collection.products %}
      {% assign prod_id = forloop.index | plus:paginate.current_offset %}
      {% include 'product-grid-item' with prod_id %}

dnordby

FRONTEND DEV PROCESS

Deliverable 1*

Atom page (style guide)

• Breadcrumbs
• Buttons
• Button Groups (i.e. Social Media)
• Button Rollover
• Chips
• Colors

dnordby

WordPress Setup

Local Development:

Dependencies

• MAMP installed on local machine
• New WordPress download

Get Started

1. Open MAMP in Applications and ensure local servers are running

dnordby

Shopify APIs

Analytics API^{* ‡ †}

• Exposes Analytics API endpoints via ShopifyQL requests.

Billing API^* (billing for installed 3rd party apps in Shopify store)

• ApplicationCharge - used to bill your users one time only.
• RecurringApplicationCharge - used to bill your users on a recurring 30-day billing cycle.
• UsageCharge - used to bill your users when the fees are recurring, but vary from month to month.

dnordby

{% comment %}
  Button/Link Snippet

  Parameters:
  - text: The text to display in the button
  - is_link: Boolean - if true, renders as <a> tag, if false renders as <button>
  - url: URL for the link (required if is_link is true)
  - button_style: 'primary', 'secondary', 'link', or 'custom' (optional, defaults to 'primary')
  - custom_bg_color: Custom background color (optional, for custom style)
  - custom_text_color: Custom text color (optional, for custom style)

dnordby

const scrollListenersAdded = /* @__PURE__ */ new WeakSet();
function imageFadeUp() {
  const imageWrappers = document.querySelectorAll(".js-fade-up");
  imageWrappers.forEach((wrapper) => {
    const rect = wrapper.getBoundingClientRect();
    if (rect.top <= window.innerHeight - 45) {
      const image = wrapper.querySelector("img");
      if (image) {
        if (!image.complete) {
          image.addEventListener(