How to create Shopify Ajax-carts using "Liquid Ajax Cart" Javascript library

[Music] hello everyone i'm going to show you how to create the same adject scart functionality for shopify using liquid adjective library i'm gonna create a new environment with a free shopify theme that is called minimal this theme is good for demonstration because it doesn't have any edges card functionality out of the box okay the theme is installed let's see how it looks this is the card page this is how a product goes to the card [Music] this is how we change the quantity of a card item so let's add a new section for our adjectives card let's go to the edit code sections add new section let's name it my card i'm gonna add some basic code for the card section look through card items link to a product title price per item minus one button current quantity plus one button for the plus and minus buttons i'm using the car change url route with the item key and the new quantity parameters so these buttons will work even without javascript and let's show the final price for an item the section is ready we need to include it in the theme.liquid template somewhere under the footer done let's check [Music] okay this is our section with two unlimited products in the card let's add one more product to the card make sure it displays correct data okay now it's three let's check minus and plus buttons two three again okay now we have a simple section still without adjects and i want to place the section to the right side so it will be easier to work with i'm gonna add a flex wrapper to split the page to the main content and the sidebar for the card css file for custom styles and a horizontal line between card items okay now looks better it's time to include liquid edges card library and identify all the things first we need to upload the liquidascart javascript file into the assets folder and include it in the theme.liquid template file uploaded and included now we need to add the data adjects card section attribute to our card section so that liquidates card identifies it that's it let's check okay the plus and minus buttons work without page reloading let's check product forms now we have two unlimited products in the cart let's add more okay works now let's improve user experience by highlighting the card when it's updating i'm gonna use the request in progress body css class that appears when an adjects card api request is in progress so i'm gonna make the card items container a little transparent when it is getting updated okay it works let it the same with the product forms there is a form in progress css class that appears in a product form when it is submitted it's better you can use these css classes to show your own loading indicators now let's take a look at the card counter in the header it is not getting updated when the card is changed i'm gonna fix it using the bind state data attribute with the card item count value i should apply this attribute to an html tag where i want to show the card item count value [Music] good is changing now let's add the remove button for the card it is the same as the plus and minus buttons but the quantity parameter is zero okay after removing all the items take a look at the item's counter it shows zero i want to hide the counter if it is zero let's find the css class of the counter this is it to hide and show the counter i'm gonna use the js adjectives card empty and js adjects card not empty css classes let's try to add product to the card to see if it works okay if you click on the card link it will lead you to the card page but i want this link to hide and show the adjects card instead let's use the toggle class button data attribute for it [Music] we need to apply the attribute to this card link and provide any css classes for example js my card open and this class will be added to the body tag when a user click on the link now let's write some css hide the card sidebar by default show the card sidebar when our css class is applied [Music] good it works now let's go to the limited product that have only three items in a stock if i try to add the product to card more than three times nothing happens but i want to show the error messages using the form error data attribute all i need to do is to put a container with this attribute in the product form let's put it right after the submit button now let's try to add more product to the card okay now we can see an error message that comes from shopify let's remove the product from the card and try again okay good within these 10 minutes we have created the standard adjust card functionality without writing any javascript code liquidates card also provides javascript functions to work with the card state and make calls to the shopify card agix api please check out all the other features on the documentation website that's all thanks for watching [Music] you

Channel: Evgeniy Mukhamedjanov

Views: 441

Keywords:

Id: 5Dl9Wsmq130

Length: 11min 23sec (683 seconds)

Published: Mon Oct 18 2021