Line item properties for customisable product not reflecting

QuirkyCat05
New Member
1 0 0

Hi there, 

I've been trying to include customisation options for my product, and followed this link in setting up the code for the product detail page:

Please see the mock up of the PDP that I'm trying to create: 

PDP.JPG

Even though I've successfully included all 3 customisation options (1) Monogram, 2) Font type, 3) Thread Colour), for some odd reason, only 1 line item property is captured and reflected on the cart page and this will always be the last item property. See below screengrab which only shows "Thread Colour" even though all 3 customisations were included. 

 

name="properties[Thread Colour]" --> For example, if i change the "properties" to a random string of text like asdsad, the line item property displayed on the cart page and captured with the order is only for Font Type. 

 
 
 

 

 

 

Code for the product detail snippet that I've included for the product customisation:

 

<div style="margin-bottom: 20px;">
					{% if template contains 'custom-mask1' %}
     
					<p class="line-item-property__field" style="display: flex; flex-direction: column;">
                      	<label for="monogram">MONOGRAM (Up to 3 letters)</label>
                      	<input required id="monogram" style="width:120px; max-width:100%;" type="text" name="properties[Monogram]" maxlength="3"></br>
          			</p>
          			<p class="line-item-property__field" style="display: flex; flex-direction: column;">
                      	<label>FONT</label>
                      	<span style="vertical-align: middle; margin-bottom: 20px;">
                          <input required type="radio" style="vertical-align: middle;" name="properties[Font]" value="Font Option 1"> Serif: Times New Roman<br>
  						  <input required type="radio" style="vertical-align: middle;" name="properties[Font]" value="Font Option 2"> San-serif: Frontage Outline<br>
                      	</span>
                    </p>
      				<p class="line-item-property__field" style="display: flex; flex-direction: column;">
                      	<label class="ep_block">THREAD COLOUR</label>
                      	<select required id="thread-colour" name="properties[Thread Colour]">
                        	<option value="Option 1">Option 1</option>
                        	<option value="Option 2">Option 2</option>
                        	<option value="Option 3">Option 3</option>
                      	</select>
					</p>
					{% endif %}
      			</div>

 

 

 

Code for the entire chunk of form section:

 

       <div class="border-top border--dashed my-25"></div>
        <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
            <meta itemprop="url" content="{{ url }}">
            <meta itemprop="sku" content="{{ sku }}">
            <meta itemprop="priceCurrency" content="{{ shop.currency }}">
            <meta itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
            <link itemprop="availability" href="http://schema.org/{% if current_variant.available %}InStock{% else %}OutOfStock{% endif %}">
            {% form "product", product, id: null, class: "d-flex flex-column w-100 m-0", data-js-product-form: '' %}
                <input type="hidden" name="variant_id" value="{{ current_variant.id }}" data-js-product-variant-input>
                {%- if show_options and show_custom_options -%}
                    {%- unless product.has_only_default_variant -%}
                        <div class="product-page-info__options mb-15">
                            {%- unless is_quick_view -%}
                                {%- assign trigger_id = 'footbar' -%}
                            {%- endunless -%}
                            {% include 'product-get-options' with options_type: 2 options_show_title: true change_history: true %}
                        </div>
                    {%- endunless -%}
                {%- endif -%}
                {%- if show_button_add_to_cart or show_options -%}
                    <div class="product-page-info__variants mb-15{% if show_options == false or show_custom_options %} d-none{% endif %}">
                        {% include 'product-get-variants' %}
                    </div>
                {%- endif -%}
                {%- if show_size_guide or show_delivery_return -%}
                    <div class="product-page-info__details-buttons mb-30 mb-lg-15 d-flex flex-wrap justify-content-center justify-content-lg-start">
                        {%- if show_size_guide and product.metafields.sizeguide.html != 'hide' -%}
                            <div class="btn-link h6 mb-10 px-15 px-lg-10 js-popup-button" data-js-popup-button="size-guide">{{ 'products.product.size_guide' | t }}</div>
                        {%- endif -%}
                        {%- if show_delivery_return -%}
                            <div class="btn-link h6 mb-10 px-15 px-lg-10 js-popup-button" data-js-popup-button="delivery-return">{{ 'products.product.delivery_return' | t }}</div>
                        {%- endif -%}
                    </div>
                {%- endif -%}
                {%- if show_quantity -%}
                    <div class="product-page-info__quantity mb-20">
                        {%- unless is_quick_view -%}
                            {%- assign quantity_connect = 'footbar' -%}
                        {%- endunless -%}
                        {% include 'product-get-quantity' with quantity_show_title: true %}
                    </div>
                {%- endif -%}
                
          		<div style="margin-bottom: 20px;">
					{% if template contains 'custom-mask1' %}
     
					<p class="line-item-property__field" style="display: flex; flex-direction: column;">
                      	<label for="monogram">MONOGRAM (Up to 3 letters)</label>
                      	<input required id="monogram" style="width:120px; max-width:100%;" type="text" name="properties[Monogram]" maxlength="3"></br>
          			</p>
          			<p class="line-item-property__field" style="display: flex; flex-direction: column;">
                      	<label>FONT</label>
                      	<span style="vertical-align: middle; margin-bottom: 20px;">
                          <input required type="radio" style="vertical-align: middle;" name="properties[Font]" value="Font Option 1"> Serif: Times New Roman<br>
  						  <input required type="radio" style="vertical-align: middle;" name="properties[Font]" value="Font Option 2"> San-serif: Frontage Outline<br>
                      	</span>
                    </p>
      				<p class="line-item-property__field" style="display: flex; flex-direction: column;">
                      	<label class="ep_block">THREAD COLOUR</label>
                      	<select required id="thread-colour" name="properties[Thread Colour]">
                        	<option value="Option 1">Option 1</option>
                        	<option value="Option 2">Option 2</option>
                        	<option value="Option 3">Option 3</option>
                      	</select>
					</p>
					{% endif %}
      			</div>
          
          
          
          		{%- if show_button_add_to_cart or show_button_add_to_wishlist or show_button_add_to_compare or show_button_dynamic_checkout -%}
                    <div data-js-footbar-product-limit>
                        {%- if show_button_add_to_cart -%}
                            <div class="product-page-info__button-add-to-cart mb-10">
                                <button type="submit" class="btn{{ button_cart_type }}{% if settings.product_button_addtocart_size == 'large' %} btn--size-large{% endif %} btn--full btn--status{% if settings.buttons_animation_icon_enable %} btn--animated{% endif %}{% if settings.product_ajax_cart %} js-product-button-add-to-cart{% endif %}" name="add"{% unless is_quick_view %} data-js-trigger-id="add-to-cart" data-js-button-add-to-cart-clone-id="footbar"{% endunless %} data-js-product-button-add-to-cart{% unless current_variant.available %} disabled="disabled" data-button-status="sold-out"{% endunless %}>
                                    <span class="d-flex flex-center"><i class="btn__icon mr-5 mb-4">{% include cart_icon_name %}</i><span class="btn__text">{{ 'products.product.add_to_cart.title' | t }}</span></span>
                                    <span class="d-flex flex-center" data-button-content="added"><i class="mr-5 mb-4">{% include 'icon-theme-110' %}</i>{{ 'products.product.add_to_cart.added' | t }}</span>
                                    <span class="d-flex flex-center" data-button-content="sold-out">{{ 'products.product.add_to_cart.sold_out' | t }}</span>
                                </button>
                            </div>
                        {%- endif -%}
                        {%- if show_button_add_to_wishlist -%}
                            {% capture button_add_to_wishlist_html %}
                            <div class="product-page-info__button-add-to-wishlist mb-10">
                                {%- if customer and customer.metafields.wishlist -%}
                                    {%- for item in customer.metafields.wishlist -%}
                                        {%- assign wishlist_id = item[0] | abs -%}
                                        {%- assign wishlist_handle = item[1] -%}
                                        {%- if current_variant_id == wishlist_id and product.handle == wishlist_handle -%}
                                            {%- assign present_in_wishlist = true -%}
                                        {%- endif -%}
                                    {%- endfor -%}
                                {%- endif -%}
                                <a href="/account" class="btn{{ button_wishlist_type }} btn--full btn--status{% if settings.buttons_animation_icon_enable %} btn--animated{% endif %} js-store-lists-add-wishlist"{% if present_in_wishlist %} data-button-status="added"{% endif %}>
                                    <span class="d-flex flex-center"><i class="btn__icon mr-5 mb-2">{% include 'icon-theme-180' %}</i><span class="btn__text">{{ 'products.product.add_to_widhlist.title' | t }}</span></span>
                                    <span class="d-flex flex-center" data-button-content="added"><i class="mr-5 mb-2">{% include 'icon-theme-181' %}</i>{{ 'products.product.add_to_widhlist.added' | t }}</span>
                                </a>
                                {%- assign present_in_wishlist = false -%}
                            </div>
                            {% endcapture %}
                        {%- endif -%}
                        {%- if show_button_add_to_compare -%}
                            {% capture button_add_to_compare_html %}
                            <div class="product-page-info__button-add-to-compare mb-10">
                                {%- if customer and customer.metafields.compare -%}
                                    {%- for item in customer.metafields.compare -%}
                                        {%- assign compare_id = item[0] | abs -%}
                                        {%- assign compare_handle = item[1] -%}
                                        {%- if current_variant_id == compare_id and product.handle == compare_handle -%}
                                            {%- assign present_in_compare = true -%}
                                        {%- endif -%}
                                    {%- endfor -%}
                                {%- endif -%}
                                <a href="/account" class="btn{{ button_compare_type }} btn--full btn--status{% if settings.buttons_animation_icon_enable %} btn--animated{% endif %} js-store-lists-add-compare"{% if present_in_compare %} data-button-status="added"{% endif %}>
                                    <span class="d-flex flex-center"><i class="btn__icon mr-5 mb-6">{% include 'icon-theme-039' %}</i><span class="btn__text">{{ 'products.product.add_to_compare.title' | t }}</span></span>
                                    <span class="d-flex flex-center" data-button-content="added"><i class="mr-5 mb-6">{% include 'icon-theme-235' %}</i>{{ 'products.product.add_to_compare.added' | t }}</span>
                                </a>
                                {%- assign present_in_compare = false -%}
                            </div>
                            {% endcapture %}
                        {%- endif -%}
                        {%- if button_add_to_wishlist_html or button_add_to_compare_html -%}
                            <div class="buttons-group-grid-px-5 row">
                                {%- if button_add_to_wishlist_html -%}
                                    <div class="col-12{% if button_add_to_compare_html %} col-md-6{% endif %}">
                                        {{ button_add_to_wishlist_html }}
                                    </div>
                                {%- endif -%}
                                {%- if button_add_to_compare_html -%}
                                    <div class="col-12{% if button_add_to_wishlist_html %} col-md-6{% endif %}">
                                        {{ button_add_to_compare_html }}
                                    </div>
                                {%- endif -%}
                            </div>
                        {%- endif -%}
                        {%- if show_button_dynamic_checkout -%}
                            <div class="product-page-info__dynamic-checkout mt-20 mb-20">
                                <div class="dynamic-checkout js-dynamic-checkout">
                                    {%- if show_dynamic_checkout_confirmation -%}
                                        <div class="dynamic-checkout__confirmation text-center text-lg-left">
                                            <label class="input-checkbox position-relative d-inline-flex align-items-center mx-auto cursor-pointer">
                                                <input type="checkbox" class="d-none" name="dynamic_checkout" data-js-dynamic-checkout-confirmation>
                                                <span class="position-relative d-block mr-10 border"><i class="d-none">{% include 'icon-theme-146' %}</i></span>
                                                <span>{{ 'products.product.dynamic_checkout.confirmation' | t }}</span>
                                            </label>
                                        </div>
                                    {%- endif -%}
                                    <div class="dynamic-checkout__button{% if styled_dynamic_checkout %} dynamic-checkout__button--styled{% endif %} mt-25{% if show_dynamic_checkout_confirmation %} disabled{% endif %}" data-js-dynamic-checkout-button-wrapper>
                                        {{ form | payment_button }}
                                    </div>
                                </div>
                            </div>
                            <script>
                                Loader.require({type: "script", name: "dynamic_checkout"});
                            </script>
                        {%- endif -%}
                    </div>
                {%- endif -%}
                {{ free_shipping_html }}
                {{ payments_html }}
                {%- if show_addthis -%}
                    {% capture addthis_html %}{% include 'addthis' %}{% endcapture %}
                    {%- if addthis_html.size > 0 -%}
                        <div class="product-page-info__share mb-20">
                            <label>{{ 'products.product.share' | t }}</label>
                            {{ addthis_html }}
                        </div>
                    {%- endif -%}
                {%- endif -%}
                {%- if full_details -%}
                    <div class="d-flex justify-content-center justify-content-lg-start mb-20">
                        <a href="{{ url }}" class="btn-link h6">{{ 'products.product.button_full_details' | t }}</a>
                    </div>
                {%- endif -%}
            {% endform %}
        </div>
    </div>

 

 

Code for the cart.liquid page: 

 

{%- for item in cart.items -%}
                                <div class="py-20 border-bottom">
                                    <div class="row d-flex align-items-center flex-column flex-sm-row">
                                        <div class="col-sm-5 col-lg-4 col-xl-7 d-flex align-items-center mb-20 mb-sm-0">
                                            <a href="/cart/change?line={{ forloop.index }}&quantity=0" class="mr-20">
                                                <i>{% include 'icon-theme-165' %}</i>
                                            </a>
                                            <div class="d-flex align-items-center align-items-sm-start align-items-xl-center flex-sm-column flex-xl-row w-100">
                                                {%- if item.image != blank -%}
                                                    <a href="{{ item.url | within: collections.all }}" class="cart__image mb-sm-15 mb-xl-0 mr-20 mr-sm-0 mr-xl-20">
                                                        {% include 'rimage' with image: item.image size: '150x' format: image_format attr: 'class="w-100"' %}
                                                    </a>
                                                {%- endif -%}
                                                <div class="d-flex flex-column">
                                                  <a href="{{ item.url }}">{{ item.product.title }}
                                                  </a>
                                                    {%- unless item.product.has_only_default_variant -%}
                                                    <p class="mb-0">{{ item.variant.title }}</p>
                                                    {%- endunless -%}
                                                    <p class="mt-10 mb-0">{{ item.vendor }}</p>

                                                  {% assign property_size = item.properties | size %}
                                                    {% if property_size > 0 %}
                                                    {% for p in item.properties %}
                                                    {% unless p.last == blank %}                                                  
                                                    {{ p.first }}:
                                                    {% if p.last contains '/uploads/' %}
                                                    <a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
                                                    {% else %}
                                                    {{ p.last }}
                                                    {% endif %}
                                                    <br>
                                                    {% endunless %}
                                                    {% endfor %}
                                                    {% endif %}

                                                  
                                                </div>
                                            </div>
                                        </div>

 

 

0 Likes