Add to cart Popup-notification editing

[mediland_uk]

My store developed with Dawn theme and the name is Mediland Pharmacy. 
Url- MEDILAND PHARMACY

I edited with this code like the screenshot, but i want to know that where is the results show or this form data stored with databse? If no i need to want that.

This is the edited code. 

{% comment %}
Renders cart notification

Accepts:
- color_scheme: {String} sets the color scheme of the notification (optional)
- desktop_menu_type: {String} passes the desktop menu type which allows us to use the right css class (optional)

Usage:
{% render 'cart-notification' %}
{% endcomment %}

<cart-notification>
<div class="cart-notification-wrapper{% if desktop_menu_type != 'drawer' %} page-width{% endif %}">
<div
id="cart-notification"
class="cart-notification focus-inset{% if color_scheme %} color-{{ color_scheme }} gradient{% endif %}"
aria-modal="true"
aria-label="{{ 'general.cart.item_added' | t }}"
role="dialog"
tabindex="-1"
>
<div class="cart-notification__header">
<h2 class="cart-notification__heading caption-large text-body">
{%- render 'icon-checkmark' -%}
{{ 'general.cart.item_added' | t }}
</h2>
<button
type="button"
class="cart-notification__close modal__close-button link link--text focus-inset"
aria-label="{{ 'accessibility.close' | t }}"
>
<svg class="icon icon-close" aria-hidden="true" focusable="false">
<use href="#icon-close">
</svg>
</button>
</div>
<div id="cart-notification-product" class="cart-notification-product"></div>
<div class="cart-notification__question">
<p class="cart-notification__question-text">
{{ 'general.cart.general_medication_question' | t }}
</p>
<div class="cart-notification__radio-group">
<label class="cart-notification__radio-option">
<input
type="radio"
name="medication_for"
value="for_me"
class="cart-notification__radio-input"
required
/>
{{ 'general.cart.general_medication_option_ye' | t }}
</label>
<label class="cart-notification__radio-option">
<input
type="radio"
name="medication_for"
value="for_someone_else"
class="cart-notification__radio-input"
required
/>
{{ 'general.cart.general_medication_option_no' | t }}
</label>
</div>
</div>
<div class="cart-notification__form-group">
<label for="age" class="cart-notification__label">
{{ 'general.cart.general_age_question' | t }}
</label>
<input
type="number"
id="age"
name="age"
class="cart-notification__input"
placeholder="{{ 'general.cart.general_age_placeholder' | t }}"
required
/>
</div>
<div class="cart-notification__form-group">
<label for="symptoms" class="cart-notification__label">
{{ 'general.cart.general_symptoms_question' | t }}
</label>
<textarea
id="symptoms"
name="symptoms"
class="cart-notification__textarea"
placeholder="{{ 'general.cart.general_symptoms_placeholder' | t }}"
required
></textarea>
</div>
<div class="cart-notification__question">
<p class="cart-notification__question-text">
{{ 'general.cart.general_medical_conditions_question_two' | t }}
</p>
<div class="cart-notification__radio-group">
<label class="cart-notification__radio-option">
<input
type="radio"
name="medical_conditions"
value="yes"
class="cart-notification__radio-input"
required
/>
{{ 'general.cart.general_medical_conditions_option_yes_two' | t }}
</label>
<label class="cart-notification__radio-option">
<input
type="radio"
name="medical_conditions"
value="no"
class="cart-notification__radio-input"
required
/>
{{ 'general.cart.general_medical_conditions_option_no_two' | t }}
</label>
</div>
</div>
<div class="cart-notification__links">
<a
href="{{ routes.cart_url }}"
id="cart-notification-button"
class="button button--secondary button--full-width"
>
{{- 'general.cart.view_empty_cart' | t -}}
</a>
<form action="{{ routes.cart_url }}" method="post" id="cart-notification-form">
<button class="button button--primary button--full-width" name="checkout">
{{ 'sections.cart.checkout' | t }}
</button>
</form>
<button type="button" class="link button-label">{{ 'general.continue_shopping' | t }}</button>
</div>
</div>
</div>
</cart-notification>

{% style %}
.cart-notification {
display: none;
}

.cart-notification__question,
.cart-notification__form-group {
margin: 20px 0;
}

.cart-notification__question-text {
font-size: 16px;
margin-bottom: 10px;
}

.cart-notification__radio-group {
display: flex;
flex-direction: column;
}

.cart-notification__radio-option {
margin-bottom: 10px;
font-size: 14px;
}

.cart-notification__radio-input {
margin-right: 8px;
}

.cart-notification__label {
font-size: 14px;
margin-bottom: 5px;
display: block;
}

.cart-notification__input,
.cart-notification__textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}

.cart-notification__input {
font-size: 14px;
}

.cart-notification__textarea {
font-size: 14px;
min-height: 80px;
}
.cart-notification {
height: 65vh;
overflow-y: scroll;
}
{% endstyle %}

[saim007]

@mediland_uk I am unable to see the result as per your screenshot, without getting the result I am unable to find out the solution. here it is showing like this - 

[mediland_uk]

Hi Saim007, I will share the preview link here- https://vulq2cdzmnge5trn-71103938882.shopifypreview.com

[saim007]

@mediland_uk It is just a questions inputs it will not save anywhere.

[mediland_uk]

I want to save the data. How to do that? add the code here?
Client reference site is this - Co-codamol 8/500mg - 32 Tablets | Pharmacy Prime
Could you please go through the url and there is a popup comes while add to cart


Now i edited the code, Because i wanted the popup only comes with medicine collection. So that i added some changes but the popup was not showing now- 

{% comment %}
Renders cart notification specifically for the "medicines" collection
and asks for user consent to share data with neenu@intertoons.com.

Usage:
{% render 'cart-notification' %}
{% endcomment %}

{% if collection.handle == 'Medicines' %}
<cart-notification>
<div class="cart-notification-wrapper{% if desktop_menu_type != 'drawer' %} page-width{% endif %}">
<div
id="cart-notification"
class="cart-notification focus-inset{% if color_scheme %} color-{{ color_scheme }} gradient{% endif %}"
aria-modal="true"
aria-label="{{ 'general.cart.item_added' | t }}"
role="dialog"
tabindex="-1"
>
<div class="cart-notification__header">
<h2 class="cart-notification__heading caption-large text-body">
{%- render 'icon-checkmark' -%}
{{ 'general.cart.item_added' | t }}
</h2>
<button
type="button"
class="cart-notification__close modal__close-button link link--text focus-inset"
aria-label="{{ 'accessibility.close' | t }}"
>
<svg class="icon icon-close" aria-hidden="true" focusable="false">
<use href="#icon-close">
</svg>
</button>
</div>
<div id="cart-notification-product" class="cart-notification-product"></div>

<div class="cart-notification__question">
<p class="cart-notification__question-text">
{{ 'general.cart.general_medication_question' | t }}
<br>
(Sharing data with neenu@intertoons.com)
</p>
<div class="cart-notification__radio-group">
<label class="cart-notification__radio-option">
<input
type="radio"
name="share_data"
value="yes"
class="cart-notification__radio-input"
required
/>
{{ 'general.cart.general_medication_option_yes' | t }}
</label>
<label class="cart-notification__radio-option">
<input
type="radio"
name="share_data"
value="no"
class="cart-notification__radio-input"
required
/>
{{ 'general.cart.general_medication_option_no' | t }}
</label>
</div>
</div>

<div class="cart-notification__form-group">
<label for="age" class="cart-notification__label">
{{ 'general.cart.general_age_question' | t }}
</label>
<input
type="number"
id="age"
name="age"
class="cart-notification__input"
placeholder="{{ 'general.cart.general_age_placeholder' | t }}"
required
/>
</div>
<div class="cart-notification__form-group">
<label for="symptoms" class="cart-notification__label">
{{ 'general.cart.general_symptoms_question' | t }}
</label>
<textarea
id="symptoms"
name="symptoms"
class="cart-notification__textarea"
placeholder="{{ 'general.cart.general_symptoms_placeholder' | t }}"
required
></textarea>
</div>
<div class="cart-notification__question">
<p class="cart-notification__question-text">
{{ 'general.cart.general_medical_conditions_question_two' | t }}
</p>
<div class="cart-notification__radio-group">
<label class="cart-notification__radio-option">
<input
type="radio"
name="medical_conditions"
value="yes"
class="cart-notification__radio-input"
required
/>
{{ 'general.cart.general_medical_conditions_option_yes_two' | t }}
</label>
<label class="cart-notification__radio-option">
<input
type="radio"
name="medical_conditions"
value="no"
class="cart-notification__radio-input"
required
/>
{{ 'general.cart.general_medical_conditions_option_no_two' | t }}
</label>
</div>
</div>
<div class="cart-notification__links">
<a
href="{{ routes.cart_url }}"
id="cart-notification-button"
class="button button--secondary button--full-width"
>
{{- 'general.cart.view_empty_cart' | t -}}
</a>
<form action="{{ routes.cart_url }}" method="post" id="cart-notification-form">
<button class="button button--primary button--full-width" name="checkout">
{{ 'sections.cart.checkout' | t }}
</button>
</form>
<button type="button" class="link button-label">{{ 'general.continue_shopping' | t }}</button>
</div>
</div>
</div>
</cart-notification>

{% style %}
.cart-notification {
display: none;
}

.cart-notification__question,
.cart-notification__form-group {
margin: 20px 0;
}

.cart-notification__question-text {
font-size: 16px;
margin-bottom: 10px;
}

.cart-notification__radio-group {
display: flex;
flex-direction: column;
}

.cart-notification__radio-option {
margin-bottom: 10px;
font-size: 14px;
}

.cart-notification__radio-input {
margin-right: 8px;
}

.cart-notification__label {
font-size: 14px;
margin-bottom: 5px;
display: block;
}

.cart-notification__input,
.cart-notification__textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}

.cart-notification__input {
font-size: 14px;
}

.cart-notification__textarea {
font-size: 14px;
min-height: 80px;
}

.cart-notification {
height: 65vh;
overflow-y: scroll;
}
{% endstyle %}
{% endif %}