Integrating on Hydrogen (Remix)

Setup

Repository [Hydrogen Playground]

Linked is the example repository that follows the instructions from this article. This example repository is built from the latest version of Shopify's Hydrogen Skeleton Template v2024.7.10 (as of 10/16/24).

Step 1 - Update Product and Variant queries

We should retrieve the necessary selling plan information from the product and variant queries. In /app/routes/products.$handle.jsx, update PRODUCT_FRAGMENT and PRODUCT_VARIANT_FRAGMENT to include the following fields:

PRODUCT_FRAGMENT

p...
requiresSellingPlan
sellingPlanGroups(first: 3) {
 nodes {
  appName
  name
  sellingPlans(first: 30) {
   nodes {
   id
   name
   description
   recurringDeliveries
    options {
    name
    value
   }
  }
 }
}

PRODUCT_VARIANT_FRAGMENT

...
sellingPlanAllocations(first: 30) {
 nodes {
  sellingPlan {
   id
   name
   priceAdjustments {
    orderCount
    adjustmentValue {
     ... on SellingPlanFixedAmountPriceAdjustment {
      adjustmentAmount {
       amount
       currencyCode
      }
     }
     ... on SellingPlanPercentagePriceAdjustment {
      adjustmentPercentage
     }
     ... on SellingPlanFixedPriceAdjustment {
      price {
       amount
       currencyCode
      }
     }
    }
   }
   options {
    name
    value
   }
  }
  checkoutChargeAmount {
   amount
   currencyCode
  }
  priceAdjustments {
  price {
   amount
   currencyCode
  }
  compareAtPrice {
   amount
   currencyCode
  }
  perDeliveryPrice {
   amount
   currencyCode
  }
  unitPrice {
   amount
   currencyCode
  }
 }
}

Step 2 - Add the plan picker code

In /app/components folder create a JSX file - PlanPicker.jsx with the following code from the repository: https://github.com/skio-org/hydrogen-remix-playground/blob/main/app/components/PlanPicker.jsx

Step 3 - Integrate the plan picker in the product form

In /app/components/ProductForm.jsx do the following:

Add state management to handle the selected subscription plan as shown below:

const [selectedSellingPlan, setSelectedSellingPlan] = useState(null);

Render the plan picker within the product form:

<>
 selectedVariant={selectedVariant}
 selectedSellingPlan={selectedSellingPlan}
 onPlanChange={(sp) => setSelectedSellingPlan(sp)}
/>

Include the selected selling plan ID in the payload of the form:

<>
 disabled={!selectedVariant || !selectedVariant.availableForSale}
 onClick={() => {
  open('cart');
 }}
 lines={
  selectedVariant
   ? [
    {
     merchandiseId: selectedVariant.id,
     quantity: 1,
     ...(selectedSellingPlan && {
      sellingPlanId: selectedSellingPlan.id,
     }),
     selectedVariant,
    },
   ]
  : []
 }
>
 {selectedVariant?.availableForSale ? 'Add to cart' : 'Sold out'}

Step 4 - Update Cart query to include subscription info

In the /app/libs/fragments.js file, update all the CartLine fragments to include the following fields:

sellingPlanAllocation {
 sellingPlan {
  id
  name
  options {
   name
   value
  }
 }
}

Step 5 - Add selling plan label to Cart's Line Item component

In the /app/components/CartLineItem.jsx, include the sellingPlanAllocation field in the component's context:

 const {id, sellingPlanAllocation, merchandise} = line;

Then, in the component's view, render the selling plan label as follows:

<ul>
 {selectedOptions.map((option) => (
  <li key={option.name}>
   <small>
    {option.name}: {option.value}
   </small>
  </li>
 ))}
 {sellingPlanAllocation ? (
   <li>
    <small>{sellingPlanAllocation.sellingPlan.name}</small>
   </li>
 ) : null}
</ul>

Step 6 - Customer Portal

The Skio Customer Portal, like many other Shopify apps, utilizes Shopify's App Proxy system to load the customer portal. There are two options that Skio can offer at the moment:

1. Load the app proxy within the Liquid environment of your store.
   A subdomain should be setup that directs to the liquid version of the storefront (ie: account.mystore.com or shop.mystore.com). When a customer is navigating to manage their subscription they should be directed to this subdomain (ie: shop.mystore.com/a/account/login). A redirect should be setup on the liquid theme as well to handle any other traffic that may need to be directed back to the headless storefront!

2. Load the customer portal on any desired page of your headless store through an iframe. 
   Documentation on that is here - /help/docs/how-do-i-render-the-skio-login-customer-portal-in-an-iframe

As always if you have any questions or need any assistance with setup, please reach out to migrations@skio.com for more information or assistance!

Result