On form submit add product to cart

Highlighted
New Member
7 0 0

I'm adding a gift boxing section to my cart page, where I want to collect information about what the gift box name is, what products from the cart are included and if they want a gift note. I have built the form which collects the cart attribute information, but I need it to add value to cart as we charge £4 for gift boxing, currently, it just collects the information. I need the form to have a submit button which when clicked adds value to the total cart value, either adding the value directly or adding a product to cart on submit. I also allow multiple boxes to be added so each time a section is added and the submit is clicked it adds 4 pounds.

 

{% for item in cart.items limit:1%}
 {% if item.product.tags contains 'Can Be_Gift Boxed' %} 
<div class="gift-box-section">
      
      <button type="button" id="myCheck" onclick="myFunction()" name="attributes[Gift Box My Items]" value="Gift Box My Items"{% if cart.attributes["Gift Box My Items"] == "Gift Box My Items" %} checked{% endif %} class="Button Button--primary Button--full" data-text-swap="Cancel Gift boxing">
              <span>Gift Box My Items</span>
      </button>
      
      <div class="giftboxsection" id="giftboxsection" style="display:none">
        
        <input type="hidden" name="id" value="{{ gift-box-1 }}" />
  <input min="1" max="1" type="hidden" id="quantity" name="quantity" value="1"/>
        <div class="giftbox duplicate-sections">
          <div class="form-section">
          <h2 class="muli Heading u-h4">Gift Boxing</h2> 
 
          <div class="giftproducts">
 
            <p class="cart-attribute__field">
              <label for="gift-box-name" style="display:block;padding:10px 0;">Name:</label>
              <input id="gift-box-name" class="Form__Textarea" style="width:150px;"type="text" name="attributes[Gift Box Name]" placeholder="e.g Birthday Gift" value="{{ cart.attributes["Gift Box Name"] }}">
            </p>
 
            <p class="cart-attribute__field">
              <label>Which items would you like inside? ( Max 3 items )</label><br>
              {%- for line_item in cart.items -%}
                {% if item.product.tags contains 'Can Be_Gift Boxed' %}
              <input required class="required single-checkbox" type="checkbox" name="attributes[Which items would you like inside?]" value="{{ line_item.product.title }}"{% if cart.attributes["Which items would you like inside?"] == "{{ line_item.product.title }}" %} checked{% endif %}>
              <span><img class="CartItem__Image" src="{{ line_item.image | img_url: '60x' }}" alt="{{ line_item.image.alt | escape }}"></span>
              <span>{{ line_item.product.title }}</span><br>
                {% endif %}
              {%- endfor -%}
            </p>
 
          </div>
 
          <div class="giftnote">
 
            <p class="cart-attribute__field">
              <label>Would you like to add a free gift note?</label><br>
              <input required class="required single-checkbox2" type="checkbox" id="mycheckbox" name="attributes[Would you like to add a free gift note?]" value="Yes please"{% if cart.attributes["Would you like to add a free gift note?"] == "Yes please" %} checked{% endif %}> <span>Yes please</span><br>
              <input required class="required single-checkbox2" type="checkbox" name="attributes[Would you like to add a free gift note?]" value="No thank you"{% if cart.attributes["Would you like to add a free gift note?"] == "No thank you" %} checked{% endif %}> <span>No thank you</span><br>
            </p>
 
            <div class="" id="mycheckboxdiv" style="display:none;">
              
            <p class="cart-attribute__field">
              <label>Type of note</label><br>
              <select required class="required" id="type-of-note" name="attributes[Type of note]">
                <option value="Happy Birthday"{% if cart.attributes["Type of note"] == "Happy Birthday" %} selected{% endif %}>Happy Birthday</option>
                <option value="Congratulations"{% if cart.attributes["Type of note"] == "Congratulations" %} selected{% endif %}>Congratulations</option>
                <option value="Thank You"{% if cart.attributes["Type of note"] == "Thank You" %} selected{% endif %}>Thank You</option>
              </select>
            </p>
 
            <p class="cart-attribute__field" >
              <label for="to">To:</label>
              <input required class="required Form__Textarea" style="width:150px;" placeholder="e.g Matthew" id="to" type="text" name="attributes[To]" value="{{ cart.attributes["To"] }}">
            </p>
 
            <p class="cart-attribute__field">
               <label for="from">From:</label>
               <input required class="required Form__Textarea" style="width:150px;" placeholder="e.g Lisa" id="from" type="text" name="attributes[From]" value="{{ cart.attributes["From"] }}">
            </p>
 
            <p class="cart-attribute__field">
               <label for="message">Message:</label>
               <textarea required class="required Form__Textarea" style="width:300px; min-height:100px;" placeholder="e.g Happy Birthday Matthew! Wishing you all the best and have a wonderful day." id="message" name="attributes[Message]">{{ cart.attributes["Message"] }}</textarea>
            </p> 
 
            </div>
          
         </div>
            <a href="#" class="remove">Remove Section</a>
          </div>
        </div>
          <a href="#" class="addsection" data-section='0'>Add Section</a>
      </div>
      
</div>
 {% endif %}
{% endfor %}

<script>
function myFunction() {
var x = document.getElementById("giftboxsection");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
$(document).ready(function() {
$('#mycheckbox').change(function() {
$('#mycheckboxdiv').toggle();
});
});
$("button").on("click", function() {
var el = $(this);
if (el.text() == el.data("text-swap")) {
el.text(el.data("text-original"));
} else {
el.data("text-original", el.text());
el.text(el.data("text-swap"));
}
});

$('.single-checkbox').on('change', function() {
if($('.single-checkbox:checked').length > 3) {
this.checked = false;
}
});

$('.single-checkbox2').on('change', function() {
if($('.single-checkbox2:checked').length > 1) {
this.checked = false;
}
});

//define template
var forms = [];

$('.duplicate-sections .form-section').each(function(){
forms.push($(this).clone());
})

//define counter
var sectionsCount = 1;

//add new section
$('body').on('click', '.addsection', function() {
var template = forms[$(this).data('section')];

//increment
sectionsCount++;

//loop through each input
var section = template.clone().find(':input').each(function(){

//set id to store the updated section number
var newId = this.id + sectionsCount;

//update for label
$(this).prev().attr('for', newId);

//update id
this.id = newId;

}).end()

//inject new section
.appendTo($(this).prev('.duplicate-sections'));
return false;
});

//remove section
$('.duplicate-sections').on('click', '.remove', function() {
//fade out section
$(this).closest('.form-section').fadeOut(300, function(){
$(this).closest('.form-section').empty();
});
return false;
});

</script>

0 Likes
Shopify Partner
84 16 20

Hello @alfie24 

 

I understand your issue it required custom coding to add that extra product for the gift box. Please Inbox me


Best Regards
Parth Bhut

............................................................................................................................

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: parth.bhut143@outlook.com
Skype: parthbhut7

0 Likes