Shopify Liquid Development - Using Javascript Frameworks (React, Vue, Svelte, etc)

Поділитися
Вставка
  • Опубліковано 14 жов 2024

КОМЕНТАРІ • 19

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

    Amazing. Looking for more video like this. Please create something project basis.
    Like pull pages content, and show them using react. Or create a mega menu using react js.

  • @hatefate5036
    @hatefate5036 6 місяців тому +3

    Awesome video, thanks for your work!
    Could you please show how to defer loading Shopify apps that significantly degrade speedscore :( and recently there was a wpm file for trackers/pixels that degraded the value even more...
    thank you so much

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

      It depends how the app injects its code into the store. If it does it by adding a script in content_for_header unfortunately there isn't much that can be done at the moment aside from checking the app's options and see if they support lazy loading or give you the option to inject the script manually.

  • @uclong1176
    @uclong1176 20 днів тому

    bro, thank you so muchhhh

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

    Thanks a lot for these kind of videos men! i am learning a lot 🚀, if you don't mind i have two questions: 1. Do you really consider this is necessary/used or most of the developments are made with the existing shopify ecosistem (liquid, web components, secion render api) ?and 2. Which do you reccomend more, based on your experience ?

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

      Glad you are finding them useful!
      1. Using Javascript frameworks on Liquid themes is usually an exception when you have a section or two that's have a lot of complexity. In most cases you shouldn't need to reach out for tools like this at all.
      2. In my experience sticking with vanilla Javascript has been better as it is usually more performant and simpler to work with because it doesn't require a build step, but depending on the type of projects you are working on you might end up using frameworks more often.

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

    Thanks for the content. I didn't really understood why you have removed the client script and how exactly each file contains it after you generated the intersection observer

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

      The output Javascript files are importing the client script already so it wasn't necessary to import it again from the site.

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

    thank you for sharing, amazing video

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

    Don't you think it makes more sense to use Hydrogen Storefront? As a Front End Developer, I think Shopify's Hydrogen is very logical for this complex structure.

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

      It depends on the project, you might be asked to work on an existing theme and in such cases suggesting a Hydrogen rebuild is often unfeasible. Also the CMS experience with Hydrogen isn't as polished as the Liquid Theme Editor yet so some merchants might still prefer going with Liquid just because of that.

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

      I will make a theme from scratch and sell it. I guess it compiles the liquid theme. And then I can use Liquid for revisions.

  • @uclong1176
    @uclong1176 11 днів тому

    In the cart drawer update section, if the cart already has an item, when you click the add to cart button, the cart drawer will appear and the new item has been added to the cart.
    But in case the cart does not have any items, when clicking add to cart, the cart drawer appears but does not show the new item added to the cart.
    Can you help me fix this error?

    • @uclong1176
      @uclong1176 10 днів тому

      fixed my issue by added this line of code:
      if (
      cartDrawer &&
      cartDrawer.classList.contains("is-empty")
      ) {
      cartDrawer.classList.remove("is-empty");
      }

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

    Thanks dude - your content helped me secure my latest job. I’ll definitely be using it again in the future 😊

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

    In that way i use alpine is lightweight and minimal framework for this case of use.

  • @nguyenthanh2524
    @nguyenthanh2524 6 місяців тому +1

    Can you share link github project thanks