?
Solved

help to modify shopify cart

Posted on 2012-08-17
3
Medium Priority
?
825 Views
Last Modified: 2012-09-01
<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
0
Comment
Question by:ammadeyy2020
  • 2
3 Comments
 
LVL 49

Expert Comment

by:Roonaan
ID: 38309195
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
 

Author Comment

by:ammadeyy2020
ID: 38309205
check this link
http://wiki.shopify.com/Extended_Logic_For_Product_Page

i am using that configuration
0
 
LVL 49

Accepted Solution

by:
Roonaan earned 2000 total points
ID: 38309259
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

Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The title says it all. Writing any type of PHP Application or API code that provides high throughput, while under a heavy load, seems to be an arcane art form (Black Magic). This article aims to provide some general guidelines for producing this typ…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question