Hackdays 22 GWP Theme App Extension

{% comment %} Renders gift with purchase products that merchant selects {% endcomment %}

<style>
.gallery__item:hover {
    cursor: pointer;
}
</style>

<script>
function addToCart(variant_id) {
    let formData = {
    'items': [{
    'id': variant_id,
    'quantity': 1
    }]
    };
    fetch(window.Shopify.routes.root + 'cart/add.js', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(formData)
    })
    .then(response => {
    return response.json();
    window.reload()
    })
    .catch((error) => {
    console.error('Error:', error);
    });
}

</script>

{% assign gwp_minimum = block.settings.gwp_threshold | times: 100 %}
{% assign cart_value = cart.items_subtotal_price %}

{% comment %} <p>Cart total: {{ cart.items_subtotal_price | money }} {% endcomment %}
{% if block.settings.gwp_toggle %}
    <p>Minimum spend for GWP = {{ block.settings.gwp_threshold | times: 100 | money }}
    {% comment %} <p>Cart value = {{ cart.items_subtotal_price | money }}</p> {% endcomment %}

    {% if gwp_minimum <= cart_value %}
    {% comment %} User has met the threshold {% endcomment %}
        <h4>{{ block.settings.gwp_choose_message }}</h4>
        <div class="card__content">
        <div class="card__information">
        <image-gallery data-id="{{ block.id }}">
  {%- if block.settings.heading -%}
    <h2>{{ block.settings.heading }}</h2>
  {%- endif -%}

  {%- if block.settings.description -%}
    <p>{{ block.settings.description }}</p>
  {%- endif -%}

        {% for product in block.settings.product_list %}
        <button class="gallery__item" style="display:inline-block; width:15%" onclick=addToCart({{product.selected_or_first_available_variant.id }})>
           <p> <img src="{{ product | image_url: width: 1024 }}"  width="100" height="100"></p>
                          {{ product.title }}
        </button>
        {% endfor %}

    {% else %}
        {% comment %} Show how much left to unlock GWP {% endcomment %}
        <p>{{ block.settings.gwp_message }}{{ gwp_minimum| minus: cart_value | money}}
    {% endif %}

{% endif %}

{{ "shopify-app-logo.png" | asset_url| img_tag }}

{% comment %} {% render "app_snippet" %} {% endcomment %}
{% schema %}
  {
    "name": "GWP App Extension",
    "target": "section",
    "stylesheet": "app.css",
    "javascript": "app.js",
    "settings": [
        { "label": "Gift Product(s)", "id": "product_list", "type": "product_list" },
        { "label" : "Enable Gift with Purchase", "id" : "gwp_toggle", "type" : "checkbox" },
        { "label" : "Gift with Purchase threshold ($)", "id" : "gwp_threshold", "type" : "number" },
        { "label" : "Gift with purchase message", "id" : "gwp_message", "type" : "textarea", "default": "Spend left to unlock purchase:" },
        { "label" : "Choose your gift message", "id" : "gwp_choose_message", "type" : "textarea", "default": "Choose your free girrft 🎉" }
    ]
  }
{% endschema %}