help to modify shopify cart

<div id="col-main">

  <div id="product" class="clearfix content">

    <div id="product-information">

      <p id="add-to-cart-msg"></p>

      <div id="product-header" class="diagonal-divider clearfix">

        <div id="product-header-title">
          <h1 id="product-title">{{ product.title }}</h1>
          
        
          {% if settings.show_vendor %}<h2 id="product-vendor">{{ product.vendor | link_to_vendor }}</h2>{% endif %}
        </div>

        {% if product.available %}
        
          <form action="/cart/add" method="post" class="variants" id="product-actions">
            <div class="options clearfix">  

              <div class="variants-wrapper clearfix {% if product.variants.size == 1 %}visuallyhidden{% endif %}"> 
                <select id="product-select" name="id">
                  {% for variant in product.variants %}
                  
                  <option value="{{ variant.id }}">{{ variant.title | escape }} - {{ variant.price | money }}</option>
                  {% endfor %}
                </select>
              </div>            
                
              <div id="purchase">
                <p class="price"></p>                                 
                <input class="btn" type="submit" name="add" id="add-to-cart" value="Add to Cart" />
              </div>

            </div><!-- /.options -->
          </form>

        {% else %}
        

          <div id="product-actions" class="sold-out">
            <div id="purchase">
              <p class="price">Pre Order.</p>      
            </div>
          </div>      
        {% endif %}
      </div><!-- /#product-header -->

      
      <div class="description">
        {{ product.description }}
        {% include 'social-sharing' %} 
      </div>            

    </div><!-- /#product-information -->
    
    
    <div id="product-gallery"{% if settings.main_image_display == 'Zoom-in' %} class="zoom-in"{% endif %}>

      <div id="active-wrapper">
        {% if settings.main_image_display == 'Lightbox' %}
        <a href="{{ product.featured_image | product_img_url: 'original' }}" title="{{ product.featured_image.alt | escape }}" rel="fancybox">
        {% endif %}     
          <img style="max-width:303px" src="{{ product.featured_image | product_img_url: 'large' }}" alt="{{ product.title | escape }}" id="large-thumb" />
        {% if settings.main_image_display == 'Lightbox' %}
        </a>
        {% endif %}
      </div>
      


      <ul id="thumbs" {% if product.images.size == 1 %}class="visuallyhidden"{% endif %}>
        {% for image in product.images %}
        {% unless forloop.first and settings.main_image_display == 'Lightbox' %}
        <li>
          <a{% if settings.main_image_display == 'Lightbox' %} rel="fancybox"{% endif %} class="gallery" href="{{ image | product_img_url: 'original' }}" title="{{ image.alt | escape }}">
            <img src="{{ image | product_img_url: 'thumb' }}" alt="{{ image.alt | escape }}" />
          </a>
        </li>
        {% endunless %}
        {% endfor %}
        <div class="gvproduct" data-id="{{ product.id}}"></div>
      </ul>
      
    </div><!-- /#product-gallery -->

  </div><!-- /#product -->

  {% if settings.productspg_related_products %}
  
    {% include 'related-products' %}

  {% elsif settings.productspg_featured_collection != blank %}

    {% assign collection = collections[settings.productspg_featured_collection] %}
    {% assign products   = collection.products %}

    {% if products.size > 0 %}
      <section class="diagonal-divider clearfix">

        {% unless settings.productspg_featured_collection_heading == blank %}
        <header class="section-details clearfix">
          <h1 class="section-title">{{ settings.productspg_featured_collection_heading | link_to: collection.url }}</h1>
        </header> 
        {% endunless %}

        <ul class="product-grid" id="secondary-grid">
          {% for product in products limit: settings.productspg_featured_limit %}
          <li class="{% cycle '', '', '', 'last-in-row' %}">
            {% include 'product-grid-item' %}
          </li>
          {% endfor %}
        </ul> 
        

      </section>
    {% endif %}

  {% endif %}

</div><!-- /#col-main -->

Open in new window


attached code shopify product.liquid file from www.shopify.com

if product is out of stock, customers still can order products

if product is out of stock, near the "add to card button i want to a label saying "pre-order"
if available in stock, then i want to label saying 'available in stock"

can someone help to modify the code
ammadeyy2020Asked:
Who is Participating?
 
RoonaanCommented:
OK, then that's a different scenario.

It's a bit guessing and maybe I made a syntax error, but a way to go is to manually iterating the variants, looking if any of them is in stock. If there is, then you can say 'available', otherwise show 'pre-order'.

Try changing the
 {% for variant in product.variants %}
                  
                  <option value="{{ variant.id }}">{{ variant.title | escape }} - {{ variant.price | money }}</option>
                  {% endfor %}

Open in new window


into

{% assign instock = false %}
<select id="product-select" name="id">
	{% for variant in product.variants %}
		<option value="{{ variant.id }}">{{ variant.title | escape }} - {{ variant.price | money }}</option>
		{% if variant.available %}
			{% assign instock = true %}
                {% endif %}
	{% endfor %}
</select>

Open in new window


Then some lines below (#33 in your first example) change
<p class="price"></p>

Open in new window


in

<p class="price">
{% if instock %}
available in stock
{% else %}
pre-order.
{% endif %}
</p>

Open in new window


From an UX point of view, you could also select to show 'out of stock, pre-order' to the variants list, and assume that the user will use that as a reference.

Regards

-r-
0
 
RoonaanCommented:
Hi,

The shopify manual (http://wiki.shopify.com/Product_variables#product.available) indicates that you might need to set an additional property 'stop selling when sold out' in order for the shop to go into the {% else %} section and allow you to design the pre-order template:

From: http://wiki.shopify.com/Product_variables#product.available
product.available

Returns false if all variants' quantities are zero and their policies are set to "stop selling when sold out".

Open in new window


Can you verify that the property has configured as been suggested by the liquid manual?

Regards,

-r-
0
 
ammadeyy2020Author Commented:
check this link
http://wiki.shopify.com/Extended_Logic_For_Product_Page

i am using that configuration
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.