P.O.A/Special Order Products

Remove buying options for particular products and replace them with an enquiry option to advertise Price On Application (P.O.A) or Special Order products that can't be purchased through the checkout.

Wireframe

SKU Product Page

Preparation Checklist

Before you start this tweak, it's a good idea to run through our preparation checklist below:

  • Read through the Getting Started Guide to get a better sense of how the control panel, Database and Front End store interact.
  • Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
  • Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.
  • The code snippet in this tweak doc uses Bootstrap 4, you may need to alter this code depending on what version of Bootstrap your theme is using. You can find out what version your theme is using here.

Please note that this tweak may not be compatible with your store's installed theme and may require custom web development work to adjust for existing customisations and/or theme features. If you are experienced with HTML and CSS, our developer docs provides additional details on the Maropost Commerce Cloud specific parts of web development. If you are not comfortable editing the code, we recommend submitting a request to a Maropost Commerce Cloud design partner.

Coding Instructions

Step 1: Setup your product toggle

In your control panel, navigate to Settings & Tools > All Settings & Tools > Custom Product Fields and create a new Custom Product Field with the following settings:

  • Custom Field: (use next available or select your own if required)
  • Field Name: P.O.A
  • Field Type: True/False
  • Section: Price & Tax

Add a description so you know what the field is for, otherwise leave any other settings as their defaults. Please note, the Field Name will be used as the label for the product buying options button. You can change the Field Name value to suit your intended setup, e.g: "Special Order", "Application Only", etc

Save the Custom Product Field and take note of the Custom Field ID being used. This should be misc# e.g. "misc1", "misc5", etc

Step 2: Update buying options logic

Update your theme anywhere the product buying options are listed to include the following logic:

<!-- if product is flagged as P.O.A -->
[%if [@misc#@] eq 'y' %]
    <!-- show enquiry button -->
[%else%]
    <!-- existing buying option code -->
[%/if%]

There are a couple of ways you can trigger a customer enquiry, including a popup form, phone number, or email. Some possible examples are listed below:

Trigger Popup:

<a href title="[@model@] Price Available On Application" class="btn btn-info btn-block btn-lg btn-ajax-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>" data-toggle="modal" data-target="#poamodal"><i class="fa fa-exclamation-circle" aria-hidden="true"></i> [%escape%][@misc#_name@][%/escape%]</a>

See our Newsletter Popup tweak for an example of how you can add a popup to your webstore. Note, the popup code would need to be changed to better suit a product enquiry setup.

List Phone Number (triggers call on mobile when pressed, or video chat on most desktop browsers):

<a href="tel:[@config:COMPANY_PHONE@]" target="_blank" title="[@model@] Price Available On Application" class="btn btn-info btn-block btn-lg btn-ajax-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>"><i class="fa fa-phone" aria-hidden="true"></i> [%escape%][@misc#_name@][%/escape%]</a>

List Email:

<a href="mailto:[@config:COMPANY_EMAIL@]?subject=New%20[%escape%][@misc#_name@][%/escape%]%20Submission%20For%20[@sku@]&body=Product%20-%20[@model@]%20([@sku@])" title="[@model@] [%escape%][@misc#_name@][%/escape%] Submission" class="btn btn-info btn-block btn-lg btn-ajax-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>"><i class="fa fa-envelope" aria-hidden="true"></i> [%escape%][@misc#_name@][%/escape%]</a>

Note: make sure to replace the [@misc#@] and [@misc#_name@] tags in any code examples with the Field ID of the custom field you created in Step 1

By default Neto Themes will have buying option logic in the following templates:

Buying Options

/httpdocs/assets/themes/[THEME-NAME]/templates/products/includes/buying_options.template.html

Open your product buying options template and paste the above logic around your existing buying option code, highlighted here in our base Skeletal Theme. Ensure that the existing code sits within the ELSE block, while your preferred enquiry method code sits in the IF block.

For example, to show a Phone Number as the enquiry button your code should look similar to this:

<div class="col-12 col-md-4">
    [%if [@misc#@] eq 'y' %]
        <a href="tel:[@config:COMPANY_PHONE@]" target="_blank" title="[@model@] Price Available On Application" class="btn btn-info btn-block btn-lg btn-ajax-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>"><i class="fa fa-phone" aria-hidden="true"></i> [%escape%][@misc#_name@][%/escape%]</a>
    [%else%]
        [%if [@available_preorder_quantity@] > 0 AND [@preorder@] AND [@config:WEBSTORE_USE_PREORDER_QUANTITY@]%]
            <button type="button" title="Add [@model@] to Cart" class="addtocart btn btn-warning btn-block btn-lg btn-ajax-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>" rel="[@rndm@][@SKU@]"><i class="fa fa-clock icon-white" aria-hidden="true"></i> Pre-Order Now</button>
        [%elseif [@store_quantity@] > 0 AND [@preorder@] AND ![@config:WEBSTORE_USE_PREORDER_QUANTITY@]%]
            <button type="button" title="Add [@model@] to Cart" class="addtocart btn btn-warning btn-block btn-lg btn-ajax-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>" rel="[@rndm@][@SKU@]"><i class="fa fa-clock icon-white" aria-hidden="true"></i> Pre-Order Now</button>
        [%elseif [@store_quantity@] > 0 AND ![@preorder@] %]
            <button type="button" title="Add [@model@] to Cart" class="addtocart btn btn-success btn-block btn-lg btn-ajax-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>" rel="[@rndm@][@SKU@]"><i class="fa fa-shopping-cart icon-white" aria-hidden="true"></i> Add to Cart</button>
        [%elseif [@store_quantity@] < 1 AND [@config:ALLOW_NOSTOCK_CHECKOUT@] %]
            <button type="button" title="Add [@model@] to Cart" class="addtocart btn btn-warning btn-block btn-lg btn-ajax-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>" rel="[@rndm@][@SKU@]"><i class="fa fa-clock icon-white" aria-hidden="true"></i> Backorder</button>
        [%else%]
            <a href title="Notify Me When [@model@] Is Back In Stock" class="btn btn-info btn-block btn-lg btn-ajax-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>" data-toggle="modal" data-target="#notifymodal"><i class="fa fa-envelope" aria-hidden="true"></i> Notify Me</a>
        [%/if%]
    [%/if%]
</div>

Want to disable the Quantity input along with the buying options? Add [%if [@misc#@] eq 'y' %]disabled[%/if%] to the end of the "qty" input highlighted here

<div class="col-12 col-md-4">
    <label class="sr-only" for="qty[@rndm@][@SKU@]">[@model@] quantity field</label>
    <input type="number" min="[@min_qty@]" class="form-control qty form-control-lg" id="qty[@rndm@][@SKU@]" name="qty" aria-label="[@model@] quantity field" value="[%data id:'min_qty' if:'ne' value:'0' %][@min_qty@][%end data%][%data id:'min_qty' if:'eq' value:'0' %]1[%end data%]" size="2" [%if [@misc#@] eq 'y' %]disabled[%/if%]/>
</div>

Child Products

/httpdocs/assets/themes/[THEME-NAME]/templates/products/includes/child_products.template.html

Open your child products template. The new buying options logic will need to be implemented in multiple places to stop the child products being added to the cart. First locate your existing buying option code, highlighted here. Add the new logic around this code block. Same as the buying options template, ensure your preferred enquiry code is in the IF block, while the existing child product code is in the ELSE block.

Next, locate the child products quantity field highlighted here. Replace the highlighted code with the following:

[%if [@misc#@] eq 'y' %]
    <input type="text" value="" id="nov[@rndm@][@SKU@]" name="nov[@rndm@][@SKU@]" placeholder="Qty" class="form-control" disabled>
[%else%]
    [%if [@available_preorder_quantity@] > 0 AND [@preorder@] AND [@config:WEBSTORE_USE_PREORDER_QUANTITY@]%]
        <input type="text" id="qty[@rndm@][@SKU@]" name="qty[@rndm@][@SKU@]" value="" placeholder="Qty" class="form-control">
        <input type="hidden" id="sku[@rndm@][@SKU@]" name="sku[@rndm@][@SKU@]" value="[@SKU@]">
        <input type="hidden" id="model[@rndm@][@SKU@]" name="model[@rndm@][@SKU@]" value="[@model@]">
        <input type="hidden" id="thumb[@rndm@][@SKU@]" name="thumb[@rndm@][@SKU@]" value="[@thumb@]">
    [%elseif [@store_quantity@] > 0 %]
        <input type="text" id="qty[@rndm@][@SKU@]" name="qty[@rndm@][@SKU@]" value="" placeholder="Qty" class="form-control">
        <input type="hidden" id="sku[@rndm@][@SKU@]" name="sku[@rndm@][@SKU@]" value="[@SKU@]">
        <input type="hidden" id="model[@rndm@][@SKU@]" name="model[@rndm@][@SKU@]" value="[@model@]">
        <input type="hidden" id="thumb[@rndm@][@SKU@]" name="thumb[@rndm@][@SKU@]" value="[@thumb@]">
    [%elseif [@store_quantity@] < 1 AND [@config:ALLOW_NOSTOCK_CHECKOUT@] %]
        <input type="text" id="qty[@rndm@][@SKU@]" name="qty[@rndm@][@SKU@]" value="" placeholder="Qty" class="form-control">
        <input type="hidden" id="sku[@rndm@][@SKU@]" name="sku[@rndm@][@SKU@]" value="[@SKU@]">
        <input type="hidden" id="model[@rndm@][@SKU@]" name="model[@rndm@][@SKU@]" value="[@model@]">
        <input type="hidden" id="thumb[@rndm@][@SKU@]" name="thumb[@rndm@][@SKU@]" value="[@thumb@]">
    [%else%]
        <input type="text" value="" id="nov[@rndm@][@SKU@]" name="nov[@rndm@][@SKU@]" placeholder="Qty" class="form-control" disabled>
    [%/ if%]
[%/if%]

This will stop enquiry only products being added to the cart as part of the quick-buy child product setup.

Grid Thumbnail

/httpdocs/assets/themes/[THEME-NAME]/templates/thumbs/product/template.html

Open your grid thumbnail template and paste the new logic code around the existing buying options code highlighted here. Ensure that the existing code sits within the ELSE block, while your preferred enquiry method code sits in the IF block.

List Thumbnail

/httpdocs/assets/themes/[THEME-NAME]/templates/thumbs/product/list.template.html

Open your list thumbnail template and paste the new logic code around the existing buying options code highlighted here. Ensure that the existing code sits within the ELSE block, while your preferred enquiry method code sits in the IF block.

Optional Setup - Hide Pricing

For a 'Price On Application' setup you will also need to remove the pricing code in the following templates. This requires slightly different code logic:

<!-- if a product is not P.O.A run pricing code, otherwise ignore -->
[%if [@misc#@] ne 'y' %]
    <!-- existing pricing code -->
[%/if%]

For example, to hide the pricing on your product thumbnails, your code should look similar to this:

[%if [@misc#@] ne 'y' %]
    <p class="price" itemprop="offers" itemscope itemtype="http://schema.org/Offer" aria-label="[%escape%][@model@][%/escape%] price">
        [%if [@inpromo@]%]
            Now [%if [@has_child@]%]from [%/if%]
            <meta itemprop="priceValidUntil" content="[%format type:'date' format:'#Y-#M-#d'%][@promo_end@][%END format%]"/>
            <span itemprop="price" content="[@promo_price@]">[%format type:'currency'%][@promo_price@][%/format%]</span>
        [%else%]
            [%if [@has_child@]%]From [%/if%]
            <span itemprop="price" content="[@store_price@]">[%format type:'currency'%][@store_price@][%/format%]</span>
        [%/if%]
        <meta itemprop="priceCurrency" content="[@config:defaultcurrency@]">
    </p>
[%/if%]
[%if [@form:disable_scripts@] ne 'true'%][%tracking_code type:'Thumbnails' /%][%/if%]

By default Neto Themes will have pricing code in the following templates:

Header

/httpdocs/assets/themes/[THEME-NAME]/templates/products/includes/header.template.html

Open your product header template and paste the new price code logic around the code highlighted here.

Buying Options

/httpdocs/assets/themes/[THEME-NAME]/templates/products/includes/buying_options.template.html

Open your product buying options template and paste the new price code around your multilevel pricing code, highlighted here.

Grid Thumbnail

/httpdocs/assets/themes/[THEME-NAME]/templates/thumbs/product/template.html

Open your grid thumbnail template and paste the new price code logic around the code highlighted here and here.

Note, to retain proper analytics tracking the above change will still allow any custom script "Thumbnails" code. This includes any 'pay later' widgets you have active. If you are removing pricing it is recommended that your remove any 'pay later' widgets from your custom scripts.

List Thumbnail

/httpdocs/assets/themes/[THEME-NAME]/templates/thumbs/product/list.template.html

Open your list thumbnail template and paste the new price code logic around the code highlighted here.

Box Thumbnail

/httpdocs/assets/themes/[THEME-NAME]/templates/thumbs/product/box.template.html

Open your box thumbnail template and paste the new price code logic around the code highlighted here.

Note, if you are using a premium theme or have customising your existing theme there may be pricing code referenced in other templates. If you are not sure about your particular setup reach out to a Maropost Commerce Cloud design partner to have your theme code reviewed.

Update your product data

You have now setup your theme to support products with a Price On Application or Special Order setup. To flag a product as such, navigate to the product page in your control panel and scroll down to the Pricing & Tax section. Locate the custom product field you created in Step 1, set the dropdown value to True, then save your changes.

Repeat as needed for any other products, you can also do this in bulk via our Import Wizard.

Was this article useful?

Be notified when this page is updated. Optional.