Odestry
Odestry
  • 4
  • 25 668
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
มุมมอง: 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...

ความคิดเห็น

  • @jesf570
    @jesf570 15 วันที่ผ่านมา

    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?

  • @gerrcassytb
    @gerrcassytb หลายเดือนก่อน

    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?

    • @joinodestry
      @joinodestry หลายเดือนก่อน

      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.

  • @DanielDuenas-ie4rw
    @DanielDuenas-ie4rw หลายเดือนก่อน

    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.

    • @DanielDuenas-ie4rw
      @DanielDuenas-ie4rw หลายเดือนก่อน

      yes... cart transform can solve this. But, cart transform can't see when a customer is applying a discount code :(

    • @joinodestry
      @joinodestry หลายเดือนก่อน

      Yes i was going to say cart transform, what do you mean by customer is applying a discount?

  • @francismori7
    @francismori7 2 หลายเดือนก่อน

    Will that work with draft orders? Once the customer tries to checkout for instance

    • @joinodestry
      @joinodestry หลายเดือนก่อน

      Yes draft checkouts should support this now.

  • @pixobe
    @pixobe 3 หลายเดือนก่อน

    Thanks for the amazing video, may I know how we can show custom image/dynamic image on product cart page?

    • @joinodestry
      @joinodestry หลายเดือนก่อน

      Can you explain more? what do u mean by dynamic, dynamic based on what?

  • @faridmovsumov
    @faridmovsumov 3 หลายเดือนก่อน

    Tutorial was great but challenging because of unexpected 500 errors, you managed well Youness 👍

    • @joinodestry
      @joinodestry หลายเดือนก่อน

      Thanks Farid! appreciate it i will do better in the upcoming ones!

  • @happyOrpheus
    @happyOrpheus 3 หลายเดือนก่อน

    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?

    • @joinodestry
      @joinodestry หลายเดือนก่อน

      Did u check you might already have the file?

  • @legendx9277
    @legendx9277 3 หลายเดือนก่อน

    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?

    • @joinodestry
      @joinodestry หลายเดือนก่อน

      I think so, if you used webhooks?

  • @edwinhandschuh864
    @edwinhandschuh864 4 หลายเดือนก่อน

    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.

    • @joinodestry
      @joinodestry หลายเดือนก่อน

      Glad it was helpful!

  • @ShopifyyDeveloper
    @ShopifyyDeveloper 5 หลายเดือนก่อน

    Helpful video. Can you build shopify theme + Tailwind from the scratch ?

    • @joinodestry
      @joinodestry หลายเดือนก่อน

      I will think about it, thanks for feedback.

  • @casamaxstore
    @casamaxstore 6 หลายเดือนก่อน

    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?

    • @DmytroCheremnov
      @DmytroCheremnov 4 หลายเดือนก่อน

      yeah, same question, i am stuck because not on shopify plus, is there any alternatives?

    • @casamaxstore
      @casamaxstore 4 หลายเดือนก่อน

      @@DmytroCheremnov i went and got a relative in the usa to get me a stripe acc

    • @joinodestry
      @joinodestry หลายเดือนก่อน

      I think this is for Plus only as of now.

  • @wellenzhong1440
    @wellenzhong1440 6 หลายเดือนก่อน

    Great video, thank you!

    • @joinodestry
      @joinodestry หลายเดือนก่อน

      My pleasure!

  • @AliIsaiev
    @AliIsaiev 7 หลายเดือนก่อน

    Thank you very much for such content! What do you think about checking address validation?

    • @joinodestry
      @joinodestry หลายเดือนก่อน

      I will think about it!

  • @FixEcomm
    @FixEcomm 7 หลายเดือนก่อน

    wonderful .. thank you

    • @joinodestry
      @joinodestry หลายเดือนก่อน

      Thank you too!

  • @justdoitk
    @justdoitk 8 หลายเดือนก่อน

    What about creating a clean theme because right now in your tutorial have old style css from dawn and tailwind.

    • @joinodestry
      @joinodestry หลายเดือนก่อน

      Yes you are right or you can use a tailwind prefix.

  • @roysaucedo
    @roysaucedo 9 หลายเดือนก่อน

    Thank you for this! 🙏

    • @joinodestry
      @joinodestry หลายเดือนก่อน

      You're so welcome!

  • @balajid-n3i
    @balajid-n3i 9 หลายเดือนก่อน

    Hi where is the slack Url ? i didn't find it in description ?

    • @joinodestry
      @joinodestry หลายเดือนก่อน

      Yes the discord community link is here: discord.gg/E837qcudsZ

  • @rakeshrajmahakud03
    @rakeshrajmahakud03 9 หลายเดือนก่อน

    can you share your notion file

    • @joinodestry
      @joinodestry หลายเดือนก่อน

      I no longer can find it sadly, but everything is in github @odestry.

  • @FarmLinkHawaii
    @FarmLinkHawaii 10 หลายเดือนก่อน

    Super helpful video. Thanks Younes. FYI, there's a Chrome setting to disalbe the swipe left/right to go back. It annoys me, too!

  • @Moroccearn
    @Moroccearn 10 หลายเดือนก่อน

    Thank u 🤝

  • @MayankShokeen-m5f
    @MayankShokeen-m5f 11 หลายเดือนก่อน

    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?

  • @IDoShopify
    @IDoShopify 11 หลายเดือนก่อน

    How about more than 250 product

    • @joinodestry
      @joinodestry หลายเดือนก่อน

      You will need to paginate, you can check Shopify docs about it.

  • @mobc8487
    @mobc8487 11 หลายเดือนก่อน

    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 }};

  • @austriker
    @austriker 11 หลายเดือนก่อน

    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?

    • @joinodestry
      @joinodestry หลายเดือนก่อน

      Yes it was probably a mistake, you can do that and it will allow you to not run the double terminal session.

    • @gerrcassytb
      @gerrcassytb หลายเดือนก่อน

      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.

  • @austriker
    @austriker 11 หลายเดือนก่อน

    Why do you prefer vite over the default tailwind install via tailwind CLI?

    • @BF-non
      @BF-non 8 หลายเดือนก่อน

      I also wonder this.

    • @gerrcassytb
      @gerrcassytb 3 หลายเดือนก่อน

      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.

    • @joinodestry
      @joinodestry หลายเดือนก่อน

      I used vite because its fast and its a good starting point, especially when you wanna handle JS as well not only CSS.

  • @chanmyaemaung
    @chanmyaemaung 11 หลายเดือนก่อน

    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. ❤

    • @joinodestry
      @joinodestry 11 หลายเดือนก่อน

      I will like I said this one was unprepared

  • @nickdrishinski
    @nickdrishinski ปีที่แล้ว

    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?

    • @joinodestry
      @joinodestry 11 หลายเดือนก่อน

      Handled in the theme using Ajax Cart API

  • @omermuneer
    @omermuneer ปีที่แล้ว

    Amazing!

  • @marcosboav
    @marcosboav ปีที่แล้ว

    Thanks for sharing!

    • @joinodestry
      @joinodestry ปีที่แล้ว

      Thanks for watching!

  • @igetpaidtocode
    @igetpaidtocode ปีที่แล้ว

    The most valuable course on shopify functions right now! and its free thanks blanklob!

  • @josephandres4324
    @josephandres4324 ปีที่แล้ว

    you saved my life, thank you

  • @mohamedhassentetbirt4585
    @mohamedhassentetbirt4585 ปีที่แล้ว

    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?

    • @joinodestry
      @joinodestry หลายเดือนก่อน

      Thats opinions tailwind is popular and solve many issues especially styles composability.

  • @benhasanaltun
    @benhasanaltun ปีที่แล้ว

    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]

    • @joinodestry
      @joinodestry ปีที่แล้ว

      You can either use tailwind prefixes or rename the Dawn grid from ".grid" to ".grid-layout"

    • @benhasanaltun
      @benhasanaltun ปีที่แล้ว

      @@joinodestry I already solve it using prefix. I just wanted to know how you handled it. thanks.

    • @BF-non
      @BF-non 8 หลายเดือนก่อน

      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

  • @ryanjohnson6834
    @ryanjohnson6834 ปีที่แล้ว

    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?

    • @joinodestry
      @joinodestry ปีที่แล้ว

      This will work seamlessly with Github Integration. just like before.

  • @muhammadtalhaamjad4631
    @muhammadtalhaamjad4631 ปีที่แล้ว

    Youness One thing to say Wonderful and bundle of thanks you made it easy.