You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: .cursor/rules/cookbook-recipe-subscriptions.mdc
+59-12
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,9 @@ globs: templates/**/*
4
4
alwaysApply: false
5
5
---
6
6
7
-
This rule describes how to implement "`Subscriptions (subscriptions)`" in a Hydrogen storefront. Below is a "recipe" that contains the steps to apply to a basic Hydrogen skeleton template to achieve the desired outcome.
7
+
# Overview
8
+
9
+
This rule describes how to implement "Subscriptions (subscriptions)" in a Hydrogen storefront. Below is a "recipe" that contains the steps to apply to a basic Hydrogen skeleton template to achieve the desired outcome.
8
10
The same logic can be applied to any other Hydrogen storefront project, adapting the implementation details to the specific needs/structure/conventions of the project, but it's up to the developer to do so.
9
11
10
12
If there are any prerequisites, the recipe below will explain them; if the user is trying to implement the feature described in this recipe, make sure to prominently mention the prerequisites and any other preliminary instructions, as well as followups.
@@ -15,15 +17,60 @@ If the user is asking on how to implement the feature from scratch, please first
15
17
16
18
Please note that the recipe steps below are not necessarily ordered in the way they should be executed, as it depends on the user's needs and the specific details of the project. The recipe steps descriptions should allow you to understand what is required to be done in a certain order and what is not. Remember that file names in the recipe are related to the Hydrogen skeleton template, not the user's project, so make sure to adapt the file names to the user's project.
17
19
20
+
# User Intent Recognition
21
+
<user_queries>
22
+
- How do I add subscription options to my Hydrogen store?
23
+
- I want to let customers subscribe to products in my Shopify Hydrogen site
24
+
- Can you help me implement recurring orders in Hydrogen?
25
+
- How to show subscription pricing on product page in Hydrogen?
26
+
- Need help adding a 'Subscribe and Save' option to my products
27
+
- How do I modify the cart to show subscription details?
28
+
- Making a subscription box with Hydrogen and Shopify
29
+
- I've set up selling plans in Shopify admin, how do I display them in Hydrogen?
30
+
- Help implementing Shopify subscriptions in my Hydrogen storefront
31
+
- My selling plans aren't showing up in my Hydrogen store
32
+
- How to calculate and display subscription discounts in Hydrogen?
33
+
- Adding monthly subscription billing to Hydrogen products
34
+
- Implementing 'delivery every X weeks' options in Hydrogen
35
+
- How to let customers choose between one-time purchase and subscription?
36
+
- Setting up recurring delivery options on my Hydrogen product page
37
+
</user_queries>
38
+
39
+
# Troubleshooting
40
+
<troubleshooting>
41
+
- **Issue: Subscription options not appearing on product page**
42
+
**Solution**: Verify that you've created selling plans in Shopify admin and attached them to the product. Also ensure the `sellingPlanGroups` fragment is included in your product query.
43
+
- **Issue: Price calculations for subscriptions appear incorrect**
44
+
**Solution**: Check the selling plan price adjustments in your query. Make sure you're handling all three types of price adjustments: fixed amount, fixed price, and percentage.
45
+
- **Issue: Getting "Cannot read properties of undefined" when accessing selling plan data**
46
+
**Solution**: Add null checks when accessing selling plan data, as not all products have selling plans. Use optional chaining (`?.`) and nullish coalescing (`??`) operators.
47
+
- **Issue: Subscription options appear but selecting them doesn't affect the price**
48
+
**Solution**: Ensure the `SellingPlanPrice` component correctly calculates discounted prices based on the price adjustment type.
49
+
- **Issue: Selected subscription doesn't persist when navigating back to product**
50
+
**Solution**: Make sure your URL includes the `selling_plan` parameter and that your product route correctly processes this parameter.
51
+
- **Issue: Subscription details not appearing in cart**
52
+
**Solution**: Verify that your cart query includes the `sellingPlanAllocation` fragment and that the Cart component displays this information.
53
+
- **Issue: Subscribe button disabled even though selling plans are available**
54
+
**Solution**: Check the condition in your AddToCartButton component. It should only be disabled if no selling plan is selected when selling plans are available.
55
+
- **Issue: Multiple subscription groups causing UI confusion**
56
+
**Solution**: Implement a tabbed interface or clear labeling if your products have multiple subscription group options.
57
+
- **Issue: CSS for subscription selector not applying**
58
+
**Solution**: Ensure you've added the `selling-plan.css` import and that the stylesheet is correctly linked in your component.
59
+
- **Issue: Cannot read `sellingPlanGroups.nodes` of undefined**
Here's the subscriptions recipe for the base Hydrogen skeleton template:
19
66
20
-
--- BEGIN RECIPE DATA ---
67
+
<recipe_implementation>
21
68
22
69
## Description
23
70
24
-
This folder contains an example implementation of [subscriptions](https://shopify.dev/docs/apps/selling-strategies/subscriptions) for Hydrogen. It shows how to display selling plans on a product page.
71
+
This folder contains an example implementation of [subscriptions](mdc:https:/shopify.dev/docs/apps/selling-strategies/subscriptions) for Hydrogen. It shows how to display selling plans on a product page.
Copy file name to clipboardexpand all lines: cookbook/recipes/subscriptions/recipe.json
+61-4
Original file line number
Diff line number
Diff line change
@@ -1,11 +1,68 @@
1
1
{
2
2
"title": "Subscriptions",
3
3
"image": null,
4
+
"userQueries": [
5
+
"How do I add subscription options to my Hydrogen store?",
6
+
"I want to let customers subscribe to products in my Shopify Hydrogen site",
7
+
"Can you help me implement recurring orders in Hydrogen?",
8
+
"How to show subscription pricing on product page in Hydrogen?",
9
+
"Need help adding a 'Subscribe and Save' option to my products",
10
+
"How do I modify the cart to show subscription details?",
11
+
"Making a subscription box with Hydrogen and Shopify",
12
+
"I've set up selling plans in Shopify admin, how do I display them in Hydrogen?",
13
+
"Help implementing Shopify subscriptions in my Hydrogen storefront",
14
+
"My selling plans aren't showing up in my Hydrogen store",
15
+
"How to calculate and display subscription discounts in Hydrogen?",
16
+
"Adding monthly subscription billing to Hydrogen products",
17
+
"Implementing 'delivery every X weeks' options in Hydrogen",
18
+
"How to let customers choose between one-time purchase and subscription?",
19
+
"Setting up recurring delivery options on my Hydrogen product page"
20
+
],
21
+
"troubleshooting": [
22
+
{
23
+
"issue": "Subscription options not appearing on product page",
24
+
"solution": "Verify that you've created selling plans in Shopify admin and attached them to the product. Also ensure the `sellingPlanGroups` fragment is included in your product query."
25
+
},
26
+
{
27
+
"issue": "Price calculations for subscriptions appear incorrect",
28
+
"solution": "Check the selling plan price adjustments in your query. Make sure you're handling all three types of price adjustments: fixed amount, fixed price, and percentage."
29
+
},
30
+
{
31
+
"issue": "Getting \"Cannot read properties of undefined\" when accessing selling plan data",
32
+
"solution": "Add null checks when accessing selling plan data, as not all products have selling plans. Use optional chaining (`?.`) and nullish coalescing (`??`) operators."
33
+
},
34
+
{
35
+
"issue": "Subscription options appear but selecting them doesn't affect the price",
36
+
"solution": "Ensure the `SellingPlanPrice` component correctly calculates discounted prices based on the price adjustment type."
37
+
},
38
+
{
39
+
"issue": "Selected subscription doesn't persist when navigating back to product",
40
+
"solution": "Make sure your URL includes the `selling_plan` parameter and that your product route correctly processes this parameter."
41
+
},
42
+
{
43
+
"issue": "Subscription details not appearing in cart",
44
+
"solution": "Verify that your cart query includes the `sellingPlanAllocation` fragment and that the Cart component displays this information."
45
+
},
46
+
{
47
+
"issue": "Subscribe button disabled even though selling plans are available",
48
+
"solution": "Check the condition in your AddToCartButton component. It should only be disabled if no selling plan is selected when selling plans are available."
49
+
},
50
+
{
51
+
"issue": "Multiple subscription groups causing UI confusion",
52
+
"solution": "Implement a tabbed interface or clear labeling if your products have multiple subscription group options."
53
+
},
54
+
{
55
+
"issue": "CSS for subscription selector not applying",
56
+
"solution": "Ensure you've added the `selling-plan.css` import and that the stylesheet is correctly linked in your component."
57
+
},
58
+
{
59
+
"issue": "Cannot read `sellingPlanGroups.nodes` of undefined",
"description": "This folder contains an example implementation of [subscriptions](https://shopify.dev/docs/apps/selling-strategies/subscriptions) for Hydrogen. It shows how to display selling plans on a product page.\n\n",
Copy file name to clipboardexpand all lines: cookbook/src/lib/llms.ts
+27-4
Original file line number
Diff line number
Diff line change
@@ -137,7 +137,12 @@ function renderRecipeRuleBlocks(
137
137
138
138
// preamble
139
139
mdParagraph(
140
-
`This rule describes how to implement "\`${recipe.title} (${recipeName})\`" in a Hydrogen storefront. Below is a "recipe" that contains the steps to apply to a basic Hydrogen skeleton template to achieve the desired outcome.
140
+
`
141
+
# Overview
142
+
143
+
This rule describes how to implement "${
144
+
recipe.title
145
+
} (${recipeName})" in a Hydrogen storefront. Below is a "recipe" that contains the steps to apply to a basic Hydrogen skeleton template to achieve the desired outcome.
141
146
The same logic can be applied to any other Hydrogen storefront project, adapting the implementation details to the specific needs/structure/conventions of the project, but it's up to the developer to do so.
142
147
143
148
If there are any prerequisites, the recipe below will explain them; if the user is trying to implement the feature described in this recipe, make sure to prominently mention the prerequisites and any other preliminary instructions, as well as followups.
@@ -148,11 +153,29 @@ If the user is asking on how to implement the feature from scratch, please first
148
153
149
154
Please note that the recipe steps below are not necessarily ordered in the way they should be executed, as it depends on the user's needs and the specific details of the project. The recipe steps descriptions should allow you to understand what is required to be done in a certain order and what is not. Remember that file names in the recipe are related to the Hydrogen skeleton template, not the user's project, so make sure to adapt the file names to the user's project.
150
155
151
-
Here's the ${recipeName} recipe for the base Hydrogen skeleton template:`,
0 commit comments