shopify / shopify.github.com

A collection of the open source projects by Shopify

Shopify Open Source

Shopify's Open Source page is built with Jekyll and Sass and hosted on GitHub Pages.

All of the data comes from Jekyll. Any change in index.html (including whitespace commits - e.g.) will trigger a rebuild and update all of the numbers.

To include a repo in the list, add it to optInRepos in javascripts/custom-repos.js. The repo must be owned by Shopify. To include non-Shopify repos, use customRepos. Set a defined project language or custom avatar in the same file.

If you want to run it locally

1. Clone this branch or download the zip and navigate to the folder in terminal
2. Install Jekyll: gem install jekyll
3. Install Sass: gem install sass
   • Use sass -v to make sure it worked
4. Install Compass: gem install compass
5. Make sure everything is setup with bundle install
6. Run bundle exec jekyll serve
7. In another terminal window, run compass watch
8. Access the page at http://localhost:4000

Notes about local build

• bundle exec jekyll serve will compile the Jekyll and Sass files into static assets in the _site folder each time a file is saved. That folder is excluded from the repo.
• compass watch will update ie.css and main.css.
• Use rake build to manually parse SCSS files.
• Your local build will be nearly empty because:
  • The page uses Jekyll's site.github.public_repositories object to get the repo data. This data is only available when live.
  • Custom repo data is generated by Github's JS API, so it will show up locally.

Content Management

• The content for each project comes from the GitHub Pages for that repo. This can be from a gh-pages branch, or from the /docs directory, based on the GitHub Pages settings. Using the /docs directory is preferred as it's less confusing for contributors.

Dependencies (all included)

• jQuery 1.9
• Modernizr
• Bourbon
• Handlebars.js
• Isotope

shopify.github.com's Issues

No code on Twilio-door repo

I noticed this repo has no code https://github.com/Shopify/twilio-door

@joshpc you are the last commit on the twilio-door project, do we have files for this or should it be removed?

Open-source the Minesweeper

Can you please add an entry to http://shopify.github.io/ for Minesweeper?

https://github.com/Shopify/minesweeper

This has been approved by Andrew Dunbar.

DMCA page is not really helpful

We should probably remove this page since it is not really an open source contribution but a few old DMCA notices that we wanted to share online for a specific reason: https://github.com/Shopify/dmca

add a new project to Shopify open source

The partner team wants to add the following project repo:

https://github.com/MLH/mlh-localhost-shopify-graphql

to the Shopify open source page listing:

https://shopify.github.io/

Legal has approved cloning/copying this repo.

Firefox is sad

Per an email @tahnok sent me:

Doesn’t seem to work with firefox :( I’m getting a CORS error

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://shopify-opensourceify.herokuapp.com/?url=https%3A%2F%2Fapi.github.com%2Forgs%2FShopify%2Fmembers%3Fcallback%3Dfoo%26per_page%3D100%26page%3D1. This can be fixed by moving the resource to the same domain or enabling CORS.

Ping @cshold

Add handy to open source directory

The Spatial Commerce team created a tool called Handy that can be used to mocap hands using a Meta Quest headset.

This is Handy's repo: https://github.com/Shopify/handy

We have open sourced it because it's useful for 3D artists, and because it helps us promote Shopify engineering.

We would like it to be added to Shopify's open source directory.

We will be promoting the repo next week on Twitter.

Thank you!

A

{%- if section.settings.slideshow_height == 'adapt' -%}
{% comment %}
'min_aspect_ratio' is the minimum aspect ratio of images shown without
whitespace when 'slideshow_height' is set to 'adapt'.
The aspect ratio values for the first image in the slideshow will be used
unless it is blank, in that case a ratio of 2:1 will be used.
{% endcomment %}

{%- assign first_block = section.blocks[0] -%}
{%- if first_block.settings.image.aspect_ratio == blank -%}
{%- assign min_aspect_ratio = 2.0 -%}
{%- else -%}
{%- assign min_aspect_ratio = first_block.settings.image.aspect_ratio -%}
{%- endif -%}
{% assign wrapper_height = 100 | divided_by: min_aspect_ratio %}
{%- endif -%}

{%- assign text_alignments = section.settings.text_alignment | split: ' ' -%}
{%- assign text_horizontal_alignment = text_alignments.first -%}
{%- assign text_vertical_alignment = text_alignments.last | strip -%}

{%- if section.blocks.size > 0 -%}

{%- for block in section.blocks -%} {%- assign block_image = block.settings.image -%}

{% if block_image == blank %}

{% capture current %}{% cycle 1, 2 %}{% endcapture %} {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}

{% if section.settings.show_overlay %}

{% endif %}

{% else %}

{% if section.settings.show_overlay %}

{% endif %}

{% endif %}

        <noscript>
          <div class="slideshow__image"{% if block_image %}{% unless block_image.alt == blank %} role="img" aria-label="{{ block_image.alt | escape }}"{% endunless %} style="background-image: url('{{ block_image | img_url: '2048x' }}'); background-position: {{ block.settings.alignment }};"{% endif %}>
            {% if block_image == blank %}
              <div class="placeholder-background">
                {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
              </div>
            {% endif %}
          </div>
        </noscript>

Add shopify-fulfillment-integration to the list

also possible remove https://github.com/Shopify/shipping-fulfillment-app as this new app replaces it effectively.

Add theme-liquid-docs to open source directory

The theme developer tools team created a repo here to provide a reference for liquid documentation. This is meant to be a convenient source of truth for developers vs. finding a way to pull liquid objects from shopify.dev

We'd like to add this repo to the open source source directory

cc: @Shopify/theme-developer-tools

Uncomment GA code .

ATM. Google analytics code is commented out.

Mobile Designs for Inventory History

Unprocessed filters in documentation

Scroll to the end on https://shopify.github.io/liquid/filters/ and see:

Input
{% raw %}
{{ "[email protected]" | url_encode }}
{% endraw %}

Output
{{ "[email protected]" | url_encode }}

Input
{% raw %}
{{ "Tetsuro Takara" | url_encode }}
{% endraw %}

Output
{{ "Tetsuro Takara" | url_encode }}

Output is same as input.

Then go the the filter sub page https://shopify.github.io/liquid/filters/url_encode/:

Input
{{ "[email protected]" | url_encode }}

Output
john%40liquid.com

Input
{{ "Tetsuro Takara" | url_encode }}

Output
Tetsuro+Takara

Add Shopify/collins to shopify.github.io

For some reason the gh-pages branch of Shopify/collins isn't showing up.

This is another site (generated by Jekyll) that we'll need to modify to change some things from "tumblr" to "shopify".

According to the github docs, this should already be showing up at shopify.github.io/collins, but i'm guessing that our setup is a little different because we use shopify.github.com as the repo name somehow.

[Redacted]

Where is Batman?

[Return labels] Create beta flag for returns to prevent billing unless under beta

We only want to bill merchants (following ETL) if they are on a beta. This way we will reduce risk by launching the ETL.

[Test] A feature on core

This is a feature for shopify/shopify

shopify-assets gem continuously prepending warning comments

css/main.css file (https://shopify.github.io/css/main.css) has 510 lines worth of the following warning text:

/* ==========================================================
=============================================================

    WARNING! DO NOT EDIT THIS FILE!

    This file is auto-generated by the shopify-assets gem
    and will be overwritten regularily.

=============================================================
========================================================== */

Dashing is a ruby project.

shopify.ca link in footer

Please use Shopify.com. It lists .ca today.

How to get abandoned cart data

In my index.js
app.get("/api/abandoned-cart", async (_req, res) => {
const checkoutsData = await shopify.api.rest.AbandonedCheckout.checkouts({
session: res.locals.shopify.session,

});
res.status(200).send(checkoutsData);
});

and I have created a component abandonedCart

import React, { useEffect, useState } from "react";

function AbandonedCart() {
const [checkoutsData, setCheckoutsData] = useState([]);

useEffect(() => {
fetch("/api/abandoned-cart")
.then(response => response.json())
.then(data => {
setCheckoutsData(data)
console.log("data",data)})
.catch(error => console.error(error));
}, []);

return (

Abandoned Cart Data:

{JSON.stringify(checkoutsData, null, 2)}

);
}

export default AbandonedCart;

the auth api I am calling is

const shopify = shopifyApp({
api: {
apiVersion: LATEST_API_VERSION,
restResources,
billing: undefined, // or replace with billingConfig above to enable example billing
},
auth: {
path: "/api/auth?shop=brandgoclothe-01.myshopify.com",
callbackPath: "/api/auth/callback",
},
webhooks: {
path: "/api/webhooks",
},
// This should be replaced with your preferred storage strategy
sessionStorage: new SQLiteSessionStorage(DB_PATH),
});

---

when the api is called I am getting 503 error

I am attaching the RQ/RS of the api's

aditional informtion is earlier I am getting shop undefined error, so I have included shop=brandgoclothe-01.myshopify.com", as query parameter in and now I am getting 503 error in both the api's.

help me to get out of this

Add listing for unofficial open source, Shopify-related projects.

Hey guys,

I think http://shopify.github.io/ is a great idea, and I love the execution. Just wondering if you guys could see some scope for adding a filter for Shopify-related open source projects that have been created by the developer and designer community.

As an author of a couple of libraries and tools, I've found that discovering other people's projects, as well as getting my own out there, has been a bit difficult. It also leads to the same work being done repeatedly (check out how many Grunt plugins wrapping the shopify_theme gem there are). It would be great to have a central list of those projects that we could refer to, and potentially encourage folks to collaborate on existing tools together.

Thanks!

Gavin

Add Shopify API node

hey guys,
Can you add this?
https://github.com/microapps/shopify-api-node

to the full list of 0S projects?

best!

Wrong repo, oops