Shopify Javascript

Job ID: 36896439

Budget: $10 – $30 USD

I am looking for a skilled Shopify developer with experience in Javascript to help me with my project.

We want to customize shopify product page as following

For example, there is two products we call

-Product “A”
-Sample Product “B”

(Because we offer sample fabric to customer before they buy fabric)

* Display Sample Product "B" on the Product "A" page using the metafield. Place it above the "Add to Cart" button.

* We already created a metafield for Product "A" . Use the following details for the metafield:
* Namespace: theme
* Key: fbt
* Type: product (referring to Sample Product "B")


* The displayed Sample Product "B" should include the following information:
* Product image
* Title
* Price
* "Add to Swatch" button

* Ensure that the "Add to Cart" button for Product "A" and the "Add to Swatch" button for Sample Product "B" function separately:
- When the "Add to Cart" button for Product "A" is clicked, it should add Product "A" to both the AJAX Cart and the Main Cart.
- When the "Add to Swatch" button for Sample Product "B" is clicked, it should add Sample Product "B" to both the AJAX Cart and the Main Cart.

* Disable the "Add to Swatch" button in the Product page if Sample Product "B" is already added to the cart.
* If the Sample Product "B" is removed from either the AJAX Cart or the Main Cart, the "Add to Swatch" button should become enabled again.

(Because we only want to customer add the swatch 1 per item)
Related categories: JavaScript Shopify Templates Shopify