- 4
- 25 668
Odestry
United States
เข้าร่วมเมื่อ 20 พ.ค. 2022
A home for builders, developers, and entrepreneurs in the Shopify space making cool stuff that matters.
How to build Shopify cart and checkout validation functions
In this detailed workshop, We walk you through the intricacies of creating functions for checkout and cart validation on Shopify. Learn about the challenges of validation, the significance of server-side validations, and how to utilize Shopify's powerful API for enhancing e-commerce functionality.
Understand the difference between client-side and server-side validations, set up a partner's account, implement validation functions using TypeScript, and explore the benefits of integrating with the Shopify ecosystem. The workshop also touches on using GraphQL for headless storefronts and accessing localization and metafields for advanced configurations. Join the community on GitHub and Discord for more insights and support.
・ Chapters
00:00 Introduction and workshop overview
00:07 Challenges in workshop production
01:16 Community and resources
01:58 Introduction to checkout and cart validation
02:33 Understanding validation
04:18 Setting up your Shopify partner account
04:38 Creating your first validation function
05:36 Building and testing the function
16:37 Deploying and activating the function
19:59 Using the function in a storefront
25:59 Debugging the storefront
26:07 Handling variant IDs and errors
26:50 Cart validation and error messages
28:33 Exploring cart permalinks
30:19 Customizing cart and checkout validation
32:04 API References and troubleshooting
35:30 Implementing buyer identity rules
44:42 Localization and metafields
52:18 Deploying and versioning extensions
53:26 Conclusion and community engagement
This workshop by Odestry provides a comprehensive guide on building functions for cart and checkout validation in Shopify. The presenter explains the challenges faced due to the editing process, emphasizing the value of content over animations. The script covers creating validation functions using Shopify's API, underscoring the importance of server-side validation over client-side validation for resilience and consistency. It includes a step-by-step setup in a Shopify development environment, illustrating how to use TypeScript, how to initialize and deploy extensions, and how to handle customer-specific logic and configurations. Key concepts like using Shopify's CLI for building and deploying functions, accessing GraphQL for input and outputs, navigating the Shopify Partner Dashboard, and managing cart validations across different platforms, including storefront APIs, are also discussed.
Happy Coding!
・Keep in touch with us
odestry.com
・Join the community
discord.gg/E837qcudsZ
joinodestry
Understand the difference between client-side and server-side validations, set up a partner's account, implement validation functions using TypeScript, and explore the benefits of integrating with the Shopify ecosystem. The workshop also touches on using GraphQL for headless storefronts and accessing localization and metafields for advanced configurations. Join the community on GitHub and Discord for more insights and support.
・ Chapters
00:00 Introduction and workshop overview
00:07 Challenges in workshop production
01:16 Community and resources
01:58 Introduction to checkout and cart validation
02:33 Understanding validation
04:18 Setting up your Shopify partner account
04:38 Creating your first validation function
05:36 Building and testing the function
16:37 Deploying and activating the function
19:59 Using the function in a storefront
25:59 Debugging the storefront
26:07 Handling variant IDs and errors
26:50 Cart validation and error messages
28:33 Exploring cart permalinks
30:19 Customizing cart and checkout validation
32:04 API References and troubleshooting
35:30 Implementing buyer identity rules
44:42 Localization and metafields
52:18 Deploying and versioning extensions
53:26 Conclusion and community engagement
This workshop by Odestry provides a comprehensive guide on building functions for cart and checkout validation in Shopify. The presenter explains the challenges faced due to the editing process, emphasizing the value of content over animations. The script covers creating validation functions using Shopify's API, underscoring the importance of server-side validation over client-side validation for resilience and consistency. It includes a step-by-step setup in a Shopify development environment, illustrating how to use TypeScript, how to initialize and deploy extensions, and how to handle customer-specific logic and configurations. Key concepts like using Shopify's CLI for building and deploying functions, accessing GraphQL for input and outputs, navigating the Shopify Partner Dashboard, and managing cart validations across different platforms, including storefront APIs, are also discussed.
Happy Coding!
・Keep in touch with us
odestry.com
・Join the community
discord.gg/E837qcudsZ
joinodestry
มุมมอง: 7 763
วีดีโอ
How to setup Tailwind CSS with Shopify themes
มุมมอง 4.6Kปีที่แล้ว
In this guide, We demonstrate how to set up Tailwind CSS with Shopify themes. We addresse the different methods available and recommends using Vite for the setup. The video covers the necessary prerequisites such as Node.js and the Shopify CLI, and guides viewers through cloning a Shopify Dawn theme, setting up a Node project, and creating configuration files for Tailwind, PostCSS, and Vite. Ad...
How to connect Retool with Shopify to extend admin with Retool components
มุมมอง 1.5Kปีที่แล้ว
In this guide, we walk you through the process of connecting Retool, a tool for creating internal applications quickly, with Shopify. The guide covers creating a custom app in Shopify, configuring admin API scopes, generating an access token, and setting up the connection in Retool using GraphQL. You'll learn how to retrieve and display Shopify product data in a Retool table, along with creatin...
How to use Shopify CLI for theme development
มุมมอง 12Kปีที่แล้ว
In this workshop, we explore the new Shopify CLI 3.x, covering its latest features and improvements over the previous versions. We'll discuss the migration process, especially focusing on the changes from Ruby to TypeScript, and how to implement the latest version on various operating systems (Mac, Linux, Windows). The workshop also dives into the new commands, plugin support, and authenticatio...
What about all the included css files from Dawn for example or whatever theme you're using. Is it a matter of slowly building out with tailwind and removing old styles from the theme as you go?
Thanks for the video. 12:08 I'm curious-why not just set font-size: 100%; on the root element to align with Tailwind's default rem settings? Is there an advantage to using the additional package instead?
In both ways, tailwind ships rem based units, setting font-size to 100% will increase the size of theme components drastically and will cause visual UI inconsistencies.
Super helpful! I'm wondering if i can use this checkout-validation template to set a new price for every cartLineitem. For example, if a buyer have 1 quantity of item A, it shows the base price. But, if the buyer have 2x or more, it shows basePrice with 10% off.
yes... cart transform can solve this. But, cart transform can't see when a customer is applying a discount code :(
Yes i was going to say cart transform, what do you mean by customer is applying a discount?
Will that work with draft orders? Once the customer tries to checkout for instance
Yes draft checkouts should support this now.
Thanks for the amazing video, may I know how we can show custom image/dynamic image on product cart page?
Can you explain more? what do u mean by dynamic, dynamic based on what?
Tutorial was great but challenging because of unexpected 500 errors, you managed well Youness 👍
Thanks Farid! appreciate it i will do better in the upcoming ones!
Hello, thank you for the video! Still, I keep receiving this error after the project launch and an automatically-created styles2.css file in the assets folder: 'ERROR >> update assets/styles.css: source sequence is illegal/malformed utf-8' The contents of the old styles.css file crack up. Do you have any idea how to fix this?
Did u check you might already have the file?
Hello, I realize this is an old video, I do have a question though. Would this work if I wanted to be able to change prices once and have them reflect on both shopify and retool?
I think so, if you used webhooks?
This is far and away the most comprehensive explanation of how to use cli, git repo, and the full development cycle video. You even explained the way to authenticate. Thank you so much.
Glad it was helpful!
Helpful video. Can you build shopify theme + Tailwind from the scratch ?
I will think about it, thanks for feedback.
Hi, can I do this without a Shopify Plus plan? It's 2500 USD a month and i'm not willing to spend that amount. Or does creating a customized client side checkout require it?
yeah, same question, i am stuck because not on shopify plus, is there any alternatives?
@@DmytroCheremnov i went and got a relative in the usa to get me a stripe acc
I think this is for Plus only as of now.
Great video, thank you!
My pleasure!
Thank you very much for such content! What do you think about checking address validation?
I will think about it!
wonderful .. thank you
Thank you too!
What about creating a clean theme because right now in your tutorial have old style css from dawn and tailwind.
Yes you are right or you can use a tailwind prefix.
Thank you for this! 🙏
You're so welcome!
Hi where is the slack Url ? i didn't find it in description ?
Yes the discord community link is here: discord.gg/E837qcudsZ
can you share your notion file
I no longer can find it sadly, but everything is in github @odestry.
Super helpful video. Thanks Younes. FYI, there's a Chrome setting to disalbe the swipe left/right to go back. It annoys me, too!
Thank u 🤝
Hey, the video was quite informative and helpful! its just that I'm unable to implement the global/shop level metaobjects being used inside the function logic for a cart checkout function itself. If you could please provide some help with that?
How about more than 250 product
You will need to paginate, you can check Shopify docs about it.
Hey, is there a way to access the product metafield object inside javascript? When I try a simple click event to change some css, nothing happens when I use the metafield object in an "if" statement. When I try it without the metafield object, the javacript runs smoothly. Am I messing up creating the variable using the object? <script> var productMetafield = {{ product.metafields.custom.title.value }}; var productName = {{ product.id }} if (productMetafield == productName ) { document.querySelectorAll('#randomImage).forEach( e => { e.addEventListener('click', () => { e.style.display = "none"; }) }) } </script> I've also tried these other two ways but still had an error. Thanks var productMetafield = {{ product.metafields.custom.title.value | json }}; var productMetafield = {{ product.metafields.custom.title | json }};
at 15:50 can you just add this script `npm run shopify:dev && npm run watch` instead of using that third party package to run multiple scripts?
Yes it was probably a mistake, you can do that and it will allow you to not run the double terminal session.
Motivation of the npm-run-all package: Cross platform. We sometimes use & to run multiple command in parallel, but cmd.exe (npm run-script uses it by default) does not support the &. Half of Node.js users are using it on Windows, so the use of & might block contributions. npm-run-all --parallel works well on Windows as well.
Why do you prefer vite over the default tailwind install via tailwind CLI?
I also wonder this.
Since we're using Vite as the build tool, as he said in 6:16, it's ideal to watch for changes during development and minify the code for production.
I used vite because its fast and its a good starting point, especially when you wanna handle JS as well not only CSS.
I have come across a valuable resource on TH-cam that offers a tutorial on building a Shopify App. As a Shopify Theme developer, I would greatly appreciate the opportunity to create an exceptional app. I would appreciate it if you could consider creating a new tutorial that focuses on building a useful app rather than using example apps like Shopify's documentation does. ❤
I will like I said this one was unprepared
Awesome video. I was curious how the error messages automatically show up in the theme UI. I get the API response being returned, but how is the theme automatically showing the error message on the product and cart pages?
Handled in the theme using Ajax Cart API
Amazing!
Thanks for sharing!
Thanks for watching!
The most valuable course on shopify functions right now! and its free thanks blanklob!
you saved my life, thank you
I don't get it, what's the benefit ? I think the strong thing about tailwind is its utility classes that can be outputted depending on your usage only, so if you use only 10 classes, it'll output only those 10 classes for you to work. But with the way i saw it in the video, you built it before adding any style? meaning you sent a predefined CSS that'll always get outputted no matter what you add, right? So my question is what's the benefit? be it a performance decision or dev experience decision, can you elaborate on why this can be useful?
Thats opinions tailwind is popular and solve many issues especially styles composability.
Youness, Great video, thank you! Well, there are some areas that are in conflict, such as the grid, how did you solve them? For example, it can be seen from the video that the grid structure below is broken. [Screenshot: pasteboard.co/lDp3W7LT1P2K.jpg]
You can either use tailwind prefixes or rename the Dawn grid from ".grid" to ".grid-layout"
@@joinodestry I already solve it using prefix. I just wanted to know how you handled it. thanks.
I also get it to play nice with Dawn with prefixes. Would love to not use them tho. Do you figure out another way of handling this?@@benhasanaltun
How will this theme structure work with the Shopify/GitHub integration? Will any of my files be overwritten when changes made in the Shopify editor are pushed to GitHub?
This will work seamlessly with Github Integration. just like before.
Youness One thing to say Wonderful and bundle of thanks you made it easy.
Thanks!