Contact person: Business Client

Phone:Show

Email:Show

Location: vilnius, Lithuania

Budget: Recommended by industry experts

Time to start: As soon as possible

Project description:
"Dynamic Offer Block with Real-Time Availability Check
Platform: Shopify (Online Store 2.0 Theme) Required Skills: Liquid, HTML, CSS, Vanilla JavaScript (or modern framework knowledge), Shopify AJAX API.
Scenario
We need to create a special, highly visible block intended to encourage the buyer to add a product to their cart. This block must be displayed on all product pages, but its content should dynamically react to the inventory level and the current cart contents.
Programming Requirements
1. Liquid Offer Block Creation
Create a new Liquid snippet (filename: [login to view URL]) that needs to be inserted into the [login to view URL] section file above the "Add to Cart" button.
Liquid Logic: The block must display one of three distinct messages, based on the currently selected product variant (using product.selected_or_first_available_variant):
A) If inventory is low (<= 5 units):
Message: "Only {{ variant.inventory_quantity }} left in stock! Grab yours before it's gone!"
B) If the item is already in the cart:
Message: "This item is already in your cart! Proceed to checkout."
C) Standard Message (inventory > 5 units and not in cart):
Message: " Add to cart now and qualify for expedited shipping!"
2. Dynamic Updates (JavaScript / AJAX)
You must ensure this block updates its information in real-time without a page refresh, responding to two key events:
A) Variant Change: When the buyer selects a different product variant (e.g., Size S to M), the block must check the new variant's inventory and update the message (switching between A, B, or C).
B) Successful Cart Addition: When the item is successfully added to the cart (even if the buyer stays on the product page), the block must automatically switch to Message B (as the item is now in the cart). This requires handling the successful response from the /cart/[login to view URL] AJAX request.
Visual Requirements (CSS)
Use distinct colors (CSS) to reflect the urgency/status of the messages:
A (Low Stock): Yellow / Orange background color.
B (In Cart): Bright Green background color.
C (Standard): Blue or a neutral background color.
Submission Requirements
Provide the complete [login to view URL] code.
all JavaScript code responsible for the dynamic updates and AJAX handling.
Explain clearly where and how this code was integrated into the main theme files." (client-provided description)