Odestry
Odestry
  • 15
  • 41 554
How to build Shopify cart & checkout validation Functions
Welcome to an exciting journey into the world of @Shopify Checkout Extensibility! In this video, we'll explore one of the most significant advancements in checkout extensibility: Functions. These functions are a game-changer for developers, allowing you to enhance the logic behind Shopify's backend.
Before functions, modifying Shopify's backend logic was a challenge, especially for public apps. Developers had to use DIY solutions. But now, with functions, you can effortlessly customize the Shopify experience for your users.
But what exactly is validation, and why is it important? In this tutorial, we'll explain the concept of validation. Validation is the process of verifying user input to ensure it meets the required criteria. We'll demonstrate how client-side validation is performed within the checkout using the Checkout UI Extension. For example, you'll see how we prevent users from proceeding if they enter an age below 16. This is validation in action!
While client-side validation is essential, we'll also highlight the importance of server-side validation, especially for the checkout process. Server-side validation is more reliable, robust, and synchronizes seamlessly across all client devices. In this video, we'll guide you through the power of server-side validation and how to implement it using functions.
Happy Coding!
Keep in touch with me
weodestry
github.com/odestry
#shopifyfunctions
Переглядів: 7 111

Відео

How to setup Tailwind CSS with Shopify themes
Переглядів 4,1 тис.Рік тому
Learn how to configure Tailwind CSS with your Shopify themes in this step-by-step guide. We'll explore different setup options such as using Tailwind CLI, PostCSS, or just CDN, and settle on what I think is the most efficient way (ViteJS). This tutorial is suitable for beginners and intermediate users as we'll start from scratch. Ressources: - Repository: github.com/blanklob/dawn-with-tailwindc...
Your Shopify store into a Desktop & Mobile app in under 2 minutes using Progressive Web Apps
Переглядів 2,6 тис.Рік тому
Ready to turn your @shopify store into a desktop and mobile app in under two minutes? Watch as we demonstrate how you can transform your e-commerce platform into a Progressive Web App (PWA), a process that's as simple as it is transformative. The video walks you through the process from start to finish. It all starts on your Shopify dashboard, where you’ll be guided through the settings and cus...
GDPR Ready Google Analytics 4 Setup with new Shopify integration
Переглядів 397Рік тому
Explore our informative and easy-to-follow video on upgrading your @shopify store to Google Analytics 4 (GA4)! As Shopify no longer supports Universal Analytics, it's vital to make the shift to GA4. Don't worry, this task can be completed in less than 20 seconds! Our video guides you through two simple steps. Firstly, we explain how to remove all existing analytics from your Shopify store, pref...
Shopify URL handles for each language using Translate & Adapt
Переглядів 476Рік тому
Welcome to today's video where we explore the exciting new localization updates that have been introduced to @shopify This episode provides a detailed walk-through of the significant improvements made to the 'Translate & Adapt' app, which is Shopify's recommended application for translation. Starting with default products in my demo store, I illustrate how these products can now be individually...
An early overview and how to setup Shopify's Game-Changing one-page Checkout
Переглядів 2,4 тис.Рік тому
In today's video, we're going to dive deep into the highly requested, much-awaited feature update from @shopify that took the E-commerce world by storm in 2023! We will walk you through the new checkout extensibility feature of Shopify that provides a seamless one-page checkout experience. This revolutionary feature is available now in a developer preview, and you can access it with a developer...
Part 5 - Launching the Theme Development Server using Shopify CLI 3.0 (Shopify Follow-Up Course)
Переглядів 1,4 тис.Рік тому
Hey, thanks again for watching 😊, I hope you liked this new vibe, in this video we launched the development server using Shopify CLI 3.0 and created all theme folders, from assets all the way to locales. We will discover all of this in this episode. This Tutorial is Unsponsored and free and will always be free, so If you enjoy It, please give a big Thumbs up and Subscribe! Good Luck on your jou...
How to CONNECT Retool with Shopify and Extend the Shopify Admin with Retool components
Переглядів 1,5 тис.Рік тому
Hey, thanks again for watching 😊, I hope you liked the video, That was a way to connect Shopify store and Retool. This Tutorial is Unsponsored and free and will always be free, so If you enjoy It please give a big Thumbs up and Subscribe! Good Luck on your journey to becoming an awesome Shopify Developer. Join Us among other Shopify Developers and DTC brand owners on the Blanklob Community Disc...
How to use Shopify CLI 3.0 for Theme Development and deploy themes to different stores.
Переглядів 11 тис.Рік тому
Hey, thanks again for watching 😊, I hope you liked the video, that was my overview of the Shopify CLI 3.0 and how to use it with themes and to deploy themes programmatically to multiple stores, please keep in mind that you can still use Shopify Github integration to handle deployment. I also introduced Shopify CLI plugins, a cool feature to extend it and make it more personalized depending on y...
Part 4 - Creating the Theme Config folder and Global Theme settings (Shopify Follow-Up Course)
Переглядів 1,1 тис.Рік тому
Hey, thanks again for watching 😊, I hope you liked this new vibe and new format, I just wanna say thanks for choosing this course. There are so many Shopify Developers that make themes but don’t know how everything is wired, how themes interact with each other, what are the current limitations of the Online Store channel etc. We will discover all of this in this episode. This Tutorial is Unspon...
Part 3 - What is a Shopify Theme and HOW Does It Work? (Shopify Follow-Up Course)
Переглядів 1,2 тис.Рік тому
Hey, thanks again for watching 😊, I hope you liked this new vibe and new format, I just wanna say thanks for choosing this course. There are so many Shopify Developers that make themes but don’t know how everything is wired, how themes interact with each other, what are the current limitations of the Online Store channel etc. We will discover all of this in this episode. But first what is a Sho...
Part 2 - How to Setup The New Shopify OS 2.0 Development Tools 2022 (Shopify Follow-Up Course)
Переглядів 1,6 тис.Рік тому
Hey, thanks again for watching 😊, I hope you liked this new vibe and new format, I just wanna say thanks for choosing this course, the second episode is about the tools and the developer toolkit that will be using in order to build our Shopify Theme from Scratch, these tools will help us be more productive and produce better and height quality code, starting with just general dev tools like Git...
Part 1 - Why You Should BUILD on Shopify and How to Create a Dev Store? (Shopify Follow-Up Course)
Переглядів 2,8 тис.Рік тому
Hey thanks for watching 😊 this is the first episode of the series called Building a Shopify Theme From Scratch, in this episode we talked about why you should choose Shopify as a commerce platform, and how to set up your partners account and your first development store, please remember that this is just the beginning, this first episode is 100% no code ut the upcoming episode is where we will ...
How to add custom GIF-like Videos to your Shopify Theme?
Переглядів 2,6 тис.2 роки тому
This is the most recommended way to add custom videos apart from the video section that uses embedded video from either UA-cam or Vimeo, the advantage to this method is that you will have more control, and it's also optimized for accessibility and performance. You can add videos for your product in two ways: uploading a video file, or embedding a UA-cam or Vimeo video link. If you're uploading ...
Shopify's upcoming Content Platform is a game-changer
Переглядів 1,2 тис.2 роки тому
Shopify's upcoming Content Platform is a game-changer

КОМЕНТАРІ

  • @francismori7
    @francismori7 15 днів тому

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

  • @pixobe
    @pixobe Місяць тому

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

  • @faridmovsumov
    @faridmovsumov Місяць тому

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

  • @happyOrpheus
    @happyOrpheus Місяць тому

    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?

  • @legendx9277
    @legendx9277 2 місяці тому

    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?

  • @edwinhandschuh864
    @edwinhandschuh864 2 місяці тому

    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.

  • @MaxHidalgoWCR
    @MaxHidalgoWCR 2 місяці тому

    I know PWA's allow Push notifications. Can you show us how to do that?

    • @rwzplayer4585
      @rwzplayer4585 2 місяці тому

      Bro, Did it work for you?

    • @MaxHidalgoWCR
      @MaxHidalgoWCR 2 місяці тому

      @@rwzplayer4585 Yeah it worked you have to add the manifest.json.liquid file

  • @MudassarSultan-ph9rv
    @MudassarSultan-ph9rv 3 місяці тому

    how can i covert mobile app into shopify store

  • @ShopifyyDeveloper
    @ShopifyyDeveloper 3 місяці тому

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

  • @SwitchKartofficial
    @SwitchKartofficial 3 місяці тому

    bro pls help it not showing install application button

  • @casamaxstore
    @casamaxstore 4 місяці тому

    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?

    • @user-dg4de6zw4t
      @user-dg4de6zw4t 2 місяці тому

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

    • @casamaxstore
      @casamaxstore 2 місяці тому

      @@user-dg4de6zw4t i went and got a relative in the usa to get me a stripe acc

  • @shivamjha8985
    @shivamjha8985 4 місяці тому

    the application mode is not visible for us can you please let me know how to enable it. I have used a theme and can't find the application mode

  • @huseinaskraba5320
    @huseinaskraba5320 4 місяці тому

    Yes..."products" thats what i searched for....it is not possible youre right.. :/

  • @conversinist
    @conversinist 4 місяці тому

    King a sat

  • @wellenzhong1440
    @wellenzhong1440 4 місяці тому

    Great video, thank you!

  • @user-bb8mi3qy5j
    @user-bb8mi3qy5j 5 місяців тому

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

  • @nihaljain4641
    @nihaljain4641 5 місяців тому

    Hey bro from where i find enable application mode please help me out

  • @devygram
    @devygram 5 місяців тому

    What is the theme name you are using on this website?

  • @FixEcomm
    @FixEcomm 5 місяців тому

    wonderful .. thank you

  • @suliemanafzal2623
    @suliemanafzal2623 5 місяців тому

    it shows the enable application panel in the theme but it does not show the application button or install button please help it is a bit urgent

  • @aguadecielord
    @aguadecielord 5 місяців тому

    So does the Google App automatically use the Shopify privacy settings? I put collect after consent but not sure if its working.

  • @justdoitk
    @justdoitk 6 місяців тому

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

  • @hemsterscom
    @hemsterscom 6 місяців тому

    we are not getting install promt can you help us

    • @suliemanafzal2623
      @suliemanafzal2623 5 місяців тому

      were you able to fix that because I cant see it aswell

  • @roysaucedo
    @roysaucedo 7 місяців тому

    Thank you for this! 🙏

  • @user-ec9gg2ei8q
    @user-ec9gg2ei8q 7 місяців тому

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

  • @tamatar235
    @tamatar235 7 місяців тому

    I love your content 💕

  • @rakeshrajmahakud03
    @rakeshrajmahakud03 7 місяців тому

    can you share your notion file

  • @FarmLinkHawaii
    @FarmLinkHawaii 8 місяців тому

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

  • @nightyyy-u2n
    @nightyyy-u2n 8 місяців тому

    Thank u 🤝

  • @user-fk9gb7xu8g
    @user-fk9gb7xu8g 9 місяців тому

    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 9 місяців тому

    How about more than 250 product

  • @mobc8487
    @mobc8487 9 місяців тому

    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 9 місяців тому

    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?

  • @austriker
    @austriker 9 місяців тому

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

    • @Jan-jf4th
      @Jan-jf4th 6 місяців тому

      I also wonder this.

    • @gerrcassytb
      @gerrcassytb Місяць тому

      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.

  • @chanmyaemaung
    @chanmyaemaung 9 місяців тому

    I have come across a valuable resource on UA-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. ❤

    • @weodestry
      @weodestry 9 місяців тому

      I will like I said this one was unprepared

  • @nickdrishinski6507
    @nickdrishinski6507 10 місяців тому

    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?

    • @weodestry
      @weodestry 9 місяців тому

      Handled in the theme using Ajax Cart API

  • @omermuneer
    @omermuneer 10 місяців тому

    Amazing!

  • @marcosboav
    @marcosboav 10 місяців тому

    Thanks for sharing!

    • @weodestry
      @weodestry 10 місяців тому

      Thanks for watching!

  • @igetpaidtocode
    @igetpaidtocode 10 місяців тому

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

  • @josephandres4324
    @josephandres4324 10 місяців тому

    you saved my life, thank you

  • @proonty
    @proonty 11 місяців тому

    Dope🎉

  • @codezeloss
    @codezeloss 11 місяців тому

    Thank you for this amazing tutorial!!! Hope to see more ASAP!

  • @VABianne_2023
    @VABianne_2023 11 місяців тому

    Nope! cant see it on mine. I am using Dawn theme. Hopefully it gets available soon.

    • @jeryhamed7362
      @jeryhamed7362 10 місяців тому

      ça n'est pas valable pour tout le monde au jour d'aujourd'hui :)

  • @civivva4501
    @civivva4501 11 місяців тому

    I added my email to that page so that I could sign up to one page checkout over 2 weeks ago NOTHING.

  • @vaibhavkumar7058
    @vaibhavkumar7058 11 місяців тому

    Thanks mate it worked after making the manifest file in Shopify you did not covered it in the video pls make it happen if you can ❤

    • @umairtahir5700
      @umairtahir5700 11 місяців тому

      Hi brother. Can you please guide me how can i enable this

  • @ahmedabdel1649
    @ahmedabdel1649 11 місяців тому

    i don't see anything, could you help me?

  • @umairtahir5700
    @umairtahir5700 11 місяців тому

    Hey Thanks for the video, I did same all the things that you mention in the video but PWA is not working

  • @mohamedhassentetbirt4585
    @mohamedhassentetbirt4585 11 місяців тому

    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?

  • @RedMokaa
    @RedMokaa Рік тому

    i dont have anything you mentioned in this vid lmao. and bro ur ai thing struggles alot

    • @weodestry
      @weodestry Рік тому

      What AI thing? 1PC is still in early access so you will have to wait a bit.

    • @RedMokaa
      @RedMokaa Рік тому

      @@weodestry the ai voice

    • @weodestry
      @weodestry Рік тому

      @@RedMokaa Thats my voice haha there is no AI here haha

    • @RedMokaa
      @RedMokaa Рік тому

      @@weodestrysounds like it

    • @CJ-qi4jz
      @CJ-qi4jz 11 місяців тому

      @RedMokaa 😂😂😂

  • @seankennedy7970
    @seankennedy7970 Рік тому

    Any chance of this continuing? I’m bored of customising Dawn and was loving the inspiration this series gave me to develop a theme from scratch