Pre-order and back order for Supply theme

Tourist
3 0 1

Dear all,

 

I wold like to offer pre-orders and also possibility to buy products out of stock. I would like to change "Add to cart" button according to situation in order to prevent any confusion. I couldn't find a way to change it according to stock level and still offer possibility to buy. So I was planning to create 3 different templates for products and use them to distinguish above situations.

 

So I have 2 questions. First one, is it possible to edit "sold out" button so that it's possible to order the product? (Text shouldn't be "Add to cart")

 

Second question is, what am I doing wrong considering below information?

 

I found following article (allow-pre-orders) and some discussions but still stuck for pre-order option. I cannot find codes mentioned in the article. I have copied product-template-liquid at the end of this message.

 

I also tried to add a pre_order in en.default.jason as below and I can see this field in language editor. But I cannot use it in product-pre-order-template-liquid.

 

"product": {
"sold_out": "Not in stock at the moment",
"will_not_ship_until": "Will not ship until {{ date }}",
"quantity": "Quantity",
"add_to_cart": "Add to Cart",
"pre_order": "Pre-order",
"unavailable": "Unavailable",

  

--------------------------------------------------

 

<div id="ProductSection" data-section-id="{{ section.id }}" data-section-type="product-template" data-zoom-toggle="zoom-in" data-zoom-enabled="{{ section.settings.product_image_zoom_enable }}" data-related-enabled="{{ section.settings.product_related_enable }}" data-social-sharing="{{ section.settings.social_sharing }}" data-show-compare-at-price="{{ section.settings.product_show_compare_at_price }}" data-stock="{{ section.settings.product_quantity_message }}" data-incoming-transfer="{{ section.settings.product_incoming_message }}" data-ajax-cart-method="{{ settings.ajax_cart_method }}">
{% include 'breadcrumb' %}

{% case section.settings.add_to_cart_button_size %}
{% when 'small' %}
{% assign btn_class = 'btn' %}
{% when 'medium' %}
{% assign btn_class = 'btn btn--wide' %}
{% when 'large' %}
{% assign btn_class = 'btn btn--full btn--large' %}
{% endcase %}

{% if section.settings.add_to_cart_button_size == 'large' %}
<style>
.selector-wrapper select, .product-variants select {
max-width: 100%;
}
</style>
{% endif %}

{% if section.settings.product_quantity_enable == false %}
<style>
.selector-wrapper select, .product-variants select {
margin-bottom: 13px;
}
</style>
{% endif %}

<div class="grid" itemscope itemtype="http://schema.org/Product">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">

<div class="grid-item large--two-fifths">
<div class="grid">
<div class="grid-item large--eleven-twelfths text-center">
<div class="product-photo-container" id="productPhotoContainer-{{ section.id }}">
{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
{% for image in product.images %}
{%- capture img_wrapper_id -%}productPhotoWrapper-{{ section.id }}-{{ image.id }}{%- endcapture -%}
{%- assign max_width = 700 -%}
{%- assign max_height = 1024 -%}

{%- include 'image-logic' with width: max_width, height: max_height -%}

{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<div id="{{ img_wrapper_id }}" class="lazyload__image-wrapper{% unless image == featured_image %} hide{% endunless %}" data-image-id="{{ image.id }}" style="max-width: {{ max_width }}px">
<div class="no-js product__image-wrapper" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
<img id="{{ img_id }}"
{% if forloop.first == true %}
src="{{ featured_image | img_url: '300x300' }}"
{% endif %}
class="lazyload no-js lazypreload"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}"
{% if section.settings.product_image_zoom_enable %} data-zoom="{{ image | img_url: '1024x1024', scale: 2 }}"{% endif %}>
</div>
</div>
{% if forloop.first == true %}
<noscript>
<img src="{{ image | img_url: '580x' }}"
srcset="{{ image | img_url: '580x' }} 1x, {{ image | img_url: '580x', scale: 2 }} 2x"
alt="{{ image.alt }}" style="opacity:1;">
</noscript>
{% endif %}
{% endfor %}
</div>

{% if product.images.size > 1 %}
<ul class="product-photo-thumbs grid-uniform" id="productThumbs-{{ section.id }}">

{% for image in product.images %}
<li class="grid-item medium-down--one-quarter large--one-quarter">
<a href="{{ image.src | img_url: '1024x1024', scale: 2 }}" class="product-photo-thumb product-photo-thumb-{{ section.id }}" data-image-id="{{ image.id }}">
<img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
</a>
</li>
{% endfor %}

</ul>
{% endif %}

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

<div class="grid-item large--three-fifths">

<h1 class="h2" itemprop="name">{{ product.title }}</h1>

{% if section.settings.product_vendor_enable %}
<p class="product-meta" itemprop="brand">{{ product.vendor }}</p>
{% endif %}

<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">

{% assign variant = product.selected_or_first_available_variant %}

<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<meta itemprop="price" content="{{ variant.price | divided_by: 100.00 }}">

<ul class="inline-list product-meta">
<li>
<span id="productPrice-{{ section.id }}" class="h1">
{% include 'price' with variant.price %}
</span>
</li>
{% if product.compare_at_price_max > product.price and section.settings.product_show_saved_amount %}
<li>
<span id="comparePrice-{{ section.id }}" class="sale-tag large">
{% assign compare_price = variant.compare_at_price %}
{% assign product_price = variant.price %}
{% include 'price-sale' %}
</span>
</li>
{% endif %}
{% if section.settings.product_reviews_enable %}
<li class="product-meta--review">
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</li>
{% endif %}
</ul>

{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product__policies rte">
{%- if shop.taxes_included -%}
{{ 'products.general.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.general.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
</div>
{%- endif -%}

<hr id="variantBreak" class="hr--clear hr--small">

<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

{% capture "form_class" -%}
addToCartForm{% if section.settings.enable_payment_button %} addToCartForm--payment-button{% endif %}
{%- endcapture %}

{%- capture "form_id" -%}addToCartForm-{{ section.id }}{%- endcapture -%}

{% form 'product', product, class:form_class, id:form_id %}
<select name="id" id="productSelect-{{ section.id }}" class="product-variants product-variants-{{ section.id }}">
{% for variant in product.variants %}
{% if variant.available %}

<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>

{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>

{% if section.settings.product_quantity_enable %}
<label for="quantity" class="quantity-selector quantity-selector-{{ section.id }}">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="quantity" name="quantity" value="1" min="1" class="quantity-selector">
{% endif %}

{% if section.settings.product_quantity_message %}
<div id="variantQuantity-{{ section.id }}" class="variant-quantity {% if variant.inventory_management and variant.inventory_quantity < 10 and variant.inventory_quantity > 0 %} is-visible{% endif %}">
{% include 'svg-definitions' with 'stock-icon' %}
{% assign qty = variant.inventory_quantity %}
<span id="variantQuantity-{{ section.id }}__message">{{ 'products.product.only_left' | t: count: qty }}</span>
</div>
{% endif %}

{% if section.settings.product_incoming_message %}
<div id="variantIncoming-{{ section.id }}" class="variant-quantity {% if variant.inventory_management and variant.inventory_quantity <= 0 and variant.incoming %} is-visible{% endif %}">
{% if variant.inventory_management and variant.inventory_quantity == 0 or variant.inventory_quantity < 0 and current_variant.incoming %}
{% include 'svg-definitions' with 'stock-icon' %}
{% if variant.available %}
{% assign date = variant.next_incoming_date | date: "month_day_year" %}
<span id="variantIncoming-{{ section.id }}__message">{{ 'products.product.will_not_ship_until' | t: date: date }}</span>
{% else %}
{% assign date = variant.next_incoming_date | date: "month_day_year" %}
<span id="variantIncoming-{{ section.id }}__message">{{ 'products.product.will_be_in_stock_after' | t: date: date }}</span>
{% endif %}
{% endif %}
</div>
{% endif %}

<div class="payment-buttons payment-buttons--{{ section.settings.add_to_cart_button_size }}">
<button type="submit" name="add" id="addToCart-{{ section.id }}" class="{{ btn_class }} btn--add-to-cart{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}">
<span class="icon icon-cart"></span>
<span id="addToCartText-{{ section.id }}">{{ 'products.product.add_to_cart' | t }}</span>
</button>

{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
{% endform %}

<hr class="{% if section.settings.enable_payment_button %}product-template-hr{% endif %}">
</div>

<div class="product-description rte" itemprop="description">
{{ product.description }}
</div>

{% if section.settings.social_sharing_products %}
{% include 'social-sharing' %}
{% endif %}

</div>
</div>

{% if section.settings.related_products_enable %}
{% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %}
{% include 'related-products' %}
{% endif %}

{% if section.settings.product_reviews_enable %}
<hr>
<div id="shopify-product-reviews" data-id="{{ product.id }}">{{ product.metafields.spr.reviews }}</div>
{% endif %}

{% unless product == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
{% if section.settings.product_quantity_message or section.settings.product_incoming_message %}
<script type="application/json" id="VariantJson-{{ section.id }}">
[
{% for variant in product.variants %}
{% capture variant_inventory %}
{%- if section.settings.product_incoming_message -%}
,
"incoming": {% if variant.incoming == 'null' or variant.next_incoming_date == null %}false{% else %}{{ variant.incoming | default: false | json }}{% endif %},
"inventory_policy": {{ variant.inventory_policy | json }},
"next_incoming_date": {{ variant.next_incoming_date | date: format: 'month_day_year' | json }}
{%- endif -%}
{%- if section.settings.product_quantity_message -%}
,
"inventory_quantity": {{ variant.inventory_quantity | json }}
{%- endif -%}
{% endcapture %}
{
{{ variant_inventory | remove_first: ',' | strip }}
}{% unless forloop.last %},{% endunless %}
{% endfor %}
]
</script>
{% endif %}
{% endunless %}
</div>

 

 

0 Likes
Tourist
6 0 0

Hi 

 

<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>

  line of code that's mentioned in Shopify's pre-order button tutorial. 

 

Any insight would be greatly helpful. Thanks in advance!

 

 

0 Likes