DEV Community: Alireza Jahandideh

Create a custom toggle input for Vue FormKit using Headless UI

Alireza Jahandideh — Thu, 13 Jul 2023 19:34:00 +0000

Formkit is an awesome library when it comes to going beyond simple login forms. If you are not familiar with it yet, go to their website and see what you can do with it. In this post I am going to share how I build a custom toggle input for FormKit. This is just an experiment that I did with FormKit and this is in no way a production code.

What is FormKit?

FormKit is a library that helps you build complex forms in Vue. It is built on top of Vue 3 and uses the composition API. It is very easy to use and has a lot of features. You can check out Formkit Website for more information.

Why would you need a custom toggle input?

In fact FormKit already has a toggle input and it is great. I just wanted to try to create a custom toggle input using Headless UI and FormKit for the sake of doing it!

Custom Component

Everything you need to know about creating custom input for FormKit is documented here: Custom Inputs. Here is what I ended up with:

<script setup>
const props = defineProps({
  context: Object,
});

const value = computed({
  get: () => {
    return props.context?._value;
  },
  set: (value) => {
    props.context?.node.input(value);
  },
});

const label = props.context?.label;
const name = props.context?.name;
</script>

<template>
  <HeadlessSwitchGroup>
    <div class="flex items-center">
      <HeadlessSwitch
        v-model="value"
        :name="name"
        :class="value ? 'bg-blue-600' : 'bg-gray-200 dark:bg-zinc-700'"
        class="relative inline-flex h-6 w-11 items-center rounded-full"
      >
        <span class="sr-only">{{ label }}</span>
        <span
          :class="value ? 'translate-x-6' : 'translate-x-1'"
          class="inline-block h-4 w-4 transform rounded-full bg-white transition"
        />
      </HeadlessSwitch>
      <HeadlessSwitchLabel class="ml-4 text-sm text-zinc-700 dark:text-zinc-200">{{ label }}</HeadlessSwitchLabel>
    </div>
  </HeadlessSwitchGroup>
</template>

This is just a Headless UI toggle with a custom label which goes in front of the toggle. I used a v-model to for 2 way binding of value.

FormKit provides this component with prop.context and you can get context._value and when you want to update the value you need to call context.node.input(value). So I figured I can write a computed property with getter and setter to achieve that.

The last part is to register your component with FormKit as a custom input:

/// formkit.config.ts
import { DefaultConfigOptions, createInput } from "@formkit/vue";
import FormKitToggle from "~/components/FormKit/FormKitToggle.vue";

const config: DefaultConfigOptions = {
  // ...
  inputs: {
    mytoggle: createInput(FormKitToggle)
  }
  // ...
};

export default config;

Usage

Now you can use your custom toggle input like this:


<FormKit
  type="mytoggle"
  // rest of the props
/>

Shopify theme and Webpack code-splitting

Alireza Jahandideh — Mon, 30 Aug 2021 14:08:23 +0000

In this post, I want to share how to leverage code splitting for your Shopify theme. There is a minor issue to implement it as you would typically do in a Webpack project which I will share a solution for it.

What is code-splitting, and why you may want to do it?

If you don't know what code-splitting is, then, in short, it is a way to deliver the least amount of JS to the browser on page load and let the loaded JS decide when to download the other parts of the code. It makes your website faster to load fists, but the user pays the cost of downloads later in the journey.

How is it done with Webpack?

Basically, all bundling tools are capable of code splitting. You can see a report about it here: https://bundlers.tooling.report/code-splitting/

With Webpack there are multiple ways to achieve code-splitting, for the sake of an example you may split lodash like so:

import('lodash').then(({ default: _ }) => {...})

After building, you will get two bundled JS files:

index.bundle.js
vendors-node_modules_lodash_lodash_js.bundle.js

You only include index.bundle.js into your Shopify theme. For example, in the head of /layouts/theme.liquid and then the inde.bundle.js will load the other bundles (if needed) afterwards.

<script src="{{ 'index.bundle.js' | asset_url }}" defer></script>

The problem

The problem is Shopify serves your theme assets from a CDN that has a different domain. Also, the URL structure is not what Webpack would figure out by itself. Assuming your shop URL is myshop.com, you may see your index.bundle.js is loading from https://cdn.shopify.com/s/files/1/1844/8937/t/273/assets/index.bundle.js

A Solution

Webpack provides an option to define the publicPath on the fly. We can specify the path in the first line of our JS src like this:

// keep this before your imports
__webpack_public_path__ = window.assetsPath;

And the value of the assetsPath can be assigned in your /layouts/theme.liquid file.

<script type="application/javascript">
  window.assetsPath = "{{ 'index.bundle.js' | asset_url }}".split("index.bundle.js")[0]
</script>
<script src="{{ 'index.bundle.js' | asset_url }}" defer>

And there you have it, code-splitting in your Shopify theme to improve your speed scores and make your client happier.

Cheers!

Startups: Should it feel like working for free?

Alireza Jahandideh — Fri, 30 Oct 2020 02:44:24 +0000

Recently I have been asked to join an exciting startup as one of the core developers. I was thinking it is a good opportunity to stop working for other people and start my own. It is just a weekend project until we make an MVP so that they could present it and find investors.

They say we can't pay you for your work now because we don't have money but record your time and that will be your investment into the company. Later on, when we get to register our business, your share of business will be calculated based on the hours you spend.

A couple weeks are passed and I realized 10 other people are joined the project from developers to marketing advisors.

Despite what I hoped for, there has been no group meeting to talk about the progress, business plans, market research, strategies, etc. Maybe I am wrong, but I think at this early point everyone should be involved in planning.

I am a developer, but when I join as a core member it means I am a founder. The idea is not mine but the implementation will be mine. I expect to contribute to making decisions so to feel like this project is my own, but rather, I am receiving memo like updates about what has been done, who has joined, even a handout of my deliverables!

At this point I feel like I am being considered to work as a developer for new employers and for free!

Based on your experience, do you think this is normal? I suspect they just want someone to develop their ideas not a co-founder. What do you think?

Thanks

Shopify theme + Vuejs + Custom Elements: Part 2

Alireza Jahandideh — Sun, 25 Oct 2020 15:36:55 +0000

Continuing on the idea presented at part 1 on this series, in this post, I am going to extend on that. I am going to describe the theme directory structure and how it builds into a Shopify theme.

Repository: https://github.com/Youhan/shopify-vuejs-theme

Directory structure



.
├── dist
└── src
    ├── assets
    ├── config
    ├── layout
    ├── locales
    ├── scripts
    │   ├── account.js
    │   ├── cart.js
    │   ├── collection.js
    │   ├── home.js
    │   ├── layout.js
    │   ├── product.js
    │   └── search.js
    ├── sections
    ├── snippets
    ├── styles
    ├── templates
    └── vue
        ├── components
        │   ├── custom-element
        │   └── global
        ├── entry
        │   ├── account
        │   │   ├── components
        │   │   └── custom-elements
        │   ├── cart
        │   │   ├── components
        │   │   └── custom-elements
        │   ├── collection
        │   │   ├── components
        │   │   └── custom-elements
        │   ├── home
        │   │   ├── components
        │   │   └── custom-elements
        │   ├── layout
        │   │   ├── components
        │   │   └── custom-elements
        │   ├── product
        │   │   ├── components
        │   │   └── custom-elements
        │   └── search
        │       ├── components
        │       └── custom-elements
        ├── filters
        ├── plugins
        ├── store
        └── utils

assets, config, layout, locales, sections, snippets, templates directories need to be copied directly to the dist folder as they are standard Shopify directories. We use styles to store our CSS files and scripts for our JavaScript files. vue folder contains the Vue apps.

For each Shopify template file, we may need to build a javascript file that brings us the Webpack.

Webpack Setup

What we need to is consider all .js files in the scripts directory as an entry point and output the built file in src/assets/ directory. getEntries function accepts a path and returns an array of entry names.



const webpackJS = {
  entry: getEntries("src/scripts/*.js"),
  output: {
    path: path.join(__dirname, "src/assets"),
    filename: "[name].js",
  },
};

Then we need a rule for .vue files and .js files. The below rule will find all .vue files and loads them using vue-loader plugin.




{
    test: /\.vue$/,
    loader: "vue-loader",
    include: [
        path.resolve(__dirname, "src"),
        // any other package that we need to build
}

For JavaScript files, we add a rule to build them using babel



{
    test: /\.js$/,
    use: {
        loader: "babel-loader"
    },
    exclude: /node_modules/
},

Then we include the vue-loader and extract CSS plugins.



plugins: [
  new VueLoaderPlugin(),

  new MiniCssExtractPlugin({
    filename: "[name].css",
  }),
];

The complete file can be found here. webpack.config.js

Vue

vue/components contains the global components and global custom elements. For each entry point, we can add a directory that will contain all private components and private custom elements to itself. And it also contains an index.js to create and register custom elements using Vue.

Example Custom elements using Vuex store

Let's create two components.

an add to cart button
a cart counter in the header

We also need to keep the count of cart items in a persistent place so that it would not reset when you navigate to another page. In the image below you can see whenever we click on the add to cart button, the window.localStorage API is called to persist the value.

Vue Entry

First, we include the src/vue/entry/layout/index.js in src/scripts/layout.js file



// load vue
import "@vue/entry/layout/index.js";

The src/vue/entry/layout/index.js file will look like below:



import Vue from "vue";
import Vuex from "vuex";
import store from "@vue/store";
import "document-register-element";

/**
 * import a list of custom elements / web components
 * =================================================================*/
import customElements from "./custom-elements/index.js";

/**
 * import all needed vue components as global components
 * =================================================================*/
import "./components/index.js";

/**
 * Setup Vuex
 * =================================================================*/
Vue.use(Vuex);
const vuexStore = new Vuex.Store(store);

/**
 * Register Custom Elements
 * =================================================================*/
Object.entries(customElements).forEach((component) => {
  const [name, module] = component;
  module.store = vuexStore;
  Vue.customElement(name, module);
  Vue.config.ignoredElements = [name];
});

Vue Components

To include all regular vue components we need to include all global components that will be share across all entry points. These components are mainly layout related components (if any).

In the src/vue/entry/layout/components/index.js we include global and private components



import Vue from "vue";

/**
 * Register global components
 * =================================================================*/
const requireGlobalComponent = require.context(
  "../../../components/global/",
  true,
  /\.vue$/
);
RegisterComponents(requireGlobalComponent);

/**
 * Register local components
 * =================================================================*/
const requireComponent = require.context(".", true, /\.vue$/);
RegisterComponents(requireComponent);

The RegisterComponents function is just looping over what is passed by require.context() and registers them using Vue.component()



import { upperFirst, camelCase } from "@vue/utils/Helpers.js";

function RegisterComponents(requireComponents) {
  requireComponents.keys().forEach((fileName) => {
    // get component config
    const componentConfig = requireComponents(fileName);
    // get pascal-case name of the component
    const componentName = upperFirst(
      camelCase(fileName.replace(/^\.\//, "").replace(/\.\w+$/, ""))
    );
    // register the component Globally
    Vue.component(componentName, componentConfig.default || componentConfig);
  });
}

Vue Custom Elements

Now that we have all Vue components registered, let's see how we register the custom elements.

We have two custom elements that we want to use in our Liquid files.

add to cart button
cart counter (in the header)

Inside src/vue/entry/layout/custom-elements/index.js file, we import the globally available custom elements as a list which is exported by vue/components/layout.js



// Layout specific
import layoutElements from "@vue/components/layout.js";

export default {
  ...layoutElements,
  // any local custom element here
};

The vue/components/layout.js file itself is just a list of imports, like so:



import ExampleAddToCart from "@vue/components/custom-element/ExampleAddToCart.vue";
import ExampleCartCounter from "@vue/components/custom-element/ExampleCartCounter.vue";

export default {
  "theme-add-to-cart": ExampleAddToCart,
  "theme-cart-counter": ExampleCartCounter,
};

In this case we don't have any local custom element, so it is just to import the global (layout) custom elements.

At this point our 2 custom elements can be used in Liquid files. Let's see how they look like

Add to cart button



<template>
  <div class="flex flex-col items-center justify-center">
    <h2 class="font-heading text-lg mb-4">Example Add to cart Button</h2>
    <button
      class="bg-brand-500 text-white px-4 py-2 rounded hover:bg-brand-700 transition duration-200"
      v-on:click="addOne"
    >
      Click to simulate Add to cart
    </button>
    <p class="mt-4">You have {{ count }} items in your cart.</p>
    <p class="mt-4">You can also reload this page or navigate to other pages</p>
  </div>
</template>

<script>
  import { mapMutations, mapState } from "vuex";
  export default {
    computed: {
      ...mapState("cart", ["count"]),
    },
    methods: {
      ...mapMutations("cart", ["addOne"]),
    },
  };
</script>

Here we are using mapMutations to provide this component with a way to mutate the store state and mapState to get the state.

Cart Counter

This component is just displaying the state.



<template>

  <div>({{ count }})</div>

</template>

<script>

  import { mapState } from "vuex";

export default {

    computed: {

      ...mapState("cart", ["count"]),

    },

  };

</script>

Summary

You can find the complete code I put on https://github.com/Youhan/shopify-vuejs-theme

for each Shopify template file we build a Javascript file
each Javascript file can/may include Vue custom elements
each Webpack entry point is responsible to bundle regular js files and also can include a number of custom elements.
some custom elements can be shared as global custom elements
other custom elements are local to each entry point and are only bundled in one of the js files.

Originally published at my personal blog

Shopify theme + Vuejs + Custom Elements

Alireza Jahandideh — Sun, 11 Oct 2020 03:10:06 +0000

This is a 2 part post

part 1: Idea (current)
part 2: implementation

Utilizing the power of Web Components it is now possible to create framework-agnostic complex UIs using your favourite JavaScript framework. Recently, I used vue-custom-element to build a Shopify theme. In this article which is my first ever personal blog post, I am going to explain the idea and the challenges I faced implementing it.

Why

That's mainly my personal preference to experience developing with Vuejs and moving the edges of its applications. Turns out you end up with a theme that is more flexible than a conventional Shopify theme.

The idea

Simply put, the idea is to use custom elements in Liquid template files and pass data to them as props and slots. For example, the following would be a custom element that accepts a Liquid object as the orders prop.

<my-orders orders="{{-customer.orders | json-}}"></my-orders>

Liquid is not solid

Shopify uses Liquid files which are like Blade template files if you come from a Laravel world, but the difference is that Blade is designed for developers and Liquid seems to be more end user-oriented resulting in a set of less flexible API.

Here is the minimal snippet to display cart items in templates/cart.liquid file

<table class="responsive-table">
  <thead>
    <tr>
      <th colspan="2">Product</th>
      <th>Price</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    {% for item in cart.items %}
      <tr >
        <td>
          {% if item.image != blank %}
          <a href="{{ item.url | within: collections.all }}">
            {{ item | img_url: '240x240' | img_tag: item.title }}
          </a>
          {% endif %}
        </td>
        <td>
          <a href="{{ item.url }}">{{ item.product.title }}</a>

          {% unless item.product.has_only_default_variant %}
            <p>{{ item.variant.title }}</p>
          {% endunless %}

          <p>{{ item.vendor }}</p>

          {%- assign property_size = item.properties | size -%}

          {% if property_size > 0 %}
            {% for p in item.properties %}
                {% unless p.last== blank %}
                    {{ p.first }}:
                    {% if p.last contains '/uploads/' %}
                        <a href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
                    {% else %}
                        {{ p.last }}
                    {% endif %}
                {% endunless %}
            {% endfor %}
        {% endif %}

          <a href="/cart/change?line={{ forloop.index }}&amp;quantity=0">
            <small>Remove</small>
          </a>
        </td>

        <td data-label="{{ 'cart.label.price' | t }}">
            {% if item.original_line_price != item.line_price %}
                {{ item.price | money }} <s>{{ item.original_price | money }}</s>
            {% else %}
                {{ item.price | money }}
            {% endif %}
        </td>

        <td>
          <input
            type="number"
            name="updates[]"
            id="updates_{{ item.key }}"
            value="{{ item.quantity }}"
            min="0"
          />
        </td>

        <td>
          {{ item.line_price | money }}
        </td>
      </tr>

      {% endfor %}
    </td>
  </tbody>
</table>

Boring! I feel like in 2008! Also, it is static, when a user updates the quantity the page reloads, when they remove an item, the page reloads. To add a modern look and feel to it (AKA. better UX) the only way to go for is to add jQuery or JS code to the page that prevents the form submission, communicates to Cart API and manipulate the DOM.

Another thing that I don't appreciate about Liquid is that it encourages to implement the logic alongside the view. That leads to unreadable and hard to maintain code. That is not the case in Balde, since you have the option to abstract away the logic to the controller which is not possible in Shopify.

Custom Element

Using Custom Elements it is possible to move all that into Vuejs to have some fun. In that sense, the templates/cart.liquid would become.

{% if cart.item_count > 0 %}
  <cart-items items:'{{-cart.items | json-}}'></cart-items>
{% else %}
  <p>Cart is empty</p>
{% endif %}

Awesome! Now we can handle it using Vuejs.

Vue Components

The CartItems.vue file can be registered as a Custom Element using the vue-custom-element package.

<template>
  <LineItem v-for="line in cartItems" :key="line.id" :item="line"> </LineItem>
</template>

<script>
  export default {
    props: ["items"],
    data() {
      return {
        cartItems: [],
      };
    },
    created() {
      this.cartItems = parseJson(this.items);
    },
  };
</script>

Here we accept the items as a prop and since it will be a JSON String, we need to use JSON.parse to convert it to an Object.

State Management

It would be nice to keep the cart items as an application state and make it accessible to all other components. Maybe we need to show a counter on the cart icon at the header. It could use our state and that will make it effortlessly reactive. When a user adds an item to the cart. We mutate the cart state and instantly our little counter gets updated.

To do that we can use any state management library like Vuex. We can create a Vuex instance and pass it to all registered Custom elements.

But the problem is that this is not a SPA, Vuex store is an in-memory state, that is, whenever you navigate to another Shopify route the Vuex store data are destroyed. There is a simple solution to that. We can persist state in window.LocalStorage. That way we hydrate the store from LocalStorage when Vuex is loaded.

Aside from reactivity, another benefit to this is that it provides us with a significant little UX improvement. I have noticed many users open PDP pages in New Tab while browsing the product list. Then if you go to a product page and add one to your cart, the other tabs don't have any idea about the state. So, they need to refresh again which is not going to make your UX developer happy.

Now since we are persisting the state, we can also listen to

window.addEventListener('storage', function (event) {...})

and mutate the state. Bingo! all open tabs will get updates if you add a product to the cart.

What is next

In part 2 I will explain the implementation and project structure in more detail.

Originally published at https://ajahandideh.com/shopify-theme-vuejs-custom-elements-part-1-the-idea/