Personalised products in 'Highlight' theme

Liam_Frailing1
Visitor
3 0 0

Hello, 

 

I am trying to add personalisation to one of my products - here. Specifically, I am looking to use line item properties to let customers enter the text that they want on the product. 

 

I have been following this Shopify guide for how to make this work for my theme, but unfortunately, it doesn't seem to be showing the line item properties in the cart.

 

Based on some simple analysis, it seems as though 'property_size' is 0. As per my code below, the property_size should actually be one given that there is 1 property being set on the product page (initials).

 

Can somebody please advise on where I might be going wrong?

 

Thanks in advance,

Liam

 

Product page form
-----------------

{%- form 'product', product -%}

         <select class="productSelect" name="id">
          {% for variant in product.variants %}
            <option 
              value="{{ variant.id }}" 
              {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} 
              {% if section.settings.show_quantities and variant.inventory_management != null %} 
                data-quantity="{{ variant.inventory_quantity }}" 
                data-inventory="{{ variant.inventory_policy }}" 
              {% endif %} 
            >
              {{ variant.title | escape }}
            </option>
          {% endfor %}
        </select>
      
      <p class="line-item-property__field">
  		<label for="initials">INITIALS</label>
  		<input id="initials" type="text" name="properties[INITIALS]">
	  </p>
      
        <div class="product__cart-functions"> 

          {%- render 'product-variants', product: product, color_swatches: section.settings.show_color_swatches -%}

          <div class="product__cart-actions cart-actions buttons-holder">

            <div class="product__cart-actions-holder">

              {%- if section.settings.show_quantity_selector -%}
                <input type="number" name="quantity" value="1" min="1" class="product__quantity" aria-label="{{ 'product.page.quantity' | t }}">
              {%- endif -%}

              <button type="submit" name="add" class="product__add-to-cart button button--border">
                <span class="add-to-cart__text" data-add-to-cart-text="{% if product.tags contains 'preorder' %} {{ 'product.preorder.button_label' | t }} {% else %} {{ 'product.page.add_to_cart_button' | t }} {% endif %}"> {%- if product.tags contains 'preorder' -%} {{ 'product.preorder.button_label' | t }} {%- else -%} {{ 'product.page.add_to_cart_button' | t }} {%- endif -%} </span>
              </button>

            </div>
            
            {%- liquid
              unless product.tags contains 'preorder'
                if section.settings.enable_payment_button
                  echo form | payment_button
                endif
              endunless
              echo form | payment_terms
            -%}

          </div>

          {%- if section.settings.show_quantities -%}
            <span class="product__variant-quantity" {% if product.tags contains 'preorder' %} style="display:none" {% endif %}></span>
          {%- endif -%}

          {%- if product.tags contains 'preorder' -%}
            <span style="display:block;margin-top:2em;width:100%;" class="text-size--smaller">{{ 'product.preorder.description' | t }}</span>
          {%- endif -%}

          {%- if section.settings.show_local_pickup -%}
            <div class="product-availability-container" data-store-availability-container data-base-url="{{ shop.url }}{{ routes.root_url }}"></div>
          {%- endif -%}

        </div>

      {%- endform -%}
cart-form.liquid (snippet within template)
------------------------------------------
<form action="{{ routes.cart_url }}" method="post" novalidate class="cart" id="site-cart">

  <div class="cart-holder" data-items="{{ cart.items.size }}">

    <div class="cart-items">

      {%- for item in cart.items -%}

        <div class="cart-item" data-title="{{ item.product.title | escape }} {%- unless item.product.has_only_default_variant -%} ({{ item.variant.title | escape }}) {%- endunless -%}" data-id="{{ item.key }}" data-variant="{{ item.variant.id }}" data-qty="{{ item.quantity }}">
          
          <div>

            <a href="{{ item.url | within: collections.all }}" class="thumbnail">
              <figure class="lazy-image {% if item.image.src contains 'png' %} lazy-image--transparent {% endif %}" data-ratio style="padding-top: 130%">
                <img 
                  src="{{ item.image | img_url: '100x130', crop: 'center' }}" alt="{{ item.title | escape }}"
                  srcset="data&colon;image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
                  data-srcset="{{ item.image | img_url: '100x130', crop: 'center' }} 100w, {{ item.image | img_url: '200x260', crop: 'center' }} 260w"
                  data-sizes="auto" class="lazyload"
                 width="{{ item.image.width }}" height="{{ item.image.height }}"
                />
                <noscript><span class="ll-fallback" style="background-image:url({{ item.image | img_url: '100x130', crop: 'center' }})"></span></noscript>
              </figure>
            </a>

            <div class="content">

              <a href="{{ item.url }}">
                <span class="title">{{ item.product.title | escape }}</span>
                {%- unless item.product.has_only_default_variant -%}
                  <span class="info variant-title">({{ item.variant.title | escape }})</span>
                {%- endunless -%}
              </a>
              
            {% assign property_size = item.properties | size %}
            {% if property_size > 0 %}
                {{  item.properties }}
                <p>...</p>
              {% for p in item.properties %}
                {% assign first_character_in_key = p.first | truncate: 1, '' %}
                {% unless p.last == blank or first_character_in_key == '_' %}
                  {{ 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 %}

              {%- if item.selling_plan_allocation -%}
                <span class="info selling-plan">
                  {{ item.selling_plan_allocation.selling_plan.name }} 
                </span>
              {%- endif -%}
          
              <div class="price">

                <div class="item__price-list">

                  {%- if item.final_line_price < item.original_line_price -%}
                    <span class="item__price">{{ item.final_line_price | money }}</span>
                    <span class="item__price item__price--compare">{{ item.original_line_price | money }}</span>
                  {%- elsif item.variant.compare_at_price > item.variant.price -%}
                    <span class="item__price">{{ item.final_line_price | money }}</span>
                    <span class="item__price item__price--compare">{{ item.variant.compare_at_price | times: item.quantity | money }}</span>
                  {%- else -%}
                    <span class="item__price">{{ item.final_line_price | money }}</span>
                  {%- endif -%}

                  {%- if item.quantity > 1 and type == 'page' -%}
                    <span class="info quantity-extra" style="margin-top:3px">({{ item.quantity }} x {{ item.final_price | money }})</span>
                  {%- endif -%}
                  
                </div>

                {%- if item.unit_price_measurement -%}
                  <span class="item__unit">
                    {{ item.unit_price | money }} / 
                    {%- if item.unit_price_measurement.reference_value != 1 -%}
                      {{ item.unit_price_measurement.reference_value }}
                    {%- endif -%}
                    {{ item.unit_price_measurement.reference_unit }}
                  </span>
                {%- endif -%}

              </div>

               {%- if item.line_level_discount_allocations.size > 0 -%}
                {%- for discount_allocation in item.line_level_discount_allocations -%}
                  <small class="discount">{{ 'cart.discount' | t }} <span style="display: inline-block">{{ discount_allocation.discount_application.title }} <span style="display: inline-block">(-{{ discount_allocation.amount | money | strip }})</span></span></small>
                {% endfor %}
              {%- endif -%}

            </div>

          </div>

          <div class="actions">
            {%- if settings.cart_quantity_selector -%}
              <input data-href="{{ routes.cart_change_url }}?line={{ forloop.index }}&amp;quantity=$qty" class="qty" type="number" name="updates[]" id="updates_{{ item.id }}" value="{{ item.quantity }}" min="0" aria-label="{{ 'product.page.quantity' | t }}">
            {%- endif -%}
            <a href="{{ routes.cart_change_url }}?line={{ forloop.index }}&amp;quantity=0" class="remove" title="{{ 'cart.remove_item' | t }}" aria-label="{{ 'cart.remove_item' | t }}"><span aria-hidden="true">{% render 'theme-symbols', icon: 'close' %}</span></a>
          </div>

        </div>

      {%- endfor -%}

    </div>

    {%- if settings.cart_notes_enable -%}
      <textarea name="note" id="cartSpecialInstructions" placeholder="{{ 'cart.note' | t }}" aria-label="{{ 'cart.note' | t }}">{{ cart.note }}</textarea>
    {%- endif -%}

    <div class="cart-out">

      <div id="CartDetails">
        
        {%- if cart.cart_level_discount_applications != blank -%} 
          <div>
            <p id="CartSubTotal">{{ 'cart.subtotal' | t }} <span>{{ cart.items_subtotal_price | money }}</span></p>
            <p id="CartDiscounts">
              {{ 'cart.discounts' | t }}
              {%- for discount_application in cart.cart_level_discount_applications -%}
                <span style="display: inline-block">{{ discount_application.title }} <span style="display: inline-block">(-{{ discount_application.total_allocated_amount | money | strip }})</span></span>
              {%- endfor -%}
            </p>
          </div>
        {%- endif -%}

      </div>

      <p id="CartTotal">{{ 'cart.total' | t }} <span>{{ cart.total_price | money }}</span></p>
      <span class="info">{{ 'cart.shipping_at_checkout' | t }}</span>

      <div class="cart-actions buttons-holder {% if additional_checkout_buttons and settings.cart_additional_buttons and type == 'page' %} cart-actions--additional-checkout-buttons {% endif %}">
        
        {%- if type == 'sidebar' -%}
          <button class="button button--border">{{ 'cart.view_cart' | t }}</button>
        {%- endif -%}

        <noscript><button name="update" class="button button--border button--wide">{{ 'cart.update_cart' | t }}</button></noscript>
    
        <input class="button button--solid {% if additional_checkout_buttons and settings.cart_additional_buttons and type == 'page' %} button--wide {% endif %}" type="submit" name="checkout" value="{{ 'cart.checkout' | t }}">
      
        {%- if additional_checkout_buttons and settings.cart_additional_buttons -%}
          <div class="additional-checkout-buttons additional-checkout-buttons--vertical">{{ content_for_additional_checkout_buttons }}</div>
        {%- endif -%}

      </div>

    </div>

  </div>

  <div class="cart-continue">
    <a href="{{ routes.all_products_collection_url }}" class="button button--solid button--wide button--align">
      <span>{{ 'cart.continue_browsing' | t }}</span>
    </a>
  </div>

</form>

 

 

Replies 2 (2)

Jayshree-27
Visitor
3 0 0

Hi Liam, I have check your website you have added a line item property field on product page, also I have check you have added the code just after form tag. But in the this doc they have added the code just before the "Add to cart" button. So can you give a try and check if it's work.

For further concern you can connect on Whatsapp via this link:- https://chat.whatsapp.com/EFgRCPfCmDjHoZBNcINTEJ 

Liam_Frailing1
Visitor
3 0 0

Hi,

 

Thank you for the response. I have tried this previously and it changed the position of the text field on the product page, but still did not solve the problem so I moved it back.

 

Do you have any other ideas?

 

Kind regards,

Liam