DEV Community: Ilias Haddad

How to build type-enforced UI components in React Native using @shopify/restyle

Ilias Haddad — Thu, 28 Nov 2024 08:53:34 +0000

It’s been quite some time since I wrote a technical post on my blog, and here’s a new one about building type-enforced UI components in React Native with @shopify/restyle and expo.

@shopify/restyle is a powerful styling library for React Native that brings type safety and consistency to your UI components. Unlike traditional styling approaches, Restyle allows you to create a centralized theme configuration that enforces design system principles across your entire application.

Getting Started

Project Setup

Setup your react native project using expo

npx create-expo-app@latest

Go to your project directory and install @shopify/restyle package using expo

cd /path/to/project
npx expo install @shopify/restyle

Creating Your Theme

Create a theme.tsx file to define your design system:

touch theme.tsx

Copy and paste the default theme configuration

import {createTheme} from '@shopify/restyle';

const palette = {
  purpleLight: '#8C6FF7',
  purplePrimary: '#5A31F4',
  purpleDark: '#3F22AB',

  greenLight: '#56DCBA',
  greenPrimary: '#0ECD9D',
  greenDark: '#0A906E',

  black: '#0B0B0B',
  white: '#F0F2F3',
};

const theme = createTheme({
  colors: {
    mainBackground: palette.white,
    cardPrimaryBackground: palette.purplePrimary,
  },
  spacing: {
    s: 8,
    m: 16,
    l: 24,
    xl: 40,
  },
  textVariants: {
    header: {
      fontWeight: 'bold',
      fontSize: 34,
    },
    body: {
      fontSize: 16,
      lineHeight: 24,
    },
    defaults: {
      // We can define a default text variant here.
    },
  },
});

export type Theme = typeof theme;
export default theme;

Implementing Theme Provider

Update your app/_layout.tsx:

import { DarkTheme, DefaultTheme } from "@react-navigation/native";
import { useFonts } from "expo-font";
import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import { StatusBar } from "expo-status-bar";
import { useEffect } from "react";
import "react-native-reanimated";

import { ThemeProvider } from "@shopify/restyle";
import theme from "@/theme";

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [loaded] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
  });

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return (
    <ThemeProvider theme={theme}>
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        <Stack.Screen name="+not-found" />
      </Stack>
      <StatusBar style="auto" />
    </ThemeProvider>
  );
}

Creating Reusable Components

Text Component

touch components/Text.tsx

// In components/Text.tsx

import {createText} from '@shopify/restyle';
import {Theme} from '../theme';

export const Text = createText<Theme>();

Let’s use it in our home screen

import { Text } from "@/components/Text";
import { SafeAreaView } from "react-native-safe-area-context";

export default function HomeScreen() {
  return (
    <SafeAreaView>
      <Text margin="m" variant="header">
        This is the Home screen. Built using @shopify/restyle.
      </Text>
    </SafeAreaView>
  );
}

As you can see in the code above, we’re passing margin as a “m” instead of a number. We’re getting the value from our theme.tsxfile.

// ./theme.tsx

const theme = createTheme({
  spacing: {
    s: 8,
    m: 16, // margin="m"
    l: 24,
    xl: 40,
  },
  textVariants: {
    header: { // our text header variant
      fontWeight: 'bold',
      fontSize: 34,
    },
    body: {
      fontSize: 16,
      lineHeight: 24,
    },
  },
    // ...rest of code
  },
});

This how our the home page view will looks

Skeleton Loader Component

Let’s build a Skeleton Loader card

touch components/SkeletonLoader.tsx

// components/SkeletonLoader.tsx

import {
  BackgroundColorProps,
  createBox,
  createRestyleComponent,
  createVariant,
  spacing,
  SpacingProps,
  VariantProps,
} from "@shopify/restyle";
import { Theme } from "@/theme";
import { View } from "react-native";

const Box = createBox<Theme>();

type Props = SpacingProps<Theme> &
  VariantProps<Theme, "cardVariants"> &
  BackgroundColorProps<Theme> &
  React.ComponentProps<typeof View>;

const CardSkeleton = createRestyleComponent<Props, Theme>([
  spacing,
  createVariant({ themeKey: "cardVariants" }),
]);

const SkeletonLoader = () => {
  return (
    <CardSkeleton variant="elevated">
      <Box
        backgroundColor="cardPrimaryBackground"
        height={20}
        marginBottom="s"
        width="70%"
        overflow="hidden"
        borderRadius={"m"}
      >
      </Box>

      <Box
        backgroundColor="cardPrimaryBackground"
        height={100}
        marginBottom="s"
        width="90%"
        overflow="hidden"
        borderRadius={"m"}
      >
      </Box>
      <Box
        backgroundColor="cardPrimaryBackground"
        height={50}
        marginBottom="s"
        width="70%"
        overflow="hidden"
        borderRadius={"m"}
      >
      </Box>
    </CardSkeleton>
  );
};

export default SkeletonLoader;

We create a new box as a predefined component from @shopify/restyle package and this will how us to create the Skeleton Box

const Box = createBox<Theme>();

Create a new CardSkeleton component using the createStyleComponent to create a custom component and we passed props which are spacing and cardVariants that we have to define in our theme.tsx file

type Props = SpacingProps<Theme> &
  VariantProps<Theme, "cardVariants"> &
  BackgroundColorProps<Theme> &
  React.ComponentProps<typeof View>;

const CardSkeleton = createRestyleComponent<Props, Theme>([
  spacing,
  createVariant({ themeKey: "cardVariants" }),
]);

Create a SkeletonLoader Component to render our Skelton Card component

// components/SkeletonLoader.tsx

export const SkeletonLoader = () => {
  return (
    <CardSkeleton variant="elevated">
      <Box
        backgroundColor="cardPrimaryBackground"
        height={20}
        marginBottom="s"
        width="70%"
        overflow="hidden"
        borderRadius={"m"}
      ></Box>

      <Box
        backgroundColor="cardPrimaryBackground"
        height={100}
        marginBottom="s"
        width="90%"
        overflow="hidden"
        borderRadius={"m"}
      ></Box>
      <Box
        backgroundColor="cardPrimaryBackground"
        height={50}
        marginBottom="s"
        width="70%"
        overflow="hidden"
        borderRadius={"m"}
      ></Box>
    </CardSkeleton>
  );
};

We have one thing left to make it working, update theme.tsxfile to have cardVariants


const theme = createTheme({
  colors: {
    // Add Black Color to use it later on
    black: palette.black,
  },
  // Add Border Radius Variants
  borderRadii: {
    s: 4,
    m: 10,
    l: 25,
    xl: 75,
  },
  // Add Card Variants
  cardVariants: {
    elevated: {
      shadowColor: "black",
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.1,
      shadowRadius: 4,
      elevation: 3,
      borderRadius: "m",
    },
    defaults: {
      padding: "m",
      borderRadius: "m",
    },
  },
});

That’s great, but let’s animation to our component

// components/SkeletonLoader.tsx

const ShimmerAnimation = () => {
  const shimmerTranslate = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.loop(
      Animated.timing(shimmerTranslate, {
        toValue: 1,
        duration: 1500,
        useNativeDriver: true,
      })
    ).start();
  }, [shimmerTranslate]);

  const translateX = shimmerTranslate.interpolate({
    inputRange: [0, 1],
    outputRange: [-300, 300],
  });

  return (
    <Animated.View
      style={{
        position: "absolute",
        top: 0,
        left: 0,
        bottom: 0,
        width: 100,
        backgroundColor: "rgba(255,255,255,0.2)",
        transform: [{ translateX }],
      }}
    />
  );
};

and let’s use it in our Skeleton Loader Component

// components/SkeletonLoader.tsx

export const SkeletonLoader = () => {
  return (
    <CardSkeleton variant="elevated">
      <Box
        backgroundColor="cardPrimaryBackground"
        height={20}
        marginBottom="s"
        width="70%"
        overflow="hidden"
        borderRadius={"m"}
      >
        <ShimmerAnimation />
      </Box>

      <Box
        backgroundColor="cardPrimaryBackground"
        height={100}
        marginBottom="s"
        width="90%"
        overflow="hidden"
        borderRadius={"m"}
      >
        <ShimmerAnimation />
      </Box>
      <Box
        backgroundColor="cardPrimaryBackground"
        height={50}
        marginBottom="s"
        width="70%"
        overflow="hidden"
        borderRadius={"m"}
      >
        <ShimmerAnimation />
      </Box>
    </CardSkeleton>
  );
};

And here’s the full component code:

// components/SkeletonLoader.tsx

import { useEffect, useRef } from "react";
import { Animated } from "react-native";
import {
  BackgroundColorProps,
  createBox,
  createRestyleComponent,
  createVariant,
  spacing,
  SpacingProps,
  VariantProps,
} from "@shopify/restyle";
import { Theme } from "@/theme";
import { View } from "react-native";

const Box = createBox<Theme>();

const ShimmerAnimation = () => {
  const shimmerTranslate = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.loop(
      Animated.timing(shimmerTranslate, {
        toValue: 1,
        duration: 1500,
        useNativeDriver: true,
      })
    ).start();
  }, [shimmerTranslate]);

  const translateX = shimmerTranslate.interpolate({
    inputRange: [0, 1],
    outputRange: [-300, 300],
  });

  return (
    <Animated.View
      style={{
        position: "absolute",
        top: 0,
        left: 0,
        bottom: 0,
        width: 100,
        backgroundColor: "rgba(255,255,255,0.2)",
        transform: [{ translateX }],
      }}
    />
  );
};

type Props = SpacingProps<Theme> &
  VariantProps<Theme, "cardVariants"> &
  BackgroundColorProps<Theme> &
  React.ComponentProps<typeof View>;

const CardSkeleton = createRestyleComponent<Props, Theme>([
  spacing,
  createVariant({ themeKey: "cardVariants" }),
]);

export const SkeletonLoader = () => {
  return (
    <CardSkeleton variant="elevated">
      <Box
        backgroundColor="cardPrimaryBackground"
        height={20}
        marginBottom="s"
        width="70%"
        overflow="hidden"
        borderRadius={"m"}
      >
        <ShimmerAnimation />
      </Box>

      <Box
        backgroundColor="cardPrimaryBackground"
        height={100}
        marginBottom="s"
        width="90%"
        overflow="hidden"
        borderRadius={"m"}
      >
        <ShimmerAnimation />
      </Box>
      <Box
        backgroundColor="cardPrimaryBackground"
        height={50}
        marginBottom="s"
        width="70%"
        overflow="hidden"
        borderRadius={"m"}
      >
        <ShimmerAnimation />
      </Box>
    </CardSkeleton>
  );
};

Et voila, we made a skeleton loader card using @shopify/restyle using

Support for dark mode

Let’s start with adding dark theme configuration, in your theme.tsxfile

// theme.tsx

export const darkTheme: Theme = {
  ...theme,
  colors: {
    ...theme.colors,
    mainBackground: palette.white,
    cardPrimaryBackground: palette.purpleDark,
    greenPrimary: palette.purpleLight,
  },
  textVariants: {
    ...theme.textVariants,
    defaults: {
      ...theme.textVariants.header,
      color: palette.purpleDark,
    },
  },

Add our dark theme configuration in our app layout by adding it to our layout.tsx file

 // app/_layout.tsx

import { useFonts } from "expo-font";
import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import { StatusBar } from "expo-status-bar";
import { useEffect } from "react";
import "react-native-reanimated";

import { ThemeProvider } from "@shopify/restyle";
import theme, { darkTheme } from "@/theme";
import { useColorScheme } from "react-native";

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [loaded] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
  });

  const colorSchema = useColorScheme();

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return (
    <ThemeProvider theme={colorSchema === "dark" ? darkTheme : theme}>
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        <Stack.Screen name="+not-found" />
      </Stack>
      <StatusBar style="auto" />
    </ThemeProvider>
  );
}

Get color schema using useColorScheme hook from react-native

  // app/_layout.tsx

 import { useColorScheme } from "react-native";

  //... rest of the code

  const colorSchema = useColorScheme();

Based on the color schema, use the default light theme or in dark mode use the darkTheme config defined in theme.tsx file

 // app/_layout.tsx

 import theme, { darkTheme } from "@/theme";

 //... rest of the code

    <ThemeProvider theme={colorSchema === "dark" ? darkTheme : theme}>
      <Stack>
        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
        <Stack.Screen name="+not-found" />
      </Stack>
      <StatusBar style="auto" />
    </ThemeProvider>

Here’s it dark and light mode.

Et voila, we managed to create type-enforced UI component using @shopify/restyle package

Thank you :)

How we integrate a booking platform in a Shopify store (not just an Iframe)

Ilias Haddad — Thu, 30 Dec 2021 22:42:11 +0000

I’ve been working on a freelance project to integrate a booking platform (Not just an Iframe) in a Shopify store (eProgram).

Project overview:

eProgram is a private store for Moroccan company's partners to get exclusive deals for their employees.

The store extends its catalog of deals with travel deals of Moroccan hotels by using a third-party travel company API.

I was responsible for the integration of this travel platform in a Shopify store and making it part of the Shopify store ecosystem.

Let’s get started.

Tech Stack:

Vue JS for displaying the hotels’ deals, travel platform home page, and booking cancellation page
Node JS (Express.js): REST API to handle communication between Vue JS app and the third-party booking API because doesn’t provide a public API key and if we use it directly in our vue js and anyone can get our booking platform API key and secret from the network tab.
Shopify Admin APIs to generate checkout links, cancel and refund the orders.
Shopify Webhooks to handle order confirmation and cancellation events.
Google Autocomplete API to handle user’s hotels requested location.

User Flow:

When users visit the travel page (Shopify custom page template with vue JS app), they choose the location, check-in, and check-out date.

After that, they get a list of hotels (from the third party API) and they can choose which room they want to have. When they click on the “book this room” button, we generate our magic Shopify checkout link with the booking amount total.

When the user completes the Shopify native checkout process and made it the payment. We made our request to a third-party booking API and prebook this hotel room.

After the Shopify store team, capture the payment and we make it as paid. We made another request to the third-party booking API to confirm the booking of this hotel room.

Et voila, the user can book their hotels room without leaving the Shopify store and with the same experience as if they buy a product from a Shopify store.

Let’s talk about the challenges:

Why did I choose Vue JS rather than React JS?

I’m comfortable working with React JS because I built many projects (personal and clients) with React JS. but integrating React JS in a Shopify theme is very difficult and not easy to maintain (for a Shopify theme*).

After much researches about which framework to use. I found many Github repo and articles about vue js in a Shopify theme. I decided to make a test Shopify theme for the first project presentation with the client. It was much easier to integrate with a Shopify theme rather than React JS.

How do I generate the checkout link?

In Shopify API, you can generate checkout links by providing variant id and quantity. In this case, I have many different rooms in each hotel and I can’t set a product variant for each one because the price can change and it’s a crappy solution.

After many pieces of research, I found that I can make it dynamic by creating a product with one dollar as price and playing with quantity in the API. for example, the user book a room with 120 USD, I’ll make an API request to Shopify with 120 as quantity.

How to keep data in sync with the third-party booking platform?

Using Shopify webhooks with our API handler and our DB, we sync the data between our DB and the travel platform. When a user book a hotel room, we made a request to pre-book the room and save the response from the third-party API in our DB. same for another request like cancel, we update the status of the booking in the travel platform and our DB.

We create our DB to keep a local copy of booking data to display this data on thank you page and other custom pages.

Conclusion

This project was challenging for me but I love working on those types of projects. you'll need to use your problem-solving skill and experience with the platform to overcome these challenges.

Special Shoutout to Nouhaila (Project Manager), Abderhman (Designer), Othmane (Founder), and all the members of eProgram and the third party booking platform.

If you have any questions or comments, just let me know in the comments section or twitter

Originally posted at https://iliashaddad.com/blog/how-we-integrate-a-booking-platform-in-a-shopify-store-not-just-an-iframe/

My remote Set up as a Shopify developer and Freelancer (Hardware + software)

Ilias Haddad — Mon, 25 Jan 2021 09:31:18 +0000

I’ve been working remotely since late 2018. I’ll take you through each piece of hardware and software, and why I like it as a developer and freelancer.

Who I Am?

I’m Ilias Haddad, a full stack JS developer, and Shopify developer based in Kenitra, Morocco. I’m currently working as a remote freelancer with experience in Shopify development.

Hardware

Laptop

I’ve been using a MacBook Pro 2015 i7 3.1 GHz 512 GB as my main computer

Monitor

Monitors are arguably the most important pieces of hardware in a developer’s setup. As a developer, I need to have an external monitor to have my application for live preview and I use my code editor on the MacBook screen.

I was using Dell P2719h for about 3 months and it’s a good quality Monitor for developers.

Desk

I watched a lot of tech setups on YouTube and Instagram and I got impressed with LINNMON / ALEX desk from Ikea. With this desk, I have a number of drawest to store my accessories for easy access.

NAS server

I have 512 GB in my MacBook Pro and 128 GB in my iPhone. I need a NAS server to backup all this data in case of my MacBook Pro failed. I brought a home cloud server from WD and it’s working great on iPhone but not with MacBook Pro with Big Sur.

Microphone

I used the Shure MV5 microphone for the untreated room and it’s working great if you reduce the microphone gain.

WebCam

I used my iPhone as my webcam because the built-in webcam isn’t looking good. I use Iriun to be able my iPhone as a webcam.

Software

Desktop Apps

Spark: I love using this email client and it’s my favorite one so far.
Notion: I use Notion to store all things like podcast notes, new projects ideas, content calendar, books list, Goals
Loom: You can record your screen and get a video URL of your recording when you stop recording.
Krisp: You can remove all the noise in your environment on your microphone or speaker in realtime.
Postman: You can test or debug your APIs easily with Postman. I usually start with the backend first, I use potman to interact with my APIs and then create the front end.
Visual Studio Code: My favorite code editor ever, I use it everything for my personal and client projects.
There: I have clients in different locations and I need to check their time every time on google. I use there to my clients time right from the menubar

Chrome Extensions

Grammarly: I use Grammarly for about a year and it saves a lot of time googling my grammar issue
Shopify theme file search: As a Shopify developer, I use the Shopify code editor to edit without downloading the theme code when I don’t have access to private apps to make a local dev env. I use this extension to search for a word in the theme code and it saves a lot of time downloading and reuploading the theme to just use VS search functionality
Shopify theme inspector: I use this extension to debug the liquid code for better performance

Web Tools

Calendly: I use Calendly to let my clients book a meeting without going back and forth to agree on a meeting time.
Plausible: I use Plausible to keep an eye on personal website analytics with great UI and UX
FreshBooks: As a freelancer, I need to keep on track of my project invoice and my expense. I use FreshBooks to manage my freelance business income and expense

Mobile Apps

Meeter: With this app, I can get a list of upcoming online meeting events from my calendars.
Sleep Cycle: I use the sleep cycle to track my sleeping and get data of how many hours I sleep last night.

My Current Setup

How to add custom fields to the order data on the product page

Ilias Haddad — Thu, 17 Dec 2020 14:57:21 +0000

In the third article of #4weeksShopifyDev, I'll be talking about how to add custom fields to the order data on the product page

I'll be adding an engraving custom field on the product page and display the output of the customer in order page (Shopify Admin)

Demo Image

Note: I'm using the Debut theme, you may have different architecture

Create a product template

First, we need to create a custom product Shopify template and called product-custom.liquid
Create a new Shopify section and called product-custom-template and paste the code from the product-template section
On the product page , change the template suffix to the product.custom

Create Custom Fields

Go to the Shopify UI Elements Generator.
Create a new custom field
Copy the generated code
Paste the code before <button type="submit"

Now, you can test it by adding the product to the cart and add the custom field value and process the checkout.

Et voila, the custom field value appear on the checkout page and order page

How to show or hide content on your Shopify store based on the URL query (Serve Side)

Ilias Haddad — Thu, 17 Dec 2020 14:54:12 +0000

In the next four weeks, I'm planning to start a challenge it will be called #4weeksOfShopifyDev. In this challenge, I'll write technical articles related to the Shopify theme and app development.

The majority of the upcoming articles are from previous Shopify store clients I worked with

In today's article, I'll be talking about how to show content on a custom Shopify page based on the URL query.

For example, a Shopify client want to show dynamic content based on the URL query

Demo Page for the first part

Demo Page for the second part

WARNINGS (SERIOUSLY)

Shopify will cache the output of pages. If you use this querystring parsing code to show/hide content on the site you risk exposing the result to all customers. Imagine you have a discount code shown with the querystring. If Shopify caches that output version every single customer will see the code regardless of the querystring in place. The code attempts to avoid that risk by using the cache querystring value but the risk remains.

By using the cache querystring value you're no longer making use of the Shopify cache. This is what helps keep your site fast, and perform well under load. Flushing the cache isn't a great idea - especially at scale.

Also, you have no control over what content appears in content_for_header. Shopify could change the contents at any point so this code could stop working.

It's for those reasons (and mainly the first two) that I would strongly caution you against using it on a production site. It's still an interesting idea in any case.

Let's start!

Create a new Shopify page template

Create a new Shopify page and link it with the custom template

Create a new snippet called querystring paste this code on it

{%- capture contentForQuerystring -%}{{ content_for_header }}{%- endcapture -%}
{%- assign pageUrl = contentForQuerystring | split:'"pageurl":"' | last | split:'"' | first | split:'.myshopify.com' | last |
   replace:'\/','/' |
   replace:'%20',' ' |
   replace:'\u0026','&'
-%}
{%- assign itemShow = '' -%}
{%- for i in (1..1) -%}
  {%- unless pageUrl contains "?" -%}{% break %}{%- endunless -%}
  {%- assign pageQuerystring = pageUrl | split:'?' | last -%}
  {%- assign parts = pageQuerystring | split:'&' -%}
  {%- for part in parts -%}
    {%- assign keyAndValue = part | split:'=' -%}
    {%- if keyAndValue.size > 1 -%}
      {% if keyAndValue[0] == param %}{{keyAndValue[1]}}{% endif %}{%- endif -%}{%- endfor -%}{%- endfor -%}

Include the snippet in the custom page we created before

{% capture view %}{%- render 'querystring', param: "refer" -%}{% endcapture %}

Paste this code in the custom page

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>

      <div class="rte">

        {% capture view %}{%- render 'querystring', param: "refer" -%}{% endcapture %}


        {% unless view == blank  %}

        Hey, You're comming from {{view }}
        {{ page.content }}

        {% endunless %}
      </div>
    </div>
  </div>
</div>

Et voila, you have a dynamic page based on URL query

In the next part of this article, I'll make a custom Shopify page and you can only access it if you have a code in the URL query.

For example, you have a custom deal for specific visitors and you want only these visitors to see this deals page.

Let's do it!

Create a new Shopify page template
Create a new Shopify page and link it with the custom template

Create a new snippet called querystring paste this code on it

{%- capture contentForQuerystring -%}{{ content_for_header }}{%- endcapture -%}
{%- assign pageUrl = contentForQuerystring | split:'"pageurl":"' | last | split:'"' | first | split:'.myshopify.com' | last |
   replace:'\/','/' |
   replace:'%20',' ' |
   replace:'\u0026','&'
-%}
{%- assign itemShow = '' -%}
{%- for i in (1..1) -%}
  {%- unless pageUrl contains "?" -%}{% break %}{%- endunless -%}
  {%- assign pageQuerystring = pageUrl | split:'?' | last -%}
  {%- assign parts = pageQuerystring | split:'&' -%}
  {%- for part in parts -%}
    {%- assign keyAndValue = part | split:'=' -%}
    {%- if keyAndValue.size > 1 -%}
      {% if keyAndValue[0] == param %}{{keyAndValue[1]}}{% endif %}{%- endif -%}{%- endfor -%}{%- endfor -%}

Include the snippet in the custom page we created before

{% capture code  %}{%- render 'querystring', param: "code" -%}{% endcapture %}

Paste this code in the custom page

{% capture code %}{%- render 'querystring', param: "code" -%}{% endcapture %}




        {% if code == "iliashaddad"%}
<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>

      <div class="rte">


        {{ page.content }}

      </div>
    </div>
  </div>
</div>

        {% endif %}

Now, if you visit the custom deals with the code in URL query string https://ilias-demo.myshopify.com/pages/vip-deals?code=iliashaddad

References

I hope you find this article useful. I'll be writing more technical in the next 4 weeks. if you joined me in this challenge,
You can find me on

How to allow your customer to edit their Shopify account

Ilias Haddad — Thu, 17 Dec 2020 14:50:58 +0000

In the next four weeks, I'm planning to start a challenge it will be called #4weeksOfShopifyDev. In this challenge, I'll write technical articles related to the Shopify theme and app development.

The majority of the upcoming articles are from previous Shopify store clients I worked with

In today's article, I'll be talking about how to allow your Shopify store customers to edit their info without calling your customer support.

Demo Page

Install the Shopify app

First, we'll use a Shopify app to allow customers. they have a free plan.

Configure the Shopify app

To allow your customers to edit their info, we have two solutions
Inject the code on an exciting page
Create a new page to edit the profile

In this article, I'll go with the second solution.

Create a new page template it will be called edit-profile

Inject the Shopify app code to display the form

<div id='kca-embed'></div>

Create a new Shopify page and choose the page. edit-profile as page template
Now, we have the edit account form loaded as we want, but we need to match the style of the form to our design

Click on the settings dropdown menu and choose custom css

Inspect the console on the edit profile page
Style the input and label element with your own css style and paste them into the app

I hope you find this article useful. I'll be writing more technical in the next 4 weeks. if you joined me in this challenge,
You can find me on

How to build a custom Shopify theme in 2020 - Introduction

Ilias Haddad — Thu, 17 Dec 2020 14:42:05 +0000

In the fifth article of the #4weeksOfShopifyDev challenge, I'll be talking about how to build a custom Shopify theme in 2020

What is a Shopify theme?

Shopify theme is a combination of HTML, CSS, and JavaScript code with liquid language which is a Shopify template language that adds dynamic to your HTML code on the server-side

Shopify theme architecture

In a Shopify theme, we have several folders with specific files

Config folder which contains:
- settings_schema.json: Shopify themes global settings like font-family, primary color, and many other settings
- settings_data.json: a registry file of what you have done in the Shopify theme editor
Layout folder which contains:
- theme.liquid: all other templates are rendered inside this file and contain a static section like header and footer
- password.liquid: a template for password-protected Shopify store
- gift.liquid: a template renders the gift card issued to a customer upon purchase.
Templates folder which contains:
- product.liquid: a template renders the product page
- page.liquid: a template renders a Shopify page
- cart.liquid: a template renders the cart page
- customers/account.liquid: a template renders the account page
- customers/order.liquid: a template renders a specific order content
- customers/register.liquid: a template renders the create account page
- customers/login.liquid: a template renders the login page
- customers/reset_password.liquid: a template renders the reset password page
- and other templates
Assets folder which contains the CSS, JS, SVG files and images
Snippets folder which contains reusable code (components)
Sections folder which contains files to have a dynamic section in templates with data from Shopify theme editor

Local Shopify theme development

To create a custom Shopify theme and from my research, you have 3 options

Shopify Theme Kit with webpack:

You can write your webpack config that fit your needs and upload your theme files using themekit. for example, you can use this repo as a starting point or for inspiration

Shopify Slate v1:

Even with Shopify ends support for Slate in January 2020. it still a great tool with great features out of the box like code splitting over templates and sections.

With the launch of the new Shopify architecture, Shopify is planning to launch also a developer tool to work with this architecture

If you want to start with Slate, you can use this starter-theme with Shopify slate folders architecture

The taproom build process:

The taproom is a well known Shopify dev agency and I found their tool through a Shopify dev twitch Livestream. I think this tool will be very helpful for new Shopify theme developers because this tool used by Taproom themself in building custom Shopify themes

Ressource and tools to use

Shopify Liquid Code Examples—A searchable library of code examples based around theme components that can be added directly into themes, to allow you to build and customize themes faster and more reliably.
Shopify Theme Template Documentation—The go-to resource for learning the ins and outs of building Shopify themes, including detailed breakdowns of typical Liquid template files used as the basis for most Shopify themes.
The Shopify Liquid Cheat Sheet—A simple and detailed cheat sheet for Liquid markup. This page includes examples of most Liquid syntactical elements and descriptions of their purpose.
The Shopify Liquid Docs: The go-to resource for learning Shopify liquid language
Official Shopify Twitch Channel: I found many tips and tools through Shopify live streams

How to make product description tabs in Shopify without a Shopify app?

Ilias Haddad — Thu, 17 Dec 2020 14:37:12 +0000

In the fourth article of the #4weeksOfShopifyDev challenge, I'll be talking about to add product tabs without using a Shopify app

Note: I'm using the Debut theme, you may have a different Shopify theme

Demo Product Page

Create a product template

First, we need to create a custom product Shopify template and called product-tabs.liquid
Create a new Shopify section and called product-template-tabs and paste the code from the product-template section
Change the section in product-tabs.liquid to product-template-tabs

Install reviews app and configure tabs

Install Shopify product reviews app
Create a new Shipping policy page
Replace product.description in product-template-tabs.liquid with this code

https://gist.github.com/IliasHad/43a3ab86eb6755bae03a89c3042d7397

Et voila, you have product tabs without a Shopify app

How to add tailwind CSS to your Shopify theme

Ilias Haddad — Thu, 17 Dec 2020 08:39:01 +0000

In the 12th article of the #4WeeksOfShopifyDev challenge, I'll be talking about how you can add tailwind css to your Shopify theme and add only used Tailwind CSS code in your liquid code.

Let's do it!

First, we need to download your Shopify theme locally using Shopify themekit

Install ThemeKit

ThemeKit is the Offical Shopify tool to work with Shopify themes locally

macOS Installation

brew tap shopify/shopify

brew install themekit

Windows Chocolatey Installation

choco install themekit

Linux Installation

curl -s [<https://shopify.github.io/themekit/scripts/install.py>](<https://shopify.github.io/themekit/scripts/install.py>) | sudo python

Create Private Shopify App

Go Admin > Apps and click on manage private apps at the bottom of the page
Click on Enable Private App Development and enable it
Create a new private app and select Themes with reading and write permissions
Copy the Password

Configure ThemeKit

Go Online Store > Themes and click on edit code for the Shopify theme you want to work with locally
In the URL bar, you'll have the Shopify theme ID like this one https://ilias-demo.myshopify.com/admin/themes/ID

Create a directory for this theme

Run this command to download your theme code

theme get -p=your-password -s=[you-store.myshopify.com](<http://you-store.myshopify.com/>) -t=your-theme-id

In the theme directory, we need to initialize a node js project (You should have Node JS installed)

Run this code to create new package.json file

npm init -y

We need to install these dependencies to add tailwind css

npm install tailwindcss autoprefixer postcss

Run this command to create tailwind.config.js file

 npx tailwindcss init

Paste this code to add only used CSS classes in your Shopify theme file

module.exports = {
  purge: {
    enabled: true,
    content: ["./**/*.liquid"],
  },
};

Create new file called postcss.config.js file

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Create new folder called css and create new file under this directory called application.css
Paste this code to import Tailwind CSS code

/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */

@tailwind utilities;

Run this code to build the tailwind CSS code and you'll get application.css.liquid file which contains all tailwind CSS code needed for your theme

npx tailwindcss build css/application.css -o assets/application.css.liquid

You need to add the tailwind CSS build code to your Shopify theme by adding this code to your theme.liquid file

{{ "application.css" | asset_url | stylesheet_tag }}

Run this command to upload the new files and change and watch for new changes to your remote Shopify theme

theme watch

You can add this code in package.json under scripts and it's will build tailwind css code and deploy the theme

"build": "npx tailwindcss build css/application.css -o assets/application.css.liquid && theme deploy"

If you enjoyed this article, don't forget to share it with other people 😇

How to build a custom Shopify theme in 2020

Ilias Haddad — Sun, 06 Dec 2020 11:24:24 +0000

What is a Shopify theme?

Shopify theme is a combination of HTML, CSS, and JavaScript code with liquid language which is a Shopify template language that adds dynamic to your HTML code on the server-side

Shopify theme architecture

In a Shopify theme, we have several folders with specific files

Config folder which contains:
- settings_schema.json: Shopify themes global settings like font-family, primary color, and many other settings
- settings_data.json: a registry file of what you have done in the Shopify theme editor
Layout folder which contains:
- theme.liquid: all other templates are rendered inside this file and contain a static section like header and footer
- password.liquid: a template for password-protected Shopify store
- gift.liquid: a template renders the gift card issued to a customer upon purchase.
Templates folder which contains:
- product.liquid: a template renders the product page
- page.liquid: a template renders a Shopify page
- cart.liquid: a template renders the cart page
- customers/account.liquid: a template renders the account page
- customers/order.liquid: a template renders a specific order content
- customers/register.liquid: a template renders the create account page
- customers/login.liquid: a template renders the login page
- customers/reset_password.liquid: a template renders the reset password page
- and other templates
Assets folder which contains the CSS, JS, SVG files and images
Snippets folder which contains reusable code (components)
Sections folder which contains files to have a dynamic section in templates with data from Shopify theme editor

Local Shopify theme development

To create a custom Shopify theme and from my research, you have 3 options

Shopify Theme Kit with webpack:

You can write your webpack config that fit your needs and upload your theme files using themekit. for example, you can use this repo as a starting point or for inspiration

Shopify Slate v1:

Even with Shopify ends support for Slate in January 2020. it still a great tool with great features out of the box like code splitting over templates and sections.

If you want to start with Slate, you can use this starter-theme with Shopify slate folders architecture

The taproom build process:

Ressource and tools to use

Shopify Liquid Code Examples—A searchable library of code examples based around theme components that can be added directly into themes, to allow you to build and customize themes faster and more reliably.
Shopify Theme Template Documentation—The go-to resource for learning the ins and outs of building Shopify themes, including detailed breakdowns of typical Liquid template files used as the basis for most Shopify themes.
The Shopify Liquid Cheat Sheet—A simple and detailed cheat sheet for Liquid markup. This page includes examples of most Liquid syntactical elements and descriptions of their purpose.
The Shopify Liquid Docs: The go-to resource for learning Shopify liquid language
Official Shopify Twitch Channel: I found many tips and tools through Shopify live streams

How I built the product hunt launch video gallery using Gatsby JS, Google Sheets, and Product Hunt API

Ilias Haddad — Sat, 03 Oct 2020 21:57:10 +0000

In this tutorial, I'll be sharing how I built the Product Hunt launch video gallery which use Product Hunt API, store the data in Google Sheets and display it using Gatsby JS. You can check out the website from this link

What I'll be covering today:

Use Netlify functions to query data from Product Hunt API and store it in Google Sheets
Query data from Google Sheets and display it on Gatsby website
Download remote images to a local folder to utilize the power of Gatsby Images
Send GET requests using IFTTT to get fresh product launch video

Let's do it.

Use Netlify functions to query data from Product Hunt API and store it in Google Sheets

Install Gatsby CLI using Yarn


yarn global add gatsby-cli

or NPM


npm i gatsby-cli -g

Install Netlify Dev CLI to test Netlify functions locally using Yarn

yarn global add netlify-cli

or NPM


npm i netlify-cli -g

Create new gatsby website using CLI


gatsby new product-hunt-launch-video https://github.com/oddstronaut/gatsby-starter-tailwind

Run the Gatsby website


cd product-hunt-launch-video && gatsby develop

Create functions folder inside the root folder


cd src && mkdir functions

Create product-hunt.js ﬁle inside functions folder


touch product-hunt.js

In the root directory, install node-fetch to fetch data from GraphQl API, dotenv to load

env variables


yarn add node-fetch dotenv

We need to initialize a new netlify project


netlify init

and choose "No, I will connect this directory with GitHub ﬁrst" and follow the instructions

mentioned the command line

Create netlify.toml ﬁle to conﬁg the netlﬁy website


[build]

command = "yarn run build"

functions = "functions" # netlify dev uses this directory to scaffold a

publish = "public"

Create env ﬁle to hold Product Hunt API Key


PH_ACCESS_TOKEN=

In order to get your Product Hunt API Key, you need to login with your Product Hunt account

and check this wesbite and create new application and when you create a new application.

you'll have a Developer Access Token which never expires and we'll use this token in env ﬁle

In the product-hunt.js, we'll create the function to consume Product Hunt API


require("dotenv").config()

const fetch = require("node-fetch")

exports.handler = function (event, context, callback) {


 const requestBody = {
    query: `
        {
            posts(order:RANKING) {

              edges {
                node {
                  name
                  url
                  topics {
                    edges {
                      node {
                         name
                      }
                    }
                  }
                  votesCount
                  media {
                    videoUrl
                    url
                  }
                  tagline

                  createdAt


                }
              }

            }
          }
            `,
  };

fetch("https://api.producthunt.com/v2/api/graphql", {

method: "POST",

headers: {

authorization: `Bearer ${process.env.PH\_ACCESS\_TOKEN}`,

"Content-type": "Application/JSON",

},

body: JSON.stringify(requestBody),

})

.then(res => res.json())





.then(({ data }) => {

callback(null, {

statusCode: 200,

body: JSON.stringify({

message: "Success",

data: data.posts.edges,

}),

})

})

.catch(err => console.log(err))

}

You need to run this script and check http://localhost:8888/.netlify/functions/product-hunt

to send a GET request to this netlify function and then send a POST request to Product

Hunt GraphQl API


netlify dev

We need to filter the product that had a launch video

     if (data) {
        const filterData = data.posts.edges.filter(el => {

          return el.node.media.map(el => el.videoUrl)[0] !== null
        })

        callback(null, {
          statusCode: 200,
          body: JSON.stringify({
            message: "Success",
            data: filterData,
          }),
        })
      }

In this function, We checked if data is defined, filter posts data, map each product media array and return the videoUrl value, then we check if the first array item isn't null because the launch video is the first item in the media array

Now, our code will look like this


require("dotenv").config()

const fetch = require("node-fetch")

exports.handler = function (event, context, callback) {
  const date = new Date(event.queryStringParameters.date).toISOString();

  const requestBody = {
    query: `
        {
            posts(order:RANKING,  postedBefore: ${date}) {

              edges {
                node {
                  name
                  url
                  topics {
                    edges {
                      node {
                         name
                      }
                    }
                  }
                  votesCount
                  media {
                    videoUrl
                    url
                  }
                  tagline

                  createdAt


                }
              }

            }
          }
            `,
  }
  fetch("https://api.producthunt.com/v2/api/graphql", {
    method: "POST",
    headers: {
      authorization: `Bearer ${process.env.PH_ACCESS_TOKEN}`,
      "Content-type": "Application/JSON",
    },
    body: JSON.stringify(requestBody),
  })
    .then(res => res.json())
    .then(({ data }) => {
      if (data) {
        const filterData = data.posts.edges.filter(el => {
          return el.node.media.map(el => el.videoUrl)[0] !== null
        })

        callback(null, {
          statusCode: 200,
          body: JSON.stringify({
            message: "Success",
            data: filterData,
          }),
        })
      }
    })
    .catch(err => console.log(err))
}

We're on the halfway to ﬁnish the netlify function

You need create new Google spreadsheets at Goo g le Sheets
You need to get Google Sheets API credentials to be able to read data from sheets
Go to the Google APIs Console.
Create a new project.
Click Enable API. Search for and enable the Google Sheet API.
Create a new service account then, create a new API key and download the JSON file
Install Google Sheets Node JS SDK to add Product Hunt data to it


yarn add google-spreadsheet util && netlify dev

Access your Sheets using the Node JS SDK


 const acessSepreadSheet = async () => {
    const doc = new GoogleSpreadsheet(
      "YOUR GOOGLE SHEET ID"
    )

    await doc.useServiceAccountAuth({
      client_email: process.env.GOOGLE_SERVICE_ACCOUNT_EMAIL,
      private_key: process.env.GOOGLE_PRIVATE_KEY,
    })
    const info = await doc.loadInfo() // loads document properties and worksheets
    console.log(doc.title)
  }

This function will access the Google Sheet and return the sheet title

Now, we need this row to add new product data like mentioned the screenshots below.

We need to write a function to add a new row


 const accessSpreadSheet = async ({
    productName,
    topic,
    votesCount,
    videoUrl,
    featuredImage,
    url,
    created_at,
    description,
  }) => {
    const doc = new GoogleSpreadsheet(
      "YOUR SHEET ID"
    )

    // use service account creds
    await doc.useServiceAccountAuth({
      client_email: process.env.GOOGLE_SERVICE_ACCOUNT_EMAIL,
      private_key: process.env.GOOGLE_PRIVATE_KEY,
    })
    await doc.loadInfo() // loads document properties and worksheets

    const sheet = doc.sheetsByIndex[0] // or use doc.sheetsById[id]

    const row = {
      productName,
      topic,
      votesCount,
      videoUrl,
      featuredImage,
      url,
      created_at,
      description,
    }

    await sheet.addRow(row)
  }

and the final code will look like this


require("dotenv").config()

const fetch = require("node-fetch")
const { GoogleSpreadsheet } = require("google-spreadsheet")
exports.handler = function (event, context, callback) {
  const date = new Date(event.queryStringParameters.date).toISOString();

  const accessSpreadSheet = async ({
    productName,
    topic,
    votesCount,
    videoUrl,
    featuredImage,
    url,
    created_at,
    description,
  }) => {
    const doc = new GoogleSpreadsheet(
      "YOUR SHEET ID"
    )

    // use service account creds
    await doc.useServiceAccountAuth({
      client_email: process.env.GOOGLE_SERVICE_ACCOUNT_EMAIL,
      private_key: process.env.GOOGLE_PRIVATE_KEY,
    })
    await doc.loadInfo() // loads document properties and worksheets

    const sheet = doc.sheetsByIndex[0] // or use doc.sheetsById[id]

    const row = {
      productName,
      topic,
      votesCount,
      videoUrl,
      featuredImage,
      url,
      created_at,
      description,
    }

    await sheet.addRow(row)
  }
  const requestBody = {
    query: `
        {
            posts(order:RANKING,  postedBefore: ${date}) {

              edges {
                node {
                  name
                  url
                  topics {
                    edges {
                      node {
                         name
                      }
                    }
                  }
                  votesCount
                  media {
                    videoUrl
                    url
                  }
                  tagline

                  createdAt


                }
              }

            }
          }
            `,
  }
  fetch("https://api.producthunt.com/v2/api/graphql", {
    method: "POST",
    headers: {
      authorization: `Bearer ${process.env.PH_ACCESS_TOKEN}`,
      "Content-type": "Application/JSON",
    },
    body: JSON.stringify(requestBody),
  })
    .then(res => res.json())
    .then(async ({ data, status }) => {
      if (data) {
        const filterData = data.posts.edges.filter(el => {
          return el.node.media.map(el => el.videoUrl)[0] !== null
        })

        callback(null, {
          statusCode: 200,
          body: JSON.stringify({
            message: "Success",
            data: filterData.length,
          }),
        })
        for (let index = 0; index < filterData.length; index++) {
          const product = filterData[index]
          await accessSpreadSheet({
            productName: product.node.name,
            topic: product.node.topics.edges
              .map(({ node }) => node.name)
              .toString(),
            votesCount: product.node.votesCount,
            videoUrl: product.node.media[0].videoUrl,
            featuredImage: product.node.media[1].url,
            url: product.node.url,
            created_at: product.node.createdAt,
            description: product.node.tagline,
          })
        }
      }
    })
    .catch(err => console.log(err))
}

And this the results

Query data from Google Sheets and display it in Gatsby website

Add gatsby plugin to query Google Sheets Data


yarn add gatsby-source-google-sheets

Add configuration to gatsby-config.js


  {
      resolve: "gatsby-source-google-sheets",
      options: {
        spreadsheetId: "YOUR SPREAD SHEET ID",
        worksheetTitle: "YOUR SHEET ID",
        credentials: {
          client_email: process.env.GOOGLE_SERVICE_ACCOUNT_EMAIL,
          private_key: process.env.GOOGLE_PRIVATE_KEY,
        },
      },
    },

Don't forget to add this line of code to load env varibale in gatsby-config.js


require("dotenv").config()

Et Voila, we can query data from Google Sheets in our Gatsby website

We'll move the index.js page from the pages folder to a new folder called templates to add pagination


/* eslint-disable react/prop-types */

import React from "react";
import Layout from "../components/layout";
import SEO from "../components/seo";
import { graphql } from "gatsby";
import { Link } from "gatsby";

const IndexPage = ({ data, pageContext }) => {
  const { currentPage, numPages } = pageContext;
  const isFirst = currentPage === 1;
  const isLast = currentPage === numPages;

  const prevPage =
    currentPage - 1 === 1 ? "/page" : "/page/" + (currentPage - 1).toString();
  const nextPage = "/page/" + (currentPage + 1).toString();

  return (
    <Layout>
      <SEO
        keywords={[
          `producthunt`,
          `video`,
          `inspiration`,
          `product hunt launch video`,
        ]}
        title="Product Hunt Video Inspiration"
      />

      <section className="container grid-cols-1 sm:grid-cols-2 md:grid-cols-3  mx-auto md:row-gap-24 row-gap-12 px-4 py-10 grid md:gap-10 ">
        {data.allGoogleSheetSheet1Row.edges
          .filter(({ node }) => node.localFeaturedImage !== null)

          .filter(
            (el, i, array) =>
              array.findIndex(
                ({ node }, index) => node.productname !== index
              ) !== i
          )

          .sort((a, b) => b.votescount - a.votescount)
          .map(({ node }) => (
            <div
              className="md:flex flex-col"
              rel="noreferrer"
              data-videourl={node.videourl}
              key={node.id}
            >
              <div className="md:flex-shrink-0 overflow-hidden relative ">
                <div
                  className="w-full h-full   absolute opacity-0 hover:opacity-100 "
                  style={{
                    zIndex: "99",
                    position: "absolute",
                    top: "50%",
                    left: "50%",
                    transform: "translate(-50%, -50%)",
                    backgroundColor: "rgba(0, 0, 0, 0.45)",
                  }}
                ></div>
              </div>
              <div className="mt-4 md:mt-3 ">
                <div className="uppercase tracking-wide text-sm text-indigo-600 font-bold">
                  {node.topic}
                </div>
                <a
                  href={node.url}
                  target="_blank"
                  rel="noreferrer"
                  className="inline-block mt-2 text-lg leading-tight font-semibold text-gray-900 hover:underline"
                >
                  {node.productname}

                  <span className="inline-block ml-4"></span>
                </a>
                <p className="mt-2 text-gray-600">{node.description}</p>
              </div>
            </div>
          ))}
      </section>

      <div className="bg-white px-4 py-3 flex items-center justify-center w-full border-t border-gray-200 sm:px-6">
        <div className="flex-1 flex justify-between ">
          {!isFirst && (
            <Link
              to={prevPage}
              rel="prev"
              className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
            >
              <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path
                  fillRule="evenodd"
                  d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                  clipRule="evenodd"
                />
              </svg>
              Previous
            </Link>
          )}
          {!isLast && (
            <Link
              to={nextPage}
              rel="next"
              className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
            >
              Next
              <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path
                  fillRule="evenodd"
                  d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                  clipRule="evenodd"
                />
              </svg>
            </Link>
          )}
        </div>
      </div>
    </Layout>
  );
};

export default IndexPage;
export const query = graphql`
  query ProductListQuery($skip: Int!, $limit: Int!) {
    allGoogleSheetSheet1Row(
      sort: { fields: votescount, order: DESC }
      limit: $limit
      skip: $skip
    ) {
      edges {
        node {
          featuredimage
          productname
          topic
          url
          votescount
          videourl
          id
          description
        }
      }
    }
    ProductSearch: allGoogleSheetSheet1Row(
      sort: { fields: votescount, order: DESC }
    ) {
      edges {
        node {
          featuredimage
          productname
          topic
          url
          votescount
          videourl
          id
          description
        }
      }
    }
  }
`;

We need to create a new file (gatsby-node.js) in the root folder and add this code to it


exports.createPages = async ({ graphql, actions, reporter }) => {
  const { createPage } = actions;
  const result = await graphql(
    `
      query MyQuery {
        allGoogleSheetSheet1Row(sort: { fields: votescount, order: DESC }) {
          edges {
            node {
              id
            }
          }
        }
      }
    `
  );
  if (result.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`);
    return;
  }

  const posts = result.data.allGoogleSheetSheet1Row.edges;
  const postsPerPage = 50;
  const numPages = Math.ceil(posts.length / postsPerPage);
  console.log(numPages);
  Array.from({ length: numPages }).forEach((_, i) => {
    createPage({
      path: i === 0 ? `/` : `/page/${i + 1}`,
      component: path.resolve("./src/templates/index.js"),
      context: {
        limit: postsPerPage,
        skip: i * postsPerPage,
        numPages,
        currentPage: i + 1,
      },
    });
  });
};

In this code, we create the index page and divide the data with 50 products per page

Now, We have data in our Google SpreadSheet in Our Gatsby Website like in this screenshot

Download remote images to a local folder to utilize the power of Gatsby Images

Now, we have the data available but no images. we can use the URL of the image in the img tag. If we do this, we'll not utilize the image processing power of Gatsby's image and in order to utilize it, we need to download images from the URL and store locally.

First, install the gatsby-source-filesystem plugin


yarn add gatsby-source-filesystem gatsby-transformer-sharp gatsby-plugin-sharp

Add config of this plugin to gatsby-config.js to the first of plugins array


    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src`, `images`),
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,

Add this code to the gatsby-node.js file


const { createRemoteFileNode } = require("gatsby-source-filesystem");
exports.onCreateNode = async ({
  node,
  actions,
  store,
  cache,
  createNodeId,
}) => {
  const { createNode } = actions;

  if (node.internal.type === "googleSheetSheet1Row") {
    try {
      const fileNode = await createRemoteFileNode({
        url: node.featuredimage,
        store,
        cache,
        createNode,
        parentNodeId: node.id,
        createNodeId,
      });

      if (fileNode) {
        node.localFeaturedImage___NODE = fileNode.id;
      }
    } catch (err) {
      node.localFeaturedImage = null;
    }
  }
};

In this code, We listen to on creating node event and add like a proxy to download the remote image and we specify the field (node.featuredimage) .when it's downloaded we add a new node field called localFeaturedImage which will be available to query in GraphQl

Install Gatsby Image


yarn add gatsby-image

Now, the index.js file will look like this


/* eslint-disable react/prop-types */

import React from "react";
import Layout from "../components/layout";
import SEO from "../components/seo";
import { graphql } from "gatsby";
import { Link } from "gatsby";
import Img from "gatsby-image";

const IndexPage = ({ data, pageContext }) => {
  const { currentPage, numPages } = pageContext;
  const isFirst = currentPage === 1;
  const isLast = currentPage === numPages;

  const prevPage =
    currentPage - 1 === 1 ? "/page" : "/page/" + (currentPage - 1).toString();
  const nextPage = "/page/" + (currentPage + 1).toString();

  return (
    <Layout>
      <SEO
        keywords={[
          `producthunt`,
          `video`,
          `inspiration`,
          `product hunt launch video`,
        ]}
        title="Product Hunt Video Inspiration"
      />

      <section className="container grid-cols-1 sm:grid-cols-2 md:grid-cols-3  mx-auto md:row-gap-24 row-gap-12 px-4 py-10 grid md:gap-10 ">
        {data.allGoogleSheetSheet1Row.edges
          .filter(({ node }) => node.localFeaturedImage !== null)
          .filter(
            ({ node }) => node.localFeaturedImage.childImageSharp !== null
          )

          .filter(
            (el, i, array) =>
              array.findIndex(
                ({ node }, index) => node.productname !== index
              ) !== i
          )

          .sort((a, b) => b.votescount - a.votescount)
          .map(({ node }) => (
            <div
              className="md:flex flex-col"
              rel="noreferrer"
              data-videourl={node.videourl}
              key={node.id}
            >
              <div className="md:flex-shrink-0 overflow-hidden relative ">
                <div
                  className="w-full h-full   absolute opacity-0 hover:opacity-100 "
                  style={{
                    zIndex: "99",
                    position: "absolute",
                    top: "50%",
                    left: "50%",
                    transform: "translate(-50%, -50%)",
                    backgroundColor: "rgba(0, 0, 0, 0.45)",
                  }}
                ></div>
                <Img
                  fixed={node.localFeaturedImage.childImageSharp.fixed}
                  objectFit="cover"
                  objectPosition="50% 50%"
                  className="cursor-pointer"
                  imgStyle={{
                    display: "block",
                  }}
                />
              </div>
              <div className="mt-4 md:mt-3 ">
                <div className="uppercase tracking-wide text-sm text-indigo-600 font-bold">
                  {node.topic}
                </div>
                <a
                  href={node.url}
                  target="_blank"
                  rel="noreferrer"
                  className="inline-block mt-2 text-lg leading-tight font-semibold text-gray-900 hover:underline"
                >
                  {node.productname}

                  <span className="inline-block ml-4"></span>
                </a>
                <p className="mt-2 text-gray-600">{node.description}</p>
              </div>
            </div>
          ))}
      </section>

      <div className="bg-white px-4 py-3 flex items-center justify-center w-full border-t border-gray-200 sm:px-6">
        <div className="flex-1 flex justify-between ">
          {!isFirst && (
            <Link
              to={prevPage}
              rel="prev"
              className="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
            >
              <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path
                  fillRule="evenodd"
                  d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
                  clipRule="evenodd"
                />
              </svg>
              Previous
            </Link>
          )}
          {!isLast && (
            <Link
              to={nextPage}
              rel="next"
              className="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium rounded-md text-gray-700 bg-white hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150"
            >
              Next
              <svg className="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path
                  fillRule="evenodd"
                  d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                  clipRule="evenodd"
                />
              </svg>
            </Link>
          )}
        </div>
      </div>
    </Layout>
  );
};

export default IndexPage;
export const query = graphql`
  query ProductListQuery($skip: Int!, $limit: Int!) {
    allGoogleSheetSheet1Row(
      sort: { fields: votescount, order: DESC }
      limit: $limit
      skip: $skip
    ) {
      edges {
        node {
          featuredimage
          productname
          topic
          url
          votescount
          videourl
          id
          description
          localFeaturedImage {
            childImageSharp {
              # Specify the image processing specifications right in the query.
              # Makes it trivial to update as your page's design changes.
              fixed(width: 400, height: 250) {
                ...GatsbyImageSharpFixed
              }
            }
          }
        }
      }
    }

  }
`;

and this the results

Now, will add the modal

Create modal.js under components folder


import React, { useEffect } from "react";

const Modal = ({
  children,
  handleClose,
  show,
  closeHidden,
  video,
  videoTag,
  ...props
}) => {
  useEffect(() => {
    document.addEventListener("keydown", keyPress);
    document.addEventListener("click", stopProgagation);
    return () => {
      document.removeEventListener("keydown", keyPress);
      document.removeEventListener("click", stopProgagation);
    };
  });

  useEffect(() => {
    handleBodyClass();
  }, [props.show]);

  const handleBodyClass = () => {
    if (document.querySelectorAll(".modal.is-active").length) {
      document.body.classList.add("modal-is-active");
    } else {
      document.body.classList.remove("modal-is-active");
    }
  };

  const keyPress = (e) => {
    e.keyCode === 27 && handleClose(e);
  };

  const stopProgagation = (e) => {
    e.stopPropagation();
  };

  return (
    <>
      {show && (
        <div
          {...props}
          className="modal is-active modal-video"
          onClick={handleClose}
        >
          <div className="modal-inner " onClick={stopProgagation}>
            {video ? (
              <div className="responsive-video">
                {videoTag === "iframe" ? (
                  <iframe
                    title="video"
                    src={video}
                    frameBorder="0"
                    allowFullScreen
                  ></iframe>
                ) : (
                  <video v-else controls src={video}></video>
                )}
              </div>
            ) : (
              <>
                {!closeHidden && (
                  <button
                    className="modal-close"
                    aria-label="close"
                    onClick={handleClose}
                  ></button>
                )}
                <div className="modal-content">{children}</div>
              </>
            )}
          </div>
        </div>
      )}
    </>
  );
};

export default Modal;

Create new hero.js file under the components folder


import { Link } from "gatsby";
import React from "react";

export const Hero = () => {
  return (
    <div className="relative bg-white overflow-hidden">
      <div className="max-w-screen-xl mx-auto ">
        <div className="relative z-10 bg-white lg:w-full pb-8 text-center">
          <div className="mt-10 mx-auto max-w-screen-xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28 text-center">
            <div className="sm:text-center lg:text-center">
              <h2 className="text-4xl tracking-tight leading-10 font-extrabold text-gray-900 sm:text-5xl sm:leading-none md:text-6xl">
                <span className="text-indigo-600">Discover </span>
                the best Product Hunt launch videos
              </h2>
              <p className="mt-3 text-center text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:my-8 md:text-xl ">
                Curated product hunt launch videos to get inspiration for your
                next PH launch
                <br />
                <span className="text-indigo-600 mt-2 block">
                  {" "}
                  Note: click on the product image to watch the PH launch video
                </span>
              </p>
              <div className=" sm:flex sm:justify-center lg:justify-center">
                <div className="rounded-md shadow">
                  <Link
                    to="/search"
                    className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:shadow-outline transition duration-150 ease-in-out md:py-4 md:text-lg md:px-10"
                  >
                    Search Videos
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

Replace the CSS style to style.css file with this code to customize the video modal

/*! purgecss start ignore */
@tailwind base;
@tailwind components;
/*! purgecss end ignore */
@tailwind utilities;

.modal.is-active {
  display: flex;
}
.modal {
  display: none;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  position: fixed;
  z-index: 40;
}
.modal,
.modal:before {
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}
.modal.is-active .modal-inner {
  animation: slideUpInModal 0.15s ease-in-out both;
}
.modal.is-active .modal-inner,
.modal.is-active:before {
  display: block;
}
.modal.modal-video .modal-inner {
  padding: 0;
  max-width: 1024px;
}
.modal .modal-inner,
.modal:before {
  display: none;
}
@media (min-width: 641px) {
  .modal-inner {
    margin: 0 auto;
    max-height: calc(100vh - 96px);
  }
}
.modal-inner {
  max-height: calc(100vh - 32px);
  overflow: auto;
  position: relative;
  width: calc(100% - 32px);
  max-width: 520px;
  margin-left: 16px;
  margin-right: 16px;
  background: #25282c;
}
.responsive-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.responsive-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal.is-active:before {
  animation: slideUpInModalBg 0.15s ease-in-out both;
}
.modal.is-active .modal-inner,
.modal.is-active:before {
  display: block;
}
.modal:before {
  content: "";
  position: absolute;
  background-color: rgba(21, 23, 25, 0.88);
}
.modal .modal-inner,
.modal:before {
  display: none;
}
.modal,
.modal:before {
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
}

Send GET requests using IFTTT to get fresh product launch video

We need to set up a cron job that will send a request data to the netlify function to get new product data and add it to Google Sheets. Then, run netlify build hook to rebuild the gatsby website

You need to create a new free account at IFTTT
Create a new applet and choose date and time. set the time to 00:00 PST which is the time when the new product at PH is launched
Choose webhook for then and set the GET request

The GET request URL will be your-netlify-wesbite/.netlify/functions/product-hunt?date= and check time as ingredient

After you need to create a new applet with the same services but in time will be 00:15 PST and POST request URL will be netlify build hook which you get it from netlify Build & Deploy settings

Source Code: https://github.com/IliasHad/product-hunt-launch-video-gallery-demo

What chair do you use for coding?

Ilias Haddad — Thu, 13 Aug 2020 22:34:07 +0000

I was coding on an uncomfortable chair for a while and I'm planning to buy a new comfortable chair for long sitting and coding